浅谈设计师必看的图标和ICON设计指南

浅谈设计师必看的图标和ICON设计指南

图标的类型

2.1 拟物图标

由于人们都是通过以往的认知来理解新事物,所以基于这一点,早期应用界面必然要采用拟物风格,以便于人们的理解和操作。是一个由实物 → 符号的发展历程。

浅谈设计师必看的图标和ICON设计指南

例如「保存」图标就是将「软盘」符号化之后形成的图形,「软盘」是「保存」图标的实体。但随着时间的推移,人们逐渐将长期接触的符号本身作为一种新的实体,在大家的眼里,它不再是一个具象事物的抽象符号,而是直接当成一个实体来使用,甚至这个符号的实体已经淡出历史,但人们还在习惯性使用这个符号。

更具体点来说,拟物设计就是追求模拟现实物品的造型和质感,通过叠加高光、纹理、材质、阴影等各种效果对实物进行再现(也可适当程度变形和夸张);扁平化设计就是摒弃以上对效果(尤其是高光、阴影等能造成透视感的效果)的追求,转而通过抽象、简化、符号化的设计元素来表现。你还记得曾经熬夜画写实图标的日子嘛~上千个图层不在话下有木有!

浅谈设计师必看的图标和ICON设计指南

但是随着 ICON 的发展,拟物图标也带来了一些问题,因为用户关注的核心永远都是信息本身,华丽的视觉元素或许在用户使用的初期,起到赏心悦目的装饰,但久而久之,这都将成为对用户获取信息的一种干扰。再者,大家都熟悉的事物其实非常有限,而 APP 的创新却在不断进行,很多创新的产品本身在现实世界就没有参照物,所以也决定了拟物图标必然会被取代。

2.2 扁平图标

区别于拟物化更加接近于真实的实物,扁平化则是简化真实的物体,进行平面化的表现。

2013年,苹果推出了iOS7 开启了拟物向扁平转变的风潮。扁平化的概念最核心的地方就是:去掉冗余的装饰效果,意思是去掉多余的透视,纹理,渐变等等能做出3D效果的元素让“信息”本身重新作为核心被凸显出来。并且在设计元素上强调抽象、极简、符号化的概念。

浅谈设计师必看的图标和ICON设计指南

扁平图标风格发展的后期,由于它们表现形式太过于抽象、缺乏情感的传递,也没有获得大众的青睐,这也表明 UI 新的趋势再一部向“突出内容”的本质靠拢,即“认知简约”。也许当满世界都是扁平化后,拟物化的设计却又变得更显眼了呢?最近流行的新拟物风格就是最好的证明。

2.3 微扁平、轻拟物

从扁平风格发展至现在,图标慢慢开始发展到微扁平轻拟物的方向,相较于拟物风格不会有太多复杂的视觉元素,与扁平风格又有了更丰富的情感内容,所以现在界面中,在面积比较小的区域我们使用扁平图标或线形图标;在面积比较大的区域我们会使用加入渐变甚至轻质感的图标。

浅谈设计师必看的图标和ICON设计指南

2.4 线性图标

线性图标是由直线、曲线、点在内等元素组合而成的图标样式,通过线来塑造轮廓。线性图标具有辨识度高,清晰,简约易识别等优点,线性图标不会对页面造成太多的视觉干扰。缺点是:线性图标的创作空间较少,太复杂的线性图标对识别性产生较大的困扰。

浅谈设计师必看的图标和ICON设计指南

在图标设计中使用的线有粗细之分,常用的App图标设计线的粗细一般有2PX或者3PX,不同的线条粗细 ICON 所带来的视觉感受也不同,细线显得精致,粗线视觉面积大,显得厚重。直角线条的icon显得专业严谨,圆角粗线条的 ICON 显得饱满而可爱。

2.5 面性图标

面性图标是通过面来塑造形体的图标,采用了剪影的设计形式,通过线或者面去切割基础轮廓面,通过分型来塑造图标的体积感。不同的切割手法造成了面性图标设计感的差别。

面形图标具有表意能力强,细节丰富,情绪感强,视觉突出,创作空间大等优点。面性图标可以让用户迅速定位图标位置,预知点击后的状态。但是面性图标在页面中不可过多出现,否则会造成页面臃肿,难分主次,用户视觉疲劳。

浅谈设计师必看的图标和ICON设计指南

2.5 文字图标

文字图标是指用文字直接表示特定含义的图标符号。由于文字本身就是一种演化而来的符号,英文的首字母或者词语关键字本身也具备很强的信息浓缩性,因此在某些场景下,采用文字或字符作为图标,是一种很不错的表现手法。

浅谈设计师必看的图标和ICON设计指南

比如「提示」图标,使用一个圆圈包裹一个英文字母「i」,表示 information,表示「注释信息」的含义;比如停车场直接使用「Parking」中的首字母 「P」,这些都是比较约定俗称的使用方式。还有一些场景,很难用象形或者表意的方式进行表达,那么就很适合使用文字符号,例如京东/天猫某些商品具备「正品保证」的标识,这个概念太抽象了,很难用象形去概括,创造新的表意符号又很难被大众接受,这时「正」字就很适合作为这个场景特定的图标符号,作为针对中国用户群体的产品图标,简单粗暴且有效。

浅谈设计师必看的图标和ICON设计指南

如果可能的话,尽量避免在图标中使用文字。因为图标应该是全球性的。如果你确实需要文字图标(例如货币符号等等),那么请你自己绘制,而不是直接使用字体

2.6 " 新拟物 "风格图标

苹果在 WWDC20 搞了个大新闻:macOS 将与 iOS 统一步调,从X86平台迁移至ARM 平台,并从macOS 10迭代为macOS 11。这 20 年一遇的 Mac 大版本更新被称为Big Sur

macOS Big Sur是第一个将 " 新拟物 " 设计投入大规模商用的操作系统,这可视为 " 新拟物 "在实用化道路上的首次胜利。值得一提的是,在 Big Sur 的 " 外观 " 设置里,多了一项名为" 自适应强调色 "的选项。苹果将主题色的指定权留给开发者,这是否暗示新一代 App 在光影上会有更丰富的效果?

浅谈设计师必看的图标和ICON设计指南

" 新拟物 " 设计的精髓在于对光线的绝妙运用。它把光效拿捏在 " 扁平 " 与 " 拟物 " 之间,进而打造一种全新的视觉体验。

不同于传统的拟物," 新拟物 "虽然将符合物理规律的光影效果引入界面,但它所模拟的材质是自然界不存在的。换句话说," 新拟物 " 是将真实光线用于虚拟对象,而 " 拟物 " 是还原实际物品在特定光照下的效果;