你的产品真的需要设计规范吗

标签: 设计理念 设计规范 | 发表时间:2013-02-20 10:47 | 作者:dream
出处:http://www.boxui.com

产品规范

不是所有的网站或移动应用都需要设计规范。你表弟的博客就未必需要,你邻居自己搭建的用来卖猫草的小电商网站也不那么需要,当然这也要看他能卖掉多少,能做到多大规模。

通常,只有那些需要维护专业形象和品牌一致性的产品才真正需要设计规范(或是风格指南一类的说法)。不要把这事儿想的太容易,真正意义上的设计规范需要你花费大量的时间成本去创建并持续维护,所以在决定动手之前,最好确认一下你的产品是否真的需要设计规范,它所需要投入的成本是否能够被接受。

什么是设计规范?

在确认是否需要设计规范之前,我们首先应该明确一下设计规范到底是什么。简单的说,它就是一份由很多范例组成文档(电子文档、印刷文档或HTML文件等),用来描述和展示你的产品应该具有怎样的外观和交互方式。它就是一份指南,让你在创建和更新网站或应用时知道在什么地方使用怎样的风格标准。设计规范可以帮助你了解一些典型的问题包括“这里应该使用怎样的配色?”、“H1标题要用多大的字号?”、“这部分文字内容应该左对齐还是两侧对齐?”等等。

 

01-yahoo-design-library-style-guide-guidelines-ui-user-experience

The Yahoo! Style Guide(链接)

 

你需要设计规范吗?何时需要?

答案取决于你的产品类型,以及设计规范的使用者会有哪些。这里所说的使用者包括设计师、开发人员、内容创建者等角色。搞清楚“规范的使用者是谁”,这非常重要——很多管理人员或设计师会告诉你,如果我们创建一份设计规范,它会在接下来很长一段时间内帮助团队节省大量的时间,叭啦叭啦;但实际情况是,你们很有可能在投入了巨大的时间与人力成本去做这件事之后,却发现这份规范当中的内容对团队里的任何一个职能类型都没有很大的参考价值;最坏的情况是,无论设计师还是开发人员,他们压根就不会去看它。

“时间”也是一个重要的因素。如果你们当前正忙于新产品的设计开发,那么显然无法抽出足够的时间去做规范方面的事情。设计规范是一项长期投资,如果眼下不确定自己有足够的资源可以投入,那么就不要去做,但你可以从现在开始为此做些准备,在新产品的设计开发过程中留意那些有可能写入设计规范的方方面面,将它们作为素材搜集起来,到创建规范的时候加以整理。

你也可以试着回答如下这些问题,如果其中大部分的答案都是肯定的,那么你可以考虑创建一份设计规范了:

  • 你是否想节省脑细胞?
  • 你是否希望在产品中落实良好的用户体验?
  • 你是否觉得有必要在产品的设计方面保持一致性?
  • 除了当前的网站或应用之外,你的品牌和产品在将来是否延续性和扩展性?
  • 是否有第三方合作者会用到你的品牌元素?
  • 你的产品当中是否会有频繁而规律的内容更新?
  • 在自己的团队之外是否有第三方的内容提供者?
  • 你的产品是否有提供给第三方设计师与开发人员的API接口?
  • 你是否准备以公司的形式长期维护当前产品或是继续开发新产品?
  • 你是否就职于一家大公司?

 

02-netflix-api-design-library-style-guide-guidelines-ui-user-experience

Netflix的API规范(pdf下载)

 

怎样创建设计规范?

如果你确定自己需要一份设计规范,那么怎样着手进行创建呢?正如前面提到的,这也要取决于你的产品和团队的实际情况。有可能你只需要为自己创建设计规范,这时它更像是一种备忘或归纳,那么你就没必要做的非常细致,也不需要在表现形式上花费太多时间;而多数情况下,设计规范是面向产品系列及大中型团队的,这时你就必须在个各方面都深入的进行,同时保证必要的细节。

我列了两个清单,分别是“包含哪些内容?”和“还需要些什么?”。其中第一个清单里列出了设计规范当中通常需要涉及到的内容,后者则包括了你有可能需要进行额外处理的内容。当然,这两份清单并不是标准摸板一类的东西,你只需要在创建规范时结合自己的实际情况对这些要点加以考虑。

 

包含哪些内容?

品牌元素

给出官方logo和标准配色方案的定义及范例,介绍logo在全彩、黑白或不同背景色等状况下的使用方式,提供标准配色的HEX及RGB值,另外也可以提供logo文件的下载,包括.png、.jpg甚至是.ai或.psd文件。

文字

对页头、段落、引用、标签、表单标题等任何有可能出现格式化文字的地方进行规范定义,包括字体、字号、行高、字间距等方面。

布局

定义不同的区块和元素在界面当中的位置,还有它们彼此之间的关系。对于那些在全局范围内普遍适用的外间距(margin)、内边距(padding)、网格模式等规则也要作以说明;另外,有些元素会根据界面环境的不同产生相应的变化,这些也需要在规范中也要进行说明,最好可以搭配图片进行展示。

链接和按钮

定义链接和按钮的视觉风格,为不同模块中的链接以及不同类型表单中的按钮提供色值及图例。这个过程也有可能帮助你对一些过于复杂的界面进行简化。

导航

定义各级导航的视觉风格及交互方式,特别是对于那些具有层级关系的导航项来说,要完整的展示出嵌套关系及展开方式。

视觉继承

定义页头、标题、段落、图片等元素是怎样在视觉上保持关联性的,提供必要的图例,并通过文字描述出视觉继承关系对于整个产品的外观气质的影响作用。

图片与图标

对内容和界面元素当中的图片及图标进行定义,包括文件类型、尺寸、文件大小、比例、风格等方面。内容中是否会有特色图片?正文中的图片是左右浮动还是居中?是否有一套特定的图标素材?

UI标准

定义不同的UI元素所对应的交互模式,以及它们的视觉表现形式,例如在哪些情况下使用复选框(check box)或单选按钮(radio button)。可以试着将网站涉及到的所有类型的UI元素都陈列出来,提供图例及前端代码。

表单和验证

定义表单的整体风格及元素布局,对表单涉及到的功能流程进行描述;定义表单的验证规则以及各种有可能出现的错误提示等。

 

03-w3c-design-library-style-guide-guidelines-ui-user-experience

W3C – logo的使用规范(链接)

 

还需要些什么?

多元化

有时你也许需要面向不同的使用者创建不同版本的规范。例如,对于某些类型的网站来说,有着不同级别和权限的内容创建者与管理人员,最有效的做法是针对不同的角色提供特定的规范指导;当然你也可以将完整版本的规范面向不同职能的人员进行订制性的简化。

目标任务

为了使相关配合部门在大方向上达成默契,你也许需要在设计规范中结合具体内容对整个的产品目标及阶段性的工作任务加以描述,这也可以让大家充分理解规范的必要性,理解一致化的表现风格及用户体验对产品策略的推动作用。

代码

根据设计规范所面向的人员范围的实际情况,可以考虑将前端代码标准及最佳实践模式配合图例进行展示,包括HTML、CSS、JavaScript等。

文件规范

你也许需要面向所有的内容创建者制订文件使用方面的规范,包括文件类型限定、命名规则、版本号更新方式等。从长远的角度来看,这样可以避免很多琐碎的潜在问题。

内容标准

面向内容的创建者及管理者,你也有必要在规范中对人工生成的内容进行格式化的定义,例如正文内容的长度、标题的字符数等等。另外对于内容的基调,提交与编辑操作的流程、版权处理方式等等也要作以具有实际指导意义的说明。

评论和论坛

如果你的产品为用户提供了评论功能,或是开设了相关的论坛,那么你同样需要对这些方面的管理进行规范。例如,评论内容的审核标准是什么,怎样回复用户的评论,怎样处理负面内容,在哪些情况下需要关闭评论功能等等。

可下载、可打印

如果你通过在线的方式创建的设计规范,那么要尽量确保相关人员可以将它下载或打印出来,方便离线使用。不过这里也存在一个问题,就是在更新规范的时候无法对他人手中的离线版本进行同步处理。这种情况下可以尝试通过邮件通知的方式加以弥补。

做的漂亮些

既然是设计规范,那么其自身的外观形象也是很重要的。在时间允许的情况下尽量多的使用图片范例,即保证内容形式上的丰富,也能对设计开发人员更有直观的参考价值。从某种程度上讲,设计规范也是产品整体质量和形象的一个组成部分。当然,如果涉及规范只是供内部设计开发使用,不涉及第三方合作的话,那么在资源和成本上进行充分的控制也是合理的,譬如一个内部wiki系统就可以满足最基本的需求。

 

翻译:http://beforweb.com/node/165

英文原文: http://tympanus.net/codrops/2012/09/06/do-i-really-need-a-style-guide/

相关 [产品 需要 设计] 推荐:

你的产品真的需要设计规范吗

- - 盒子UI
不是所有的网站或移动应用都需要设计规范. 你表弟的博客就未必需要,你邻居自己搭建的用来卖猫草的小电商网站也不那么需要,当然这也要看他能卖掉多少,能做到多大规模. 通常,只有那些需要维护专业形象和品牌一致性的产品才真正需要设计规范(或是风格指南一类的说法). 不要把这事儿想的太容易,真正意义上的设计规范需要你花费大量的时间成本去创建并持续维护,所以在决定动手之前,最好确认一下你的产品是否真的需要设计规范,它所需要投入的成本是否能够被接受.

硅谷不需要产品经理

- - 运维派
这几天在硅谷转来转去,让我想起了《成为乔布斯》里的一段话:. 我驱车朝帕洛阿尔托开去,一路向南,恰好回顾了硅谷的发展历程. 冬日和春日的雨水将这片山丘草地浇灌得碧绿苍翠,如同高尔夫球场的草坪,而不是常见的暗黄色,草地上还点缀着橙色、紫色和黄色的小野花. 我对旧金山湾区(Bay Area)不太熟悉,当时并不知道这是一年中景色最迷人的时候.

关于产品的设计

- - 膘叔
一个好的产品,必然是有灵魂的. 一个好的产品,即使是没有内容,也是能够被人喜欢的. 一个好的产品,就算没有内容,它本身也是内容. 上面是我的乱谈,当然第一句话,我想,绝对没有说错:好的产品,是灌注着灵魂的. 下面的内容来自于:http://www.huxiu.com/article/9778/1.html.

产品设计流程

- - 互联网分析
新的一年到了,分享个大的东西,这个是之前团队总结的一套「产品设计流程」,里面包含了3大模块,产品前期分析,设计环节,上线总结反馈,基本上涵盖了,从需求到上线的经过的流程,相较于大型UED团队会“轻”一些,适合中小型团队. 如果所在公司内部还未有设计流程,可以参考此流程,也可以拿去在这个基础上进行改进.

移动产品设计之设计

- crystal - 互联网的那点事
移动产品设计最大的差异点在于用户使用场景的变化,场景的变化引发了交互方式巨大的变化,从而也使得信息呈现方式有所不同,再加上硬件设备的差异,最终使得2者千差万别了. 所以,移动产品设计之设计应该首先从用户的使用场景出发,同时考虑用户的硬件设备差异,综合以上2点去帮助用户完成某个任务. 按照我的理解,场景、任务、用户可以称之为设计的三要素,每一个设计实际上都是试图去帮助用户在某个场景下完成某个任务的.

设计师需要的知识体系

- - 博客 - 伯乐在线
产品设计师面对复杂、庞大的制造业系统以及多元化的市场,其知识体系要同时具备广度和深度. 设计是循序渐进、不断深入的过程,因此我们面对的是交错的学科体系,以及深入的技术探究. 当国内工业设计教育界还在热烈地争论设计是艺术还是技术时,不妨退一步思考,设计本身既融合又独立,既有依附性又具有本身不可替代的意义.

大数据需要好设计

- - 互联网的一些事-关注互联网产品管理,交流产品设计、用户体验心得
  越来越多的企业开始意识到优秀的设计之于数据的重要性. 优秀的设计可以让枯燥乏味的数据变得更加直观、友好,从而帮助顾客理解数据的意义,让企业与顾客建立更好的关系,从而更好地发挥作用.   许多公司一直相信大量囤积数据的好处,现在他们正在寻找能利用这些数据造福顾客的方法. 大数据给各行各业的企业提供了一个变得更加透明、更值得信任,并在竞争中脱颖而出的机会,而且能让他们的用户在产品和服务上获得更加个性化的体验.

交互设计,产品设计与用户体验设计

- 章明 - 所有文章 - UCD大社区
交互设计,产品设计和用户体验设计经常被混淆,而实际上完全不是一个概念甚至不是一个纬度的概念;. 一直认为交互设计与互动设计很接近,互动设计这个词更多用在flash设计中,维基百科中的交互设计的定义也证实这个想法:. 交互设计,又称互动设计,(英文Interaction Design, 缩写 IxD 或者 IaD),是定义、设计人造系统的行为的设计领域.

PC产品经理转型做无线产品经理需要注意什么?

- - 人人都是产品经理
4G时代的开启以及移动终端的凸显必将为移动互联网的发展注入巨大的能量,2014年移动互联网产业必将带来前所未有的飞跃. 也正因为此,PC产品经理可能会面临向无线产品经理的过渡与转型. 4月22日晚,人人都是产品经理⑥群(QQ群号:30115996)的小伙伴就PC产品和无线产品的异同以及PC产品经理向无线产品经理转型问题,进行了非常激烈的讨论.

高效的产品可视化设计

- - 雷锋网
【编者按】本文转载自 百度UEO,作者为 @刘曼0722. 对于降低产品对于用户的使用门槛是否也曾经对你造成困扰. 交互设计中对用户体验尤为重视、可视化效果就成了设计中的制高点. 可视化在对商业效果以及用户体验价值的提升上都是非常重要的手段,而如何高效的设计产品的可视化效果就成了值得研究的一个课题.