软件UI设计规范标准.doc

《软件UI设计规范标准.doc》由会员分享，可在线阅读，更多相关《软件UI设计规范标准.doc（44页珍藏版）》请在三一办公上搜索。

1、软件UI设计规范目录UI规范11用户界面设计理念51.1美观51.2易理解71.3鼓励71.4一致71.5交互101.6效率131.7熟悉141.8灵活151.9容错161.10可预测171.11简洁171.12透明171.13权衡172通用设计原则182.1字体使用原则182.1.1中文字体182.1.2英文字体182.2文字对齐原则182.3界面配色原则202.4按钮设计原则212.5文本校验原则232.6兼容性和个性化原则262.7键盘响应272.7.1TAB键272.7.2Enter键282.7.3导航键（上下左右）282.7.4DEL键282.8鼠标283各模块设计原则293.1启动

2、/登录界面293.2主界面303.3导航303.4窗体布局323.5提示信息333.6文本框353.7弹出框/弹出窗口373.8下拉框/单选框/复选框383.9列表页面393.10报表规范423.11附件423.12各类控件的标准大小43建立UI规范的目的 将阳春白雪式的用户体验细化到具体的可执行的要求，建立各行业线关于界面元素设计及界面布局的通用规则及要求，提升公用组件复用度及用户体验，从而增加浪潮软件的产品竞争力。1 用户界面设计理念1.1 美观l 使用可视元素图1.1.1l 对元素进行分组图1.1.2l 对齐图1.1.3图1.1.4（反例）1.2 易理解l 一个系统应该很容易被用户学会和

3、理解，用户应该知道：1、看什么2、做什么3、何时做4、在哪做5、为何做6、如何做l 信息的放置顺序应该经过深思熟虑，最小化用户记忆和寻找的成本l 必要的时候，一步步引导用户进行操作图1.2.11.3 鼓励l 一旦用户完成了某个关键操作，要及时告知用户，提升用户的信心图1.3.11.4 一致l 一个系统从头到尾的外观，行为，操作应该是一致的图1.4.1（反例）图1.4.2（反例）l 同样的行为，应该总是产生同样的结果图1.4.3（反例）图1.4.4（反例）l 相同功能的按钮视觉上保持一致，不同功能的按钮视觉上有所区别图1.4.5（反例）1.5 交互l 用户在交互过程中占有绝对主动权1、动作必须是

4、用户请求的结果2、耗时较长的动作必须可以被打断图1.5.1l 从用户的需求出发呈现上下文图1.5.2图1.5.3（反例）l 系统能够对用户的请求快速地作出响应l 对用户的所有动作提供可视化的反馈信息l 达成目标的方式应该是灵活的，并和用户的技能，习惯，经验，偏好相适应图1.5.4图1.5.5l 提供反悔或取消的机会（undo cancel）图1.5.61.6 效率l 最小化用户眼和手的移动幅度图1.6.1l 简化用户操作的步骤图1.6.2（反例）图1.6.3l 尽可能预料用户的想法和需求图1.6.41.7 熟悉l 尽可能使用用户熟悉的概念和语言l 尽可能使界面自然，模仿用户的行为模式l 完美地

5、兼容老产品1.8 灵活l 系统必须对不同用户的需求很敏锐，并且提供不同层次类型的功能，基于：1、用户的知识和技能2、用户经验3、用户的个人偏好4、用户的习惯5、当时的条件图1.8.11.9 容错l 对于常见的人为失误有妥善的应对措施图1.9.1l 当错误发生时，提供建设性的提示图1.9.2l 无论发生什么错误，尽最大努力确保用户不丢失工作成果图1.9.31.10 可预测l 用户能够预测到每个任务的正常进度图1.10.1l 所有用户希望达成的目标都应该完成1.11 简洁l 尽可能简洁的用户界面：突出重要的功能，隐藏复杂的，不常用的功能图1.11.11.12 透明l 让用户关注他的任务而不是实现机

6、制 l 计算机内部的工作内容应该是不可见1.13 权衡l 最后的设计应该是基于一系列设计原则相互权衡的结果 l 人们的需求总是凌驾于技术之上2 通用设计原则2.1 字体使用原则2.1.1 中文字体l 同级菜单，字体大小格式统一。图2.1.1.1l 使用的字体大小要规范：正文一般采用12px。图形字体与标题字体一般采用14px。图2.1.1.2l 推荐使用“微软雅黑”和“华文细黑”字体。不宜使用艺术字体，如华文彩云、隶书。图2.1.1.32.1.2 英文字体l 默认字体使用“Tahoma”，大小12px。标题字体使用“Trebuchet MS。”图2.1.2.12.2 文字对齐原则l 表单字段名

7、左对齐，或者中线对齐。图2.2.1图2.2.22.3 界面配色原则l 产品背景色体现浪潮品牌的蓝色；项目产品背景色体现客户行业品牌色，如深圳药监的天蓝色。图2.3.1图2.3.2l 要统一色调，颜色的使用要正确：如安全软件用黄色；高科技软件使用蓝色；环保软件易用用绿色。l 界面配色要有对比，在浅色背景上使用深色文字，深色背景上使用浅色文字l 同一页面，不宜采用3种以上颜色。图2.3.3l 链接应该有3种颜色：未点击，点击中，点击后。图2.3.42.4 按钮设计原则l 宜使用圆角图标、渐变效果。l 图标大小通常为8的倍数，最小图标12px、16px，顶部24px或32px图片。图2.4.1l 图

8、标树的大小是16px，树的大小适合宽度为210px。l 保持与系统整体特点以及风格一致。l 使用让用户容易联想到的事物，按钮能清晰表达意思。图2.4.2l 内页中按钮使用平面效果、不使用三维效果图。l 按钮应具备简洁的图示效果，应能够让使用者产生功能关联反应，群组内按钮应该风格统一，大小相似，标题字体保持一致，在整个系统中的显示位置要统一。功能差异大的按钮应该有所区别。图2.4.3l 按钮应该至少有4种状态效果：点击前鼠标未放在上面时的状态；鼠标放在上面但未点击的状态；点击时状态；不能点击时状态。图2.4.4l 按钮上若没有文字，必须提供鼠标悬停提示信息；按钮上有文字但是不足以准确传达按钮的功

9、能时，也应该提供鼠标悬停提示信息。图2.4.5l 操作功能按钮向左对齐，按照使用频度（重要程度）从左到右排列；设置功能按钮和帮助按钮向右对齐。图2.4.6l 折叠菜单的标题栏应该做成”展开/折叠”的响应区域，方便鼠标点击。图2.4.7l 有图标和功能说明文字的，实现点击图片和说明文字，都可以达到预期的页面图2.4.8l 相同功能按钮的描述一致性表2.4.1统一名称操作描述增加对“新增”“添加”的统一描述修改对“修改”、“管理”、“维护”的统一描述2.5 文本校验原则l 必填项给出必填标识，使用校验机制确保不为空（包括仅有空格的情况）。若必输项未填写完毕或者填写不符合规则就提交，应给出说明信息并

10、能自动获得焦点。图2.5.1l 非必填项字段，Null插入数据库不会出错，读取显示为正常留空（不能显示为Null）。l 焦点从当前输入框移开后，立即对当前输入框进行校验，不合格则给出提示，引导用户更正。l 身份证号、电子邮箱地址等特定字段的格式须符合需求的规定。图2.5.2l 所有字段必须有长度限制，并在激活输入框时给出明确提示，直到焦点从当前输入框移开。若用户在输入字符达到最大允许的长度后继续输入，则不再响应超出字符。（粘贴 超出给出提示）l 密码输入框内容显示为”*”或者”。图2.5.3l 用户名输入框应注明是否允许输入汉字等。图2.5.4l 日期显示格式为：yyyy-mm-dd。尽量使用

11、时间控件，并屏蔽手动输入。如果允许手动输入，则不允许字符串、汉字、特殊字符等。不允许截止日期小于开始日期。图2.5.5图2.5.6（反例）图2.5.7图2.5.8（反例）l 没有类型限制的输入区域，应可录入汉字、字母、数字、*&%$#!等所有类型字符。l 数值字段只能输入09，视情况决定是否可以输入”-”以及”.”。2.6 兼容性和个性化原则表2.6.1类别操作项基本规范优先级兼容性产品功能向后兼容楼上5各产品兼容楼上3各产品高浏览器兼容IE内核类（IE6、IE8）火狐浏览器Chrome浏览器高Java平台兼容JDK5.0高操作系统兼容Windows（XP、2003、7）Unix、Linux高

12、应用服务器兼容WebSphere（6.1及以后）WebLogic（9.2及以后）高数据库服务器兼容Oracle（10g及以后）DB2（9.1及以后）SQL Server（2005及以后）高分辨率兼容1024x7681440x9001366x7681280x800高个性化需求个性化皮肤定制提供2套以上的皮肤个性化门户定制提供可定制的门户界面常用功能个性化定制提供可定制的常用功能2.7 键盘响应2.7.1 TAB键l 界面支持TAB键自动切换功能。l Tab键的切换顺序与控件排列顺序要一致，一般情况下采用总体从上到下，行内从左到右的方式。2.7.2 Enter键l 焦点在文本输入框时，按下Ente

13、r可以触发查询/提交/确定/执行等操作。2.7.3 导航键（上下左右）l 选中下拉框的某一项后，上下键可以切换邻近选项。l 选中某一单选项/复选项后，上下左右键可以切换到邻近的项。2.7.4 DEL键l 选中一条或多条可以删除的条目，按DEL键能够触发删除事件。2.8 鼠标l 鼠标为不可点击状态时显示为，可点击状态显示为，系统忙时显示为，经过文本框显示为。l 系统除了文本输入外，其他所有功能都应该能通过鼠标来完成。3 各模块设计原则3.1 启动/登录界面l 软件启动封面要高清晰度的图像l 软件启动封面大小多为主流显示器分辨率的1/6大(微软标准)l LOGO要弱化、系统名要强化图3.1.1l

14、插图要有意义、象征性强l 使用的字体大小要规范：一般正文使用12px，图标文字或标题使用14pxl 图像的格式宜使用gif和pngl 插图宜使用独立版权的图片l 使用摄影图像时应该进行数位处理，比如做高斯模糊处理等l 打开新增（修改）页面时，光标初始定位在第一个待输入的文本区。图3.1.23.2 主界面l 遵循的总体规则为：导航优先 、分层显示、功能按重要度排序。l 主界面比例狭长型为宜，最佳比例为16:9 l 界面配色要形成对比：背景和前景要对比，如背景复杂+前景简单，前景深色+背景白色（或是浅色系）l banner图标宜用平面图图3.2.1l 色调使用：宜使用白色、浅色，如浅蓝色、浅绿色等

15、；不建议大范围的使用深色系的纯色3.3 导航l 导航方式有纯头部导航、头部导航+左侧导航、头部+右侧导航、图标导航等l 导航中显示主要功能，最多不超过8个；不常用功能加“更多”来显示l 如果有下级菜单应该有下级箭头符号标示图3.3.1l 导航中有选中状态和未选中状态要有区分，选中状态要突出、高亮或不同颜色显示l 不同功能区间应该用线条分割或是用空白分割图3.3.2l 菜单深度一般尽量不超过三层，菜单层次太多时，应给出返回主窗口、主分支的快捷链接。l 目录树中，鼠标悬停于非叶子节点时出现子节点，减少用户点击数。图3.3.3l 将重要信息放在上边和左边，左上角最容易吸引用户的注意力。图3.3.43

16、.4 窗体布局l 窗体进行最大化操作和最小化操作以及任意更改窗体大小时，页面排版均正常。窗体缩放时，窗体内的控件也要随窗体进行缩放。l 窗体有最小化、最大、关闭按钮l 控件对齐：控件水平排列成一行时，采用水平中对齐，控件间隔按要求基本保持一致；行与行之间间隔相同；窗体边界距离应大于行间间隔图3.4.1l 控件对窗体的覆盖率以不高于75%为宜l 按钮与窗体上、下、左、右之间的间距为14px，按钮之间的间距为6px图3.4.2l 并列关系的控件间应该左对齐，同行的控件应该横向对齐，有从属关系的应该缩进。图3.4.33.5 提示信息l 提示消息尽量不抢夺用户的操作权利，尽量不强制用户进行操作。通知类

17、的消息（不需要用户反馈信息），不能强制用户进行操作。 图3.5.1（正反例对比）l 用户进行危险性操作或破坏性操作、运行状态错误时，系统应该有简洁易懂、口语化的提示信息。一切含有计算机专业术语的提示信息都应该杜绝（尤其是诸如SQL错误，空指针异常等信息）。 图3.5.2（正反例对比）l 同一系统内同类交互信息（提示信息、询问信息、警告信息、错误信息）风格要统一，避免大量使用大红色。图3.5.3（反例）l 耗时的操作系统有反馈信息，在进行长时间的操作时，要有等待光标、进度条或其他的可视反馈。图3.5.4l 四种类型的交互信息的颜色选择a)系统提示信息：提示需要让用户注意的问题。用蓝色 b)询问信

18、息：如是否继续某个操作。用蓝色图3.5.5c)警告信息：如提示某个安全问题。用橙色d)错误信息：系统运行时出现的错误信息。用红色3.6 文本框l 如果单行文本框能够满足需求，就不采用多行文本框。图3.6.1（反例）l 单行文本框不宜过长或过短，以可完整显示最大可输入内容为最佳。图3.6.2l 多行文本框录入内容超过文本框宽度能够自动换行。图3.6.3图3.6.4（反例）l 多行文本框录入内容超过页面显示区域，显示滚动条，可滚动显示。图3.6.5l 交互信息页面的风格一致，最好有统一的交互页面。l 不可修改的字段，统一使用灰色文字显示。图3.6.6l 输入域无特殊说明一律左对齐（金额可右对齐）。

19、l 搜索框显示搜索建议。图3.6.73.7 弹出框/弹出窗口l 交互不复杂的情况下，尽量不使用弹出窗口，而在当前页面完成交互。图3.7.1图3.7.2（反例）l 弹出式窗口应尽量在不借助水平和垂直滚动条的情况下显示所有内容。图3.7.33.8 下拉框/单选框/复选框l 下拉框的长度与实际显示的数目一致，不能有空白行。下拉框不能超过20行，如果选项超过20个，应该在下拉框中加入滚动条，或者按照层级关系采用多个下拉框联动方式实现。l 下拉框的宽度与实际需求匹配，不可出现某行内容显示不全的情况，也不可出现宽度大大超出需求的情况。图3.8.1l 下拉框要有默认选项，如果确实不需要默认选项，则默认选中“

20、请选择”或者“-”。图3.8.2l 列表中，单选框和复选框的不能同时运用在同一区域中。图3.8.3（反例）l 下拉内容少于等于3项，用单选框代替。l 界面空间拥挤时，使用下拉框而不用单选框。l 如果下拉框可以输入，则下拉框中的内容要根据输入内容进行动态调整。图3.8.4l 复选框中选项个数比较多，建议采取悬浮复选的形式图3.8.53.9 列表页面l 列表查询条件项文字信息垂直右对齐、输入框信息左对齐，中间使用中文全角标点符号l 鼠标经过列表项有颜色变化，列表中每一条记录的尾部，都应该加上快捷按钮，方便对该条目进行相应地操作。列表项显示文字信息居左对齐，列之间采用空白分割，不用线条分割。图3.9

21、.1l 列表字段名信息能排序，有排序箭头符号标示l 翻页功能支持输入页码跳转，除下面情况外，其他情况必须进行分页处理：a) Grid显示的数据量几乎不增长且总数据量控制在某个范围内（建议以20条数据作为这个范围的分界点）。b) 实际业务明确要求不能分页图3.9.2n 所有Grid列表必须指定自动扩展列，避免在高分辨率下出现下图所示的空白区域。图3.9.3（反例）l 若存在分页，则Grid的高度设置以恰好完全显示一页数据为佳。图3.9.4（反例）l 同一系统分页每页数据显示行数统一。l Grid可以添加序号列，但禁止定义序号列的列标题图3.9.53.10 报表规范l 报表结果页面显示的标题与功能要一致l 查询结果的显示项应该都在黑色框l 查询结果每列、行有明显分割线l 报表结果的对其方式：文字左对齐，数字右对齐图3.10.13.11 附件l 可正常添加符合格式的附件（大小限制提示 进度条）（选择和保存合并为一步）l 附件可正常打开和保存，附件名较长时可正常操作l 直接输入错误的附件地址，保存时应给出恰当的提示信息。（加图）l 附件打开和保存到本地时，文件名要显示原文件的文件名。3.12 各类控件的标准大小图3.12.1