产品ui设计操作规范

《产品ui设计操作规范》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、产品UI设计规范（初稿）修订记录*类别：A-增加M-修改D-删除日期版本类别描述作者批准日期批准人2016-3-10.0.01A初稿产品UI设计规范【拟制】产品部【日期】2016年3月1日【签发】【日期】目录版权所有侵权必究错误！未定义书签。第一章前言41.1产品现状41.2规范原则41.3规范目标4第二章界面布局与操作顺序62」总体布局细则62.2选项框与下拉列表62.3菜单、工具条与右键快捷菜单62.4弹出窗口72.5工貝栏与工貝箱72.6滚动条与状态条72.7按钮排列82.8操作顺序细则8第三

2、章操作指引93」操作指引细节9第四章美观与I•办调性104」美观细则104.2协调性细则114.3风格的一致性11第五章快捷键125」快捷键细则12第六章页面跳转13笫七章鼠标点击次数147」鼠标点击次数14第八章刷新等待时间15第九章用户输入与提示信息169」输入框输入错误提示处理方式：169.2查询信息提示方式169.3时间控件输入方式16第一章前言1.1产品现状公司已经实施上线运行的产品线目前冇数条，每条产品线的产品成熟度和业务成熟度都有所不同，而产品使用客户覆盖不同层次的用户，有业务执行层面

3、,有业务管理层面同时也有领导管理层面。每个不同层面的客户对产胡界面和操作的需求感受是不同的。从我们产品目前的风格角度來看，多条产品线所呈现的UI风格各有不同，既没有考虑产品本身的特性，也未考虑产品的客户需求，造成产品UT设计风格杂乱，操作杂乱的现状。因此，产品门设计应遵循同一操作规范，利于交叉工作的平缓顺利交接。以标准化方式，捉高沟通和技术协作的水平，捉高工作效率。减少和改变责任不明，任务不清，和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。1.2规范原则(-)以用户为中心。设计由用户

4、控制的界面，而不是界面控制用户。(-)清楚一致的设计。所有界面的风格保持一致，所有具有相同含义的术语保持一致，且易于理解(三)较快的响应速度。(四)简单且美观。1.3规范目标＞操作直观，容易学习在用户具有业务背景知识的前提下，通过少量培训，甚至不需培训，即可掌握系统的基本使用，而且不容易忘记。＞使用便捷操作流程设计合理；减少实现某一功能的页面点击数；提供键盘快捷键，使用户不依赖鼠标即可完成操作。＞美观大方页而布局合理，颜色搭配I•办调，减少视觉疲劳，具有现代感和专业感。但切忌无谓的花俏。＞性能较高口

5、前系统部署在外网，运行效率不高。需提高页面展现速度，使操作更加顺畅。＞兼容性好目前NTS系统只能用于IE6o一些用户希望使用更高版本IE或Firefox等其它浏览器。＞其它问题冋退键问题：当用户点击浏览器冋退键时，有时会导致数据错误。应采取措施解决。第二章界面布局与操作顺序界面布局应按照从左到右，从上到下的顺序排列，操作顺序也应遵循此顺序。理想的情况是用户不用查阅帮助就能知道该界而的功能并进行相关的正确操作。2.1总体布局细则1.完成相同或相近功能的按钮用Frame框括起来，常用按钮要支持快捷方式。

6、2.完成同一功能或任务的元素放在集屮位置，减少鼠标移动的距离。3.按功能将界面划分局域块，用Frame框括起來，并要有功能说明或标题。4.同一界面上的控件数不要超过10个，多于10个吋建议使用分页界面显示。2.2选项框与下拉列表1.选项数相同时多用选项框而不用下拉列表框。2.界面控件较小时使用下拉框而不用选项框。3.选项数较少时使用选项框，和反使用下拉列表框。4.当采用下拉列表时，保证下拉列表在获得焦点时是处于界面最上层。2.3菜单、工具条与右键快捷菜单1.没有顺序要求的菜单项按使用频率和业务重要性

7、排列，常'用的放在开头，不常用的靠后放置；重要的放在开头，次要的放在后边。2.菜单前的图标不宜太大，与字高保持一直最好。3.主菜单的宽度要相同，字数不应多于四个，每个菜单的字数能相同最好。4.主菜单数目不应太多，最好为单排布置。5.菜单结构最多不要超过3层，多于3层考虑另分类。6.完成相同或相近功能的菜单用横线隔开放在同一位置。7.菜单前的图标能直观的代表要完成的操作。&菜单和工具条要有清楚的界限;菜单要求凸出显示，这样在移走工具条时仍冇立体感。9.菜单和状态条中通常使用五号字体。工具条一般比菜单要

8、宽，但不耍宽的太多，保持界面整体协调。10.右键快捷菜单-采用与菜单相同的准则。2.1弹出窗口1.弹出窗口不能超过两层，多于2层可考虑在同一窗口显示。2.父窗体或主窗体的中心位置应该在对角线焦点附近。3.子窗体位置应该在主窗体的左上角或正屮。4•多个了窗体弹出时应该依次向右下方偏移，以显示窗体出标题为宜。1.在多窗口系统中，冇些界面要求必须保持在最顶层，避免用户在打开多个窗口吋，不停的切换甚至最小化其他窗口来显示该窗口。2.2工具栏与工具箱1.工具栏要求可以根据用户的