收藏本站|设为首页

您现在的位置: 首页 > 新闻中心 > 建站经验 > 详细内容

若何为网站建树气概指南(style guide)

2012-06-18 09:15 来源: 卓杰科技 www.zhuojie.cc [ ]

还好,回来之后并没感受无法顺应惯常糊口一类,它们之间的区别只是“状况1”与“状况2”这样;把该做的工作马上起头做起来吧,心里会安一些。之前一篇是“iOS Wow体验 - 第六章 - 交互模子与立异的产物概念”的前半部门。今天插播小文一篇,若何为网站建树气概指南。进入正文,锵锵锵。

bbc-Global-Experience-Language-GEL

design-style-guide-grid-web-page

好的气概指南看上去就像是网站的自传,它能够让其他人与之进行互动,年夜而进一步体味并扩展这个网站。气概指南应该包含相关人员在网站项目过程中所堆集的常识与经验,并以直白的体例描述出来;它在设计系统的层面上诠释了项目过程中的各类设计思绪,使团队中的其他设计师,或是未来的团队,能够更好的体味项目,睁开工作。

在设计过程中,我们也许要作出成百上千个年夜巨藐小的设计抉择妄想,任何一个较着或隐藏的元素傍边都有可能蕴含着特定的意义,并对页面整体的用户体验造成影响。要将所有这些细节都落实到文档中,那样所破耗的时刻也许会跨越设计过程自己;项目组生怕难以承受这样的成本。

什么长短格指南?简单的说,就是一份告诉你若何讲故事的文档。它确立了一些尺度,例如若何撰写案牍、若何排版、若何打造视觉元素和交互体例等等。气概指南源自于印刷规模,例如报刊(看看卫报的气概指南);在Web规模,它同样浮现出了巨年夜的价值。

关于系统的故事

也许你会想,作为设计师,这些莫非不是我们在本能傍边应该体味的吗,何须搞到文档中呢?在现实工作中,设计师不成能包揽所有的工作,例如商业研究、内容策略、用户体验、手艺开发、QA、部署等方面的工作需要涉及到的人员和团队也许会有良多,你要在适当的环节将文档交付给对应的合作部门,使他们在需要的时辰可以加倍切确的体味网站产物的特征。

无论是传统印刷,仍是互联网,最关头的都是“内容”。气概指南的最终方针就是让内容以清楚而且一致的视觉气概呈现出来。BBC的全球体验说话(Global Experience Language,GEL)就是网站气概指南的绝佳典型。不妨经由过程页面右侧的“Download GEL Web Styleguide”下载一份PDF文档来稍作体味先。

气概指南不需要对每个设计元素傍边每个像素进行声名,我们要做的是总结出一系列通用的设计原则,使项目中的相关人员理解和体味。这种相对抽象化的做法也可以使你的设计思惟和意图获得浮现。

一致性

凡是,在网站的界面设计工作竣事之后,交互设计师与视觉设计师就该睁开气概指南方面的工作了。看看你是否熟悉下面这样的情景:你们已经在Photoshop或Fireworks傍边打造了完美的视觉稿,每个像素都很到位,行间距节制的不错,配色即合理优拘寄义。很棒,接下滥暌功该将设计稿交付给前端开发了;你筹备若何就方案中的每个细节元素与开发人员进行沟通呢?回忆一下你们在设计过程中作出的各类主要的设计抉择妄想,那些布景的欠亨明度为60%、拥有一像素浅灰色边框的容器,那些像素级切确的padding与margin设定...所有这些,你们应该以若何的体例与开发人员进行交流,才能让他们体味到这些主要的细节呢?

“一致性”是界面傍边的所有元素都理当具有的普遍特质,作为设计系统的一部门,它们都应该浮现出一致的设计思惟。当人们使用分歧类型的设备访谒你的站点时,连结视觉气概及体验的一致也是很主要的。

DrupalCon Chicago官方网站的气概指南,关于全局网格及界面结构的部门。

正像Nathan Borror在2009年发布的一篇关于界面协调性的文章傍边所说:“精采的界面一致性是不会被用户所注重到的。”换句话讲,精采的界面协调性所带来的美梦体验会让用户在不知不觉傍边发生愉悦的感应感染。

旅途归来,一切安好。五天很短暂,回忆起来根基只有迁就算是蓝色的年夜海和天空,还有白花花的沙滩;有乐趣的伴侣可以到我的微博中看看风光照什么的。

我(英文原文作者)凡是会在气概指南傍边借用这篇文章傍边介绍的“界面协调性画布”这一体例,将项目所涉及的所有典型设计元素同时呈此刻一张画布傍边,搜罗它们各自分歧的状况,以及对应的代码片段。

interface-harmony-canvas

这种体例同时可以辅佐我们成立一套相对自由的设计模式库。诚然,分歧项目傍边的视觉设计气概会有所转变,但基于这些项目所抽象出来的模式却可以连结相对统一。

别等到项目进行到后期才起头气概指南方面的工作,你完全可以在设计过程傍边一点点的将逐渐成熟的界面气概尺度添加到文档傍边。在建树界面元素的同时就对它们在一致性与尺度化等方面的特质进行当真的思虑,这是很好的习惯。

interface-style-guide-overlay