设计规范-5月书友会后记
分类 : 用户体验, 设计 - 08/05/18
UCDchina 5月书友会 讨论话题：设计规范
地点：北京知春路城铁站沃尔玛南侧，盈都大厦C座4单元3A室
时间：2008年5月18日(星期日)
参与人员：Angela、Tony、Melody、刘汝宁（icepeach）、马秀、 孙雪磊、陈婷、李霞、Joan、郝磊、Leyes、高十二、王兆鹏 、Raymond
本期由美女Angela带队和大伙一起讨论“设计规范”。（UCDchina的2员大将都不在京，白鸦身在南京，千鸟身在杭州；还好Angela和的Tony帅哥镇守着第一战线）
具体讨论了什么是设计规范？设计规范的起因、意义、流程……以及国内外对于设计规范的重视程度
讨论1，什么是设计规范？
我综合了一下大家的意见，认为设计规范其实就是将网站或软件里的出现的元素进行归类，统一，制定标准，并加以描述（文字或图片）。
设计规范的输出形式也是多种多样的，word、ppt、pdf……都可以。
讨论2：为何要有“设计规范”呢？
案例1：设计师对产品进行UI设计，确认后，将设计稿（Layout）的PSD直接交给前台开发工程师（Web UI developer）进行实现，但页面一多，各个元素的样式难以统一。
案例2：多个设计师对一个产品的多个页面进行设计，每个设计师风格不同，产品的表现方式也不一样，无法保持产品的品牌一致性和产品的调性。
以上2个案例说出了产品UI设计时遇到的一些问题，也是制定“设计规范”的原因所在。
设计规范的好处：最大限度保证产品外观设计上的调性统一，提高设计效率，元素可复用，保证各版本的外观统一，便于他人衔接和延伸后续的设计工作。
设计规范可分为2类：视觉层和实现层。
视觉层，指的是UI部分。将用户看到的页面上的元素进行规范整理。
实现层，也就是页面制作。Tony讲要有文档规范，每个ID以及class都要有其含义和注释，便于让其他人理解和后续开发。我补充了一下CSS的命名规范细节——驼峰式命名的好处，可以很清晰的看出各个样式元素的继承关系。
讨论3：设计规范的流程
是先做设计，再有规范？还是先有规范，再做设计？大伙普遍认为：世界上本没有规范，只不过设计做的多了，便出现了规范。
设计是第一步，然后从设计中将规范完善，期间会遇到各种各样的客观因素制约，如制作无法实现、页面框架发生改变……与产品经理和制作人员的沟通改进之。
讨论4：门户网站的设计规范
Leyes同学的职业履历相当丰富（feedsky - 搜狐 - 网易），他的观点也更宏观一些，讲到了门户的各个频道页面的规范，并拿搜狐举例，指出设计规范并不是做单纯的某一个产品的规范（小插曲：当谈到门户网站首页时，Angela也讲到了编辑部和设计规范之间微妙的关系）
讨论5：是不是每个网站都需要做“设计规范”
同学甲：需要，没有规矩不成方圆；
同学乙：不需要，以前做过的网站没什么“设计规范”，不也照样活的好好的。
我认为，看项目大小。在程序开发里，有一种方法叫“敏捷式开发”，边开发，边补充文档，或根本不写文档，直接开发。同理，小型项目也可以进行“敏捷式设计"，尤其是时间紧，项目调性单一，并由一个设计师独立完成的项目，只要保证良好沟通，为保证项目进度，不写“设计规范”文档也是可以的。但如果项目越做越大，产品越来越多，设计规范就必须要建立了，而且还要将标准制定严谨。
讨论6：设计规范的案例
Angela非常无私的为我们展示了她以前做的一个门户的设计规范，框架 - 色调 - 文字 - 链接 - 图形 - 表格 - 按钮 - 样式表 …… 以及各个版本设计规范的修订和补充。
黑暗中（抱歉，估计是我相机的问题），Angela正在耐心的讲解着……
另外非常感谢Angela美女馈赠《Gnome Human Interface Guidelines》于Raymond的U盘，并将此书分享给大家。
下载地址>>
（小插曲：书友会的讨论过程是这样的，先开火车，再讨论话题，讨论完后再开火车，然后又讨论……非常自由，畅所欲言，从抗震救灾，到搜狐新浪网易的新闻内容评价，再到人肉搜索……得感谢Melody同学，我们几次开火车开到别处后，他总是提醒我们这次讨论的话题是“设计规范”，一个蛮认真和执着的家伙）
nice.
这次南京的讨论结果也基本如此
1.何时定规范
2.是不是一定要有规范
3.规范的形式
不过后来有些偏题了：）
[回复]
我是咱们百度HI群的群猪，来项下你！
[回复]
哇哈哈，人没看清，就看清MacBook了。
[回复]
这样的聚会我怎么碰不到呢，下次举行能否通知一下,很想去见识一下。
qq:469622570 email:lvgafe@163.com
[回复]
这个也是我最关注的一块，谢谢bz提供资料
[回复]
想看到Angela的门户设计规范！！
[回复]
嗯,对设计规范定了以后,如何执行也是个问题,这次没有参加呵呵,不过能在这里找到些符合的,也不错,谢谢bz
[回复]
我怎么只看到 macbook pro 的苹果logo啊
[回复]
妈呀谁能看得懂那英文呀。。
[回复]
Gnome Human Interface Guidelines
英文的啊
[回复]