界面设计师职业进阶:如何建立一套 UI 设计规范?

2019年9月24日14:17:23 发表评论 48 views

 

建立 UI 设计规范,这个对于 UI 设计师来说,应该是工作到一定阶段,必须要掌握的技能。我可以把过去若干年我们在工作过程中的积累做一下回答。

UI 设计规范的目的

首先要明确建立 UI 设计规范的目的是什么,主要是以下的几个方面:

1. 统一对于设计工作的具体要求,建立设计工作的准则;

2. 保持界面界面设计工作持续执行的统一性;

3. 提高协同工作的执行效率,能够让不同的团队按照统一的标准理解和管理设计;

4. 协助开发建立统一的统一的框架和布局;

5. 针对于产品的风格和定义能够建立统一的标准,并且利于未来的延续。

我们能够看到的日常的规范的内容有很多种类型,包括「品牌规范」「平台设计的语言规范」等。

UI 设计的规范,要注意参考这些其他的规范内容,尤其是「品牌规范」,对于色彩的使用方面,很多情况下要严格遵守;而平台设计的语言规范,比如说 Apple 或 Google MD 的规范,在定义控件时,也是同样要兼顾到。

界面设计师职业进阶:如何建立一套 UI 设计规范?

接下来,我会详细描述一下,制定一份 UI 设计规范需要哪些内容。

什么时候建立规范

一般引入 UI 设计规范的时期,基本上是两种情况。

从0研发一款新的产品

针对于这一类产品,我们一般情况下是在确定了具体的设计风格以后,就可以开始着手建立规范。

界面设计师职业进阶:如何建立一套 UI 设计规范?

如果一些页面已经开始启动设计,那么就需要频繁的沟通,以保证设计方向和正在着手完善的 UI 设计规范保持一致。

如果产品已经进入了研发阶段,那么此时就要按照已经确定的设计方案来进行统一规划。

这个时候存在的风险,就是发现不能够统一的部分,那么就要进行一定的评估,是否会因此影响到用户体验:

1. 如果没有影响,或者影像的代价非常小,那么建议是接下来的产品迭代再进行按照规范的统一处理,否则会出现开发方面的反复工作的问题。

2. 如果影响非常大,那么就要推翻设计方案,统一按照规范进行处理。

具体情况要根据团队的实际情形进行判断,涉及到成本问题,因此不要非常草率的下结论。

比较成熟的产品

如果是一款已经迭代若干版本的产品,那么其实随时都可以开始着手建立 UI 设计规范。

明确你的目标用户是谁

说实话,在制定规范的同时,也是在做一份设计,要考虑到用户的使用问题。

因此我们首先还是要明确目标用户是什么人,这样能够掌握他们在使用过程中的需求是怎样的。

人群可能会包括以下的一部分:

1. 内部设计团队

2. 产品团队

3. 运营团队

4. 研发团队

5. 第三方团队— 有些公司的项目,有可能是要外包给其他的团队来做的。

界面设计师职业进阶:如何建立一套 UI 设计规范?

其中的内部设计团队,会包括已经一起合作一段时间的设计师、或者新来的设计师。后者需要这样一份规范了解之前的设计情况,然后才能跟随完成后续的内容。

建立版本号管理

大家首先要有一个意识,一份 UI 设计规范,是不可能通过一段时间的努力工作,就达到百分百完善的可能性,因此需要大家经过长时间的维护,逐渐达成一定程度的标准。

因此需要建立统一的文档名称以及相关的版本管理策略,这样才能够做到明确的了解到更新进度,以及相关的内容完善计划。

按照我们过去几年的项目经验,一般情况下会按照如下的标准建立文件版本号:

客户名称_产品名称_文档名称_更新时间_版本号

界面设计师职业进阶:如何建立一套 UI 设计规范?

一般情况下,跟随产品内部版本更新的情况,来修改版本号。如果是大版本的更新,那么就是比较大的版本号展示,如: V1.0V2.0;如果是比较小的版本更新,那么则按照子集的方式来定义版本号,如:V1.1V2.0.1

针对于这样的版本管理,需要在整体团队内,包括设计团队本身,也包括产品、研发、运营等团队建立统一的标准,可以按照具体的情况进行调整,但是人人都要明确,从名称开始,就是规范的一部分。

建立更新记录

另外一个细则就是更新记录,也就是在哪一天,完成了哪个版本,主理的负责人是谁。

建议详细写清楚,更新或者修改了哪些内容。

界面设计师职业进阶:如何建立一套 UI 设计规范?

这样做的好处在于能够追溯到更新进度,以及更新的具体情况。

目录

前面已经说过,针对于不同的目标用户,他们在阅读这份规范的时候,可能会有不同的需求,因此需要一份完整的目录协助他们定位到相应的位置。

具体目录的展示形式要依据这份规范的展示情况来决定的,总之要考虑到具体的使用情况。

界面设计师职业进阶:如何建立一套 UI 设计规范?

有了目录, 那么接下来具体的内容就可以按照目录的结构依次进行展示。

产品概述

这部分其实是这份文档的开篇引言,会包括对于这个产品,以及产品使用情况的整体描述。

概述包括:

1. 产品的描述;

2. 设计规范试用人群;

其中的产品描述部分,可以包括产品品牌方面的一些要求,比如说启动图标的试用情况,品牌 logo 的使用情况等。

色彩

色彩的使用,基本上就要依托于产品定义层面上对于色彩的要求。往往也要考虑到「品牌规范」所要求的内容。

色彩方面主要考虑的在于主色调和辅助色,一般适用于通用控件或 强调的内容、文字、标签等。

接下来要考虑的是背景、线条、分隔线等色彩。

界面设计师职业进阶:如何建立一套 UI 设计规范?

对于不同的产品,需求可能不同,这里不详细描述这些都要包括哪些色彩方面的组合,但是基本上要保证的是涵盖现有产品的所有情况。

另外色彩方面大家经常会遗漏的是状态问题,包括正常、激活、点击以及点击完毕,针对于按钮、文字都有可能存在不同的展示。

字体与字号

在软件或者网站中,字体为了保证界面的统一性及易读性,一般只会使用一种字体;而对于一些特殊界面或者情况,则要单独处理,添加不同的字体样式。

通过文字样式设定字号,比如正文( Body )使用频率最高,那么以它为基准去设定其他文字的大小,或者可以遵照平台对字体的规范结合设计环境进行字号的设定。

界面设计师职业进阶:如何建立一套 UI 设计规范?

一般情况下,我们要定义尺寸的字号包括:

1. 标题字体,用于标题或者按钮等;

2. 正文字体,主要用于界面中显示的文字正文;

3. 列表分组标题,主要应用于列表区块;

4. 次要文字信息,主要应用于一些提示信息的文字或者次要信息的文字;

5. 标签文字,主要是应用在标签上。

其他可能还有不同的类型,是需要大家结合自己的产品,具体情况具体分析的。

图标

图标的关键在于统一。

另外依据于模块和功能的不同,需要将图标进行分类,并且保持同一模块或同一功能类型的图标保持大小、风格的一致,并且要考虑到具体的状态问题。

状态包括:正常、激活、点击、反馈、不可用等状态。

界面设计师职业进阶:如何建立一套 UI 设计规范?

对于应用的启动图标,可以出现在产品概述中,也可以出现在整体的图标规范展示中。

但是具体用法,实际上不建议在这里展示。

布局

产品的界面布局形式,重点会包括一级界面和次级界面。

这里就需要大家做很多归类的情况,把现有能够涉及到的布局形式涵盖其中。

展示形式可以通过线框图原型的方式进行展示。其中比较重要的是一些布局方面数据的规定—— UI 设计师一般都是算术高手。

为保证界面信息布局的统一性 韵律及易读性,界面中的边距需要统一;行间距种类不宜过多。过多的边距、行间距种类会使界面呈现混乱、 缺乏层级效果,影响用户浏览信息、操作功能。

界面设计师职业进阶:如何建立一套 UI 设计规范?

针对于布局方面,还需要考虑到一些特殊界面和创意界面的展示,在这方面,建议能够灵活考虑或运用,比如说一些内嵌的 Webview 界面,主要定义好具体的控件或品牌展示形式即可。

控件展示

控件的规范,和一般平台的 UI Guideline 基本上,在这里同样要求各位 UI 设计师能够做到规范化以及按照一定的逻辑进行归类。

在界面中控件的复用率很高, 所以相同功能的控件样式保持统一;以控件按钮举例,在不同的使用场景下, 按钮的大小、颜色有所不同,但是样式、 文字排版在一般情况下需要保持统一。

界面设计师职业进阶:如何建立一套 UI 设计规范?

对于每一个控件触发的状态,均需要不同的反馈状态。一般情况下,我们在阅读平台的 UI Guideline 时,能够看到里面会提到正确的情况和错误的情况,而我们在做 UI 设计规范时,一般情况下只要展示正确的情况即可。要保持留有一定的空间,这样才有助于设计师或研发工程师在阅读规范以后,能够产出新的创意,留有一些对于未来创新的期望。

另外控件的使用,需要考虑到的状态也会有些区别。包括:正常状态、选择&点击状态,激活&活跃状态,以及不可用状态。

对于控件,有可能会包括表盘等信息数据展示的控件,需要考虑的情况可能更多,比如说数据过载、警示等。

界面提示

这里涉及到一些界面的提示信息展示的形式,包括:

1. 弹出窗口,可以使用系统的弹窗,也可以使用自己单独设计的弹出窗口形式。

2. 进度展示,针对于进度条等展示的形式,包括加载过程中的动画等等。

3. 提示文字,针对于界面中可能出现的各种提示文字,给出展示形式的规范。

4. 为空情况,界面中没有信息,那么是否有给用户的具体提示呢?或者展示的是一个插画,这种情况下也需要编辑进入到 UI 设计规范的。

界面设计师职业进阶:如何建立一套 UI 设计规范?

提示信息的展示,在用户界面设计中,实际上也是非常重要的展示部分,因此在做规范的时候,需要给这些信息留下关键的标记。

特殊界面

按照我们之前的项目经验,是需要把一些特殊界面也归纳到 UI 设计规范中的,这类界面包括:

1. App 的启动页面,有的有可能是一张图,也有的可能是一个配合广告内容的启动页面,这种类型的界面同样需要加入在 UI 设计规范中。

界面设计师职业进阶:如何建立一套 UI 设计规范?

另外由于启动页面的形式会频繁做出更新,因此也需要把多种可用的形式记录在 UI 设计规范中。

2. 广告位界面,带有广告位的界面也是需要具体定义它们的展示形式。

我们一般情况下最常见的可能是 Banner 的展示,或者推荐广告的展示(这在产品运营中经常会使用到)。

界面设计师职业进阶:如何建立一套 UI 设计规范?

针对这类界面,我们可能要定义好尺寸,以及配色的范围等,在已有的范围内让设计师们自如的做设计。

3. 其他界面,这里可能是不好判断的,因为有可能要跟随产品的业务不同,涉及到的界面就会有很大区别。大家要按照自身产品的情况灵活配置。

UI KIT

UI KIT 不应该是一份文档,是一个界面元件库,是一张快捷的图示,告诉所有人现有的产品内容都有什么。

界面设计师职业进阶:如何建立一套 UI 设计规范?

UI KIT 有助于提升用户查看 UI 设计规范的效率,整理界面元件库包括色彩、字体和字号、 图标、布局及内容、控件等元素,相关人员使用它可以快速的开展设计工作。

切图和坐标标注规范

在 UI 设计规范中,也要包括切图规范。具体什么是切图,如何切图,希望大家去其他问题中寻找答案。

在这里,我主要讲的是几个切图和坐标标注需要规范的关键点:

1.切图命名的方式,这个极为重要,能够保证设计师与开发人员的沟通保持顺畅;

2.切图的规则,一些元素的输出,可能会存在多种输出方式,因此要建立统一的输出规则,比如说,图标的输出,应该是 SVG 的格式还是 PNG 的格式,以及图标的空白余地需要按照尺寸进行定义。

3.坐标标注的规则,同样是需要我们完善的制定规则,而且对于不同的平台都要单独去定义,包括标注的单位,布局的尺寸规范等等。

需要注意的是,现在有很多的团队逐渐会采用一些比较新的工作方式,来完成坐标标注的工作,因此需要设计师们具体评估自己产品团队的工作流程,是否需要这部分工作,并不是教条的一件事情。

最后需要注意的关键

最后还有几个关键点,是需要大家注意的:

1. UI 设计规范不是教条,而是需要大家灵活运用的总结。回到前面提到的目标, UI 设计规范的存在应该是提高工作效率,便于大家配合,而不应该是限制大家的条条框框,要根据具体情况具体分析。

2. 规范的设定需要后续的弹性空间。规范不可能涵盖所有场景,需要灵活运用,同样在规范设定时不能100%的限制界面中元素,要留有余地,否则设计过于死板,影响设计师发挥。

3. 设计师需要根据产品的迭代而更新优化设计规范,需要有专人去维护。在产品迭代中对旧的规范中设计不合理的、过时的进行优化处理,并及时归纳整理,通知到相关人员。

 

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: