产品UI设计操作规范

1、产品UI设计规范（初稿）修订记录*类别：A 增加 M 修改 D 删除日期版本号类别描述作者批准日期批准人2016-3-10.0.01A初稿产品UI设计规范【拟制】产品部【日期】2016年3月1日【审评人】产品设计部【日期】【批准】【日期】【签发】【日期】目 录版权所有 侵权必究1第一章前 言51.1产品现状51.2规范原则51.3规范目标6第二章界面布局与操作顺序72.1总体布局细则72.2选项框与下拉列表72.3菜单、工具条与右键快捷菜单72.4弹出窗口82.5工具栏与工具箱82.6滚动条与状态条92.7按钮排列92.8操作顺序细则9第三章操作指引103.1操作指引细节10第四章美观与协调性

2、114.1美观细则124.2协调性细则134.3风格的一致性14第五章快捷键155.1快捷键细则15第六章页面跳转16第七章鼠标点击次数177.1鼠标点击次数17第八章刷新等待时间18第九章用户输入与提示信息199.1输入框输入错误提示处理方式：199.2查询信息提示方式199.3时间控件输入方式19第一章 前 言1.1 产品现状公司已经实施上线运行的产品线目前有数条，每条产品线的产品成熟度和业务成熟度都有所不同，而产品使用客户覆盖不同层次的用户，有业务执行层面，有业务管理层面同时也有领导管理层面。每个不同层面的客户对产品界面和操作的需求感受是不同的。从我们产品目前的风格角度来看，多条产品线所

3、呈现的UI风格各有不同，既没有考虑产品本身的特性，也未考虑产品的客户需求，造成产品UI设计风格杂乱，操作杂乱的现状。因此，产品UI设计应遵循同一操作规范，利于交叉工作的平缓顺利交接。以标准化方式，提高沟通和技术协作的水平，提高工作效率。减少和改变责任不明，任务不清，和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。1.2 规范原则(一) 以用户为中心。设计由用户控制的界面，而不是界面控制用户。(二) 清楚一致的设计。所有界面的风格保持一致，所有具有相同含义的术语保持一致，且易于理解(三) 较快的响应速度。(四) 简单且美观。1.3 规范目标Ø 操作直观，容易学习在用户具有

4、业务背景知识的前提下，通过少量培训，甚至不需培训，即可掌握系统的基本使用，而且不容易忘记。Ø 使用便捷操作流程设计合理；减少实现某一功能的页面点击数；提供键盘快捷键，使用户不依赖鼠标即可完成操作。Ø 美观大方页面布局合理，颜色搭配协调，减少视觉疲劳，具有现代感和专业感。但切忌无谓的花俏。Ø 性能较高目前系统部署在外网，运行效率不高。需提高页面展现速度，使操作更加顺畅。Ø 兼容性好目前NTS系统只能用于IE6。一些用户希望使用更高版本IE或Firefox等其它浏览器。Ø 其它问题回退键问题：当用户点击浏览器回退键时，有时会导致数据错误。应采取措施

5、解决。第二章 界面布局与操作顺序界面布局应按照从左到右，从上到下的顺序排列，操作顺序也应遵循此顺序。理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。2.1 总体布局细则1. 完成相同或相近功能的按钮用Frame框括起来，常用按钮要支持快捷方式。2. 完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。3. 按功能将界面划分局域块，用Frame框括起来,并要有功能说明或标题。4. 同一界面上的控件数不要超过10个，多于10个时建议使用分页界面显示。2.2 选项框与下拉列表1. 选项数相同时多用选项框而不用下拉列表框。2. 界面控件较小时使用 下拉框而不用选项框。3.

6、选项数较少时使用选项框，相反使用下拉列表框。4. 当采用下拉列表时，保证下拉列表在获得焦点时是处于界面最上层。2.3 菜单、工具条与右键快捷菜单1. 没有顺序要求的菜单项按使用频率和业务重要性排列，常用的放在开头， 不常用的靠后放置；重要的放在开头，次要的放在后边。2. 菜单前的图标不宜太大，与字高保持一直最好。3. 主菜单的宽度要相同，字数不应多于四个，每个菜单的字数能相同最好。4. 主菜单数目不应太多，最好为单排布置。5. 菜单结构最多不要超过3层，多于3层考虑另分类。6. 完成相同或相近功能的菜单用横线隔开放在同一位置。7. 菜单前的图标能直观的代表要完成的操作。8. 菜单和工具条要有清

7、楚的界限;菜单要求凸出显示，这样在移走工具条时仍有立体感。9. 菜单和状态条中通常使用五号字体。工具条一般比菜单要宽，但不要宽的太多，保持界面整体协调。10. 右键快捷菜单采用与菜单相同的准则。2.4 弹出窗口1. 弹出窗口不能超过两层，多于2层可考虑在同一窗口显示。2. 父窗体或主窗体的中心位置应该在对角线焦点附近。3. 子窗体位置应该在主窗体的左上角或正中。4. 多个子窗体弹出时应该依次向右下方偏移，以显示窗体出标题为宜。5. 在多窗口系统中，有些界面要求必须保持在最顶层，避免用户在打开多个窗口时，不停的切换甚至最小化其他窗口来显示该窗口。2.5 工具栏与工具箱1. 工具栏要求可以根据用户

8、的要求自己选择定制。2. 相同或相近功能的工具栏放在一起。3. 工具栏中的每一个按钮要有及时提示信息。4. 一条工具栏的长度不能超出屏幕宽度。5. 工具栏的图标能直观的代表要完成的操作。6. 系统常用的工具栏设置默认放置位置。7. 工具栏太多时可以考虑使用工具箱。8. 工具箱要具有可增减性，由用户自己根据需求定制。9. 工具箱的默认总宽度不要超过屏幕宽度的1/5。2.6 滚动条与状态条1. 滚动条的长度要根据显示信息的长度或宽度能及时变换，以利于用户了解显示信息的位置和百分比。2. 状态条的高度以放置五号字为宜，滚动条的宽度比状态条的略窄。2.7 按钮排列1. 重要的命令按钮与使用较频繁的按钮

9、要放在界面上注目的位置（并且设置快捷键）。2. 错误使用容易引起界面退出或关闭的按钮不应该放在易点位置。横排开头或最后与竖排最后为易点位置。3. 与正在进行的操作无关的按钮应该加以屏蔽(Windows中用灰色显示，无法操作该按钮)。2.8 操作顺序细则1. 界面要支持键盘自动浏览按钮功能，即按Tab键的自动切换功能，切换应遵循从左到右从上到下的顺序。（若是控件非可输入或选择，可跳过Tab键）。2. 界面上首要输入和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口较醒目的位置。3. 复选框和选项框按选择几率的高底而先后排列。4. 复选框和选项框要有默认选项，并支持Tab选择。第三章 操作指

10、引用户登录后应有一定的指引性，最好能引导用户使用此软件，提高用户的认知度。若用户第一次登录，应有操作指引（也就是帮助提示，例如：Office里的小助手）。3.1 操作指引细节1. 状态条要能显示用户切实需要的信息，常用的有：前一次登录时间、目前的操作、系统状态、用户信息、提示信息、错误信息等，如果某一操作需要的时间较长，还应该显示进度条和进程提示2. 用户第一次登录时，应有操作指引，引导用户操作。3. 提供路径指明用户所在功能或菜单位置。4. 信息栏显示用户当前操作信息。5. 界面布局排列应有指引用户的作用，引导用户输入首要信息和重要信息。6. 按钮名称应该易懂，用词准确，摒弃模棱两可的字眼，

11、要与同一界面上的其他按钮易于区分，能望文知义。7. 可写控件检测到非法输入后应给出说明并能自动获得焦点。8. 对可能造成数据无法恢复的操作必须提供确认信息,给用户放弃选择的机会。9. 对运行过程中出现问题而引起错误的地方要有提示，让用户明白错误出处，避免形成无限期的等待，系统异常或错误需保证留有日志，供技术人员排查。10. 在运行过程中出现的异常或错误提示必须是中文显示，不允许是纯英文提示信息；在提示信息中必须具有指引性信息。（如“系统出现异常，请联系系统管理员（张三：136000000）”）第四章 美观与协调性界面应该大小适合美学观点，感觉协调舒适，能在有效的范围内吸引用户的注意力。以下图为

12、例（图4-1）：界面分布分别是：上为菜单、工具栏；左为树形结构（不超过3层）；右为实际操作区； 4.1 美观细则1. 从左到右比例：左边为18%，右边为82%2. 若在只有菜单的情况下（如：NTS非税系统）则遵循上下比例：上为12%，下位88%3. 若有菜单和工具条的情况下（如：Windows资源管理）则遵循菜单和工具条之间的比例,菜单中字体大小9-14号，字体上下距离为5-10像素；工具栏中的字体和菜单栏一样，字体上下距离为8-12像素4. 工具条中的图片与文字比例。图片与文字以横放，则图片与文字的大小要相近高度，图片不能大于（或小于）文字上下超过5像素（图例4-5）。 图例（4-5）5.

13、工具条中的图片与文字比例。图片与文字以竖放，则文字宽度不得大于（或小于）图片左右超过20像素（图例4-6）。 图例（4-6）4.2 协调性细则1. 按钮大小相同，忌用太长的名称，免得占用过多的界面位置。2. 按钮的大小要与界面的大小和空间要协调。3. 避免空旷的界面上放置很大的按钮。4. 放置完控件后界面不应有很大的空缺位置。5. 字体的大小要与界面的大小比例协调, 通常使用的字体中宋体9-16较为美观，不用超过16号的字体。6. 前景与背景色搭配合理协调，反差不宜太大，少用鲜艳的颜色，如大红、大绿等。主色要柔和，具有亲和力与磁力，坚决杜绝刺目的颜色。7. 界面风格要保持一致，字的大小、颜色、

14、字体要相同，除非是需要艺术处理或有特殊要求的地方。8. 如果窗体支持最小化和最大化或放大时，窗体上的控件也要随着窗体而缩放；切忌只放大窗体而忽略控件的缩放。9. 对于弹出窗口（即子窗体）不应有放大缩小，即右上角只有关闭功能。10. 父窗体支持缩放时，子窗体无需支持缩放。11. 建议能给用户提供自定义界面风格则更好，由用户自己选择颜色、字体等。4.3 风格的一致性1. 安装界面上应有单位介绍或产品介绍，并有自己的图标。2. 主界面，最好是大多数界面上要有公司图标或名称。3. 登录界面上要有本产品的标志，同时包含公司图标或名称。4. “关于”中应有版权和产品信息。5. 公司的系列产品要保持一直的界

15、面风格，如背景色、字体、菜单排列方式、图标、安装过程、按钮用语等应该大体一致。第五章 快捷键在菜单及按钮中使用快捷键可以让喜欢使用键盘的用户操作得更快一些， 快捷键应用应与Windows中快捷键是一致的。 5.1 快捷键细则1. 面向事务的组合有: Ctrl-D 删除 ；Ctrl-F 寻找 ；Ctrl H替换；Ctrl-I 插入 ；Ctrl-N 新记录 ；Ctrl-S 保存 Ctrl-O 打开。2. 列表: Ctrl-R ，Ctrl-G定位；Ctrl-Tab下一分页窗口或反序浏览同一页面控件。3. 编辑:Ctrl-A全选；Ctrl-C 拷贝；Ctrl-V 粘贴；Ctrl-X 剪切；Ctrl-Z

16、撤消；Ctrl-Y恢复。4. 文件操作:Ctrl-P 打印；Ctrl-W 关闭。5. MS Windows保留键:Ctrl-Esc 任务列表 ；Ctrl-F4 关闭窗口； Alt-F4 结束应用；Alt-Tab 下一应用 ；Enter 缺省按钮/确认；Esc 取消按钮/取消。按钮中：可以根据系统需要而调节，以下只是常用的组合。Alt-Y确定(是)；Alt-C取消；Alt-N 否；Alt-D删除；Alt-Q退出；Alt-A添加；Alt-E编辑；Alt-B浏览；Alt-R读；Alt-W写。这些快捷键也可以作为开发中文应用软件的标准,但亦可使用汉语拼音的开头字母。第六章 页面跳转1. 同一个业务功能

17、的页面跳转次数要求在3次以下，严禁超过5次。当页面跳转次数超过3次以后，必须要有操作说明或指引。2. 能够在同一个页面中完成的功能操作必须在一个页面完成。3. 在同一个页面中，新打开的页面不允许覆盖或替换已经打开的页面区域。第七章 鼠标点击次数操作鼠标次数越少，用户越能加快使用；减少操作率，提高用户使用速度。7.1 鼠标点击次数1. 用户登录鼠标点击次数在2次以下。2. 从菜单到功能，鼠标点击次数在3次以下。3. 每个功能操作在4次以下。第八章 刷新等待时间1. 每页刷新等待时间不超过10秒。刷新时间超过5秒，必须给出明显的等待提示信息。2. 在主界面载入完毕后自动卸出内存，让出所占用的WIN

18、DOWS系统资源。3. 关闭所有窗体，系统退出后要释放所占的所有系统资源 ，除非是需要后台运行的系统；防止对系统的独占使用。第九章 用户输入与提示信息9.1 输入框输入错误提示处理方式：1. 弹出错误提示信息，提示框标题应统一使用“错误提示”，提示框内容统一前面警示图标，后面是提示内容，当点击确定按钮后，该输入框获得焦点，内容清空。2. 当输入框获得焦点时，该输入框的限制自动显示，当输入的超出限制时输入框后面给与提示文字。3. 当输入框获得焦点时，该输入框的限制自动显示，当输入的不符合限制时，后面给予提示标识，当移到标识上时，给出错误提示。4. 错误提示信息统一采用红色字体显示，警示图表采用黄色图标。错误信息提示禁止采用弹出窗口方式提醒。9.2 查询信息提示方式1. 当查询内容没有满足查询条件的时候，查询列表不显示，给出：“很抱歉，没有查找