XXXX后台产品设计规范V1

产品设计，尤其是后台类产品会频繁出现相同的功能模块，此时将已有的模块规范化组件化，可以大大提高后期产品设计、开发的效率...





本文是作者工作之余进行的一个总结，这是第一版内容，由于工作职位变动，所以这项工作我不再推进了，但是仍放在此作为工作中主动思考，不断寻求优化的一个记录。

状态 ：

[ √ ] 草稿

[

] 修改中

[

] 定稿

文件标签：

产品设计规范

版

本：

2015（1.0）

作

者：

王梦婕

日

期：

2015-03

版本历史... 2

1文档描述... 4

1.1编写目的... 4

1.2文档范围... 4

1.3预期的读者和阅读建议... 4

1.4参考文档... 4

1.5缩略语和术语... 4

2交互设计概要... 5

2.1交互设计内涵... 5

2.2交互设计作用... 5

2.3交互设计基本原则... 5

3产品设计规范概述... 6

3.1产品设计规范目的... 6

3.2产品设计规范作用... 6

3.3产品设计规范纲要... 6

4产品风格与整体感受... 7

4.1风格保持一致性... 7

4.2直观感受... 7

5产品信息交互... 8

5.1标题... 8

5.2提示... 8

5.3警告（此处仅说明警告信息内容）... 9

5.4确认... 10

5.5操作成功提示... 11

6产品结构... 12

6.1基本信息结构... 12

6.2页面信息结构... 12

7通用控件规则... 16

7.1按钮... 16

7.2下拉列表... 17

8可重用组件... 18

8.1Excel导入模块... 18

8.2Excel导出模块... 191文档描述

1.1编写目的

本文档描述XXXX后台系统的设计规范，用于指导后续的软件设计开发工作。本文档的预期读者包括但不限于：后台产品经理、交互设计师、UI设计师、开发人员和测试人员，也可供前台产品经理、客户、第三方产品的相关人员阅读。

1.2文档范围

本文档所定义的规范重点关注XXXX后台系统建设的业务目标，用于对常见模块、组件的设计规范化，统一后台系统以便于维护和管理。

1.3预期的读者和阅读建议

管理人员及开发人员：项目经理、系统工程师、软件开发人员、硬件开发人员、测试人员、型态管理人员、品质保证人员和软件使用客户。

1.4参考文档

无

1.5缩略语和术语

缩写、术语

解释

用户

这里的用户特指XXXX读平台用户

产品

这里的产品特指XXXX平台

控件标签

置于控件前方的，给予用户说明的label，例如用户名文本框前的“文本框：”

2交互设计概要

2.1交互设计内涵

交互设计，是定义、设计人造系统的行为的设计领域。人造物，即人工制成物品，例如：软件、移动设备、人造环境、服务、可佩戴装置以及系统的组织结构。交互设计在于定义人造物的行为方式相关的界面，它的出发点在于研究人在和物交流的时候，人的心理模式和行为模式，并在此研究基础上，设计人工物的可提供的交互方式，来满足人对使用人工物的三个层次的需求：有用性、可用性、情感性。

2.2交互设计作用

对本文而言，交互设计的目标在于提高系统的有用性、可用性、情感性，以提高用户体验。

2.3交互设计基本原则

• 置界面于用户的控制之下
• 减少用户的记忆负担
• 保持界面的一致性
• 用户界面应基于用户的心智模型，而非工程实现模型
• 以培养用户使用情景的思维方式做设计
• 尽量少地让用户输入，输入时尽量多给出参考
• 全局导航需要一直存在，最好还能预览其他模块的动态
• 提供非模块的反馈，不打断任务流
• 不要让用户等待任务完成，用户还要发现更多有意思的地方
• 自动保存用户的输入成果
• 为了程序响应的速度，设计有时候需要担任掩护的作用

3产品设计规范概述

3.1产品设计规范目的

后台产品有以下特点：

（1）功能可用、无故障最为重要；

（2）产品体量大，可重用模块多；

（3）功能复杂，操作学习成本高；

为此，需要制定一套后台产品的设计规范，主要用于统一后台的设计风格，规范化常用构件，固化常用的功能场景交互方式。

3.2产品设计规范作用

（1）规范后台设计风格，有利于后台整体的和谐统一

（2）集中规范常用组件的选择及其规约，提高其使用质量

（3）固化常用的功能场景交互方式，减少多次重复设计

（4）有利于后续的修订，提高后台交互的整体质量

3.3产品设计规范纲要

本文将主要从以下方面对产品设计进行规范：

（1）产品风格与整体感受

（2）产品信息交互

（3）产品结构

（4）通用控件规则

（5）可重用组件

（6）产品性能

4产品风格与整体感受

4.1风格保持一致性

混乱或不一致的风格，会加重使用者的认知负担，因此产品的风格应统一。产品风格包括以下方面：

J配色：尽量使用同一色系的颜色，以及黑色、白色；

J界面：页面的结构尽量保持一致性，尤其是同一层级的页面；

J文字：文字描述专业化、统一化，同一层级的文字说明要讲究对称性；

J新窗口：同一类型的新窗口，打开方式应保持统一；

J控件：控件的规则需统一，符合用户心智模型

J常用功能：常用功能应保持交互、流程的统一

4.2直观感受

产品的设计应给使用者一种积极的感受，提升使用愉悦性和使用效率。积极的感受来自以下方面：

J操作界面大方、简洁、工整；

J结构清晰，能迅速定位主次；

J文字清晰、美观、易于理解；

J信息交互友好；

J扁平化，可用、易用、情感性。

5产品信息交互

5.1标题

标题从广义上看，包括：菜单名、窗口名、控件标签等。标题应具有以下特点：简洁、意义明了、无歧义。下面对产品不同类型的标题进行说明：

（1）菜单名

• 菜单作为一个功能模块的入口，需要明确地表达各个模块的功能，不能产生歧义或含义不明，以避免用户产生误点。
• 为保证产品信息结构的集中、统一，可归于同一类的，尽量不放在不同菜单下。
• 同层级菜单下的功能模块，应具有相似性，例如：专题管理菜单下的专题管理、专区管理子模块，作用类似，分类性强，同时菜单名也应保持相似性、对称性。

（2）窗口名

• 窗口名应明确表达该窗口的功能，应有关键词，例如：XX新建、XX修改、XX审核等。
• 窗口名不能太长。

（3）控件标签

• 控件标签应明确表达控件的含义。
• 控件标签名不能太长，影响布局。
• 同样用途的控件，其标签名应保持相同，避免产生认知困难。

5.2提示

信息提示起到提前预知的作用，助于帮助用户顺利地进行操作。

提示主要包括以下几类：控件填写引导、规则说明、符号提示、含义说明等。下面进行详细说明：

（1）控件填写引导

用于提醒用户控件如何填写，例如下图情况（提示文字置于控件内部或右侧）：

控件填写引导理论上是必须的，可有效防止用户填写错误的可能性。由于当前后台产品错填情况较少，因此此引导可省略。如有提高用户体验的需求，则可酌情进行提示。

（2）规则说明

用于提醒用户表单区域的填写规则，用文字表述，例如：

“请至少填写其中的三项”、“带* 号的为必填项”

规则说明可帮助用户更好地了解表单的填写规则，一般情况下需进行说明。

（3）符号提示

主要应用场景是：提醒用户哪些控件是必填项，一般通过* 号标注。

（4）含义说明

为了提示用户具体名词的含义、补充解释，且同时考虑到节省页面空间，防止过多信息干扰用户的正常操作，常常会对需要补充解释的名词，使用隐藏式的补充说明，示例如下：

当鼠标悬停到“增长量”几个字之上时，显示悬浮层，进行“增长量”的解释。

5.3警告（此处仅说明警告信息内容）

警告用于操作后对于错误的提示，一般可包含以下几种情形：

（1）表单信息格式错误警告

用户输入表单信息，并向系统提交请求时，系统会进行信息合法性检查，如发现提交的信息格式与标准格式不符，应进行警告提示。警告提示的方式一般情况下是在相应表单的下发或右侧使用红色字体注明错误原因，不推荐使用弹窗进行提示。

（2）鉴权失败警告

由于系统的访问有权限控制，包括访问系统前的登录环节，以及登录后进入指定模块时的鉴权环节。在用户访问时若身份验证失败、或用户没有准入权限，则应提示用户登录失败的警告。

例如：登录失败时，应提示用户失败的原因：用户名错误、账号错误等，直接在控件周围使用红色字体标注即可；用户进入没有准入权限的模块，则弹窗提示“权限验证失败！”

（3）信息请求失败警告

当用户进行数据的请求时，若遇到任何系统问题所导致的信息请求失败时 （页面打不开、数据取不到……），需提示用户“系统异常，请求失败，请稍后再试！ ”

当用户进行数据的请求时，若因用户本身条件设置的原因（例如查询时）导致结果为空时，需提示“查询结果为空！ ”

（4）信息写入失败警告

当用户进行数据的写入（数据的存储、提交等）时，若遇到任何系统问题（例如故障、容量不足等）导致的写入失败情况时，徐提示用户“系统异常，请稍后再试！”

5.4确认

确认用于用户可能会误操作，且误操作会引起较大后果的环节。一般包括以下情形：

（1）保存确认

用户点击“保存”按钮进行信息的保存时，需要提示用户“确定保存？”

（2）提交确认

用户点击“提交”按钮进行信息的提交时，需要提示用户“确定提交？”

（3）删除确认

用户点击“删除”按钮进行信息的删除时，需要提示用户“确定删除？”

（4）关闭确认

用户点击“关闭”按钮进行窗口、页面的关闭时，需要提示用户“确定关闭？”

5.5操作成功提示

用户在进行任何一个操作后，系统需对用户进行反馈。当操作失败时，系统应给与失败提示（上文已详细说明），当操作成功时，系统也应给与成功的提示。

（1）提交成功

（2）保存成功

（3）删除成功

（4）修改成功

6产品结构

6.1基本信息结构

后台产品需有清晰明确的产品信息结构，以提高工作人员的操作效率。XXXX后台系统的基本信息结构主要分为：三层，对应于首页的三级导航。

（1）一级导航【红】

（2）二级导航【绿】

（3）三级导航【橙】

6.2页面信息结构

后台产品主要用于数据的查询、管理等，因此功能模块主页面的信息结构一般分为以下几部分：

（1）查询区【红】

查询区主要用于数据的查询，一般设置有查询条件选项，以及查询操作按钮。

二级信息元素

规约

查询条件

由一个或多个查询条件项组成，每个查询条件项包含：控件标签+输入控件

操作按钮

至少需包含两个按钮：“查询”、“清除”，

其中查询按钮触发查询，清除按钮触发查询条件恢复默认值

（2）列表区【绿】

列表区是页面最主要的信息内容，主要用于数据的展示。

二级信息元素

规约

序号

用于指示列表内每条数据的排列序号，从1开始，没有数据的行，不显示序号

列名（字段名）

用于表示列表每列数据的属性名称

复选框

列表内每一行（包括字段名所在行）各有一个复选框，用于选中本行数据

列表数据

数据可填可不填，具体于功能模块设计时确定

（3）操作栏【橙】

操作栏用于列表数据的操作。

二级信息元素

规约

操作功能键

功能键的显示名称为“图标+功能名”

（4）位置导航条【蓝】

主要用于用户当前所在页面的路径和所属层次的展示。

二级信息元素

规约

位置指示语

“您所在的位置：”

位置导航

XX>>YY>>ZZ……

其中：XX、YY、ZZ……分别为当前页面所属的一级模块、二级模块、三级模块结构……

（5）页码属性条【黄】

主要用于当前页面列表区的页码展示，以及提供不同数据页之间跳转的功能。

二级信息元素

规约

页码

显示当前所在页的页码，以及共页数，可设置页码，并迅速进入页码所在页

页面切换器

可进行页面的切换，向前/向后皆可。支持快速切换至首页/尾页

刷新按钮

刷新当前列表内数据

数据容量选择

可选择当前页面显示多少条数据

数据量展示

展示当前显示的数据量，以及查询到的总数据量

7通用控件规则

7.1按钮

页面窗口内如设有确定、取消等按钮，应放置在页面下方。按钮形状为圆角矩形。一般情况下页面下方最多设置2个按钮。

（1） 取消按钮

取消按钮的实际效果与窗口右上角的关闭按钮相同，都可用于退出当前窗口，结束当前窗口内进行的流程。当窗口内除了取消按钮外，还需要设置另外两个必要的按钮时，将取消按钮去掉，用窗口右上角的关闭按钮代替取消按钮的功能。

（2） 创建按钮

创建按钮用于新建、新增类窗口，进行窗口内新建内容的提交和保存，并在列表中创建一条记录。点击创建按钮后，创建的内容保存进数据库，并形成一条记录显示在列表中。

（3） 保存按钮

保存按钮用于修改类窗口，进行窗口内修改后内容的保存。点击保存按钮后，修改的内容保存进数据库，修改的数据覆盖原有数据，并更新列表相应数据。

（4） 提交按钮

提交按钮用于新建、新增类窗口，提交按钮所提交的内容不生成一条列表记录，仅将窗口中填写的数据提交至服务器。具体情况例如：审核的提交、留言的提交

（5） 确定按钮

确定按钮用于提示类窗口，进行提示内容的确认。点击确定按钮，即代表用户已知悉窗口中的提示内容。确定按钮在这种情况下一般单独使用。

（6） 关闭按钮

关闭按钮用于查看类窗口，不需提交保存数据，仅需查看后关闭窗口即可。关闭按钮一般单独使用。

（7） 是、否按钮

是、否按钮用于问询类窗口，需要用户对窗口内的询问给出是或否的回答，两个按钮同时使用。具体情况例如：是否删除窗口。

7.2下拉列表

下拉列表应有默认值：“请选择”，置于“请选择”，表示未选，对于未选的项目，不需提交其信息。

8可重用组件

8.1Excel导入模块

EXCEL导入模块是重用情况非常多的模块，考虑到其功能、规约基本相同，因此对其进行组件化。

（1）导入文件类型

数据的导入可使用csv/excel/txt等类型的文件，为了处理的方便，我们规定仅使用一种导入导出文件类型：excel，版本为：2003版。

（2）导入按钮命名

批量导入

（3）导入文件格式

用于导入的excel文件，其内容格式呈M行N列表格

其中第一行为表头

字段1

字段2

字段3

字段4

字段5

具体导入字段名称，依具体需求而定。

（4）导入窗口设计

导入窗口如下图所示：

（5）导入规则

• 如无特殊要求，导入时，将excel文档中的数据按次序添加至列表尾部，若列表内有ID（非序号），则按照规则自动为新增的数据生成ID。
• 导入的excel文档内表头字段名称应与列表内字段名称一一对应，最好采取相同的字段名称，若名称不相同，则需指定对应关系。
• 采用全量导入的方式，除非每条数据均能够导入，否则提示导入失败。
• 导出模块

EXCEL导出模块是重用情况非常多的模块，考虑到其功能、规约基本相同，因此对其进行组件化。

（1）导出文件类型

数据的导出使用excel类型的文件，版本为：2003版。

（2）导出按钮命名

批量导出

（3）导出文件格式

用于导出的excel文件，其内容格式呈M行N列表格

（4）导出规则

• 导出excel文档时，默认导出当前列表内所有数据。
• 导出excel文档时，默认导出列表中数据的每个字段。

（写于2015.03，未完待续）

    关注 王小狸