要素三:图标
1. 图标功能
图标是 Web 和 App 设计中的点睛之笔,既能辅助文字信息的传达,也能作为信息载体被高效地识别,并且图标也有一定的装饰作用,可以提高界面设计的美观度。
2. 图标类型
关于图标的类型目前并没有很权威的分类,我根据图标的用途将其分为两大类:「功能型图标」和「展示型图标」。
2.1 功能型图标
一般来说,凡是 UI 界面中,用户可以点击的图标均可看成是功能型图标,该类图标往往代表某一功能或某一链接的跳转。这类图标的典型应用场景就是 iOS 系统中的底部标签栏,以及 Material Design 中侧滑菜单选项的左侧。
某些列表或卡片内的图标也属于功能型图标,但这类图标往往代表一个功能,而底部标签栏图标往往代表一个页面或板块。
2.2 展示型图标
相比功能型图标,展示型图标更加具有「设计感」,是独特的、有内涵的以及具备辨识度的。一般来说,展示型图标主要是应用程序的启动图标。该类图标代表了一款产品的属性、气质以及品牌形象等,也是用户首先看到的内容,设计时应尽可能让用户记住并感到愉悦。
该类图标在 iOS 系统中除了出现在 App Store 里,还出现在用户下载后的桌面上,以及 Spotlight 的搜索结果和设置等地方。
3. 图标风格
图标的设计风格有很多种,例如:线性图标、面性图标、线面结合图标、扁平图标、轻拟物图标、拟物图标、手绘型图标等,我对其中常见的几种作下简要的介绍。
3.1 线性图标
线性图标是由直线、曲线、点等元素组合而成的图标样式。该类图标轻巧简练,具有一定的想象空间,且不会对界面产生太大的视觉干扰。
3.2 面性图标
面性图标可以简单理解为对线性图标的填充,但面性比线性更加稳重和扎实,对色彩的传达也清晰明显。
3.3 线面结合图标
线面结合图标典型代表是「MBE风格」图标,其设计特点是采用了粗描边线和偏移的填充面相结合,灵动而鲜明。粗线条起到对画面的绝对分割,突显内容、表现清晰。
3.4 扁平图标
扁平图标去掉了透视、纹理、渐变等能做出 3D 效果的元素,让信息本身作为核心被凸显出来,并且在设计元素上强调抽象、极简、符号化。
3.5 轻拟物图标
轻拟物图标没有拟物图标那么写实,也不像扁平图标那么“平”,而是利用淡淡的渐变和一些光影来达到两者之间的平衡,识别性高又不失美感。