产品设计规范

Suer 记得很久之前看过朗咸平的<模式>,书里介绍了时尚快消品牌ZARA的“一条龙”服务,当时的我被惊呆了,符合企业实际情况的生产设计规范帮助ZARA一步一步建立自己的时装帝国。

还有各种咨询公司建立的6-Sigma等等规范,统统都是为了提高生产力而制定的标准。
早在两千多年前,秦国统一六国后,实施了书同文、度同制、车同轨、行同伦。当时制定出了(我认为)最早的一套产品设计规范——度量衡,还有车轮间距标准,这些东西都让秦国更好的运作起来。

国家尚且如此,那作为产品设计人员的我们又该如何?
互联网行业的产品设计规范,大概就是将产品的一切交互行为、视觉样式都要严格遵从可用性原则,并根据公司业务目标,制定出涵盖公司产品功能范围内的所有相关控件与相应的展示样式。

这等于定义了如何帮公司设计出一个好的产品。无论你的网站或app多漂亮多流畅,却无法帮公司赚钱——穷死;产品只为了赚钱而忽略用户体验,那就缺乏竞争力,衰败也就是时间问题。这是老生常谈了。

设计规范的意义

指导性

什么是好的设计规范——团队成员能高效地制作出既满足业务需求,又能让用户轻易完成目标的产品。每个公司或者团队,到了一定阶段,都需要产品设计规范来突破瓶颈,提高效率,改善产品,让产品和团队都能够轻装上阵,走得更远。

意味深长与历久弥新之美,蕴涵于简约之中,于清晰之中,于高效之中。真正的简约远不止是删繁就简,而是在纷繁里建立秩序。——Jonathan Ive

iOS7-Icon-Grid

iOS 7的图标设计规范

在定义产品需求,讨论布局的时候,设计师经常会被非专业人员“指点江山”。或许大家都对用户体验有一定了解,而且都是一心为了产品好,但是体验设计 需要像血液一样渗透到产品的每个部位,那可不是随便脑暴几个想法就能解决的。设计规范凝聚了设计师们用血换来的经验,对产品与使用群体的深刻理解,还有结 合实际使用场景的综合分析。实施规范之后,大家就能各安其职,当然,是在理想状态下……

有效性

规范必须是有效的——一个连按钮的点击效果都没的规范是毫无用处的。从有效性这个角度来定义规范,其实就是产品各种已有模式或模板的集合。我们需要 根据产品的业务目标来得出产品功能需求,然后根据用户目标和使用场景,穷尽所有可能性,制作出合理且可用的模板和组件。
这样做出来的东西才敢说是可以用的,合理是前提,有效是结果。

然后,该如何穷尽所有可能并逐步制定规范?那就要我们加深对公司产品目标的认识,参考先进竞品,听取反馈意见,总结过往版本的不足等等,完善已有的模式,或创造出更优秀的。
例如,”赞”这个功能已是产品社交化所需的基本元素,用户通过操作”赞”按钮,可增强与产品本身、还有共同用户之间的互动。

2013-09-05_111444

就算你很美,就算你会自动消失,也只是一个弹窗。
以前的操作反馈总是过于简单粗暴—-直接弹窗告诉用户”操作成功!”。我一直觉得这就像给了用户一巴掌。
现在的技术日新月异不断进步,因此我们可以设计出非常优雅的效果。

tumblr_like

tumblr的“赞”

在设计规范的过程中,我们需要思考一切可能:通过操作”赞”按钮,用户应该获得多少种反馈?是否真的需要这些?全部情况都考虑到了吗?如果服务器出 错或代码效率低,导致反馈有延迟,是否需将反馈改为提前量?例如Instagram,用户点赞后,它不管用户有无网络,都先用可爱的动画反馈告诉用户已操 作成功,然后才后台检测网络是否可用并发送数据。

在思考用户的使用场景和习惯的同时,公司自身的产品后台也要照顾得当,并需要作出适当反应,例如这个赞的数据应归类到哪里,运营同学对此有无更多的 需求,未来会否添加更多的接口?开发同学需要有所准备,以应付突如其来的”需求”,就算开发部没有相关规范,也应了然于胸,或者直接加入到产品设计归范。

可复用

设计必需是简洁且而优雅的,才能历久弥新。——Smashing Magazine

设计可以在各分枝系列产品里重复使用,这正是设计规范的精髓,不能复用的规范不是好规范。

可复用的规范对公司和产品来说有啥好处?

  • 对视觉设计师来说,按钮只需要有限的若干尺寸样式,不同产品线或功能点只需换个颜色甚至直接套用。网格系统、页面头部更是全球唯一。
  • 对于前端工程师来说,只需要像Bootstrap一样,根据视觉规范制作出1份CSS文件,全站都引用此文件即可,不同产品各取所需,特殊情况也只需定义少数代码即可。
  • 对公司来说,上述两位同事都提升了效率,那公司的整体效率当然就更上一层楼了。另一方面,如果有人员流动,简洁的规范也能让新同学迅速上手并融入产品设计团队,同时降低了公司的风险和损失。
  • 对用户来说,简单的几个样式A穿整个产品,既降低学习成本易于使用,也能让用户更专注于内容,这就是用户体验的重要原则”一致性”,相关文章很多,这里就不作展开了。

当然,以上都是在理想状态下……

Less Coding

LESS和SASS是前端工程师的规范化利器(图片来自Dribbble

约束

规范本身没有约束或局限性,约束往往来自人。——我说的

规范本身的约束

很多同学看到规范就会说,次奥,太落后了,怎么老用这东西来弄?
呵呵,骂得好。
谁让你弄个古董级的规范出来?谁让你一成不变?上面也提到了,设计要简洁、高效!这才能迅速迭代,不断改进。制作规范的过程,本来就是一个优化和沉淀的过程。
好的设计归范还需要站在一定的“高度”来定义产品,“高度”要控制得当,不能太笼统——泛泛而谈说了等于没说,也不能太细致——很多专题或者独立产 品需要自己的空间。正所谓”站得高,看得远”,具备一定的前瞻性,才能指引产品走得更远。不与时俱进,使用先进的效果和技术,也很难说服同事们采用我们的规范。

规范之外

设计规范所面临的约束与局限,不一定来自于设计本身,而更多的是来自于“人”。
例如,在A页面有一个图片轮播模块,是前端工程师1和视觉设计师2设计的,然后在同一级别的另一个页面B也需要同一个模块,负责这个页面的前端3和视觉4都一致认为:我也能写/画出来,不需要套用已有代码/PSD。

好的,我知道你们很优秀,这是无可否认的。但是最牛逼的大师通常都是深藏功与名的,前端大师能够写出让设计师都能看懂的代码,让后继者看到犹如自己写出来的代码,这才叫Zen Coding;视觉大师直接发明轮子的替代品,而不需要用现有的轮子。
我说得够明白易懂不?

Braun_Fernseher FA_80_1964

Dieter Rams, 1964, Braun FS80 TV

时机

总而言之,产品设计规范不但需要做,还需要适时地做,一旦完成,就要贯彻执行,接收反馈,总结不足,不断优化。磨刀不误砍柴工啊。
规范化不是闹革命,因为一不小心就会革了产品的命。在产品本身还没准备好的时候推出,只会增加负担,降低效率。
规范化是“进化”,在产品不断的迭代过程中沉淀积累,最终形成的一套优秀的设计方法。

题图来自Dribbble
投稿人:Suer
原文地址:make it simple