如何系统地设计界面图标
图标是一种抽象的、跨语言的符号，随着信息传播速度和载体的快速增长，图标的使用频率也在不断提高，尤其是在终端屏幕尺寸越来越多的情况下，图标代替或辅助文字信息向用户更一致、高效、具象地理解信息。
正由于图标设计的重要性，我们应该更系统、合理地一步一步进行推导和设计，而不是单纯为了展现创意或炫技地滥用图标。这篇文章将会结合过往的项目和遇到的问题，为大家讲述通过怎样的方法，能更有效地进行图标设计。
图标设计要点
01 表意清晰
图标能够清晰地传达信息，帮助用户理解这是什么功能/信息是图标设计的第一要点。如果图标含义无法正确地传达，那么它在界面中只是一个冗余信息。
不同的颜色对图标含义的影响
在设计图标时，不仅要针对单个图标思考，更要把图标作为界面中的一部分，结合当前场景进行考虑，在当前场景/界面中，图标是否满足清晰表义的要求。
并且图标在绝大部分情况下都不是主角，特殊的情景下，图标可能还需要结合文字，作为一种辅助信息，目的都是帮助信息更清晰地传达给用户。
02 一致性强
腾讯视频-播放器图标
界面中的图标一般是成系列的设计，除了视觉风格和特征保持一致以外，在同一产品内，同样的功能和信息图标应也保持一致的形态，避免用户产生疑惑。
03 易于扩展
随着业务和功能的变化，在产品发展过程中很可能需要扩展图标库，这就要求我们在最初设计图标时应定义好视觉特征与延展规则，让图标易于在原有设计上进行扩展，使得设计可延续。
腾讯视频-频道管理界面图标
04 图形清晰且有吸引力
在图标设计中，我们必须保证图形是简洁、严谨、清晰、边缘干净利落的，这是提升产品界面品质感的一个重要而且基础的部分。
并且除了达到基础水平以外，在图标中我们还可以通过融入品牌信息、有趣的细节使图标更有吸引力，提升用户对产品/品牌的好感度。
图标设计四步法
图在了解图标设计要点后，我们可以根据定义（使用什么类型和尺寸的图标）、提炼（关键词与特征）、绘制（草图与矢量稿）、调整（细节与整体平衡）四个步骤进行图标设计。
定义样式
1.使用场景
图标是界面中的一部分，所以我们在进行设计的时候，必须先考虑图标的使用场景，根据场景、功能去定义图标的样式、尺寸等，甚至是先挑选界面中几个主要图标进行设计，再进行成系列的扩展。
腾讯视频-全屏播放器界面
我们根据使用场景的关键点进行样式设计的推导，以腾讯视频iOS 5.6.0版本的播放器界面图标为例
承载的作用
播放器图标作为功能入口，最重要的目标是能清晰直观地传达功能信息，其它影响因素都要为此让位。
重要性
功能图标重要性为播放器界面中的第一优先级，并且依据使用频次区分重要性，如播放/暂停是界面中最高优先级，其次是返回、更多等，不同重要性会导致尺寸或视觉强度设计的区别。
所处界面的信息复杂程度
播放器内容背景非常复杂且多变，这个信息决定了播放器图标设计需要尽可能简洁，减少样式和层次。
业务对扩展性的要求
腾讯视频播放器会在整体大框架不变的前提下，逐步加入更多小功能来优化用户播放体验，所以可预判随着业务发展播放器图标会不断增加，这要求我们在定义样式时必须制扩展性强的样式。
2.图形样式
腾讯同一图标使用图形样式的表现
图形样式是图标向用户传达品牌信息及产品调性非常重要的一部分。尽管网上有非常多流行的样式可以参考，并且每年都有新的设计趋势，但在定义图标的图形样式时切忌滥用样式和盲目跟随流行趋势。
流行趋势总是不断在变化，产品定位却相对稳定，并且 GUI 设计从最初的纯界面设计（指只为产品业务和功能服务）到品牌+体验设计，保持产品品牌的一致性越来越成为硬性要求。所以我们在定义图标样式时必须结合产品定位，设计出符合品牌调性和产品特性的图形样式。
提炼关键词与特征
当我们通过上面的推断得出「图形特征」「图形样式」等整体而系统的信息后，开始针对单个图标进行设计。
1.发散关键词
当我们开始设计一个图标时，除了如搜索、关闭、删除等长期且通用的符号外，尽量避免通过或直觉把自己固定在原有的思维上，如「发送」就是纸飞机、「点赞」就是竖起大拇指，发散关键词能帮助我们快速找到多个能表达对应含义的方案。
如我们要设计表示「妈妈」的图标，我们可以通过思维导图进行发散关键词：
2.结合使用场景选择核心关键词
同样的符号在不同产品或场景下传达出来的含义可能是不一样的，所以我们在进行发散关键词后，应结合当前使用的产品/场景去分析，选择最合适的关键词。
例如「妈妈」这个图标放在小明家，传达出来的意思是小明的妈妈，而放在小华家，指的更可能是小华的妈妈。
并且图标在很多情况下无法表达复杂的意思，如要在同一界面上表示「小明的妈妈」和「小华的妈妈」，更清晰直观的方法是图标 + 文字，而不是非要把小明和小华的头都画出来。
3.提炼特征
由于我们需要保持图标设计的简洁同时易于识别，所以需要对关键词推导出来的形象进行提炼，挖掘出形象最核心且容易识别的特征。
假设我们要画一个 iPhone 来表示「手机」的图标，尝试提炼出形象中最核心的特征：
再进一步如果我们要在同一界面上表示 iPhone 8 和 iPhone X 呢？可以尝试去找这两款手机形象中最突出的差别：普通屏幕与齐刘海、圆形 Home 键与底部横条
绘制草图
提炼好特征后，非常建议先在纸上画除草图，草图并不需要非常精美，它能帮助我们更快地尝试不同特征和细节组合呈现的效果，并且帮助我们更清晰地知道每一个元素应该落在什么位置。
通过草图确定具体方案后，再着手用软件进行设计，单个图标的具体画法网上很多优秀的教程，我们在这略过。其中需要重点注意的是：
1. 定义图标输出的尺寸和视觉基准区域；
2.同样尺寸但不同形状的图标视觉面积也会有偏差，我们可以根据几种常见的几何形状建立形状基准线；
图标设计是GUI设计师必备的基础能力，好的图标设计不仅能帮助用户更高效地解决问题，还能帮助产品和品牌形成差异化。
但这一前提是我们能清楚地认识图标是什么、它在界面中充当的角色和起到的作用，然后在这些背景信息上进行有效的设计，而不是盲目地追求流行的视觉风格和炫技。
本文从图标设计的要点到方法粗略地讲了一遍，目的是帮助新手设计师更清晰地了解如何系统地进行图标设计，避免前期在追求纯视觉表达上走太多弯路。并且图标设计本身是一个比较大的题目，文中难免有很多不深入或细致的内容，如有不当的地方欢迎各位指正交流 ：）
腾讯视频TVDesign（公众号）
作者：KongZhen
相关推荐
-
从iOS 11看怎样设计APP图标
苹果WWDC2017开发者大会已经尘埃落定,除了新产品的发布,iOS 11也正式亮相.新系统中,地图.App Store.时钟.相机.联系人等等原生应用都换了新的图标.此次图标的变化势必也会激发下一个 ...
-
CorelDRAW如何调整界面图标大小
CorelDRAW中允许用户自定义调整界面图标大小.CorelDRAW默认安装初始界面按钮图标为最小显示状态,在工作的过程中有时会觉得按钮过小,不便于操作,作为一个被无数设计人员使用推崇的成熟软件,这 ...
-
UI设计计算器图标设计图标
UI设计计算器图标设计图标
-
PPT如何设计精美图标?
PPT如何设计精美图标? 1.新建一个宽屏16::9的空白文档,如图所示 2.选择插入,形状,矩形,然后绘制矩形,选择编辑顶点,调整控制点,如图 3.选择艺术字,字体的颜色设置为白色,轮廓设置为白色, ...
-
android studio设计界面变成灰色了该怎么办?
android studio升级到最新版本后发现有bug,于是就卸载之后重装了老版本.完事打开项目之后发现设计界面不见了. 1.上网查了一下.没有找到有道理的解决方案.但是有点思路了. 2.于是试了试 ...
-
mac的FileZilla中界面图标的放大倍数如何设置
今天给大家介绍一下mac的FileZilla中界面图标的放大倍数如何设置的具体操作步骤.1. 首先打开电脑,找到电脑中的FZ软件,打开.2. 进入主页面后,点击上方的FZ图标.3. 在打开的菜单中,选 ...
-
教你如何绘制风格统一的APP界面图标
此教程针对新手阶段刚开始做APP界面的同学,如果你是资深老司机看到这篇小教程可以自动忽略,当然也可以来互撩 初次做APP的同学,绘制图标是占界面问题比重较大的一块内容,虽然网络资源很多, 但仍旧做不好 ...
-
PPT文档中怎么设计最新图标?
快要过年了,全家洋溢着喜庆的气氛,在年前用PPT设计最新的图标,可以将闲暇的时间充分的利用起来,下面和小编一起来学习吧. 1.新建一个16:9的空白文档,如图所示 2.点击插入,正方形,填充颜色为蓝色 ...
-
PPT中怎么设计精美图标?
PPT软件应用十分广泛,主要应用于会议报告,文字排版,图画设计等多个方面.下面和小编一起来学习如何用PPT制作精美图标吧.有兴趣的朋友们一起来学习吧 1.新建一个宽屏16::9的空白文档,如图所示 2 ...
