创建层叠化的风格指南

　　回想一下CSS的工作方式。如果你在样式表比较靠前的位置定义了某种全局元素的默认样式属性，那么这些设定就会被与之相关的子级元素所继承，直到你为某些特定的元素添加了更加具体的样式属性。同样的道理，在风格指南中，我们会从最普通的、最具普遍代表性的元素出发，逐渐为细节元素增加具体的规则。

　　道理说了不少，接下来，我们将了解一下创建风格指南的基本步骤与流程。

　　1.概述

　　对项目的简单陈述，包括项目目标及解决方案的介绍。在这部分内容中，你有机会就一些大方向问题与其他成员进行沟通，让他们了解整个项目的重心及着眼点在哪里。同时你还可以对网站所需要具有的风格气质、基调、内容策略进行简要的描述。

　　2.布局

　　页面设计所使用的网格系统、基本的布局情况、页面模块的定位规则等。你要对一些全局性的页面元素的定位进行描述，还有相关的留白规则等。一些典型页面的线框原型也要作为图例出现在这部分内容中。

　　3.品牌识别

　　包括配色方案、全局性的品牌图片、品牌图片的使用规则及约束等内容。

　　4.文字排印

　　介绍网站所使用的文字排印方案，包括字体风格、选取这些字体的理由等。这里还要通过一些具有代表性的具体图示来介绍字体风格与页面上下文环境之间的关系。

　　5.导航

　　全局主导航、二级导航、下拉菜单、分类词条的文字链接、搜索…任何能够帮助用户在站点中进行导航操作的元素都可以归纳到这部分内容中。从这里开始，我们就要逐渐进入细节层面了。导航元素在不同状态下的链接色、背景色等属性的定义也要在这里详细的描述出来，使开发人员能够一目了然。

　　6.HTML元素

　　一些典型元素的HTML标签使用规则，包括标题元素(h1,h2,h3…)、有序列表、无序列表、按钮、表单、字段集(fieldset)、表格等。这份规则清单不需要事无巨细，但要尽量使其具有较高的综合性和代表性;必要的时候可以与前端开发人员配合完成这部份内容。

　　7.媒体文件

　　包括图片、音频或视频文件的使用情景、尺寸限制、显示比例、缓存设置等方面的规则。

　　8.其他资源

　　这部分内容所涉及到的对象基本都属于细节层面了，那些无法归入以上七个类别的、定制化程度比较高的设计元素都可以放在这里。例如，在某些特定的情况下不同模块的呈现方式应该发生怎样的变化，侧边栏的广告规则，搜索出错的处理方式，评论列表的呈现规则，照片集的浏览方式等等。通常，在这一部分内容中，我们可以摸索并归纳出一些复用性较高的设计模式。

　　9.界面协调性画布

　　将以上这些内容汇总到一张大画布中。所谓画布，可以是图片格式，当然最好是HTML页面的形式，因为这样可以更加灵活的承载文案和HTML或CSS代码方面的内容，使前端开发人员可以直接根据页面元素的设计规则来使用对应的代码片段。另外，将所有涉及到视觉风格的内容都放在同一张画布中，也可以使设计师能够很容易的对页面元素在整体上的协调性进行让项目leader或是产品经理来做这件事也好。总之，我们要通过风格指南来实现的目标是团队协作，让大家一起付出努力来完成项目。

　　将风格指南交付给团队成员之后，记得时常在项目的重要环节中谈起这份指南的重要性，使它逐渐成为工作流程甚至是产品文化的一部分。

　　我得承认一点，有时候我确实觉得风格指南这东西有点乏味，没关系，至少我们不能以此作为借口而不去创建它。请相信一点，风格指南对于设计流程以致整个项目的成功会起到关键性的作用。

　　本站原创编译文章。如需转载，请注明：本文来自Be For Web

　　英文原文:

　　http://www.netmagazine.com/features/create-website…

　　译者信息: c7210 - 用户体验设计与代码玩家，现就职于大众点评网产品部UED