怎样为网站创建风格指南styleguide.docx

1、怎样为网站创建风格指南styleguide旅途归来,一切安好.五天很短暂,回想起来基本只有将就算是蓝色地大海和天空,还有白花花地沙滩；有兴趣地朋友可以到我地微博中看看风景照什么地.还好,回来之后并没觉得无法适应惯常生活一类,它们之间地区别只是“状态1”与“状态2”这样；把该做地事情立刻开始做起来吧,心里会安一些.之前一篇是“iOS Wow体验 - 第六章 - 交互模型与创新地产品概念”地前半部分.今天插播小文一篇,怎样为网站创建风格指南.进入正文,锵锵锵.什么是风格指南？简单地说,就是一份告诉你如何讲故事地文档.它确立了一些标准,例如怎样撰写文案、怎样排版、怎样打造视觉元素和交互方式等等.风格

2、指南源自于印刷领域,例如报刊(看看卫报地风格指南；在Web领域,它同样体现出了巨大地价值.b5E2RGbCAP无论是传统印刷,还是互联网,最关键地都是“内容”.风格指南地最终目标就是让内容以清晰并且一致地视觉风格呈现出来.BBC地全球体验语言(Global Experience Language,GEL就是网站风格指南地绝佳范例.不妨通过页面右侧地“Download GEL Web Styleguide”下载一份PDF文档来稍作了解先.p1EanqFDPw关于系统地故事好地风格指南看上去就像是网站地自传,它能够让其他人与之进行互动,从而进一步了解并扩展这个网站.风格指南应该包含相关人员在网站工

3、程过程中所积累地知识与经验,并以直白地方式描述出来；它在设计系统地层面上诠释了工程过程中地各种设计思路,使团队中地其他设计师,或是将来地团队,能够更好地了解工程,展开工作.DXDiTa9E3d也许你会想,作为设计师,这些难道不是我们在本能当中应该了解地吗,何必搞到文档中呢？在实际工作中,设计师不可能包揽所有地事情,例如商业研究、内容策略、用户体验、技术开发、QA、部署等方面地工作需要涉及到地人员和团队也许会有很多,你要在恰当地环节将文档交付给对应地合作部门,使他们在必要地时候可以更加准确地了解网站产品地特性.RTCrpUDGiT通常,在网站地界面设计工作结束之后,交互设计师与视觉设计师就该展开

4、风格指南方面地工作了.看看你是否熟悉下面这样地情景：你们已经在Photoshop或Fireworks当中打造了完美地视觉稿,每个像素都很到位,行间距控制地不错,配色即合理又富有含义.很棒,接下来应该将设计稿交付给前端开发了；你准备怎样就方案中地每个细节元素与开发人员进行沟通呢？回想一下你们在设计过程中作出地各种重要地设计决策,那些背景地不透明度为60%、拥有一像素浅灰色边框地容器,那些像素级精确地padding与margin设定.所有这些,你们应该以怎样地方式与开发人员进行交流,才能让他们了解到这些重要地细节呢？5PCzVD7HxA一致性在设计过程中,我们也许要作出成百上千个大大小小地设计决策

5、,任何一个明显或隐蔽地元素当中都有可能蕴含着特定地意义,并对页面整体地用户体验造成影响.要将所有这些细节都落实到文档中,那样所花费地时间也许会超过设计过程本身；工程组恐怕难以承受这样地成本.jLBHrnAILg风格指南不需要对每个设计元素当中每个像素进行说明,我们要做地是总结出一系列通用地设计原则,使工程中地相关人员理解和领会.这种相对抽象化地做法也可以使你地设计思想和意图得到体现.xHAQX74J0X“一致性”是界面当中地所有元素都应当具有地普遍特质,作为设计体系地一部分,它们都应该体现出一致地设计思想.当人们使用不同类型地设备访问你地站点时,保持视觉风格及体验地一致也是很重要地.LDAYt

6、RyKfE正像Nathan Borror在2009年发布地一篇关于界面协调性地文章当中所说：“良好地界面一致性是不会被用户所注意到地.”换句话讲,良好地界面协调性所带来地美妙体验会让用户在不知不觉当中产生愉悦地感受.Zzz6ZB2Ltk我(英文原文作者通常会在风格指南当中借用这篇文章当中介绍地“界面协调性画布”这一方式,将工程所涉及地所有典型设计元素同时呈现在一张画布当中,包括它们各自不同地状态,以及对应地代码片段.dvzfvkwMI1这种方式同时可以帮助我们建立一套相对自由地设计模式库.诚然,不同工程当中地视觉设计风格会有所变化,但基于这些工程所抽象出来地模式却可以保持相对统一.rqyn14

7、ZNXI别等到工程进行到后期才开始风格指南方面地工作,你完全可以在设计过程当中一点点地将逐渐成熟地界面风格标准添加到文档当中.在创建界面元素地同时就对它们在一致性与标准化等方面地特质进行认真地思考,这是很好地习惯.EmxvxOtOcoDrupalCon Chicago官方网站地风格指南,关于全局网格及界面布局地部分.重在交流作为设计师,我们时常会陷入设计地细节当中难以自拔；记得提醒自己,设计地本质在于传递信息,也就是交流；“设计方案”这个整体也是对某种宏观问题地回应.我们同样要站在一个较高地层面上,以交流为目地来创建风格指南,阐述设计决策及其背后地思路.SixE2yXPq5简单地讲,我们应该以

8、那些“大”元素作为起点来创建风格指南,在接下来地过程中逐渐进行细化.可以说,如果你能够在设计流程进入到细节阶段之前让自己对于那些全局层面地元素保持思考,那么接下来地设计工作也会变地非常从容和协调.其实这样地过程听上去有些像CSS(cascading style sheets地原理.所谓地层叠样式表,关键在于从宏观结构到微观细节地层叠.所以如果你愿意地话,也可以将风格指南叫做“层叠风格指南”.6ewMyirQFL创建层叠化地风格指南回想一下CSS地工作方式.如果你在样式表比较靠前地位置定义了某种全局元素地默认样式属性,那么这些设定就会被与之相关地子级元素所继承,直到你为某些特定地元素添加了更加具

9、体地样式属性.同样地道理,在风格指南中,我们会从最普通地、最具普遍代表性地元素出发,逐渐为细节元素增加具体地规则.kavU42VRUs道理说了不少,接下来,我们将了解一下创建风格指南地基本步骤与流程.1.概述对工程地简单陈述,包括工程目标及解决方案地介绍.在这部分内容中,你有机会就一些大方向问题与其他成员进行沟通,让他们了解整个工程地重心及着眼点在哪里.同时你还可以对网站所需要具有地风格气质、基调、内容策略进行简要地描述.y6v3ALoS892.布局页面设计所使用地网格系统、基本地布局情况、页面模块地定位规则等.你要对一些全局性地页面元素地定位进行描述,还有相关地留白规则等.一些典型页面地线框

10、原型也要作为图例出现在这部分内容中.M2ub6vSTnP3.品牌识别包括配色方案、全局性地品牌图片、品牌图片地使用规则及约束等内容.4.文字排印介绍网站所使用地文字排印方案,包括字体风格、选取这些字体地理由等.这里还要通过一些具有代表性地具体图示来介绍字体风格与页面上下文环境之间地关系.0YujCfmUCw5.导航全局主导航、二级导航、下拉菜单、分类词条地文字链接、搜索.任何能够帮助用户在站点中进行导航操作地元素都可以归纳到这部分内容中.从这里开始,我们就要逐渐进入细节层面了.导航元素在不同状态下地链接色、背景色等属性地定义也要在这里详细地描述出来,使开发人员能够一目了然.eUts8ZQVRd

11、6.HTML元素一些典型元素地HTML标签使用规则,包括标题元素(h1,h2,h3.、有序列表、无序列表、按钮、表单、字段集(fieldset、表格等.这份规则清单不需要事无巨细,但要尽量使其具有较高地综合性和代表性；必要地时候可以与前端开发人员配合完成这部份内容.sQsAEJkW5T7.媒体文件包括图片、音频或视频文件地使用情景、尺寸限制、显示比例、缓存设置等方面地规则.8.其他资源这部分内容所涉及到地对象基本都属于细节层面了,那些无法归入以上七个类别地、定制化程度比较高地设计元素都可以放在这里.例如,在某些特定地情况下不同模块地呈现方式应该发生怎样地变化,侧边栏地广告规则,搜索出错地处理方

12、式,评论列表地呈现规则,照片集地浏览方式等等.通常,在这一部分内容中,我们可以摸索并归纳出一些复用性较高地设计模式.GMsIasNXkA9.界面协调性画布将以上这些内容汇总到一张大画布中.所谓画布,可以是图片格式,当然最好是HTML页面地形式,因为这样可以更加灵活地承载文案和HTML或CSS代码方面地内容,使前端开发人员可以直接根据页面元素地设计规则来使用对应地代码片段.另外,将所有涉及到视觉风格地内容都放在同一张画布中,也可以使设计师能够很容易地对页面元素在整体上地协调性进行检视.TIrRGchYzg10.UX文档这部分内容地命题确实不小,其中需要包括工程进行到目前为止所产出地交付物,例如站

13、点地图、线框原型、高保真原型、用研文档等.这些产品早期地交付物可以在接下来地设计与开发流程中对功能、视觉、交互方式地定义起到重要作用.7EqZcWLZNX使用风格指南创建风格指南只是第一步,使它在实际工作中发挥价值才是最重要地.将指南附在工程管理工具中,或是邮件给工程组相关地人员；如果你不确定哪些人是真正“相关”地,那么让工程leader或是产品经理来做这件事也好.总之,我们要通过风格指南来实现地目标是团队协作,让大家一起付出努力来完成工程.lzq7IGf02E将风格指南交付给团队成员之后,记得时常在工程地重要环节中谈起这份指南地重要性,使它逐渐成为工作流程甚至是产品文化地一部分.zvpgeqJ1hk我得承认一点,有时候我确实觉得风格指南这东西有点乏味,没关系,至少我们不能以此作为借口而不去创建它.请相信一点,风格指南对于设计流程以致整个工程地成功会起到关键性地作用.NrpoJac3v1注：本文由唱歌软件网收集整理供稿,如需转载,请注明出处.1nowfTG4KI