互联网产品设计:产品视觉元素统一性的解决方案(2)

三 图形符号

一般表现为直接的操作按钮或标明该操作的辅助标识符号，图形表现为简洁明了，用色简洁、扁平。

■ 在整站图标尺寸规格方面，虽然Web 页面的图标不需要像操作系统或者客户端软件那样，对图标尺寸有着

严格的尺寸限制，但为了网站的视觉体验的规范性和统一性，“我的阿里”图标规范中根据以往图标各尺寸的使

用情况来约定3种常用尺寸：48×48 pix 、32×32 pix 、16×16 pix，

以后整站的图标根据各自的位置和需要，将有序的根据规则加上相应尺寸的图标，这样网站在图标符号展示层

面上将会给用户留下一个规范、专业的印象。

■ 在图标的设计过程中还需要注意下面这些问题：

上图第一排蓝色的4个图标看起来会显得大小尺寸参差不齐，这是因为虽然觉得尺寸可以是一样的，但是外轮廓饱满的实心图形在给人的视觉感受上会产生放大效应，而第二排深色的4个图标大小看起来则会更加协调一些。在下图可以看到，外轮廓饱满的图形进行了一定的边缘收缩，来与其它图形达到视觉均衡。

这要求设计图标在符合约定的图标尺寸的同时，需要注意多个图标的视觉均衡问题，在制作成套图标的时候，根据这个规律来选择留白的空间比例。

此外单个图标要很好的把握外轮廓与图形形状的均衡关系，构成图标的图形需要尽量的接近一个正方块，使得图形饱满、平衡。

■ 在我的阿里应用图标风格表现方面为了使原来的各业务、应用图标和将来新增的图标能够实现非常好的统一性，我们做出了包括图标视角、构成元素、光源质感、倒角这些方面的约束：

图标的绘制视角为所组成物体的正前视角，在必要情况下可以有一定角度的俯视角。这样是既在大原则上保证了整体的统一性，但规则也不至于太过僵硬，仍有相当的空间让设计师去发挥创意。

整个 icon 元素为 3个以下，最多为3个元素构成 ，组合方式以一个主体元素 配合一个（最多两个）辅助元素。避免众多的图标，各自的图形符号多寡不一，避免在图形组合方式上造成的不统一。

图标的光源方向是正上方，图标颜色渐变方向是垂直方向的线性渐变，颜色从上到下由浅到深。图标的颜色渐变幅度较小，偏扁平感，渐变幅度不要太大以至质感过重。

应用图标约定的三种不同尺寸icon 的倒角的大小，以便在集中展示的时候在细节支出依然有良好的一致性。

经过以上这样一套设计指南的规范、约定能尽可能的保证原来老图标和后期新增加的都能有一个规则可寻，对整个网站整个产品的品质方面，用户友好性方面能起到一个积极的作用。

这里只从应用图标这一切入点介绍了产品视觉元素统一性的解决方案，当然网站还有其它各类控件模块，同样也需要实现类似的标准化统一体验，后面仍有许多工作需要开展。