图标设计的三大原则(图标设计原则)-东辰网

图标设计的三大原则(图标设计原则)

本文主要介绍图标设计的三个原则(图标设计)，下面跟着东辰网详细了解一下吧。

UI最重要的组成部分之一是图标。随着扁平化设计的发展趋势，人们越来越重视图标的简洁和寓意表达，平面图标已经占据了主导地位。每个设计师在每个阶段关注的重点都不一样。我把图标设计分为两个阶段——初级阶段和高级阶段，循序渐进学习，强化高级阶段。当然新人如果能够一步到位的话会比较难，需要实际工作中的指导和自己的经验总结。我不不会华丽清高的语言，但我可以分享一些真实的基本方法，也是近几年将要给同学们做的入门辅导。有自己成熟方法的设计师可以忽略这一点。以下是初步设计的要点。

[1]概念类的平面图标大多无非是轮廓表现，而为什么这里的重点是图标的形状设计，而不是颜色，因为一切都是看得见摸得着的才考虑下一步。造型再差，创造整体风格也是徒劳的，比如建筑造型和装饰的关系，色彩创造的风格可以单独分析。图标造型表现无非是两种典型类型:面和线。利用这两个基本元素进行造型，还可以进行多种组合，进行不同的表演。组合造型一般包括单一造型、多元素组合造型、线与面之间独立与组合的变化。

这种通常用色彩来表现，在造型和组合上更真实。不是纯粹的廓形，而是从写实过渡而来的简化，接近廓形，扁平化的简化设计。这里的造型设计主要是利用面和色彩来进行的。还有六种纹理风格(已经分析)，大概是纯平面、折叠、轻纹理、折纸风格、长投影、微立体。这种相对剪影的好图很多，更容易塑造风格。更加丰富多彩，更加优雅，用在界面上也是最突出的。最近很流行用色块来表现二维和三维的装饰，被称为低表面建模与设计；。有兴趣就去搜一下。

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

1.1本文半原创图例

这种表现通常是单色，当然也有综合色。它比较简洁抽象，凝练，高度精炼，讲究意境，有理解的门槛。所以这是最难设计的关卡。非常讲究设计中理性与感性在功能传达上的逻辑思维。也是UI界所谓的现代极简主义的代表。请注意，如果你不如果把握不好，它会变得空，而且把握的好的话就是时尚感~

负图标是用线条画出的图形，用轮廓概括其高度，精确到像画骨头一样。准确到位，也称为线性图标。负剪影是所有图标中最精致、最难表达的风格，画得不好容易俗气、粗糙。

正投影图标是由曲面绘制的图形，同时也具有线条的综合性能。根据自己的需求去创造和改变。通常情况下，当前状态在负面图标之间转换，这种情况在手机的tab上最为常见，比如ios7。

优点:简洁、清新、优雅；非常现代(虽然古代也有高度概括的符号表达，这里的范围是指互联网上全新的应)；具有设计和意义综合的扩展性；还可以完成一些抽象词语的图形传达。

1.2本文的原始图例

拟物化设计就是尽可能画出复杂的细节，追求丰富性和相似性。另一方面，轮廓图标使用简单作为一种绘画。但是没有细节，没有，而是更加细致认真的关注每一笔，越来越优雅。下面举例说明画剪影图标的方法和技巧，可以分三步完成。看似简单，实则困难。简单的就是画出参照物的轮廓，保留基本的识别，步骤很少；难的是这个调整过程与产品环境、易用性以及你自己的创意的整合。简单来说，就是一个经过思考后简化转化的设计过程。最基本的需要火眼金睛的是建模的关键节点，然后在原型出来后会根据想法进行调整。

长度提取精华，勾勒轮廓

通常，图标是在绘制现有参考对象的基础上设计的。可以根据自己喜欢的建模参照物进行分析，先抓住参照物的关键节点，从几何上画出一个相似的基本图形。

2.优雅地调整线的前端。

基本原型出来后，我开始加入自己的想法调整线条的前端，线条的方向决定了造型。这时候就需要多调整几个版本了。设计师s座细腻纠结的情结在这里挥汗如雨，不断调整比较，选择最好的，才进入下一步。

3.添加特殊细节以彰显风格

塑形的最后一步是画龙点睛！建模的特征在这一步完成。

2.1本文的原始图例

对于新老设计师来说，这种更可取，也更容易上手，交互设计师也能快速上手。尤其是开始步，能不能很快成型。下面是对其他案例设计方法的欣赏，和我上面总结的一样。

2.2传奇来自数字艺术。

2.3传奇来自iconwerk。

精致是精致中的极致。看似简单的图标，并不是一件随随便便的事情，但是知道这些基本要素，你就可以完成一个合格的图标。好的图标都是谨慎认真的。注意每一笔，每一个像素，每一个矢量锚点，尽量做到飘逸灵动。

清晰明了

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

)轮廓较弱

2.4本文的原始图例

)斜向弱点

斜线也可以分为模糊和细腻。不仔细对比，其实很难看出问题。很多人倾斜的时候可能会遇到锯齿图形，那就是角度处理的问题。多角度试试，你会发现哪个角度最清晰。还可以双层叠加，会很锐利~

2.5本文的原始图例

)像素不足或冗余

看看吧，像素弱清晰的原因是一样的。下面的例子是在小尺寸的情况下，可以用点阵矢量像素画箭头。如果是大尺寸(比如上面最大的箭头)，可以直接用钢笔画。

2.6本文的原始图例

总结以上处理方法，坚持最少弱势原则:

2.7本文的原始图例

2.比例协调

2.8来自苹果icon，传奇来自SeeviKargwal。

如果头晕比较麻烦，可以根据经验快速完成一个有平衡感的图标。

2.9本文的原始图例

3.视差平衡

同样的尺寸规格，但是根据图标的形状不同，会导致面积比造成的视差不同，但是要在参考尺寸范围内绘制来调整。下面的图标例子都是用方框的边缘画满的，按道理看起来是准确的。但由于人眼的视差问题，设计要暂时抛开科学，根据人的真实情况来判断，再进行调整。

2.10本文的原始图例

恭喜你熟悉以上基本要素。你可以大胆地创造一系列图标。当图标数量确定后，接力图标必须扩展其风格设置:造型规则、风格、细节等元素的统一设计——再现具有相同视觉和内在含义属性的图标。

3.1图例来源余图标

Ps:我很欣赏iconw

3.2本文的原始图例

3.3传奇来自YorlmarCampos。

3.4传说已经忘了出自哪位设计师之手。

3.5传奇来自Jee。

[结束]

值得注意的是，简约与装饰的平衡取决于我们自己的把握，而正是这种把握的程度，考验着设计师的成熟度。高级的优秀图标可以平衡识别性、简洁性和装饰性之间的考虑，功能性和情感性兼备。希望这篇文章对新生有帮助，欢迎大家一起讨论补充。

l简化的微写实图标l.剪影的正反图标【2】设计手法要点1。关键节点的绘制方法2。精致的基本元素[3]一系列成型图标UI最重要的组成部分之一就是图标。随着扁平化设计的发展趋势，人们越来越重视图标的简洁和寓意表达，平面图标已经占据了主导地位。每个设计师在每个阶段关注的重点都不一样。我把图标设计分为两个阶段——初级阶段和高级阶段，循序渐进学习，强化高级阶段。当然新人如果能够一步到位的话会比较难，需要实际工作中的指导和自己的经验总结。我不不会华丽清高的语言，但我可以分享一些真实的基本方法，也是近几年将要给同学们做的入门辅导。有自己成熟方法的设计师可以忽略这一点。以下是初步设计的要点。

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