相关分类
photoshop教程
Illustrator教程
CorelDraw教程
painter教程
Indesign教程
UI设计教程
sketch教程
设计理论
飞特网 顶部通栏广告

设计师必学的UI设计技巧

妮子发布于:2018-11-26 09:04 |原作者: 郗鉴|
妮子
浙江省 绍兴市 GUI设计师
发私信 + 关注
简介: 产品图标是我们在设计界面的时候体现品牌调性和特性的图标。通过产品图标,用户就可以大概感知这个产品主要是做什么的。比如微信的产品图标是两个对话气泡,暗示了这是一款社交APP;再比如ofo的产品图标是字母ofo的组合,同时也是一辆自行车,这暗示了这款产品是共享单车的APP; ...

版权申明:本文出自“郗鉴”原创,感谢“郗鉴”的原创文章分享!

设计师必学的UI设计技巧 飞特网 设计理论

FEVTE编注:更多平面设计理论学习请访问飞特网平面设计理论知识栏目,地址:https://www.fevte.com/plan/shejililun/

图标的定义

一说到图标,我想您一定会觉得非常熟悉。图标,也称为icon或picto,是指有明确含义的图形视觉语言。那么当我们一提起图标设计,您的脑中会想起哪个图标来呢?有可能您想起的是微信APP由两个白色气泡组成的启动图标;或者是我们每天使用的APP中的那些返回、关闭等系统图标;也可能是商场导视里的卫生间图标等。没错,图标的形式有很多种,它可以应用在很多场景中,并且表现方式非常丰富:有线的、有面的、也有拟物的等等。图标的历史可以追溯到象形文字(Pictogram),我们的祖先在发明文字之前就使用图标记录一天的生活了。听着是不是不可思议呢?从亘古时代的象形文字开始,我们的祖先就偏爱使用这种抽象的图形来表达意思了。在平面设计领域的商标其实也是一种图标;平面设计里的视觉导视(例如卫生间的图标)也有图标的应用,所以图标在我们的生活中应用非常广泛。

设计师必学的UI设计技巧 飞特网 设计理论

生活中随处可见的图标

在计算机时代,从80年代的施乐公司界面中的单色图标开始,图标就开始出现在屏幕之中了,图标较编程语言更容易被大众理解。到了后来从iMac到iPhone引领的拟物图标更是开启了一个绚丽的图标设计时代。拟物时代盛行也带来了一些麻烦:拟物图标的质感、光影会吸引走用户的注意力,我们称之为"视觉噪音"。于是UI设计师开始探索更新的表现形式来设计界面中的图标。扁平图标发展史上有过很多次尝试,比如微软引领的Metro风格中的图标设计和Google引领的扁平设计风格中的长投影风格图标,但由于它们表现形式太过于抽象、缺乏情感的传递,并没有获得用户的垂青。而我们现在界面设计中的图标设计是一种"轻拟物"或"微扁平"的风格:在面积比较小的区域我们使用扁平图标或线形图标;在面积比较大的区域我们会使用加入渐变甚至轻质感的图标。(关于图标风格的变化,可以参考这个网站:http://historyoficons.com)。

设计师必学的UI设计技巧 飞特网 设计理论

不同的图标设计风格

如今我们界面中的图标可谓非常丰富了,如果根据Material Design对图标的分类,UI设计中的图标可以分为带有品牌属性和特性的产品图标、有功能指示作用的系统图标两种图标,下面我们将针对于这两种图标进行研究。

设计师必学的UI设计技巧 飞特网 设计理论

产品图标

产品图标是我们在设计界面的时候体现品牌调性和特性的图标。通过产品图标,用户就可以大概感知这个产品主要是做什么的。比如微信的产品图标是两个对话气泡,暗示了这是一款社交APP;再比如ofo的产品图标是字母ofo的组合,同时也是一辆自行车,这暗示了这款产品是共享单车的APP;再比如KEEP的字母"K"的图标,像极了一个在抬腿做运动的人,暗示了这是一个运动APP。

同时有些产品也依靠自身已经在用户心中产生的品牌来直接设计产品图标,比如淘宝APP的产品图标就是一个"淘"字;支付宝的产品图标就是一个"支"字。优秀的产品图标都会在我们心中打上一个烙印,当我们看到这些图形、配色时,脑中会立即想起来它们的功能和特点。产品图标除了在手机屏幕中作为启动图标,也会出现在闪屏、情感化设计、"关于我们"界面等场景中,所以也要有一定的灵活性,在设计上要以简单、大胆、友好的方式传达产品的核心理念和意图。产品图标很类似在企业识别系统(VI)里的logo,需要让用户一眼看到它就能够与脑中的产品相关联。所以设计一个优秀的产品图标对于任何产品来说都是非常重要的。

风格

产品图标有不同的风格,这些风格有可能很拟物,也有可能很扁平;有可能很抽象,也可能很具象。通过不同的设计风格可以更加标新立异,从而被用户记住。让用户记住我们的图标真是一件非常重要的事儿,要知道,每个手机都像是一把瑞士军刀,它有无数个功能,而我们的产品只是万种功能中的一个。用户不可能记住手机里所有的APP都是什么,所以能在第一时间取得好感和记忆非常重要,产品图标设计得好看并且容易被人记住就成了非常重要的任务。产品图标的主要风格有以下几种:

文字风格

文字是最直白的信息,而且不容易被曲解。所以很多国内的产品都会使用文字来作为自己的产品图标。比如:支付宝、淘宝、今日头条、OFO、爱奇艺、知乎、网易新闻、毛豆新车等。这么做也有它的问题,比如文字给人美的感受不如图形,因为文字需要阅读而不是观察。并且移动端设备都会在启动图标之下加上一行辅助文字,如果图标上的文字和下面的辅助文字完全重合,会显得像介绍了两遍自己一样。如果您决意要使用文字作为产品图标,且是中文的话,那么一定要记得文字最好为1-2个,并且不应该是产品的全称。如果是英文的话,最好是首字母而不是产品全称。当然不管是中文还是英文都需要选择合适气质的字体和并做一定的变化。

单读:单读是一个偏文艺的阅读产品,所以产品图标使用了黑白配色和两个非常有文艺气息的宋体繁体字,这样的设计符合产品调性,传递给用户一种产品的文艺气息。

今日头条:今日头条是一款优秀的新闻APP。它的图标非常直白:一张报纸上有红色的头条标题,头条使用了非常粗的黑体字,非常显眼。

淘宝:淘宝采用了一个俏皮的"淘"字作为icon的主要元素,并且背景颜色是令人兴奋和刺激的橘黄色,凸显了电商属性。并且这个字使用了很久,用户对此有一定的品牌认知。

爱奇艺:爱奇艺的icon采用了英文字母iQIYI和上下边框相组合的形式。整体看来像是一个电视机,强调了品牌属性和功能,并且使用了在视频领域非常有识别性的绿色,让人一看便知这是爱奇艺了。

设计师必学的UI设计技巧 飞特网 设计理论

单读、今日头条、淘宝、爱奇艺的产品图标

如果您的品牌使用英文作为产品图标,我们在设计的时候要格外注意英文字母之间的正负空间关系以及不同西文字体的不同气质。

ONE:虽然是中文产品,但是ONE的icon显得非常的高端和小众。ONE三个字母的正负空间关系做了微调,并且选择了无衬线字体来体现时尚感。下面的小字是一个slogan,并且和ONE的宽度一致。

Pinterest:Pinterest的产品图标是一个手写体的P,并且用红色圆形作为陪衬。这样一个字母作为ICON的好处就是方便用户记忆。

HULU:HULU是一个国外视频产品,它的产品图标颜色很鲜艳,字母本身有韵律感,所以没有做过多的设计。

Facebook:作为一个社交产品,Facebook的产品图标同样采用了一个字母代表较长的单词。

设计师必学的UI设计技巧 飞特网 设计理论

ONE、Pinterest、HULU、Facebook的产品图标

正负形与隐喻风格

图标的设计可以使用正负形和隐喻,来让图标更加有耐人寻味的看点。

抖音:抖音的产品图标是一个音符,但是不知道大家是否发现,下面圆形的负空间也是一个音符,所以显得非常巧妙。为了增加动感还加了红和蓝绿色的类似3D的动感效果。

Keep:Keep产品图标是一个K,但是同时也是一个人抬着腿正在锻炼。

Skillshare:Skillshare是一个技能交换平台,第一眼看是两个手像太极一样交换着技能,同时也是该产品的首字母:S。

设计师必学的UI设计技巧 飞特网 设计理论

抖音、Keep、Skillshare、OFO的产品图标

折纸风格

折纸的效果会让人感觉很立体,所以很多产品也选择了折纸效果(比较扁平的手法)来设计产品图标。

Calendar:这个产品的产品图标是一个正在翻页的日历,非常简洁明了。

Snapseed:除了扁平的设计之外,使用了长投影的设计风格。这个长投影也是扁平化的设计。

Netflix:Netflix的产品图标是该产品的首字母N,这个N用了一些阴影来表示立体感。

绘声绘影:同样是用了长投影和折纸效果,显得非常清新。

设计师必学的UI设计技巧 飞特网 设计理论

Calendar、Snapseed、Netflix、绘声绘影的产品图标

填充图标风格

产品图标使用填充图标风格是非常合适的。填充图标风格具有简洁和识别性强的特点。这种ICON的可扩展性更高,比如在一些特殊节日时可以用手绘、拼贴等形式来做辅助图形。所以很多公司都钟爱填充图标风格。

Lucking:这是一个线上咖啡外卖的产品。它的APP图标使用了一个鹿回头的造型。这个鹿造型简洁,非常有识别性。

Tinder:这是一个国外社交APP,通过一个火的填充图标让人第一时间记住这个产品。

youtube:这是国外著名视频APP,它的产品图标同样使用了填充图标风格,是一个有电视机隐喻的圆角矩形,并且中心是一个播放键,简明扼要地说明了这个产品的功能。

Twitter:国外著名社交APP,它的icon同样使用了填充图标风格,非常简洁好记。

设计师必学的UI设计技巧 飞特网 设计理论

Lucking、Tinder、Youtube、Twitter的产品图标

线性风格

由于目前设计流行趋势,很多产品图标都会采用扁平的设计风格。扁平除了填充的图标之外,还有一种非常流行的形式——线性风格。线性风格一定要注意不要太细,因为手机和电脑设计环境显示尺寸不同,如果我们做得太细,那么在手机上看会非常尖锐,显得不太好点击。

Airbnb:Airbnb的背景是一个微渐变,线性风格是一个曲线组成的A,同时也是一个小蜜蜂。

LOFTCam:为了凸显文艺产品调性,使用了偏细的线条,同时使用了两种主题色。

NextDay:同样非常文艺的产品,使用了比较抽象的手法。这个ICON是一个牛奶,突出了这个产品必须今天看,否则就如牛奶一样会过期。

VUE:这是一个摄影产品,同样应用了黑色的微渐变,前面是非常前卫的45度长短不同的线。

设计师必学的UI设计技巧 飞特网 设计理论

Airbnb、LOFTCam、NextDay、VUE的产品图标

11919

好评
25

差评

刚表态过的朋友 (11944 人)

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

  • 飞特游客

妮子
浙江省 绍兴市 GUI设计师
+关注 发私信

最新评论

您需要登录后才可以评论和提交作业 登录 | 立即注册
本周热点文章
2020 新飞特 从心开始
关于飞特| 广告服务| 付款方式| 版权申明| 网站地图| 联系我们| 加入我们| 举报| 帮助中心| 移动版| 手机版| 飞特网

委托设计