软件UI设计规范

《软件UI设计规范》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、UI规范软件UI设计规范第42页共42页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.2E

2、nter键282.7.3导航键（上下左右）282.7.4DEL键282.8鼠标283各模块设计原则293.1启动/登录界面29第42页共42页UI规范3.2主界面303.3导航303.4窗体布局323.5提示信息333.6文本框353.7弹出框/弹出窗口373.8下拉框/单选框/复选框383.9列表页面393.10报表规范423.11附件423.12各类控件的标准大小43第42页共42页UI规范建立UI规范的目的将阳春白雪式的用户体验细化到具体的可执行的要求，建立各行业线关于界面元素设计及界面布局的通用规则及要求，

3、提升公用组件复用度及用户体验，从而增加浪潮软件的产品竞争力。1用户界面设计理念1.1美观l使用可视元素图1.1.1l对元素进行分组图1.1.2第42页共42页UI规范l对齐图1.1.3图1.1.4（反例）第42页共42页UI规范1.1易理解l一个系统应该很容易被用户学会和理解，用户应该知道：1、看什么2、做什么3、何时做4、在哪做5、为何做6、如何做l信息的放置顺序应该经过深思熟虑，最小化用户记忆和寻找的成本l必要的时候，一步步引导用户进行操作图1.2.11.2鼓励l一旦用户完成了某个关键操作，要及时告知用户，提升

4、用户的信心图1.3.11.3一致l一个系统从头到尾的外观，行为，操作应该是一致的第42页共42页UI规范图1.4.1（反例）图1.4.2（反例）第42页共42页UI规范l同样的行为，应该总是产生同样的结果图1.4.3（反例）图1.4.4（反例）l相同功能的按钮视觉上保持一致，不同功能的按钮视觉上有所区别第42页共42页UI规范图1.4.5（反例）1.1交互l用户在交互过程中占有绝对主动权1、动作必须是用户请求的结果2、耗时较长的动作必须可以被打断图1.5.1第42页共42页UI规范l从用户的需求出发呈现上下文图1.

5、5.2第42页共42页UI规范图1.5.3（反例）l系统能够对用户的请求快速地作出响应l对用户的所有动作提供可视化的反馈信息l达成目标的方式应该是灵活的，并和用户的技能，习惯，经验，偏好相适应图1.5.4第42页共42页UI规范图1.5.5l提供反悔或取消的机会（undocancel）图1.5.61.1效率l最小化用户眼和手的移动幅度图1.6.1第42页共42页UI规范l简化用户操作的步骤图1.6.2（反例）图1.6.3l尽可能预料用户的想法和需求图1.6.41.1熟悉l尽可能使用用户熟悉的概念和语言第42页共42

6、页UI规范l尽可能使界面自然，模仿用户的行为模式l完美地兼容老产品1.1灵活l系统必须对不同用户的需求很敏锐，并且提供不同层次类型的功能，基于：1、用户的知识和技能2、用户经验3、用户的个人偏好4、用户的习惯5、当时的条件图1.8.1第42页共42页UI规范1.1容错l对于常见的人为失误有妥善的应对措施图1.9.1l当错误发生时，提供建设性的提示图1.9.2l无论发生什么错误，尽最大努力确保用户不丢失工作成果图1.9.3第42页共42页UI规范1.1可预测l用户能够预测到每个任务的正常进度图1.10.1l所有用户希

7、望达成的目标都应该完成1.2简洁l尽可能简洁的用户界面：突出重要的功能，隐藏复杂的，不常用的功能图1.11.11.3透明l让用户关注他的任务而不是实现机制l计算机内部的工作内容应该是不可见1.4权衡l最后的设计应该是基于一系列设计原则相互权衡的结果l人们的需求总是凌驾于技术之上第42页共42页UI规范1通用设计原则1.1字体使用原则1.1.1中文字体l同级菜单，字体大小格式统一。图2.1.1.1l使用的字体大小要规范：正文一般采用12px。图形字体与标题字体一般采用14px。图2.1.1.2l推荐使用“微软雅黑”和

8、“华文细黑”字体。不宜使用艺术字体，如华文彩云、隶书。图2.1.1.31.1.2英文字体l默认字体使用“Tahoma”，大小12px。标题字体使用“TrebuchetMS。”图2.1.2.11.2文字对齐原则l表单字段名左对齐，或者中线对齐。第42页共42页UI规范图2.2.1图2.2.2第42页共42页UI规范1.1界面配色原则l产品背景色体现浪潮品牌的蓝