教程

显示标签为“教程”的博文。显示所有博文
显示标签为“教程”的博文。显示所有博文

2016年9月12日星期一

PS中这么好用的一个功能,千万别忽视


在做UI设计时,项目来的很急,需要快速出图,如果你没有一套自己的工作方法,估计是应付不了这类事情了,当你面对一个专题设计,选好了素材图片,像制作出符合主题气质的设计,怎么半,一定是先把主题气氛烘托出来,今天就给大家介绍一个快速烘托主题气氛的办法。

注意:你必须使用扩展版本的CS6,这个功能潜伏的非常非常非常……深。嗯,好了,不卖关子了,其实这是一个调整层,所以说也不算潜伏的深。这个调整层叫“颜色查找”!

颜色查找调整层可以实现高级色彩变化,如EdgyAmber或者BleachBypass什么的。

 “颜色查找”功能可能很少人知道,更少人会用到。不过它就像美图工具里面的滤镜一样好用哦~什么日系小清新,阿宝色,老电影效果都不在话下。只要拿到了好的模板文件,轻轻松松只需一秒钟。好看的滤镜就出现啦~!


用的人少的一个原因是这一部分在中文版里没有翻译过来,所以,今天我好人做到底,把这一部分的光线效果都翻译了一遍,而且都精简到了两个字以内,

 
首先呢,还是打开你要调色的图片。然后在图层窗口最下方的小图标中间找到一个斜切成两半的圆形图标,名字叫“创建新的填充或调整图层”。点击它会出现一个菜单栏。选择“颜色查找”就打开了新的窗口啦!




颜色查找的窗口里面有三排可选择的东西,但是好像又看不懂?不要害怕,点击第一个下拉菜单。




看不懂?看不懂就看不懂,随便点一个,然后用鼠标滚动可以看其他的效果。(给大家找到个翻译图片,可以对照下)







颜色查找里面的滤镜效果,都是好莱坞级别的所以用“颜色查找”可以快速的帮我们表现出大效果,烘托大气氛,虽然不可能做到完美的效果,但是有了这个功能,可以让我们后期的工作大大的提升效率。

例如:我想调一张图作为网站banner


注意:“颜色查找”还可以到网上下载很多资源,更多效果在等着你们哦,大家抓紧试一试吧。

每天1分钟,不在电脑旁也能进步!!!

2016年8月24日星期三

产品详情页这样设计,用户才会乖乖掏钱


App 上没有比产品详情页更影响转化率的地方了。当用户做决定时,能够简单地从这一页面上获取关于产品的信息非常重要。我这里有一些方法,能帮助你改善产品详情页面,并提高用户的购买率:

产品细节以及选项

详尽的细节不仅会激发购买欲,同时能让用户安心。用户更热爱将商品信息都展示出来的 app。这些信息包括但不止于,货存量,尺寸,颜色选择,产品描述,产品图片,评价。

产品的细节要清晰简洁

产品描述不仅要易于找到(帮助用户获得大体印象),也要易于被检索(让用户很快定位到特定信息)。左图的例子中,不完全的产品信息容易使用户迷糊:


  • 尺寸:用户看不出某个尺码是有货还是没货,也不清楚这里的 XL 到底是多大。

  • 颜色:颜色选项没有视觉上的标示。

  • 货存量:没有关于货存的信息以及运输方式的选项。

  • 没有产品详情描述。



将所有重要的产品信息都浓缩在小小的手机屏幕里是很困难,但有人却做到了:


 
最小化用户输入努力

app上大多数错误都发生在输入框。即便使用全键盘,输入也是件耗时又容易出错的事情。理想情况是,商品页面中不应该存在需要用户输入的地方。可以通过限制选项数量来防止用户出错:使用单选框(radio button)或者步进控件(steppers)来让用户只能选择单一的选项。


产品图片

产品图片最能促进销量。无论你卖的是电脑还是 T-shirt,产品图片都是产品页面上最重要的部分。优秀的产品图片有两个功能——给用户留下深刻印象,并且提供用户所需信息。

使用大而高清的图片

一张图片需要足够大,足够清晰才能发挥最好的效果。当你的产品是服装时,图片就更重要了,因为用户关心的主要就是衣服的细节。下图展示了这个原则如何在服装类产品页面发挥效果。


确保你的图片看起来不是由马赛克构成的。不仅最初的图片质量要高,就连放大后的图片也需要保持高清度。确保你的图片在经过用户放大后,读取更高分辨率的图片版本。


下图是放大时出现的问题。这个页面支持用户放大产品图片,可是由于低分辨率,放大后的图片质量非常糟糕。用户并不能从中获得更多资讯。


让用户掌控缩放程度

图片远比描述直观的多。用户往往依赖于通过产品图片来了解产品的细节和功能,如果app预先设定好了放大比例的话,用户也许会产生挫败感。


让用户完全按照自己意愿来发大图片,会让他们感觉更好。


一定数量的图片需求

一般来说,产品页面中图片越多越好。但实际操作中,为了优化展示图片,你应该在产品描述中选用那些具体展示了产品细节的照片。

下面是一些选择图片的技巧:


  • 你要展示既真实又有细节,功能的照片。比如说,如果你卖的产品是一个a/v功放接收器,那么就展示产品的后部细节给用户看。因为他们可以通过输入接口来了解这个产品的功能。




  • 具有上下文的图片对读者也很有用处。打比方,harry's这个app就使用图片来讲述自己的品牌故事。


设计可以水平滑动的图片库

可侧滑的图片就是为了拇指而诞生的!用户应该能够通过水平滑动来快速查看所有产品图片,而不需要下滑这个动作。


 
支持缩放和轻触两下手势

用户会试图用类似于两指缩放,轻按两下这样的手势来放大手机上的产品图片。然而有些 app 虽然支持这样的功能,却没用告诉他们的用户。当 app 告知用户他们支持这些手势时,实际上在帮助用户更好地使用自己的产品。


产品定价

你首先要花上一些时间来确定你的定价策略。让价格合适并且放置在页面上恰当的位置有两种方法:


  • 如果你的价格具有竞争力,那么就要发挥这一优势。最好的做法就是,当你对价格足够自信时,将价格放在前面显眼的位置(紧跟在产品图片和产品名称后面),asos就是这样做的:




  • 如果你不靠价格优势取胜(比方说,你卖的产品是独一无二的),那么你可以考虑不把价格放在那么显眼的位置。将价格放置在产品描述之后,也许是个好选择。


产品库存量和运输方式

用户放弃购买行为的一大原因就是,页面上没有标示出运输选项以及费用。用户不得不在其他页面上寻找关于运输方式的信息,而这就打断了他们最初的购买行为。

显示实体店铺库存量

如果用户想要在实体店自提商品的话,库存量是一个关键的参考要素。为了给用户展示当地的货存量,你需要尝试自动获取用户的地址信息,但也要让用户很方便地选择他们偏爱的店。一个常见的错误就是,只展现了用户当前地址附近的店铺,却忘记提供其他选择。


运输费用和天数

用户期待运输费用和送货时间都写得明明白白,因为当他们购物时,他们会常常会衡量运输价格和运输时间之间的性价比。


理想情况下,你应该提供一个免费又及时的运输方式。在你的产品页面中,一定要包含可选的运输方式以及各自的价格。

有用处的用户评论

网上购物时用户倾向于相信别人的评价。用户评论对于用户来说有两方面的作用:

●评论能让用户了解产品的质量,以及服务的优劣。用户需要再三确认你关于产品的描述是真实的。

●评论可以解答用户在产品介绍页面没找到的,关于产品细节的疑惑。用户会认为这样获得的信息好过通过商店销售口中得到的信息。

如果你能收获一系列的好评价,它们将增加你产品的可信度,也能帮你卖得更好。

允许用户过滤评价

允许用户通过分类和过滤来得到他们真正想知道的产品信息。


不要隐藏任何负面的评论,并且展示总投票数

只有好评的评论区会让用户产生怀疑。


当你展示产品时,确保将所有的投票数都显示出来,以确保评分的真实度。


降低跳出率(bounce rate)

通过提供附加的信息来增加用户在app上逗留的时间:提供相关产品以及热销产品的信息。当用户考虑买替换装或者是产品附件时,他们会感谢你提供的这些信息的。产品页面的底部要放上你觉得最吸引人的产品。


结论

30%的用户仅仅因为页面优化不够而放弃手机上的购买行为。设计一个转换率媲美桌面网页的产品页应该是每个商务app的首要任务。产品页面的职责就是让用户掏钱,因为购物这一行为越简单,用户就越容易去购买产品。

用PS打造抽象艺术视觉效果


前言

很多人以为,做一个PS高手就是需要用到各种复杂滤镜,最后把图片变得面目全非才好。而在我看来,软件的背后是创作者的心。把PS视作一件玩具,其实就是几个简单的几何形,也能玩出不同的花样。其中,抽象艺术的表达法可以拿来一用,仅仅是一些形状、色彩就能创作出让人耳目一新的视觉感受。

同心圆肖像

STEP 01

你一定听过,人脸是最吸引眼球的画面。先准备好相应的人像素材。再打开PS,创建一个尺寸为1800*1200的文档。



STEP 02

画出三个圆,第一个圆是一个实心圆,第二、三个圆是空心的圆环。总之让它们看上去像一个靶心。它们的大小比例可以参考下图。



STEP 03

将准备好的人像图片导入到文档内,这时,复制两次,也就是让人像也变为三个。这样让人像与上一步中的圆形保持一一对应的关系。



STEP 04

关闭三个圆形的可见,这时,将这几个圆的“形”作为与其对应的人像图层的蒙版。当然,由于是三个不同的形,它们之间的关系就不能太平铺直叙,你一定懂得利用这三个不同的“形”创造一种有趣的错落关系。



STEP 05

可以利用调整图层工具对整个画面的色调进行修饰。



自制抽象画笔

STEP 06

这里我们将要分享一个快速自制抽象画笔的方法,再新建一个800*600的文档,背景为透明。在这个文档中画上一条矩形,然后复制多次后,均匀排布,只是保持左右端非对齐。如下图所示。



STEP 07

将这些条状矩形旋转-40度。旋转后得到的形状定义为画笔,进入【编辑>定义画笔预设】,确认了画笔名称后,点击确定即可。这个画笔是一个非常容易制作同时又能很好表达现代感的元素,我们将接下持续使用到它。



建筑抽象

STEP 08

回到我们的抽象艺术的文档,把三个同心圆肖像图层集合成组,给这个组增加一个蒙版,利用上一步做成的画笔在这个蒙版上点击创作。这里的目的是要将左同心圆的左边部分做一部分隐藏处理。



STEP 09

增加一个矩形,填充为深色,具体颜色可以是从人像图片中吸取的深色。这个做法最能做到整体的色彩和谐。为矩形增加蒙版,在蒙版上运用自制抽象画笔来创作出一种类似建筑一样的抽象造型。



自然抽象

STEP 10

让我们再为整体增加一些表达浪漫的元素,在自定形状工具中找到空心圆的形状,然后填充不同的色彩和大小,散点分布。整个过程并不局限于使用哪种颜色哪个大小,这种圆圆圈圈的形状本身就能传递一种自然主义的浪漫感。



STEP 11

给这些“圆圆圈圈”编为一组,增加一个蒙版,再用你的有趣画笔把它也融入到整个设计中。

再次锁定焦点

STEP 12

在同心圆外再增加一个圆,这个圆形保持空白填充,描边为8。大小确定后为其增加蒙版,又拿出你的抽象画笔进行涂抹,你会看到涂抹效果会很明显地让它的存在感褪去但又能依稀可辨。



STEP 13

再为人像增加“点睛一笔”,运用光圈笔刷,点击这里可以下载。你可以选择红色或其他任意色彩,在所有图层的上方新建一个图层,将图层的混合模式改为“滤色”。



在这里需要更加灵活,画笔有多种,你可以从中选择一款最适合的。光圈的方向可以根据图片本身的光线方向进行改变。刷一次并不会有太大变化的可以多刷几次。

完成后你可以增加一些文字和背景,最后效果可以是这样:

后记

经过体验,抽象的方式并不难,几何体加上一款简洁又有趣的笔刷就能做出不错的视觉效果。这里所运用的组合完全可以进入你的大脑创意的素材库,这种在蒙版上运用画笔进行创作的方式也值得你进一步探索。

2016年8月22日星期一

Photoshop实现位图转为矢量图


在日常的设计中,我们往往会遇到大量将位图图形转为矢量化处理的问题,尤其是遇到比较复杂的图像时,会浪费我们大量的时间,有没有一个比较简便道方法呢?

下面是我用Photoshop的“索引颜色”转 矢量图的一点心得,希望能给从事平面设计的朋友一点帮助。

1、Photoshop中调入原始图片,扣像,清理背景,转为索引颜色模式。

 

2,设置索引颜色参数。

 

3、选区,选中要矢量化的图形。

 

4、建立工作路径。

 

5、创建矢量蒙版。

 

6、按照上述方法,选择不相连的图形区域,依次创建各个图形的蒙版。

 

7、另存为EP格式的文件。

 

8、保存。

 

9、打开矢量软件(AI),打开 刚才保存的文件。

 

10、好了,我们可以在矢量软件中随意编辑图像了。

 

要点总结:首先应当清理要提取图形的背景,这样对后续的操作比较有利。用“索引颜色”快速分离色阶,必要时可转回RGB格式深入编辑。务必要将不相连的选区分别新建图层,创建独立的矢量蒙版层。保存时,要存EPS格式才能在矢量软件中打开每个形状的路径

2016年8月2日星期二

分享一波达内2015年WEB,UI,java视频教程,高清完整版


直接上图达内JAVA高清视频






达内前段高清视频





达内UI高清视频





视频截图




链接过期不补
链接:http://pan.baidu.com/s/1i4SrJFJ 密码:z4af   达内UI设计
链接:http://pan.baidu.com/s/1o84Hn1w 密码:zd5w   达内java
链接:http://pan.baidu.com/s/1qYOpXs4 密码:re15   达内前端

2016年7月12日星期二

6个步骤教你设计一个完美的Icon


这篇文章讨论了图标设计准则的6个步骤。这6个步骤遵循了图标设计的基础,包括一致性、易识别和清晰。高效图标设计的原则已经被图标设计师John Hicks在他的《The Icon Handbook》一书中详细地讨论过,同样google的“material系统图标设计指南”也有讲过。本文中被讨论的6个步骤应该被看做一种指南,而不是一列教条式的规则。学会什么时候打破规则,什么时候遵循规则,这也是成为一个优秀设计师的一部分,我们也将在这论证。



在本文中运用的图片案例,被讨论的6个步骤将会运用到改进一只狗上(确切地说,是一只柯基),这个图标是由iconfinder的用户Kem Bardly最近提交的。这个图标是有潜质的,但还不是够优美到可以称为“高质量”。我们给Kem一些简单的小技巧,只要做一些小小的改进。他的图标已经准备被作为优质图标通过了。下面展示的图片显示了Kem的图标改进前后的版本。在接下来的章节,我们将循序渐进地解释它是怎么从最初版变到最终版的。



左边的图片是原始图标。右边的图片是重新设计过的图标,运用了本文中提到的原则。

注意,文章中讨论的原则适应到网页图标时,他们通常也适用于印刷图标。典型的300 dpi的印刷材料,使得像素化呈现本质上是毫无意义的。如果你是一个平面印刷设计师,文中提到的所有原则都是适应的,但是你可以忽略像素化呈现的作品。

有效图标设计的三个特性

对于组成图标的3个属性:形式、统一审美和识别性,好的图标显示了一套系统的经过深思熟虑的方法。当新设计一套图标,把这些属性都考虑在迭代的途径中,从整体(形式)出发,进入到细节(识别性)。即使你只设计单个图标,这3个属性也仍然能被应用,能从单个图标中推测出。

毋庸置疑,设计一个有效的图标不止这3个属性,但有这3个精选属性是设计一个好的图标的开端。为了相对简洁性,我们专注于考虑这3个主要的属性。

形式

形式是一个图标根本的结构,或者说是它的组成部分。如果你忽视图标的细节,在主要图形周围画了一条线,那他们是形成了一个方形、一个圆形、一个垂直或水平的矩形,一个三角形或者更多有组织的图形?最主要的几何形状——圆形、方形和三角形——能为图标设计打下一个稳固的视觉基础。在Kem Bardly设计的柯基图标示例中,狗的头部是由两个三角形和两个椭圆形组成的。一个人开始会画一个最大最简单的形状,然后才定义越来越多的细节。另一个人从最简单的形状开始设计图标,然后添加更多的细节——但是只有尽可能多的需要沟通概念的细节被表达出来,它就会成为一个物体,一个想法或行动。



这张图片的关键线条展示了设计构型的基本形状

审美的一致性

单个图标的构成元素能运用到整套图标中,就是我们说的视觉的一致性。这些元素比如是圆形或方形的角,角度的大小(2像素,4像素…),被限制和保持一致的线条粗细(2像素,4像素…),图标风格(扁平的,线条的,被填充的线条或符号),配色等等。审美一致性是设计元素的集合,或是设计中你为其成为一个整体所贯穿使用的手法。在下面的例子中,会发现Kem图标中的这3只狗都有一些共同元素,比如2像素的圆角,2像素宽的眼睛和心形嘴巴。



这3只狗图标有共同的设计元素,形成了视觉的一致性

识别性

识别性是产品图标的基本,它造就了图标的唯一性。一个图标是否从根本上起了作用,依赖于观众能多么容易地去理解这个图形、它的含义及它描述的动作。一致性包括展示观众普遍会和你的想法联系在一起的特性,但是它也包括哪些独特的,出乎意料的元素,像把狗狗的鼻子设计为心形。记住识别性不仅仅是指对形状、想法或它表达的动作的理解,也指识别出你的图标。从这方面来说,美学的一致性和识别性能经常重合在一起的。下面的图标,我们能识别出一只是柯基犬,一只是西伯利亚的爱斯基摩犬。因为他们独特的颜色、头部形状和耳朵,但是仍然会认为他们是同一组图标,因为他们有共同的设计元素。



每一只狗的特性使得他们能各自被识别,但是它们共同的设计元素又可以让人识别出是同一套图标

迄今,我们已经看了有效图标设计的3个主要属性。在接下来的部分,我们将深入看6个步骤是如何妥善处理这3个领域的问题。

六个步骤

1、从栅格化设计开始

不同网格大小的好处将在一个单独的文章中得到最好的处理。从我们的目的出发,我们做出了一个32*32的网格。我们的网格也包括一些基本的指导原则,来帮助我们为每个图标设计创造最基本的形式。



这里,我们能看到一个32*32的像素化网格,有一个2像素的边框(或者说是不可达区域)作为留白

最外面的2像素我们叫做“禁区”。避免把图标的任何部分放在这个区域,除非是绝对需要的。这个禁区存在的原因是为图标留出一些透气的空间。

图标形式的一个组成部分是大体的形状和方向。如果你在一个图标的外部边缘画了一条线——这个边界框,如果你能够——这个形状将会形成一个正方形,圆形,三角形,垂直居中的矩形,水平居中的矩形或平行四边形。

圆形图标处于网格的正中央,将经常触碰到内容区域四周的边沿,而不触及到禁区。注意,打破禁区这个规则的一个普遍原因是,有一些重点或小元素需要超过圆形区域。如上所述,为了保持设计的完整性。



圆形图标对齐网格和关键线

方形图标也是在网格的中央,但不这样做,在大多数情况下,会扩展到内容区的最外层边缘。为了保持圆形和三角形图标的视觉面积的一致性,大多数矩形和方形图标将会在中间对齐到关键线(以下图片的黄色区域)。什么时候对齐到每一条关键线由图标本身的视觉面积决定。什么时候使用哪种尺寸只需要多加练习。看下面的方形布局图片。上面说到的3个同轴的方形就是以下的浅蓝色、橙色和浅绿色区域。



方形和圆形图标的大小及对齐是相对于网格的

在32像素的正方形里,你会发现20*28像素垂直的和水平的矩形。我们认为这些矩形,要么是垂直的,要么是水平的。尝试让任何图标的大小做适应,去匹配这些20*28像素大小的矩形。



这些垂直或水平方向图标的对齐和大小是相对于网格的

在对角线方向的图标是对其到圆形区域的边缘,如下图所示。注意,这个锯子的最外面区域是大约和圆形的边缘对齐。这一块区域你并不必很准确地知道在哪,大概相近就可以了。



在对角线方向图标的对齐和大小是相对于网格的

记住你没有必要每次都遵循网格和指南。网格的存在是为了帮助你让图标保持一致性,但是如果你不得不在做一个好的图标和遵循规则中选择,那就打破这个规则——有节制的遵循。

Hemmo de Jonge因他的昵称 Dutch Icon而出名,如他所说:
“一个独立的图标的本质重要性超越了保持整体性。”


2、从简单的集合图形开始

用简单的圆形、三角形和矩形画图标的主体,从这个开始做起。本质上,即使一个图标最终大多数将成为有组织的,刚开始时在 Adobe Illustrator中设计图形。在设计图标时,特别是为屏幕设计更小的图标时,手绘的边缘那些微小的变化将会使一个图标看起来不那么精致。从基本的集合图形开始将会使边缘更加精确(特别是沿着曲线),也能让你快速地调整元素之间的相对大小了,当然确保你是遵循网格的。



这是一个基本的几何图形,2个三角形,2个椭圆,组成了这个柯基图标。

3、按照这样的顺序设计:边、线、角落、曲线和角度

尽可能不要让设计看起来过度地呆板和无趣,角落、曲线和角度都应该有数学化的精确。换句话说,按照这个顺序,当涉及到细节时,不要尝试盯着看或徒手画图标。元素的不统一会降低图标的质量。

角度

大多数情况下,坚持用45度角,或者它的倍数。在45度角上反锯齿是均匀地走势。(活跃的像素一直是对齐的),所以结果是显而易见的,这个角完美的对角线是很容易被识别的,这也是受人眼喜欢的。这个可识别的模式建立了一套图标的一致性,让单个图标成为了整体。如果你的设计规定你必须打破规则,尝试用两等分(22.5度,11.25度等等)或者是15度的倍数。使用情景是不同的,所以结合具体情况而定。用45度角等分的好处是,反锯齿的走势仍然是可接受的。



常规反锯齿的 45 度角的特写镜头

曲线

会降低图标质量,也意味着专业和业余之间的区别最明显的一个区域就是不那么完美的图标。而人的眼睛能精确地识别微小的变化,手眼的协调不能总达到很高的精确度。依赖于图形工具和顺序尽可能的设计曲线,使用adobe illustrator(或者你的矢量软件)控制修改键(shift键),或者,更甚一筹地是,用Astute Graphics的VectorScribe和 InkScribe更精确地控制贝塞尔曲线。



手绘角落效果不理想

因为我们看到了上面提过的修改前的图片,手绘的线会画出不规则的曲线,这会降低图标本身的质量。



我们用illustrator的贝塞尔曲线工具画出了这些非常精确的曲线,而不是手绘

角落

通常圆角(或者说半径)值为2像素,一个32*32像素的图标,2像素的半径已经足够被看出是圆形的,但不太过于让角落过于圆滑以改变设计中的个性(比如“泡泡”形象),你选择的半径值是基于你想给图标怎样的个性。是否使用圆角是一个审美上的决策,也要考虑到一套图标的整体美感。



精确的圆角

已经开始设计几何图形了,我们现在可以增加2像素的外围轮廓,来演示图形工具是怎么改善设计的,以及细节上的一致性,比如圆角。



重新设计柯基图标的过程如此漫长

这个被大大提升的版本展示了新设计的要点:统一的圆角,光滑的曲线,耳朵边基本的线条粗细。

像素化的展示

在设计小尺寸的图标时,像素级的对齐是很重要的。一个小尺寸图标边缘的去锯齿会让这个图标失真。不和像素网格对齐的线条之间的空隙将会变得反锯齿和模糊。让图标和像素化的网格对齐会使得边缘在直线上很清晰,在精确的角度和曲线上也很清晰。

如上述,45度角是最好的,因为被用来定义角的像素是成对的,阶级式的,段对端是完全对角的。对角落和曲线也是同样的:它们越精确,反锯齿就越清晰。但是注意,在更大规模和更高分辨率的屏幕上,比如视网膜屏幕,像素化呈现并不太需要,至少对于反锯齿而言。

线的粗细

谈到线的粗细,2像素就很理想了,在必要情况下可以使用3像素。目标是提供可视化的层级和多样性。不用介入太多样式,那样会破坏一套图标的一致性。超过3个或者一套能失去它的凝聚力。2和4像素粗的线条的好处是他们是2的倍数,因此很容易向上和向下扩展。大多数情况下,避免使用很细的线,特别是在符号和扁平化图标上。除非你刻意设计一种“线性风格”的图标,比起线条,更依赖于光阴去定义形状。



Iphone图标展示了线条粗细的一致性

4、跨图标设计使用统一的设计元素和符号

Hemmo de Jonge of Dutch在Icon Salon 2015上有一个精彩的演讲,他大篇幅地讲到了这方面的图标设计。在他为荷兰政府做的2年图标系统项目中,Hemmo和他的设计同伴注册了一个等级给每个图标。并不是每个图标都有等级,但大多数是这样的。这种符号,适当并一贯地使用在一套图标中,真的能把图标集合在一起成为整体。



常用设计元素的使用

在我们的狗狗图标例子里,我们使用了一个通用的风格元素:心形鼻子。使用心形作为鼻子这个视觉特性不仅仅把这些图标组合在一起,而且也增添了一种异想天开的元素,为我们四条腿的朋友沟通情感。



狗狗图标常用设计元素的使用

大多数情况下,即使一个图标的主要部分发生了改变——比如说,风格——构建审美统一的元素仍然可以系在一起,像上面所看到的那样。我们已经重构了相同的3只狗狗图标的符号风格,而不仅仅是平面风格,它们仍然是保持审美一致的。



狗狗图标使用了共同的设计元素,但是有着不同的造型

5、谨慎使用细节和装饰

图标应该能尽快地表达对象、想法或行动。太多的小细节将会变得复杂,这会让图标缺乏识别性,特别是小图标。一个单独的图标或一整套图标的细节处理水平对视觉的一致性和识别性都是很重要的一个方面。确定一个或一套图标的细节水平是否正确的一个好方法是,以最少的细节来表达清楚图标的意义。



在上面的这个版本中,已经离我们最终要完成改善的稿子很靠近了。眼睛周围的黑色轮廓已经变成了耳朵周围毛皮裹着的棕色区域。脸上黑色的线已经不见了,但是柯基脸上的白色标记上面仍然有2像素的空间。注意,我们仍然保留了一些原来版本的元素,比如扁平化的鼻子。我们会在下一步中调整它。

6、让它变得独特

有天赋的设计师的数量似乎每天都在增长,他们做出了高质量图标,其中很多是免费的。不幸地是,很多的设计师过度地依赖于趋势或者大多数流行设计师的风格。作为创意专业人士,我们应该看看图标以外的其他领域,比如建筑、字体设计、工业设计、心理学、自然及任何我们能找到灵感的其他领域。因为很多图标看起来很相似,,所以让你的设计变得独特尤为重要。



柯基脸上心型的鼻子使得这个图标变得独特而有个性

在最终设计的形象中,我们有一个独特的可触摸的心形鼻子,为这个设计添加了一些新奇和无拘无束的感觉。

这些简单的步骤应该被看到是一个起点,而不是最终的指南。设计图标没有简单的方法。本文中,我们已经概述了保持基本一致的设计方法。但是其他设计师当然也有他们自己的观点和技巧。成为一个更优秀的设计师最好的方法看尽可能多的视觉参考,读大量的资料,经常画草画(无论你去哪带一个草图本),不断地练习,练习,再练习。



左边的图片是原始图标。右边的图片是重新设计过的图标,运用了本文中提到的原则。

结论

我们已经分享了如何构建高质量图标的基本原理。这些原理也是技巧:通过练习,任何人都能学习并掌握它们。记住,为了设计更好的图标,从一般(形式)开始,然后到特定的细节(可识别)。让你的图标保持内部的一致性,同样在整套图标中也要保持一致性。注意图标和图表集中这些被共享的元素(审美的统一)。