多语言展示
当前在线:575今日阅读:86今日分享:14

如何建立一套 UI 设计规范?(这么去做)

在一个产品中做出一个设计规范是很有必要的,那么应该如何去做 呢?适合什么时候去做?什么样的规范才是一个好规范? 等 这些都需要清楚,在这里就重点就讲一下怎么去做一套好的UI设计规范。
工具/原料
1

电脑

2

https://pan.baidu.com/s/1kVf41EZ

方法/步骤
1

一.制定一个计划整理设计规范是一个涉及广周期长的项目,所以有一个清晰的计划可以帮助这个项目更好的推进。制定计划的流程如下图所示:

2

二.整理规范内容及分类做之前先明确我们需要整理哪些内容,这些内容的分类是怎样的,下图是我们整理腾讯云规范时列的内容及分类,初始时列举的内容可能不全,但没有关系,先把最基础的分类和内容定义好,后续发现有遗漏的内容再添加进去即可。

3

三.确定优先级与分工由上图可以看出,一整套规范包含的内容非常的多,所以内容和分类整理好后,还需要确定每块内容的优先级和分工。从大的模块上说,首先应当确定整体的设计风格和框架,整体确定后才好确定细节的风格;其次的优先级最好是控件、组件、场景,因为控件组成组件,控 件和组件组成场景,所以先确定小的控件后,组件和场景更容易确定。至于分工,规范的制定是整个团队的事情,最好团队中的设计师都能够参与,互相分担工作量以提高规范整理的效率,也能够确保规范是在大家的讨论下制定而成,每个人都参与过并赞同结论。

4

四.确定规范展示形式及推进流程其实确定规范展示形式也是确定规范目标用户,要确定规范是给谁看的,展示在网站上还是直接用文档承载,网站是否对公众开放等问题。确定了这些问题后就可以确定规范的详细程度、大体的展示形式。推进流程指的是整个项目要怎么跑,涉及到每个设计师接到分工后如何输出,何时讨论,怎 么输出,交接给谁等等问题。例如我们的推进流程是每周固定时间开规范讨论会,每次确定几个要讨论的内容,负责的设计师整理问题,在会议上和大家一起讨论敲定结果,经过两周讨论后输出最终版本,交给下一个负责人。

5

五.制定规范的规范规范本身要遵循什么规则,也是需要事先确定的,我认为包括两个部分,一是设计原则,二是输出物规范。根据整个产品的目标用户、用户及产品目标可以确定我们的设计原则,所有的规范梳理都要遵循最基础的设计原则,以满足用户及产品需求,提升整体的体验。

6

之前有提到过规范自身保持一致性是提高规范阅读效率的一部分,而且为了提升设计师输出的效率,事先制定好规范输出物的规范可以帮助设计师按照一个既定的格式进行输出,同时又能保持一致性。我们的输出物规范中包括:1.规范包含的内容,需要有描述、类型及场景、使用说明、视觉规范、补充说明、相关下载、负责设计师2.规范插图的尺寸、背景色、板式、字体及用色、正确及错误示例图样式等

二.单个规范的整理流程
1

整体计划制定好之后,就需要开始一个个整理规范内容了。整理单个规范的内容也是有流程可寻的,如下图所示。下面以整理“对话框”规范为例,讲解一下单个规范整理的

2

二,收集场景给已经趋于成熟的产品整理规范,第一步就是要先收集场景。以对话框为例,对话框可能出现的地方很多,类型也各有不同,在没有规范之前,产品中可能会有各种各样的对话框,每个设计师做的可能都有些差别,所以第一步,是把产品中所有出现过的对话框都收集起来。

3

三.归纳分类场景收集完后,就要对收集到的所有场景进行归类,例如对话框按照样式不同可以分为“模 态对话框”和“非模态对话框”,在模态对话框中按照功能不同又可以分成“确认类对话框”、“反馈&警示类对话框”、“表单类对话框”。归纳分类的作用在于,可以把众多的场景收拢成几个典型的种类,只对典型种类进行定义和详细描述就可以很好的给用户起到指导作用;同时归类之后减少了规范对象的种类,更好的保证产品的一致性。

4

四.给出定义分类确定好后就可以开始给出定义了,首先给出整个规范对象的定义,例如对话框是什么,什么情况下适合用对话框等。除了整体的定义外,每个类型也需要有定义,帮助用户理解每种类型有何差别,什么场景选用哪种类别等。

5

五.优化方案分类和定义都确定后,需要对各类型进行优化输出最终的规则,对于这些细节规则,无法确定的时候可以寻找一些优秀案例来参考,例如优秀的产品、有名的设计指南等。同时可以根据实际场景输出多种优劣不同的方案,和大家一起讨论对比。

6

6.宣讲讨论规范整理出后可以在讨论会议上同步给大家,最好事先把所有需要大家一起讨论确定的问题列出来,把对比方案都做好,提高讨论的效率,和大家一起来敲定最终的方案,同时也让每个设计师都了解规范的细节。

7

七.最终输出所有问题都敲定后即可按照输出物规范进行输出,输出后交接给视觉设计师。

注意事项
1

思考 规范整理完之后还有什么工作。

2

思考 有了完善的规范如何进行创新。

3

思考 整理规范可以锻炼哪些能力。

推荐信息