标准化之路:关于产品设计规范

2013/09/12 12980

产品设计规范

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

 

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/design-guideline

界面设计 交互设计师 HTML5 素材 好文 UI 用户体验设计 转场动效 设计师专访 设计师 排版布局 设计规范 扁平化设计 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 用户体验 ui设计 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里