产品中图形语言规范化的意义与过程.pdf

产品中图形语言规范化的意义与过程 现在随着互联网企业的发展与业务的拓展，随着时间的推移，一个公司的产品可能将越来越丰富 多样，同样每一个产品随不断的功能完善和扩展，随着一个产品的“长大”产品内所需要用到的图标 也必然会越来越多，这时候众多产品形象的呈现、产品内图标等视觉原素的表现，如何能与整个产 品或公司的战略计划相适应，这时候在图形语言的视觉呈现，语义表达、识别性等层面就需要作一 个全面细致的考虑了。 我们来看几个典型的例子，回顾一下 Adobe 产品系列的成长过程， 从2005年 Adobe 收购了原最大 的竞争对手Macromedia公司后，它的产品线得到了极大丰富， 而后在2002年Adobe确 立了 Creative Suite概念后，后续的新产品持续推出，庞大的产品线以一种什么样的展现方式呈现 在用户面前便成为了一项非常重要的课题。下图中我大致的列了一下Adobe产品logo的一个进化转 变过程： 产品阵容强大的Adobe帝国在CreativeSuite 3发布的时候为旗下全部产品Logo进行一个色环划分图 ，很好的呈现出各产品logo的色彩关系和一个完整的用色体系。 我们再看一个例子，Apple公司在2010年和2011年先后将itunes与App store的Logo作出了比较重大 的调整，到Max OS Lion版本时，两大平台级的产品新形象同时展现在用户Mac的Dock上。虽无准 确的官方答案，但从一个是整个Apple产品资源应用来源和一个是娱乐内容来源的的两个具有类似 性质的商业平台产品来看，它们显然是被Apple寄予相当大期望，在感观上看来，它们在被赋予更 厚重、大气的形象这一改变，能够很好的服务于其公司的商业战略。 另外itunes 10的发布后侧栏的图标全部变成了单色，这一变化我认为是为了突出Store的资源核心 区域，强调产品的平台性，和上述的分析一样，这个视觉表现层面的调整同样是为了整个产品的资 源商业战略服务的。 那现在回到我们自己的产品，现在“我的阿里”作为一个网商用户的得力助手，用户的家，“我的阿里” 内容与应用在日益的增长，系统越来越庞大，同样网站的视觉的图形语言的整理，解决原来积累已 久的视觉表现“乱象”也日益的紧迫。 在“我的阿里”视觉元素整理的第一步，众多应用图标是头一个切入点，我们从图标的含义，分类， 尺寸规格、设计规则，风格表现等几个方面进行一个整体方向的规划，总结一套设计指南。 ■ 在图标的分类上，我们将网站图标分为以下三类： 一 产品图标 （Logo） 它是一款产品在品牌层面上的定义，指一个产品系统形象、定位和诉求的集中图形化表现，产品图 标（Logo）起到产品或公司识别推广作用，通过形象的图形标识让用户认识、记住并熟识一个产品 。 产品图标设计原则： 1 能很好的诠释出该产品所承载的功能 和 所要向用户传达的产品价值和形象； 2 图形容易被用户所记忆、熟知，而且有较强的排它性（不易和其它图标混淆）。 二 产品界面中的功能、工具图标 在一个产品界面中，用概括精炼的形象来表示某一类功能或操作集合的功能性图形标识，常会有成 组有规律的在某一功能模块中出现。色彩造型表现可以精致富有表现力，也可以简洁明了，质感 单纯。 功能、工具图标设计原则： 1 表意清晰明了，采用大家均已接受的特定含义的元素图形； 2 视觉体验统一，视觉语言自成体系； 一个功能模块里面的图标尺寸要有较好的视觉平衡性； 一功能模块内甚至整个产品的图标的质感、色彩饱和度要统一； 成套的多个图标内，图形语义要有较好的一致性。 3 需要注意图标各层面意义上的继承性问题，避免让用户造成识别上的困难。 三 图形符号 一般表现为直接的操作按钮或标明该操作的辅助标识符号，图形表现为简洁明了，用色简洁、扁平 。 ■ 在整站图标尺寸规格方面，虽然Web 页面的图标不需要像操作系统或者客户端软件那样，对图标 尺寸有着 严格的尺寸限制，但为了网站的视觉体验的规范性和统一性，“我的阿里”图标规范中根据以往图标 各尺寸的使 用情况来约定3种常用尺寸：48×48 pix 、32×32 pix 、16×16 pix， 以后整站的图标根据各自的位置和需要，将有序的根据规则加上相应尺寸的图标，这样网站在图标 符号展示层 面上将会给用户留下一个规范、专业的印象。 ■ 在图标的设计过程中还需要注意下面这些问题： 上图第一排蓝色的4个图标看起来会显得大小尺寸参差不齐，这是因为虽然觉得尺寸可以是一样的 ，但是外轮廓饱满的实心图形在给人的视觉感受上会产生放大效应，而第二排深色的4个图标大小 看起