+18033634268

资讯中心
INFORMATION CENTER

网站风格指南(style guide)

风格指南源自于印刷领域;在Web领域,它同样体现出了巨大的价值。

好的风格指南看上去就像是网站的自传,它能够让其他人与之进行互动,从而进一步了解并扩展这个网站。风格指南应该包含相关人员在网站项目过程中所积累的知识与经验,并以直白的方式描述出来;它在设计系统的层面上诠释了项目过程中的各种设计思路,使团队中的其他设计师,或是将来的团队,能够更好的了解项目,展开工作。

界面当中的所有元素都应当具有的普遍特质,作为设计体系的一部分,它们都应该体现出一致的设计思想。当人们使用不同类型的设备访问你的站点时,保持视觉风格及体验的一致也是很重要的。

1.概述

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

2.布局

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

3.品牌识别

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

4.文字排印

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

5.导航

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

6.HTML元素

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

7.媒体文件

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

8.其他资源

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

9.界面协调性画布

将以上这些内容汇总到一张大画布中。所谓画布,可以是图片格式,当然最好是HTML页面的形式,因为这样可以更加灵活的承载文案和HTML或CSS代码方面的内容,使前端开发人员可以直接根据页面元素的设计规则来使用对应的代码片段。另外,将所有涉及到视觉风格的内容都放在同一张画布中,也可以使设计师能够很容易的对页面元素在整体上的协调性进行检视。

10.UX文档

这部分内容的命题确实不小,其中需要包括项目进行到目前为止所产出的交付物,例如站点地图、线框原型、高保真原型、用研文档等。这些产品早期的交付物可以在接下来的设计与开发流程中对功能、视觉、交互方式的定义起到重要作用。

使用风格指南

创建风格指南只是第一步,使它在实际工作中发挥价值才是最重要的。将指南附在项目管理工具中,或是邮件给项目组相关的人员;如果你不确定哪些人是真正“相关”的,那么让项目leader或是产品经理来做这件事也好。总之,我们要通过风格指南来实现的目标是团队协作,让大家一起付出努力来完成项目。

上一篇:如何评判一个网站的质量

下一篇:CSS3离我们还有多远

返回:BLOG首页

在线留言

ONLINE MESSAGE

  • 我们将在1个工作日内回复,资料会保密处理。

联系我们

CONTACT US

官方微信

廊坊市纵横网络技术有限公司

手机:18033634268
座机:0316-5556008

Copyright 2012-2016 纵横网络 保留公司所有权利.