很长一段时间内，人们有一个固有的偏见，认为游戏界面必然是重写实质感的。这种偏见一方面影响到业内设计师对自身的定位，也让我们忽视了扁平化设计在游戏界面设计中的重要性。本文针对这一问题，简单分析下扁平化设计的一部分，矢量化图标，对于游戏界面设计的重要性，以及相应的设计注意点。
图标对游戏界面之重要性毋庸置疑。
通常大家会认为正经的图标是这样的：
这样的：
或者这样的：
从视觉层面上讲，能够设计出这种重质感的写实风格，就会被认为是能力很强的游戏界面设计师。大家更愿意去观赏和模仿这种风格的图标，将这种“很体现功底”的美术风格默认为是高水平设计师的必备素质。
这种风格的确非常考验设计师的能力。但认为设计师的能力主要靠这种风格来体现，其实有失偏颇。游戏界面设计师所需要的能力点有很多，如果仅仅以某一种风格的作品为判断维度的话，可能会偏离设计师能力核心点。
设计师的工作是为产品“画皮”，这项工作不仅是为美术表现，还为功能表达。这个“表达”指的就是将产品的“灵魂”用视觉元素来进行表现。而美术风格只是产品灵魂的需求之一，因而不能仅以单一美术风格维度去评判。
或有或无的，在这种观点的影响下，很多设计师可能会忽视掉另外一个能力点，那就是今天要聊的矢量图标。
本文的矢量图标指的是：使用面，线抑或阴阳对比来表现自己含义的一类图标。这类图标的主要特征是：简洁明快，抽象，指代性强。美术表现上，按照所处情境(
这些情境可以是游戏世界观，界面整体风格设定等等
)，可以有纯色，渐变甚至投影高光的表现。一般也会称呼这类图标是扁平化图标。
由于这类图标通常是使用矢量软件或者矢量工具所设计制作，所以本文称之为矢量图标。
它们通常有以下几种：
1.线型图标，图标的型体全部通过线条来表现。
2.面片图标，通过不同块面来表现更复杂的层级结构。
更进一步的，使用多色块面，较少间隙区分（
由于色块可区分不同区域故无需间隙
）方式的形式。
上图，如果通过特定的色彩规范，可以让一组图标拥有更统一的色彩表现。
上图，统一色彩规范和严格图标展现范围，通过色块来表现丰富的内容的矢量图标。
上图，加入简单的渐变和浅浅的纹理，形体上加入透视表现。
上几图，使用这种表现方式后，甚至可以是一幅幅意境优美的插画。
这类图标的应用范围极其广泛，也是当今很多应用甚至游戏界面使用较多的设计元素。它们可以简单到只用线条去表现，也可以复杂到有渐变和纹理，乃至于被作为一幅图画去表现。看起来似乎很简单。
一些我们花费了心血的细节之处，玩家并不一定会意识。但我们没有做这些细节的工作，玩家可能会立刻有所感知。他们不一定会像我们这样专业的意识到自己的不适感是来自某个像素的偏差，但这种感知的确是存在着的。
界面像文章或者电影，是一种有节奏感的东西。有功能性的轻重分布，也有美术风格上的强弱分布。如果一个界面中充满了重写实的美术风格，不仅从功能上无法帮助玩家快速区分操作区，也从视觉上造成非常大的负担，反之亦然。所以说，作为界面的有机组成部分，矢量图标的重要性和其他界面控件是一样的。
并且，作为一种抽象化的表达方式，矢量图标在设计上是一种更考验设计师能力的类型。写实图标可以从技法上做到极致，这种极致更多的考验的是模拟对现实物体的表现。但矢量图标是一种对产品具体细节处含义的直接表现，是一种归纳式的，更考验设计本身对产品功能逻辑性表达的一种设计手法。
设计师不应一时兴起而任意指定某种类型的图标应该存在于某一处，风格的存在是其他东西所决定的。
现在先摊开界面设计的世界地图，来寻找矢量图标的位置。
从美术风格上讲，界面的质感划分有一个从轻到重的渐变过程。一般我们称之为从扁平化到写实化。
上图，现存所有界面的美术风格都位于图中坐标的某个点上，一个界面可能会杂糅比较多的风格控件在里边。矢量图标通常被划分在偏扁平的区域内。
一款游戏界面风格的划定依据是游戏世界观，玩法等等比较上层概念的东西。具体到某个界面中可能会有整个游戏是写实重质感但存在有扁平化风格控件元素存在的现象，也可能是反过来的。从大的层面来讲，一套游戏界面需要秉持统一的界面风格方向，从具体的页面细节局部来讲，则在此基础上再考虑到功能性的需求。
可以说“整个游戏的风格取向决定于世界观”这一点也是功能需求决定美术风格的体现。而功能需求则分几个层面：
第一，易用性层面；
易用性层面是一个比较泛化的说法。所谓易用性实际上还包括两个方面，一个是交互设计方面，具体的页面根据操作功能所需求的信息排布和先后次序，需要有合理的交互次序。同样的操作类型一般来讲需要从视觉上保持统一，这样才不至于从整体上给造成玩家理解障碍。根据操作类型需要有视觉上的提示，这些提示有警示、一般、不提倡等等类型。包括这些提示在内的所有操作引导都是通过图形化界面，也就是美术元素来达成的。
另一个是具体的功能性要求，比如说一些信息排布比较多的界面中，就会有区分重要性的需求，这时候就需要对重要信息进行强化，对次要的进行弱化。而做到这一点的一个基本方式就是从质感和色调上来调整。
上图，保卫萝卜3游戏界面中，被强化表现的界面部分，通过更亮的打光方式和布局居中来体现。
上图，游戏《Robber tacos》中，通过冷暖色调和质感来区分重要的按钮和次要的面板。
上图，某游戏界面右上角的红色退出按钮，通过警示色来表达游戏设计者不建议玩家退出的设计思路。
第二，美术节奏层面；
界面设计从美术上来讲和电影，文学，绘画等等在某种层面上是相通的，这种相通源自人类对节奏感的追求。人们比较喜欢有剧情冲突的电影，平静的描述和激烈的情节巧妙组合的小说也比抽象的平淡的文章更能吸引人们的注意，富有层次感，细节有机丰富的画面更讨人喜欢。这些现象都表明人类是一个喜欢有层次，有节奏事物的物种。如果想要创作一个令人满意的作品，对节奏感的把握至关重要。应该在界面设计中融入节奏感设计。
界面设计中的节奏感设计通常表现在两个方面，一个是质感层次。是厚重和轻薄的有趣合理组合；另一个是色彩的层次感。色彩可以是冷暖调配合，也可以是互补色的点缀，还可以是灰度上的轻重缓急的配合。
上图，某塔防类游戏的关卡选择界面中，通过多色彩的关卡图标和色调单一的地图背景相配合的方式来构成完整的一个生动的页面，更好的凸显图标的同时也让画面更美观。
上几图，《使命召唤高级战争》的界面，一种扁平化科技感设计。但是界面中多处使用了写实化图标来凸显特定图标道具的重要性，也可以从某些界面中注意到，典型的黄色在大面积暗色调上的点缀和加强作用。
如上文所述，矢量图标通常表现为扁平化的特征，也就会更大概率出现在扁平化设计的界面中。同时，也会经常出现在有轻量化表达需求的厚重质感界面中。
通常会在以下几种情况下使用到矢量图标：
第一种：需要快速理解，快捷而且频繁操作的轻量级操作处；
这种情况下，根据界面风格的类型，有很多种形式：纯扁平化的方式、扁平化图标加带写实化的衬底等。在需要玩家去快速理解图形含义时，扁平化设计是一种非常好的选择，它具有简洁直观的图形外观，也去除了过多纹理质感修饰，使图标本身所代表的含义直接表现出来。在需要频繁出现的一类操作控件中，比如全局出现的操作按钮，图标等处，都会倾向于优先使用矢量图标的方案。
上图，一个质感较多的设计风格中，这种不管是什么时候都会很频繁出现的关闭按钮，通常是矢量图标和带质感衬底的方式。
上图，手游《捕鱼来了》中，退出场景、更多操作、加减道具的小按钮上，也都用了简洁明快的矢量图标设计。这几处操作比较频繁而且需要玩家迅速理解其图形含义。
第二种：整体界面风格设定为扁平化时，大量使用矢量图标；
这种情况非常好理解，一些在写实类设计中被制作得非常厚重质感的图标，对应同样情况下的扁平化设定的产品中可能就会是矢量图标。
上图，游戏《死亡搁浅》的界面中，几乎没有出现写实化的元素。这是一款以科技感为背景的游戏，界面风格极为扁平，界面中大量使用了矢量风格图标。
第三种：同一个界面中需要被弱化的，相比之下比较不重要的操作提示处，以及需要均衡页面视觉平衡的。
这种情况多出现于信息量比较大的界面中，游戏设计者会通过对界面美术元素的差异化来引导玩家操作。如果界面整体风格是扁平化的设定，除了质感差异（
扁平化风格设定并不代表界面中不可以出现写实类风格的元素
）之外，会通过透明度、明度等方式来表现元素之间的差异。被弱化的操作元素往往会选择更抽象形式。在写实风格的界面中，如果信息量很多的情况下仍然保有大量写实图标，会让页面过重，即失去平衡，也需要适当使用矢量图标。
上图，某款游戏的技能弹窗界面。这款游戏的整体风格是重质感，但是在这个界面中有几处使用了矢量图标的表现。第一个是关闭按钮中的关闭图标=；第二个是技能图标，如果都用写实化的表现方式，在众多技能出现时，其辨识度和变化范围将大大缩小。
同样的使用方式可以在下边所示的《farcry primal》和《羞辱2》界面中看到。但后两者整体的设计风格趋向扁平也是一个重要原因。
第一种：线型图标。
它们在很多应用设计中有大面积的使用，不少游戏设计中也有用到。
《重返未来1999》主界面顶部主菜单按钮使用的是一种典型的线型图标。
设计这类图标时应该注意的问题：
1.线条应该保持一致的风格，这个风格包括：线条粗细、宽度抖动方式。
这是保持同一类型图标风格一致的最基本条件。构成这种类型图标基础元素的线，应该保持同一种表现方式，其粗细一致是最基本的规范方式；还有一种线条粗细会根据图形部位不同导致的宽度抖动，也应该按照同一规律进行，否则将造成极大的风格混乱。
上图，一整套的勋章图标，设计师为保持统一的风格做了这样的设计规则：1.外围线条粗细一致，内部滚边稍细但都保持一致；2.形体构成方式一致。使用同一套外围图形衬底，内部图标嵌套；3.内部图标都由两种线条构成，颜色稍微深一些的粗线条构成小图标主体，颜色稍浅的细线条构成纹理，氛围等其他部分。
2.块面交叠不应影响整体结构表现。
表示形体的线条与上层形体结构产生交叠，要表示合理的面片上下层逻辑关系时，需要隐藏盖在下层面片的线条。如果没有合理的隐藏，将会造成整体形体表现失真和不合理。
上图，一个简单的例子：
情况1中，表示信纸的线条和表示信封的线条结构上有重合，但是没有隐藏任意一个部分；
情况2，隐藏了表示信纸的线条的一部分，隐藏的部分是下方信纸盖住信封的区域。这时候表现出的效果是，信纸从信封中抽出，盖住了信封打开的那部分；
情况
3.线条风格一致。
即使用圆角的都使用圆角，使用尖角的都使用尖角，两者混合的，混合比例要保持一致。
线性图标的风格表现靠的就是层次的表现和线条的特质，通过控制这两部分就能保证风格一致性。
上图，是一套风格极其一致的线型图标。它们除了线条粗细严格控制和逻辑形体表达方式一致之外，最重要就是线条的走向风格一致。可以观察到，它们几乎都使用了直角的拐角，严格限定了弧线的使用，除非必须使用外都用了直角和直线表现。
上图，一套风格一致的图标，配合部分面片错位的一种线型图标的表现方式。它们在线条上的处理方式也严格遵守了走向一致的表现手法。除此之外就是对外围主体和内部细节使用两种粗细线条的表现。
第二种：阴阳面片图标。
这种图标通过面片的方式来表现形体。大形体中会有多个面片构成，面片之间会有交叠，但只会显示交叠部分结构上层，被盖住的下层部分不显示。在上层和下层交叠区域周边保持有一定宽度的间隙。实际上是镂空纯色图标内部一些结构来表现整体结构。镂空的部分和实体面片的部分形同阴阳结构，因此称为阴阳图标。
上图，《原神》主菜单的选项图标使用了这种样式。
设计这类图标时应该注意的问题：
1.形体表现准确，面片结构的上下层关系逻辑明确。
图标本身从轮廓到整体的结构都应该明确简洁的表现想要表达的含义。需要从面片之间的上下层逻辑结构去理清，不然也会出现如同线型图标中线条交叠时出现的一样问题。
上图。将上条中的示例更改为阴阳图标。
情况1，没有把逻辑上上下层应该隐藏的部分隐藏，也没有将交叠区域周边留出空隙；
情况2，将信纸上半部分作为逻辑上层，其面片与信封打开部分面片进行了交叠，对交叠部分的信封做了隐藏，并沿着信纸的边缘将两者交叠区域做了间隙。即信纸上半部分面片入侵了信封打开部分的面片。信纸下半部分和信封的下部也做了类似处理，但情况却是信纸下部面片入侵了信封下半部分。层级逻辑关系明确，图标形体表达恰到好处；
情况3，信封整体都被作为逻辑上层面片处理，入侵了信纸的全部区域。信纸只露出未被入侵的区域。对于信封本身，则通过镂空的中间区域来表现信封打开后露出的内部面。
上两图，某款游戏的界面局部，使用阴阳图标画法，但是从第二个图里看到，只有一二两个图标比较严格遵守了这种画法的准则，其他几个则使用颜色来进行区分，并未使用严格的阴阳图标画法。就导致整个系列的图标风格不够一致。
2.面片的轮廓线条走向风格一致
这个注意点和线型图标对于线条的走向风格相似。
3.
面片间隙指的是区隔面片结构的一个缝隙。在只有一个颜色的阴阳图标里，除了隐藏交叠区域的下层面片外，还需要沿着上层面片对交叠区域向外做出缝隙，如此才能从视觉上区分出上下层。在一整套同样的面片图标中，这个间隙宽度显得格外重要，同理于同线型图标的线条宽度。
上两图，游戏《巫师3》界面中出现的矢量化图标，使用的手法是典型的阴阳图标画法，所有的该类型图标均使用统一的间隙来表现图标所表示物件的内部结构。作为造型写实的图标，在多个图标同时出现时并没有出现风格上的混乱，间隙一致是一个很重要的原因。
4.避免用形状相交的方式来表现
形状相交指的是图标内部的两个结构面片交集显示，余集镂空。
第一，这种方式是一种技术上比较偷懒的方式，制作呈现就会显得粗糙；
第二，这种方式对于面片的交代比较混乱。
阴阳图标的逻辑基础是上层显示，下层隐藏。实际上是通过镂空与否来表达层级的顺序的。但形状相交则会在同一面片上同时出现镂空和显示两种形态，对于面片的层级结构是一种双重标准的显示逻辑。应尽量避免这种表现形式。
上图，左边的图标的绘制方式是典型的形状相交方式，对于图标本身表达的“打印机”的内部细节结构表现不尽如人意。右边是把该图标通过阴阳图标画法调整后的结果，可以清楚直接的看到打印机的内部结构，即使图标被缩小到很小尺寸，依然会有较高识别度。
第三种：彩色扁平化图标。
这类图标可视为上一种图标的延伸。表示各个结构的面片可以通过颜色和明暗度来区分，而无需通过阴阳和缝隙来区分结构，所以这类图标很少存在间隙。如果细部结构有明暗区分，则可以衍生一种逼近写实图标的扁平化写实图标。再者，面片上的颜色通过渐变也可达成弱写实效果。
设计这类图标时应该注意的问题：
1.颜色使用应该谨慎，同一套图标内的色彩应控制在一定范围内。
由于是一种彻底和直接的扁平化表达，这种图标虽然有比线型图标和片面图标多了色彩维度的表达，但在设计过程中仍然需要谨慎控制。本来这种表现方式是去除了各种表现质感方式的视觉杂音后对设计本身的直接表现，所以再次加入颜色这一表现维度后，应努力避免增加本来要去除的视觉杂音。应该保持它们干净利索的视觉语言。通常来讲，这类图标的色彩指定应根据其产品色去延伸和设定。一般不应该在同一个图标内使用超过三种色相。
上图，印象笔记的一些扁平化图标的设计。这是典型的彩色扁平化图标，设计师严格限定图标用色。对于复杂结构的图标也只是增加了不同明度和饱和度的差别，以及灰度色来。这种色调可以保证一系列图标风格的一致性，这些色相也是印象笔记产品本身的产品色。
上图，谷歌设计规范中对于色彩使用的限定法则
2.如果表现弱写实效果，应该明确光源方向。
有时候会在纯色的基础上，在一些区域模仿矢量化的阴影。这种阴影能让这种扁平化的设计具备立体语言。从视觉逻辑上讲，这也是把人眼对现实的认知映射到抽象化图形中去的一种模仿措施，所以就应该考虑美术上的合理性，最基本的合理性就是光源的设定。
上图，谷歌旗下所有产品有着高度一致的设计风格。他们最为人赞赏的一点就是设定了一套极为细致的设计规范。其中，对于图标内部结构中的投影也做了严格的规范。正是这种严谨的规范造就了高度统一的企业产品设计风格。
上图，谷歌设计规范中对于图标内部表示立体结构时投影方向的规定。这是一种对光源方向的规范性做法。
通过这三种基本的分类，可以组合出很多种表现方式：
上图，把线型和面片组合，再融合进色彩以及渐变而成的独特风格
上图，线型图标加入少量颜色面片的风格。
上图，游戏界面中对矢量图标的应用则有更多表现形式，《死亡循环》顶部的菜单图标就是以面片化矢量图标为基础加上纹理细节效果做出来的。
这三种矢量图标，以及所有的组合类型，都有几个共同的需要注意的问题：
1.应尽量通过基本型的组合来构成型体
基本型指的是标准图形：正圆形，矩形，正多边型等。然后通过对基本型的组合来制作想要的矢量图标型体。
上图，一系列用基本型正圆进行造型的方式
有的人可能会说，我徒手矢量绘制不是一样可以做出来吗？
其实问题的根本就在造型控制上。我们可以从造型维度上把矢量图标再行分类，那就是狂放型和规整型。这两个分类也是存在于同一个轴向的两个极端，所有的造型都在这两个极端中间分布：
先从两个极端出发来看下做得比较好的例子是怎么做的。
第一个例子是狂放型的：
上图是《羞辱2》中主角的升级界面，出现了很多矢量图标。这种造型的矢量图标贴合了整个游戏蒸汽朋克，魔法科技的世界观，是一种典型的狂放型造型手法。但是如果我们把界面中的某些图标进行解剖后会发现:
它们基本上都是在基础图形的组合基础上加入少量徒手绘制的图形构成的。越抽象化的图形，对于基本型的依赖度越高，对于人物头像等其他比较具象性的则徒手绘制的依赖性越高。
可以看到《羞辱2》这款游戏整体的美术风格中较多使用刚硬的线条，通常会有比较锐利的拐角。矢量图标中表现形象化的那部分的线条走向也遵循了这种画法。极少使用到圆润的线条和拐角。
第二个是过度型的例子，这个例子出现在《巫师3》中，这个游戏的世界观是中世纪，带有魔幻色彩，界面整体走向比较简约和扁平，因此出现大量矢量图标。但它的图标造型比较拘谨写实，多使用比较纤细的结构。在本文的造型轴里算是典型的过度型造型，既不狂放，又没有抽象化到一个极端：
上图为《巫师3》中的角色技能界面。左上角的菜单图标和界面左部，中部右部表示技能的图标均使用了矢量图标。由于这些图标相对上一个例子中更直接表现了图标描绘的物体的形体本身，没有再多的质感修饰，所以可以直观感受到它们型体的绘制方式。也是抽象图形由基本图形组合而成，形象图形由徒手绘制方式产生。配合成熟的排版，非但没有导致过多图标造成的混乱，反而确保了整个界面体现出的一种严谨，利索的设计风格。
最后是一个规整型的例子，这个例子出现在《战地1》中，虽然它的世界观设定在一战，但是界面设计极其简约，可以说从视觉语言上做到了极度抽象与归纳。因而搭配出现的矢量图标也就是一个极端规整的风格：
上图是《战地1》中的再生界面，底部一排基本无法通过抽象化表现的枪械图标之外，全部用的是规整抽象而且含义准确的矢量图标，这些图标都是由基本图形构成的。
从上边三个例子可以看到一个规律，在矢量图标所有类型的造型中，都需要用到基本型去构成。或者是构成基本图形后，在此基础上添加各自风格的徒手绘制图形，或者是全部由基本型去构成。
基本型作为一种最基础的标准几何形体，是构成所有几何图形的基础，几乎任何几何图形都会给人以规整的美感。在自然界很少有标准的几何图形，但是它们都存在一定的几何造型和比例，人从自己的视角出发，提炼出了标准几何图形。狂放型的造型是人对天然物的视觉映射，规整型则是人对人造物的视觉映射。通过抽象化的型体可以去隐喻更多的含义，也就有了抽象化的表达。在用到矢量图标这种高度抽象化的视觉语言符号时，人内心对应的就是人造物，抽象化，信息含量高等等暗示。这时候使用规整的几何图形就更能符合人对这一视觉语言的预期。
在纯粹使用图形去表现的视觉语言中，“科技感”对人造图形的这种暗示规律使用最为极端典型：
上图为典型的科技感界面图形。这里只使用了非常抽象的线条，点等图形就表现出了非常强烈的科技感视觉语言，这是因为这些图形元素在我们心理上映射的就是，高科技，精密，灵敏，科幻等等感受。
2.规范尺寸
在界面和图标的设计过程中，需要自始至终秉持精确设计的观念。精确设计观念对尺寸，间距等有很精准的要求。也是在视觉上对图标进行规范的最底层要求。
上图，精确设计可以有效提高实现还原度
在矢量图标中则有一些自己的尺寸规律。
以面片风格的图标为例，它有两个维度上的尺寸，一个是视觉尺寸，就是人眼看到视觉影像后按照经验默认认定的尺寸；一个是实际切图尺寸，是切实存在的一个尺寸度量，也可以称作物理尺寸。为了规范视觉上的统一，视觉尺寸需要做到基本一致，一整套同类型图标应该保持基本的视觉尺寸一致；而物理尺寸则是为了程序实现的便捷进行考虑的。
首先，视觉尺寸受图标本身占领的像素范围影响，图标本身的型体可能遵守了物理尺寸，但视觉上可能会显小，造成视觉尺寸的不一致：
上图所示的两个图标，由于造型的问题，两者占领有效像素相对物理尺寸的比例不同出现视觉尺寸不一致。左边的气泡相对物理尺寸，有效像素过于集中在中间区域，四周空隙过大；右边的鞋子图标的有效像素则过于分散，在右侧和下侧逼近物理尺寸边缘的地方过于拥挤，但左下偏中间的区域和左上角则太空，整体架构过大又过空。这些原因直接导致两者从视觉尺寸上不一致。
上图是修正后的两个图标，除了设计上增加了趣味性的元素之外，还对它们做了有效像素撑满物理尺寸的处理。即主体造型更胖，四边相对物理边缘尺寸的间隙更一致。做了这样处理后，两者在视觉尺寸上更接近相同，也就更统一。
当然，由于矢量图标本身的局限性，不可能在每一个图标上对这种规范做到尽善尽美，在限定的表达和风格范围内尽量做到一致即可。
在结构较复杂的图标中，则有另一种尺寸规范需要注意，谷歌视觉规范中对此的要求可以帮助大家理解这点：
这个规范可以视作是对物理尺寸和视觉尺寸做了非常精细的规定。同时，如果整套图标中有统一衬底的话，可将衬底视作物理尺寸，衬底上的具体图标则是视觉尺寸。有时候为了视觉上的美感，会硬性要求具体图标的尺寸范围，从而在衬底和图标之间做出固定间隙使整个组合起来的图标看起来不堵塞。这个范围可以看作本文提到的视觉尺寸。
3.线条走向风格严谨
这条其实在前文几个例子中有提到过。简单说就是图标本身的线条走向风格需要有一致性。上文中提到过的《羞辱2》《巫师3》《战地1》，都是通过用有各自特色的面片形体风格来遵循出自己风格的。
除了风格上的考虑之外，这也是保证图标美感的基础。这就是几何美感在线条上的体现。
上图，一个简单的矢量图标示例，左边是这个图标视觉上的样子，右边是它的内部基本型的构成。可以直观看到，这个简单的图标是由两个同心正圆和一个等腰三角形组合而成。但是感觉左边的视觉示例图标似乎有哪里不对。
上图，是经过调整后的效果，从右边的形状组合来看，并没有改变它的基本构成，只是调整了等腰三角形两侧的顶点，整个图标看起来就舒服了很多。
上图，顶点处放大，可以看到调整的细节：把顶点放在外围正圆弧线的切点，使三角形的左边腰成为从该点出发的一条切线。右边的顶点做了同样的调整。
为什么把顶点和路径方向放在切线上会让人感觉更舒服？这就是几何美感的作用。
4.对齐像素
矢量图标是最为赤裸展现本体含义的的风格。也就意味着它的每个细节都会不加掩饰的展现在受众的眼中。如果一个图标因为像素没有对准而导致视觉上的问题，诸如识别性，品质这些基础问题，那么在其他方面做再多问题都是白搭。虽说随着技术的发展，现在的显示设备在像素颗粒上越来越密集，人眼越来越无法直接区分像素级的问题，但对像素的精确控制，不管作为一种从技术实现上的要求还是从美术层面的要求，都潜移默化的影响着设计师对于品质管控的基础水平。
不对齐像素会出什么问题？
第一，品质感崩坏。一个原本极为讲究的图标，一旦落入像素不对齐的处境，其品质将大打折扣。
就像前文所提到的，一些细节，玩家不会像我们那样用极其专业和精准的眼光去锁定，他们只会感到哪里不对。除了玩家，非设计专业的策划，产品经理等等，如果看到你的设计稿然后提出一些诡异的修改意见时，你就该意识到，他们一定注意到某些因为细节引起的问题了，但是由于他们对专业认识的缺乏，并不能准确和直接指出问题所在。这时候就应该透过他们所提出的诸如“这个形状不是很好看”，“这样好像不是很好”，或者“要不你再调调看？”之类看似主观的需求修改意见去挖掘真正的需求点所在。而像素是否对齐则是这些问题里最常见也最不容易被直接指出的问题。
上图，同一个控件中出现的图标，一个是对齐像素的效果，一个则没有对齐。在很多人看来似乎并没有差别，但对设计师来讲差异非常明显。
第二， 无法精确控制图标的线条，细节以及结构。没有落在像素点上的锚点和曲线是很难被控制并且调整成你所期待的样子的。
就以那个切线的例子来说，没有在整像素的顶点，就无法准确定位切线位置。还有一种情况是，主体都落在整像素上，但一些细节不能落在整像素上，如果强制对齐，则会造成对图标型体的破坏。这种情况是一种例外。对于一些基础图形组装的图标，一般也都会对准像素，对于型体的控制也就更好。
上图，严格控制像素不意味着每个锚点都需要精确落到整像素上，应该以图标整体的造型为第一优先。照顾到造型的前提下，图标内部的某些顶点可以允许在非整像素上。
说了那么多规则，有人可能会问，这些规则套在设计师头上，会不会导致设计师根本没有发挥余地？我想说的是，设计师的工作本身就是戴着镣铐跳舞，毫无限定的情况下反而会限制设计师的发挥。设计应该是一种理性的行为，我们本质上是通过总结人类视觉乃至心理的规则来达成设计的目的的。就像对一个项目的设计管理需要一整套成体系的设计规范一样，我们需要有合理的出发点，可执行的规律，才可能做出优秀和受玩家欢迎的设计。
最后，用来自工业光魔艺术总监Alex Jaeger的访谈截图作为结尾：
以上就是本文全部内容。
欢迎点击下方名片关注本号
往期推荐：
本文来自微信公众号“COTA五号”作者：欧型兔（ID：cotadesign）。大作社经授权转载，该文观点仅代表作者本人，大作社平台仅提供信息存储空间服务。
