创建可维护的设计规范(Living Style Guide)

浏览: 85 发布日期: 2016-12-05 分类: node.js

为什么需要Style Guide

相信团队工作中,不管是前端还是设计师都有被“视觉统一问题”折磨过的美(dan)好(teng)经历。特别是在中大型、复杂的web项目中,很可能存在以下问题(你能对号入座几个呢⊙﹏⊙‖):

1. 整个项目有上百种不同的颜色。但其中大部分颜色的16进制值却非常接近。原因在于,开发甚至设计师使用吸管工具提取颜色值,这很容易照成误差。
2. 不同的开发,对组件的命名可能不一样,比如按钮,有‘btn’、有‘button’等等。加上第一点的问题,造成css中诸多长得差不多,但不能复用的代码。
3. 不同的设计师,风格也不相同,同一个表单今天是这个样子,明天它妈都不认识了。而苦逼的开发,要重新还原设计稿。
4.整个站点的交互,色彩,看上去总是不那么协调。

显然,如果没有一个设计规范(Style Guide),项目会越来越难以拓展,不可维护。那么制定一个设计规范就很有必要了。

Style Guide应该是什么样子

一个合格的设计规范,至少需要满足3个方面,以下我以github的设计规范[Primer](http://primercss.io/)为示例,一个个说:

1.色彩风格

一个具备美感的网站,并不是色彩越多样越好,我们一般需要定义网站多主色调。
重要的是,定义好色值后,就愉快的可以用 sass 之类的css预编译,设置变量了。 (=^ω^=)

比如github多主色调,是蓝色

2.组件化

设计规范应该定义出web项目常用的组件:比如 按钮、 弹框、表单、侧栏、导航等等。以便复用(关键是设计时就要复用)。

3.使用文档

定义好设计风格和各种组件后,要做的就是让各位开发和设计童鞋按规范使用了。 使用文档必须写明色彩具体值、组件的结构、css命名等,如果有js组件,也要写好js的api文档。

创建Living Style Guide

按说设计规范应该由设计师和产品一起定制好视觉稿,前端

返回顶部