前言

互联网行业持续演进，成本控制与效率提升已成普遍认知，昔日的多元岗位分工也逐渐模糊。

对于各企业的用户体验设计团队来说，将用户界面和用户体验设计师整合在一起是自然而然的发展方向。我们早在两年前就着手实施这项变革，以业务需求为依据消除了UI和UE设计师的工作界限，同时通过构建“设计规范体系”、“设计原则文件”以及“设计作业手册”等工具，确保了设计水准的基本要求。

不过紧接着我们察觉到，有些从用户体验转向用户界面设计的设计师，独自负责界面构建时依然面临不少困难。造成这种现象的缘由可能包含多个方面，比如个人技能不够强、缺少专业引导、或是工作热情不足等。

因此我们组织了团队内部的界面优化培训，旨在协助用户体验专家实现更出色的职业角色转换。现阶段培训已取得一定进展，我们特意将相关资料系统化梳理，现向各位发布。

通过这个系列的文章，能够明白图标创作、色调运用、布局规划、视觉元素制作、企业形象塑造以及动态效果表现。

我们明白出发点是供内部参考，因此认定彼此已有大致了解，所提供的资料都以实用性强、效率高为主。倘若资料里涉及一些不够清晰的“内部说法”，欢迎各位留言咨询。

今天带来的是第一部分，关于图标设计的相关内容：

一、图标的价值

图标的角色在当代设计领域十分关键，它能够传递内容、激发情感回应，有时还能代表一个品牌。

它既是视觉化的记号，又存在两种不同的解释，普遍的含义是指代在设计和信息科学范畴里，任何用来示意概念、实体或行为的视觉标记，这种普遍的视觉标记能够包含多种设计成分，诸如企业特有的徽记、用户界面中的交互按钮、警示性的图示等

而狭义上的标志，一般是指界面设计里的小型视觉符号，这些标志多见于手机应用、网络平台等电子界面sketch 画三维图标，目的是示意某种功能或含义。

图像比文字更利于用户迅速发现并掌握用途，同时还能实现引导操作、彰显标志、激发感受等多种功能。

二、图标的分类

图标可以根据不同的特征和用途进行分类。

在用户操作界面中，通用的图形符号大致能够归纳为三个类别：执行基本操作的符号，起到点缀作用的图案，以及用于开启软件的标记。

1、功能图标

功能标识在用户界面里承担着关键的导向、警示和互动任务，帮助人们便捷地完成指定动作或找到关联功能。

这些标志的特点是造型简约、信息明确、辨识度高，目的是准确传递其象征的作用，方便使用者迅速发现并掌握界面里的各项功能选择。

2、创意图标

创意标志是设计者借助非凡构思、创新能力和娴熟手法制作出来的具有个性化风格和鲜明视觉效果的符号，这种标志往往体现出与众不同的艺术特色和视觉冲击力。

这些标志往往不只是传递信息或作用，还蕴含着别致的艺术魅力和巧妙的构思，为用户感受提供了与众不同的形象标记和情感共鸣。

3、应用图标

应用标志用于彰显品牌形象、特性或核心概念，用以象征某个特定的产品或品牌。

这些标志务必形象鲜明，富有魅力，且能精准表达软件用途或企业特色，从而使用户容易识别并牢记。

三、图标风格及趋势

基础图标风格

基础的UI图标风格有三种：线性、面性、线面结合。

在信息传递被优先考虑的情况下，我们往往还是采用基础版式设计，互联网用户面对诸如提示、个人资料等常见图标，在这种版式里通常不会感到理解上的困难。

除了基本样貌，图标的样式也持续受设计潮流的更迭影响，不断调整更新。

2013-2016：从拟物（）到扁平（Flat）

这种设计趋势的萌芽出现在2010年“Metro”问世之际，一个重要的转折点则是2013年iOS7的问世，紧接着整个行业实现了从模仿真实物体到采用极简风格的重大转变。

在这个年代，图标设计的同质化显得较为严重。

2016-2020：扁平，但不要太扁平

苹果公司官方网站上明确指出：真正的简洁并不仅仅意味着没有繁琐或者去除装饰。在追求极致的平面设计之后，谷歌进一步倡导，将扁平化风格与适度的阴影和层次感巧妙融合在一起。

设计人员着手进行了一些富有新意的工作，其中卡通风格、多彩方案以及半立体表现手法是那个时期广受欢迎的表现形式。

2020-2024：拟物的新解读

科技进步推动着设备显示界面的清晰度与图形运算效能持续增强，用户对于画面精密程度的需求也随之发生转变。

新构思的表现手法很贴切地描绘了当前状况，而人工智能生成内容的进步显著削减了三维图像的创作开销，玻璃质感、激光效果、霓虹光芒等多元且具有空间感的视觉元素，逐步融入了标志制作领域。

四、图标设计的基本原则

图标创作必须遵守四项核心准则，这些准则能够辅助设计流程，保证生成的标志既满足用户期望，又具备直观明了和个性化鲜明的特点。

1、辨识度与一致性

识别效果要保证标志能个性且明白地传递内容，统一性则要求相近标志之间的一致和和谐，以此提升整体品牌感及用户感受。

2、适应性与伸缩拓展

精心构思具有优良适配度和延展性的标志，能够保证标志在各种平台、装置以及显示尺寸上，均能呈现出统一的视觉感受。

3、趣味性与情感联系

在图标设计里，注入趣味元素和情感关联，可以抓住用户的目光，提升互动频率，使用户获得更充裕且深入的体验，促使他们更愿意与图标所象征的产品或服务建立情感纽带。

4、代表性与品牌价值

将象征意义和商业价值注入标志创作中，有助于品牌塑造独有的视觉符号和核心观念，能够调动受众的情感呼应和认可心理。

五、图标的设计流程

制作图标的过程总共由五个环节构成，分别是明确要求，做好规划，构思图形sketch 画三维图标，勾勒草稿，最后确定成品样式。

1、需求理解

需求梳理就是如何明确题目，在这一环节，设计者必须掌握图标的用途方向、使用者的特征，以及该用途想要表达的含义。明确需求和目标，对于后续的设计环节具有决定性作用。

视觉感受和操作便利性之间，时常会出现不一致的情况，设计人员不能走向一个极端，只考虑操作便利而牺牲设计上的好看，或者过分强调视觉上的吸引力而牺牲其实用性，要全面评估产品的市场定位，功能特点，以及用户的认知习惯。

2、设计准备

借助市场考察、同类产品研究及创意汇聚，能够洞察行业动向，亦可发掘创作构思。

借助情绪板的设定，能迅速明确设计风格与核心要素，确保标志的与众不同。

3、图形联想

借助图像标志、几何形态、色彩等视觉符号，能够清晰表达与主题相接的含义，达成精练易懂的沟通目的。

然而，寓意内容有时并非具体事物，不易与图形形态产生直接联系，因此需要设法将非物质的理念加以提炼，转化为更富于象征意味和符号特征的形态，借助对关键要素的精简和提纯，创造出能够传达寓意内涵的视觉符号。

4、草图和概念设计

随后我们着手拟定初步的标志构想，接着借助手绘图稿或设计工具来形成初步的设想。

这一时期着重在于发掘新颖构思，探索多元的方案路径，目的是迅速且高效地将草稿转化为数字形态。

5、设计制作

选定最优方案之后，我们便着手借助专业设计软件，开发出水准较高的标志。

在实际绘制时，我们需要遵循三个原则：

适应

一个独立的图形符号，与它作为界面组成部分时，所需达到的标准并不相同，把它放到实际界面中，要调整图形的节奏感和分布密度，确保它的风格与其他图标协调一致。

精确

简化图形，若有多个候选草图，需选用最清晰明了的设计，必要时进行专门优化，命名需符合标准，采用明确的文字方便管理检索。

从简

制作时务必精简参数，尽量去除小数以及非整数角度，编辑线条和轮廓时务必剔除多余控制点，成品输出时切忌添加非必需装饰，务必维持图标的基本形态。

值得留意的是，各类形状的占地大小算法各不相同，要素相当并不代表画面均等，因此我们在构思时必须留意该状况：

为了确保图标在视觉上保持协调与对称，我们也可以预先勾勒轮廓来辅助图标设计。

此外，我们创作过程中必须遵守成对规则，毕竟电子显示屏对观感会产生干扰：

6、测试和修改

完成图标绘制工作之后，我们还必须实施一系列的检验和评定，目的是保证图标在各种环境下可以准确传递内容，并且维持视觉上的明确性。

测试方法涵盖辨识度验证、应变能力评估、画面层级考察等。这些内容在前期的公众号文章《怎样增强界面操作里的「信息辨识」感受》中有过说明。

借助这些途径，我们能更周全地审视图标创作的优劣，察觉隐含的缺陷，并且迅速进行改进。

六、酷家乐图标的绘制规范

1、设计原则

酷家乐的基本标志可分为两类，一类是平台型的，另一类是工具型的，这两类标志都必须遵循四个主要规范，

平台类应用标志更强调寓意，工具类应用标志更强调使用，因此我们在维持图形外形相同的情况下，分别运用了线条和面状的描绘方式：

2、平台基础图标绘制规范

线粗

平台基本图标通常轮廓宽度为十单位像素，特定情形下可选用较细八单位像素或较粗十二单位像素。

画板 & 图形尺寸

平台的基本图标绘制尺寸均为96*96像素，实际使用时可根据具体要求调整大小。

圆角大小

标准直角边框为4像素，近乎直角边框为4像素，钝角边框为6像素，锐角边框为3像素，非常锐利角度边框为2像素，凹陷边框或切面边框为0像素。

外图形间距

依据各种图形形态及其关联性，可区分为六像素、八像素、十二像素、二十像素等规格。

内图形间距

竖线宽度为八像素，上下空白区域可设为八、十二或十六像素，其他相似图标应遵循既定间距规范。

2、工具基础图标绘制规范

线粗

工具基础图标默认线粗4px，部分情况可使用减细3px。

画板 & 图形尺寸

工具基础图标的绘制画布规格一致为40乘以40像素，具体使用时可根据实际情形调整其大小。

圆角大小

标准直角使用2像素宽度，角度偏大时采用3像素，角度偏小时为1像素，非常尖锐时仅0.5像素，而垂直切割面或水平截面则不设置任何宽度。

外图形间距

依据各类形状及其关联性，可划分为两像素、六像素、十二像素、二点五像素。

内图形间距

分割线宽度为八像素，上下空白距离分别为八像素、十二像素或十六像素，相同图标需遵循现有图标间距规范。

最后的一些小TIPS：

要创建一个全新的图标集合,不用急着确定标准,可以先挑选几个代表性图标来着手。

将含义繁复的信息转化成视觉符号十分困难，偶尔能够借助其他方法，例如征询用户意见、进行体验评估等。

某些时候，图像和文字结合能够提升人们辨认事物的速度，图形符号还兼具协助理解的功能。

4、像素！像素！像素！图标设计也要有数字秩序，不要搞怪！

这个图标在图库中显得协调，也要在实际环境中，测试各种状况下的呈现状况。

现在对自身的创造结果感到满足，过一天后常常会完全不一样。要经常回想，要不断试验。

不要以为那些经验丰富的界面设计师出手就非常利落，实际上，这背后是成千上万模仿学习的结果积累起来的。

Figma虽然不错，但用来设计图标就太差了，这算是最低标准。要真正学好设计，必须从PS/AI入手，它们才是决定设计水平的上限。

MD图标集合囊括了千余种图形符号，此项工程业已完成。不过仍需各位将技艺牢记于心，切勿轻率获取。

——

以上便是《图标设计》的全部内容。

为何洁白栀子瓣会飘至深蓝裙摆？何故无瑕茉莉朵会绽于蜜珀弯月？怎样审视色彩，怎样参悟色彩，怎样体察色彩？

如有侵权请联系删除！