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

2.6 " 新拟物 "风格图标

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

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

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

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

由于整个设计界将不得不考虑新拟物风格，围绕该风格的可能性将会有爆炸性的发展，并且这种新的数字空间设计理念如何能够合理地适用于用户界面设计和功能性将取得更大的突破。与以往一样，第三方应用将比苹果更大胆、更快速地推动这一风格——这也是我们将会真正开始解锁新拟物优势的时候。

产品应用图标有不同的风格，这些风格有可能偏拟物，也有可能很扁平，有可能很抽象，也可能很具象。通过不同的设计风格可以更加标新立异，从而被用户记住。因此能在第一时间赢得用户的好感和记忆非常重要，将产品图标设计的好看且容易被人记住就成了非常重要的任务。应用图标的风格主要有以下几种。

3.1 中文文字图标

中文是我们的母语，每一个汉字都令人记忆深刻，文字也是最直白的信息，而且不容易被曲解，所以很多国内的产品都会使用文字作为自己的产品图标。中文设计模式即字体设计，提取应用名称中的一个或多个汉字，进行设计变形，变形后的字体图形具有产品属性的外貌特征。常见中文图标又分为单字、多字和字加图形的几种类型。

3.1.1 单字

提取产品名称中最具代表性的文字，通过对笔画及整体骨架进行字体设计，以达到符合产品特性和视觉差异化的目的。其优点是可以直截了当的传递产品信息，识别性强。

3.1.2 多字

多字图标设计要注意的是整体的协调性和可读性，一般为2-3个字，最多两行(四个字)排列。

其优点是更加直接的告诉用户产品名称，达到品牌推广的目的，减轻用户记忆成本。其缺点是如果图标上的文字和下面的辅助文字完全一样，会显得重复啰嗦，像介绍了两遍自己一样。

3.1.3 字加图形组合

文字加辅助图形的组合，也是常见的产品图标设计方法，相比纯文字图标，显得更加丰富有独特的产品的气质和属性。需要注意的是做好文字和辅助图形间的平衡。

3.2 英文字母图标

英文设计与中文设计的设计模式相似，通常是提取应用名称的首字母融合产品的功能卖点或行业属性进行创意加工，新的字母图形依旧保持本身的识别性。

3.2.1 单字母

通常提取英文首字母进行设计，由于英文字母本身结构简洁，稍加改动就很容易达到设计感于识别性兼备的产品图标。需要注意的是英文字母本来就少，都用字母很容易创意雷同，难以形成差异化。

3.2.2 多字母

提取产品全称或几个单词的首字母组合而成，形成独有的产品简称，方便用户记忆。

3.2.3 字母加图形组合

字母加图形组合的设计形式比较广泛，图形分为几何图形和通过提炼的图形。通过字母与图形进行创意加工，可以使应用图标视觉表现更加饱满。

3.3 数字图标

直接用数字做应用图标的相对较少，但是数字识别性强，易于传播的特点。利用数字进行设计能给人亲和力。难点是怎样与品牌形成强关联性。

3.4 特殊符号图标

由于符号本身的含义会对产品属性有一定限制，所以特殊符号在应用图标的设计案例中相对较少。如“$”符号可代表与金钱有关联性的产品，无法运用在与此属性无关的产品上。不过也正是由于自身属性强的特点，可以很好的诠释关联的产品属性。

#FormatImgID_26#

除了中英文图标，还有图形类图标比较常见。这种类型的设计模式的优点就是直观醒目和简洁大方，视觉冲击力强。常见的有以下几种：

3.5 几何图形

几何图形的设计模式给人简约、现代、个性等视觉感受，从单个具象图形到复杂的空间感营造，几何图形的表现形式非常丰富。不同的形状给人的情感表达不同，如三角形给人传达个性、稳定、现代、时尚等，添加圆角后又会更加亲民、可爱。我们可以结合产品特征，合理的选择适合的形状图形进行创意。此类型较考验设计师的图形创意能力。

3.6 单双形/剪影

单双形是指应用图标只展示单个或两个的剪影图形。通常有两种设计方式，在深色背板上使图形反白，背景可以是单色也可以是渐变色;在浅色的背板上让图形填充颜色，图形可以是单色也可以是渐变色。这种设计模式的优点是简洁明确，易于用户在众多的应用图标阵列中快速找到目标。

3.7 线形

线形的设计模式分为两种设计方式，在深色的背板上让图标反白，背景可以是单色也可以是渐变色;在浅色的背板上让图标填充颜色，图标可以是单色也可以是渐变色，或是其他视觉效果。纤细的线框图形传递出简洁轻快的气质，适合于文艺、清新的应用，在界面设计时保持这种干净明快的风格，才能与应用图标设计表里如一。线性风格一定注意不可太细，如果做得太细，在手机上看会非常尖锐，显得不易点击。例如airbnb，它的背景是一个微渐变，线性风格曲线组成“A”，同时是一个小蜜蜂。

3.8 动物图形/剪影

动物作为图标设计元素是比较常见的方式之一，通过提取动物整体形象或者局部特征部位作为设计元素，背景填充单色或渐变色，简洁明了。动物给人的印象比较可爱，有助于加深用户对产品的印象。常见的表现形式有剪影、线性描边风格、面性风格等。

3.9 卡通形象

卡通风格的产品图标会让用户更有好感，一个可爱的卡通形象有助于加深用户对产品的印象。很多决策者会认为卡通是一种低龄的审美，这种想法其实是错误的。卡通可以说是一种各年龄层都能接受的风格，如腾讯就是以一个企鹅作为品牌形象开始拓展自己的版图。

3.10 正负形

以正形为底突出负形特征，以负形表达产品属性，传递产品信息。例如NPR One，图标中的负形图形是对话气泡，告诉我们这是一个媒体或社交的应用，而正形图形强调产品气质。

3.11 白色渐变

白色渐变的设计模式与透明白色相似，都是通过白色不透明度来构建出图形的立体控件感，它比单纯的剪影图形更加具有质感，这种质感带给了我们视觉上的享受。例如印象笔记·圈点，它是一只白色的鹅毛形象，垂直的线型渐变使鹅毛富有了生命力一般，显得更加轻柔。

3.12 彩色渐变

色彩比任何图形都更能抓住用户的注意力，同时色彩更加具有情绪，能传递出应用的产品气质。比起白色渐变图形，彩色渐变图形的色彩表现更加丰富。多种颜色进行渐变衔接的时候要注意色相的对比，营造空间感。应用图标的背景和图形的色彩要拉开对比，一般为白色或浅色背景。

3.13 无

无，即没有设计。除了背板什么也没有。虽然这类设计模式比较独特，但我们并不鼓励，因为用户很难从一个颜色上得到有用的信息。例如“黄油相机”的图标设计成一块黄油的样子已深入人心了。

应用图标尺寸规格