产品UI设计操作规范.docx

产品UI设计规范
(初稿)
修订记录
*类别:A –增加 M –修改 D –删除
日期
版本号
类别
描述
作者
批准日期
批准人
2016-3-1

A
初稿
产品UI设计规范
【拟制】
产品部
【日期】
2016年3月1日
【审评人】
产品设计部
【日期】
【批准】
【日期】
【签发】
【日期】
目录
版权所有侵权必究 1
第一章 前言 5
产品现状 5
规范原则 5
规范目标 6
第二章 界面布局与操作顺序 7
总体布局细则 7
选项框与下拉列表 7
菜单、工具条与右键快捷菜单 7
弹出窗口 8
工具栏与工具箱 8
滚动条与状态条 9
按钮排列 9
操作顺序细则 9
第三章 操作指引 10
操作指引细节 10
第四章 美观与协调性 11
美观细则 12
协调性细则 13
风格的一致性 14
第五章 快捷键 15
快捷键细则 15
第六章 页面跳转 16
第七章 鼠标点击次数 17
鼠标点击次数 17
第八章 刷新等待时间 18
第九章 用户输入与提示信息 19
输入框输入错误提示处理方式: 19
查询信息提示方式 19
时间控件输入方式 19
前言
产品现状
公司已经实施上线运行的产品线目前有数条,每条产品线的产品成熟度和业务成熟度都有所不同,而产品使用客户覆盖不同层次的用户,有业务执行层面,有业务管理层面同时也有领导管理层面。每个不同层面的客户对产品界面和操作的需求感受是不同的。
从我们产品目前的风格角度来看,多条产品线所呈现的UI风格各有不同,既没有考虑产品本身的特性,也未考虑产品的客户需求,造成产品UI设计风格杂乱,操作杂乱的现状。
因此,产品UI设计应遵循同一操作规范,利于交叉工作的平缓顺利交接。以标准化方式,提高沟通和技术协作的水平,提高工作效率。减少和改变责任不明,任务不清,和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。
规范原则
以用户为中心。设计由用户控制的界面,而不是界面控制用户。
清楚一致的设计。所有界面的风格保持一致,所有具有相同含义的术语保持一致,且易于理解
较快的响应速度。
简单且美观。
规范目标
操作直观,容易学****br/> 在用户具有业务背景知识的前提下,通过少量培训,甚至不需培训,即可掌握系统的基本使用,而且不容易忘记。
使用便捷
操作流程设计合理;
减少实现某一功能的页面点击数;
提供键盘快捷键,使用户不依赖鼠标即可完成操作。
美观大方
页面布局合理,颜色搭配协调,减少视觉疲劳,具有现代感和专业感。但切忌无谓的花俏。
性能较高
目前系统部署在外网,运行效率不高。需提高页面展现速度,使操作更加顺畅。
兼容性好
目前NTS系统只能用于IE6。一些用户希望使用更高版本IE或Firefox等其它浏览器。
其它问题
回退键问题:当用户点击浏览器回退键时,有时会导致数据错误。应采取措施解决。
界面布局与操作顺序
界面布局应按照从左到右,从上到下的顺序排列,操作顺序也应遵循此顺序。理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。
总体布局细则
完成相同或相近功能的按钮用Frame框括起来,常用按钮要支持快捷方式。
完成同一功能或任务的元素放在集中位置,减少鼠标移动的距离。
按功能将界面划分局域块,用Frame框括起来,并要有功能说明或标题。
同一界面上的控件数不要超过10个,多于10个时建议使用分页界面显示。
选项框与下拉列表
选项数相同时多用选项框而不用下拉列表框。
界面控件较小时使用下拉框而不用选项框。
选项数较少时使用选项框,相反使用下拉列表框。
当采用下拉列表时,保证下拉列表在获得焦点时是处于界面最上层。
菜单、工具条与右键快捷菜单
没有顺序要求的菜单项按使用频率和业务重要性排列,常用的放在开头, 不常用的靠后放置;重要的放在开头,次要的放在后边。
菜单前的图标不宜太大,与字高保持一直最好。
主菜单的宽度要相同,字数不应多于四个,每个菜单的字数能相同最好。
主菜单数目不应太多,最好为单排布置。
菜单结构最多不要超过3层,多于3层考虑另分类。
完成相同或相近功能的菜单用横线隔开放在同一位置。
菜单前的图标能直观的代表要完成的操作。
菜单和工具条要有清楚的界限;菜单要求凸出显示,这样在移走工具条时仍有立体感。
菜单和状态条中通常使用五号字体。工具条一般比菜单要宽,但不要宽的太多,保持界面