手机图标知多少？设计背后的秘密？

用户界面最重要的组成部分之一是图标。随着平面设计的发展趋势，越来越注重图标的简约和寓意表达，平面图标一直占据主导地位。每个设计师在不同阶段关注的重点是不一样的。我把图标设计分为两个阶段——初级阶段和高级阶段。这种划分是为了循序渐进的学习和高级强化。当然新人很难一步到位，需要实际工作指导和自己的经验总结。我不会说花里胡哨、文质彬彬的语言，但我可以分享一些实用的基本方法，这也是近年来学生们会反复教授的入门指导。有自己成熟表达方法的设计师可以忽略这一点。这里先说一下初步设计的要点。

一.概念类别

大多数平面图标无非是剪影，为什么这里的重点是图标的形状设计，而不是颜色，因为在考虑下一步之前，一切都是有形的？造型再差，创造整体风格也是徒劳的，比如建筑造型和装饰的关系，色彩创造的风格可以分开分析。图标无非就是两种典型的类型：面和线。使用这两个基本元素来建模也可以用于各种组合和不同的性能。组合一般包括单元素建模、多元素组合建模、线和面之间独立组合变化。

1.简化的微现实图标

这种通常是色彩的组合，在造型和组合上更为写实，不是纯粹的剪影，而是从写实过渡而来的简化，接近剪影和平面的简化设计。在这里，我们主要使用面和颜色来设计形状。还有六种纹理(有人分析过)，大概是纯平面，折叠，轻纹理，折纸，长投影，微立体。这种好的素描有很多，造型比较容易。更多的是用在了色彩和精致上，在界面上也是最突出的。最近也很流行用色块进行二维和三维的装饰表达，叫做“低面造型”。如果你感兴趣，优艾设计网_PS论坛就搜索一下。

上面提到的元素组合，比如下图中的图标目前是两个元素——信封加信纸。如果想添加任何功能状态指示，最多在右上角添加一个小消息提醒。因为元素越多，越复杂，表达的意思就越多，同时也会影响造型的动员。无论有多少元素，总有一个是最重要的对象，其他都是辅助图形，在塑造大小的复杂程度上是不同的。

1.1这个半原创的传说

这种剪影的正负形图标通常是单色的，当然也有综合色的。它更简洁抽象，简洁凝练，高度精炼，外观和意境细腻，有理解的门槛。所以这是最难设计的层次。非常讲究设计理性与感性之间功能沟通的逻辑思维。也是UI领域所谓现代极简主义的代表。注意，把握不好会变“空”，把握好了会有时尚感~

负形图标是一个线条勾勒的人物，轮廓很高。就像画骨头一样，需要精度，也叫线性图标。负面剪影是所有图标中最精致、最难表达的风格。如果画得不好，很容易俗气、粗糙。

正形图标是由曲面绘制的图形，也有线和线的综合表现。根据自己的需要做出改变。通常情况下，当前状态是用负图标转换的，这在手机标签上最常见，比如ios7。

优点：简单、清新、优雅；非常现代(虽然古代有高度泛化的符号表达，这里的范围是指互联网上全新的应用)；随着设计和意义的全面拓展；也可以完成一些抽象词语的图形化交流。

1.2本文原创图例

图标意味着上传到云端。这里的主要对象是云，所以箭头与云的比例不同，上传箭头是辅助图。通过了解多种元素之间的主次关系，我们可以掌握

1's拟物化设计就是尽可能地画出繁琐的细节，追求丰富性和相似性。另一方面，剪影图标则相反，以简洁为绘制方法。但是没有细节，没有，反而更加细心认真的注意每一笔，而且越来越优雅。这里有一个如何绘制剪影图标的例子。它可以分三步完成，看起来简单又困难。简单的就是画出参考对象的轮廓，保持基本的识别，步骤少。难的是这个调整过程与产品环境、易用性和你自己的创意的融合。简单来说就是.关键节点绘制法和去繁择简并经过,最基本需要犀利眼光的是建模的关键节点，原型出来后会根据思路进行调整。

思考改造过的设计过程。通常在绘制现有参考对象的基础上设计一个图标，可以根据你喜欢的建模参考对象进行分析。首先抓取参考对象的关键节点，在几何上画出一个类似的基本图形。提炼精华勾勒轮廓基金会的雏形出来后，开始加入自己的想法调整线锋，线向决定造型。这时候就需要再调整几个版本。设计师处女座细腻纠结的情结在这里挥汗如雨，不断调整对比，挑出最好的，再进行下一步。塑造调整线锋优雅得体的最后一步是画龙点睛！建模的特点在这一步完成。

2.1本文原创图例

对于新老设计师来说，这种方法更可取，也更容易使用，交互设计师也可以快速上手。尤其是第一步，是否能很快成型。以下是它的

他案例的设计方法欣赏，跟我上面总结的一样道理。

2.2图例来源于Digial Art

2.3图例来源于iconwerk

2、精致的基础要素精致即精细极致。看似简单的图标其实并不是随便了事，但知道了这些基本要素你就可以完成一个合格的图标了。好的图标是谨慎认真的注重每一笔每一像素每一矢量锚点的，尽可能的往精美优雅的方向努力吧骚年~
犀利清晰

需要锻炼厉害的眼睛，使出你的火眼金星捕捉每个像素之差，像素满格才能清晰的呈现，细分出来通常会遇到以下3种情况，这也是最影响图标基本质量的问题点。

第一种情况：轮廓发虚

图标一定要用矢量绘制，但是新手很容易犯的第一个错误就是图标模糊的问题，也不清楚为何会这样。其实就是矢量边缘模糊产生的问题，也是个人绘制的不良习惯造成。避免这个问题，必须在100%画布上绘制图形，而且不能直接推动图标放大缩小，即使这样改变大小了也要放大画布调整路径的锚点，反复查看及校正是否对齐1px网格，而不是0.1~0.9px，正是不满1px格才会生产虚线。而圆形的绘制保证十字架4个边缘点对准就可以了。

2.4本文原创图例

第二种情况：斜形发虚

斜线也是会有模糊与精致之分的，不仔细对比其实是比较难看到问题，可能很多人都会碰到图形进行倾斜效果时是有锯齿的，那就是角度的处理问题了，自己进行多角度对比下试试，会发现哪一个角度最清晰。也可以将图层进行双层叠加，会非常犀利哦~

2.5本文原创图例

第三种情况：像素不够或多余

看下来都是像素发虚与清晰的原因都是一样的，下面这个例子是箭头在小尺寸情况下可点阵矢量像素绘制，如果是大尺寸（如上面最大的箭头示例）可以直接钢笔绘制。

2.6本文原创图例

总结一下上面的处理方法，坚持最少发虚原则：

2.7本文原创图例

比例协调图形内部结构要注意元素构成之间的比例，有黄金比例分割也有感性的平衡方法。严谨的图标比例可参照苹果iOS图标规范案例，打好内部统一结构线进行图形绘制和比例分配。

2.8来自苹果图标及来自Seevi Kargwal图例

如果头眼昏花嫌麻烦，也可靠经验感觉快速完成一个具有平衡感的图标。

2.9本文原创图例

视差平衡同一个尺寸规格，但根据不同形状的图标，会导致面积占比引起的视差大小不同，但要在参考尺寸范围内绘制进行调整。以下图标示例都是撑满方框边缘绘制，按道理这好像是准确的，但由于人的肉眼会有视差问题，所以做的设计就要暂时抛开科学，以人的真实情况去判断再调整。

2.10本文原创图例

三.系列成型图标

能够熟悉掌握完以上基础要素，恭喜你可以大胆的去创造系列图标了，当个数图标设计确定好后，接力的图标必须延展其风格设定：造型规则、样式、细节特征等要素统一设计–繁衍具同视觉与内在含义属性的图标。

3.1图例来源于iconwerk

3.5图例来源于Jee

结尾

值得注意的是在简约与装饰之间的平衡要靠自己的把握，正是这个把握的度是考验设计师是否成熟的表现。进阶的优秀图标是能够平衡于识别性、简约与装饰之间的琢磨，具有功能又具情感的。希望本文对新同学有帮助，欢迎一起探讨和补充。