产品中图形语言规范化的意义与过程
openkk 13年前
<div id="news_body"> <p style="text-align:center;"><a><img style="width:545px;height:192px;" alt="产品中图形语言规范化的意义与过程" src="https://simg.open-open.com/show/78a877eadbd75b62854543092b2a434e.jpg" /></a></p> <p> 现在随着互联网企业的发展与业务的拓展，随着时间的推移，一个公司的产品可能将越来越丰富多样，同样每一个产品随不断的功能完善和扩展，随着一 个产品的“长大”产品内所需要用到的图标也必然会越来越多，这时候众多产品形象的呈现、产品内图标等视觉原素的表现，如何能与整个产品或公司的战略计划相 适应，这时候在图形语言的视觉呈现，语义表达、识别性等层面就需要作一个全面细致的考虑了。</p> <p> 我们来看几个典型的例子，回顾一下 Adobe 产品系列的成长过程， 从 2005 年 Adobe 收购了原最大的竞争对手 Macromedia 公司后，它的产品线得到了极大丰富， 而后在 2002 年 Adobe 确立了 Creative Suite 概念后，后续的新产品持续推出，庞大的产品线以一种什么样的展现方式呈现在用户面前便成为了一项非常重要的课题。下图中我大致的列了一下 Adobe 产品 logo 的一个进化转变过程：</p> <p style="text-align:center;"><a><img style="width:567px;height:375px;" alt="产品中图形语言规范化的意义与过程" src="https://simg.open-open.com/show/65752777522b655c6f74dd929d605ba7.jpg" /></a></p> <p> 产品阵容强大的 Adobe 帝国在 CreativeSuite 3 发布的时候为旗下全部产品 Logo 进行一个色环划分图，很好的呈现出各产品 logo 的色彩关系和一个完整的用色体系。</p> <p style="text-align:center;"><a><img style="width:560px;height:420px;" alt="产品中图形语言规范化的意义与过程" src="https://simg.open-open.com/show/78ee56b870f23419be6b28e48db34578.jpg" /></a></p> <p> 我们再看一个例子，Apple 公司在 2010 年和 2011 年先后将 itunes 与 App store 的 Logo 作出了比较重大的调整，到 Max OS Lion 版本时，两大平台级的产品新形象同时展现在用户 Mac 的 Dock 上。虽无准确的官方答案，但从一个是整个 Apple 产品资源应用来源和一个是娱乐内容来源的的两个具有类似性质的商业平台产品来看，它们显然是被 Apple 寄予相当大期望，在感观上看来，它们在被赋予更厚重、大气的形象这一改变，能够很好的服务于其公司的商业战略。</p> <p style="text-align:center;"><a><img style="width:548px;height:161px;" alt="产品中图形语言规范化的意义与过程" src="https://simg.open-open.com/show/5fc7cb7f5a9f4743f5250f3cce3e9893.jpg" /></a></p> <p> 另外 itunes 10 的发布后侧栏的图标全部变成了单色，这一变化我认为是为了突出 Store 的资源核心区域，强调产品的平台性，和上述的分析一样，这个视觉表现层面的调整同样是为了整个产品的资源商业战略服务的。</p> <p style="text-align:center;"><a><img style="width:569px;height:376px;" alt="产品中图形语言规范化的意义与过程" src="https://simg.open-open.com/show/101a00312637965858f30a3148153bf1.jpg" /></a></p> <p> 那现在回到我们自己的产品，现在“我的阿里”作为一个网商用户的得力助手，用户的家，“我的阿里”内容与应用在日益的增长，系统越来越庞大，同样网站的视觉的图形语言的整理，解决原来积累已久的视觉表现“乱象”也日益的紧迫。</p> <p> 在“我的阿里”视觉元素整理的第一步，众多应用图标是头一个切入点，我们从图标的含义，分类，尺寸规格、设计规则，风格表现等几个方面进行一个整体方向的规划，总结一套设计指南。</p> <p> 在图标的分类上，我们将网站图标分为以下三类：</p> <p> 一 <strong>产品图标 </strong>（Logo）</p> <p> 它是一款产品在品牌层面上的定义，指一个产品系统形象、定位和诉求的集中图形化表现，产品图标（Logo）起到产品或公司识别推广作用，通过形象的图形标识让用户认识、记住并熟识一个产品。</p> <p> <strong>产品图标设计原则：</strong></p> <p> 1 能很好的诠释出该产品所承载的功能和所要向用户传达的产品价值和形象；</p> <p> 2 图形容易被用户所记忆、熟知，而且有较强的排它性（不易和其它图标混淆）。</p> <p> 二 <strong>产品界面中的功能、工具图标</strong></p> <p> 在一个产品界面中，用概括精炼的形象来表示某一类功能或操作集合的功能性图形标识，常会有成组有规律的在某一功能模块中出现。色彩造型表现可以精致富有表现力，也可以简洁明了，质感单纯。</p> <p> <strong>功能、工具图标设计原则：</strong></p> <p> 1 表意清晰明了，采用大家均已接受的特定含义的元素图形；</p> <p> 2 视觉体验统一，视觉语言自成体系；</p> <p> 一个功能模块里面的图标尺寸要有较好的视觉平衡性；</p> <p> 一功能模块内甚至整个产品的图标的质感、色彩饱和度要统一；</p> <p> 成套的多个图标内，图形语义要有较好的一致性。</p> <p> 3 需要注意图标各层面意义上的继承性问题，避免让用户造成识别上的困难。</p> <p> 三 <strong>图形符号</strong></p> <p> 一般表现为直接的操作按钮或标明该操作的辅助标识符号，图形表现为简洁明了，用色简洁、扁平。</p> <p> 在整站图标尺寸规格方面，虽然 Web 页面的图标不需要像操作系统或者客户端软件那样，对图标尺寸有着</p> <p> 严格的尺寸限制，但为了网站的视觉体验的规范性和统一性，“我的阿里”图标规范中根据以往图标各尺寸的使</p> <p> 用情况来约定 3 种常用尺寸：48×48 pix 、32×32 pix 、16×16 pix，</p> <p> 以后整站的图标根据各自的位置和需要，将有序的根据规则加上相应尺寸的图标，这样网站在图标符号展示层</p> <p> 面上将会给用户留下一个规范、专业的印象。</p> <p> 在图标的设计过程中还需要注意下面这些问题：</p> <p style="text-align:center;"><a><img style="width:569px;height:234px;" alt="产品中图形语言规范化的意义与过程" src="https://simg.open-open.com/show/010e3da0cf586430a5e6d4fd33c2659e.jpg" /></a></p> <p> 上图第一排蓝色的 4 个图标看起来会显得大小尺寸参差不齐，这是因为虽然觉得尺寸可以是一样的，但是外轮廓饱满的实心图形在给人的视觉感受上会产生放大效应，而第二排深色的 4 个图标大小看起来则会更加协调一些。在下图可以看到，外轮廓饱满的图形进行了一定的边缘收缩，来与其它图形达到视觉均衡。</p> <p style="text-align:center;"><a><img style="width:555px;height:220px;" alt="产品中图形语言规范化的意义与过程" src="https://simg.open-open.com/show/510acd2a70dc37b8aa4d7c248a974e0a.jpg" /></a></p> <p> 这要求设计图标在符合约定的图标尺寸的同时，需要注意多个图标的视觉均衡问题，在制作成套图标的时候，根据这个规律来选择留白的空间比例。</p> <p style="text-align:center;"><a><img style="width:560px;height:255px;" alt="产品中图形语言规范化的意义与过程" src="https://simg.open-open.com/show/6d6e53c58800e88508e742f8b1a1d527.jpg" /></a></p> <p> 此外单个图标要很好的把握外轮廓与图形形状的均衡关系，构成图标的图形需要尽量的接近一个正方块，使得图形饱满、平衡。</p> <p> 在我的阿里应用图标风格表现方面为了使原来的各业务、应用图标和将来新增的图标能够实现非常好的统一性，我们做出了包括图标视角、构成元素、光源质感、倒角这些方面的约束：</p> <p style="text-align:center;"><a><img style="width:561px;height:264px;" alt="产品中图形语言规范化的意义与过程" src="https://simg.open-open.com/show/57d73d828a41f3260ab23c5b0f84f753.jpg" /></a></p> <p> 图标的绘制视角为所组成物体的正前视角，在必要情况下可以有一定角度的俯视角。这样是既在大原则上保证了整体的统一性，但规则也不至于太过僵硬，仍有相当的空间让设计师去发挥创意。</p> <p style="text-align:center;"><a><img style="width:564px;height:257px;" alt="产品中图形语言规范化的意义与过程" src="https://simg.open-open.com/show/fd7cc2c27837309555bf26cdb54ec373.jpg" /></a></p> <p> 整个 icon 元素为 3 个以下，最多为 3 个元素构成 ，组合方式以一个主体元素 配合一个（最多两个）辅助元素。避免众多的图标，各自的图形符号多寡不一，避免在图形组合方式上造成的不统一。</p> <p style="text-align:center;"><a><img style="width:520px;height:210px;" alt="产品中图形语言规范化的意义与过程" src="https://simg.open-open.com/show/bd64be76aceb2eb2f4216f6aeeef5921.jpg" /></a></p> <p> 图标的光源方向是正上方，图标颜色渐变方向是垂直方向的线性渐变，颜色从上到下由浅到深。图标的颜色渐变幅度较小，偏扁平感，渐变幅度不要太大以至质感过重。</p> <p style="text-align:center;"><a><img style="width:564px;height:207px;" alt="产品中图形语言规范化的意义与过程" src="https://simg.open-open.com/show/3b9ec1c03304fa391fcd68638e986c8a.jpg" /></a></p> <p> 应用图标约定的三种不同尺寸 icon 的倒角的大小，以便在集中展示的时候在细节支出依然有良好的一致性。</p> <p> 经过以上这样一套设计指南的规范、约定能尽可能的保证原来老图标和后期新增加的都能有一个规则可寻，对整个网站整个产品的品质方面，用户友好性方面能起到一个积极的作用。</p> <p> 这里只从应用图标这一切入点介绍了产品视觉元素统一性的解决方案，当然网站还有其它各类控件模块，同样也需要实现类似的标准化统一体验，后面仍有许多工作需要开展。</p> </div>