规范名称：广银移动终端设计规范1.0

团队名称：灯光音响设计团队

交互设计师：Echo、张静

视觉设计：齐杰、Kevin、朱杰峰、三牛、张晔

下图是我们灯光音响团队花了半年时间利用周末完成的移动终端通用设计规范。

这套通用规范旨在帮助设计人员快速开始为自己团队的应用程序制定设计规范，并降低设计人工成本。

这套设计规范的1.0版本计划于一个月后通过本公众号正式发布。发布的内容包括移动终端设计规范手册以及相应的组件版本，敬请关注。

本文主要讲述广银团队制作设计规范的过程。本文的大纲如下：

一、项目背景

二、项目意义

3、会员建设

4、规范目录建设

5. 组件内容模板

6. 任务分配

7. 进度跟进

一、项目背景

市场上几乎没有通用的移动终端设计规范文档。

目前广为流传的是iOS官方设计指南和.但这两个规范是系统平台层面的设计推荐指南，不能形成标准规范，也不适用于具体的App产品。

网上有一些移动App设计规范，但都是针对特定业务的可视化规范，比如今日头条、滴滴等，这些规范不完整、通用性弱，无法直接被其他产品App复用。

我以交互设计师的身份向外界输出已经三年了。我一直希望能够传播自己的设计专业知识，降低设计学习的门槛。

所以去年我组织了一组设计师来研究一套通用移动设计规范项目。

二、项目意义

1. 开源

设计规范完成后，移动设计规范手册和相应的组件库将通过我的公众号分享，以便在设计圈内流传。

这样，如果其他设计师想要为自己团队的产品设计规范，就可以直接根据我们的规范进行适当的修改，变成一套自己团队产品的设计规范，服务于广大设计师朋友。

2、学习能力

在制定设计规范的过程中，对于我们参与的七位设计师来说也是一次学习的机会。在制作过程中，我们可以进一步学习移动端的专业知识，通过不断的思考、优化和设计，让我们的设计更加高效。思想的碰撞。专业能力进一步提升。

3、迭代

《灯光音响设计规范》1.0版本发布后，还将继续迭代优化。

2.0版本主要针对1.0版本进行了整体优化，优化了统一性、细节以及设计规则定义等。

3.0版本增加了组件样式和类型，使灯光、声音设计规范更加科学、合理、全面。

4、影响力

制定一套向公众开放的设计规范，可以提升我们设计师的行业影响力。我们致力于通过个人的努力和成果给整个设计圈带来积极的反馈。

为设计圈贡献我们的微薄之力，降低设计学习的门槛，贡献我们的个人价值，增加我们的影响力。

3、会员建设

在我产生了做一个移动设计规范项目的想法后，我开始在我的设计圈中寻找志同道合的设计师来完成这个项目。

约30名设计师报名，经过筛选，最终选出7名设计师，其中交互设计师2名，视觉设计师5名。

4、规范目录建设

设计规范的第一步是建立整个规范的目录。设计规范有一个好的目录就成功了一半，所以规范目录就显得尤为重要。

创建规范目录通常有两种方法。

首先是所有设计师一起开会讨论，确定主要框架的内容，然后一起细化里面的详细框架，最后完成目录的构建。然而，这种方法需要花费大量时间并且需要高度协调。

第二种方法是由具有丰富设计规范经验的设计师主导完成目录。完成后他会和大家一起讨论优化迭代目录。这种方法效率很高，并且需要较少的协作。

由于大家都是在线协作，追求效率，所以我们采用第二种方式来标准化目录。

起初，齐杰制作了整个标准目录。他完成后，我提出了一些修改建议。修改完成后，所有目录内容都发布到设计组，周日其他设计师通过语音一起工作。召开会议对目录进行重大修改。

经过会议，规格目录基本确定。这为后续行动打下了良好的基础。

下图为当时确定的规格目录：

5. 组件内容模板

组件内容的模板会严重影响整个设计规范的质量。组件的内容必须满足四个方面：

1、内容要实用，不能有多余、无用的信息；

2、组件内容必须完整，适合交互设计师和视觉设计师使用；

3、组件的不同分类要清晰，以便快速找到和使用；

4、需要标明可能出现的极端情况，以方便后续使用，避免极端场景下设计规范缺失。

因此，移动终端设计规范组件内容模板的组成就是其中之一。主要的事情。

接下来以UI栏中的搜索栏（Bar）为例，简单介绍一下组件内容模板。模板包括：定义、类型、用途、类型示例、极限情况处理方法。

1. 定义

用户可以通过输入关键词来搜索自己想要的信息。

2. 类型

基本类、扩展类和分类过滤器类。

3. 目的

当应用程序包含大量信息时，用户可以通过搜索快速定位到特定内容。

4. 类型示例

4.1基础类

仅提供文本输入用于搜索功能。

互动说明：

1、用户激活输入框，跳转到新界面；

2、在输入过程中，用户点击删除图标，可以清除输入框中的字符，并停留在活动界面。

4.2扩展类

扫描搜索栏内置的二维码或麦克风语音交互。

互动说明：

1、用户点击相机图标跳转至扫描功能界面；

2、用户点击麦克风图标将语音转文字或跳转至语音助手功能界面；

3、用户点击取消按钮，返回输入框正常界面。

4.3 分类和过滤类别

搜索结果可以排序和过滤。

互动说明：

1. 用户点击搜索后，会出现搜索和过滤类别。切换不同类别，将信息过滤到对应类别的信息；

2、搜索完成后，用户点击删除图标，返回输入框激活状态。

5. 极端情况如何处理

5.1 文本脱行

只支持文本输入，不允许换行输入，当文本超出行时，文本会移到前面。

5.2 显示不完整时

当所有类别项无法显示时，会部分显示类别项，让用户知道可以通过向左滑动查看更多类别项。

6. 任务分配

目录和组件内容模板完成后，下一步就是确认视觉元素的全局规范。

视觉元素也根据每个设计师的专业领域进行分配。每个人完成视觉元素后，再召开会议讨论确定每个细节并进行修改。

有了全局规范sketch输出规范，所有视觉设计师接下来就会根据全局规范来制定组件设计规范。

组成部分的工作量比较大，每个模块按照一个设计者来分配任务。

例如，冯杰负责导航类，三牛负责表单类，齐杰负责内容展示类，张晔和三牛负责操作反馈类，凯文负责UI栏和提示类别。

规范中涉及到的文字内容是由我之前整理的设计文档提供的，后续会进行统一和优化。我和另一个交互（张静）负责整体的规则定义和规范细节。

7. 进度跟进

通过协作文件进行进度跟进。设计师只有周末才有时间做设计，这很考验设计师的自制力。要求两周召开一次会议sketch输出规范，确认每个人负责的模块的进度。

确保每周都有进度，使设计规范最终得以落实。

经过半年的设计，《光声设计规范1.0》已基本成型。感谢视觉设计师的辛勤劳动。视觉设计师在这个项目上花费了大量的时间和精力。

以上就是我们灯光音响团队制作设计规范的流程。希望对大家制定设计规范有所帮助。

这套设计规范的1.0版本计划于一个月后通过本公众号正式发布。发布内容包括移动终端设计规范手册及相应组件版本，敬请关注。

【您的观看就是我的动力】

如有侵权请联系删除！