软件UI设计规范.docxVIP

软件UI设计规范建立UI规范的目的将阳春白雪式的用户体验细化到具体的可执行的要求，建立各行业线关于界面元素设计及界面布局的通用规则及要求，提升公用组件复用度及用户体验，从而增加浪潮软件的产品竞争力。用户界面设计理念美观使用可视元素图1.1.1对元素进行分组图1.1.2对齐图1.1.3图1.1.4（反例）易理解一个系统应该很容易被用户学会和理解，用户应该知道：1、看什么2、做什么3、何时做4、在哪做5、为何做6、如何做信息的放置顺序应该经过深思熟虑，最小化用户记忆和寻找的成本必要的时候，一步步引导用户进行操作图1.2.1鼓励一旦用户完成了某个关键操作，要及时告知用户，提升用户的信心图1.3.1一致一个系统从头到尾的外观，行为，操作应该是一致的图1.4.1（反例）图1.4.2（反例）同样的行为，应该总是产生同样的结果图1.4.3（反例）图1.4.4（反例）相同功能的按钮视觉上保持一致，不同功能的按钮视觉上有所区别图1.4.5（反例）交互用户在交互过程中占有绝对主动权1、动作必须是用户请求的结果2、耗时较长的动作必须可以被打断图1.5.1从用户的需求出发呈现上下文图1.5.2图1.5.3（反例）系统能够对用户的请求快速地作出响应对用户的所有动作提供可视化的反馈信息达成目标的方式应该是灵活的，并和用户的技能，习惯，经验，偏好相适应图1.5.4图1.5.5提供反悔或取消的机会（undo cancel）图1.5.6效率最小化用户眼和手的移动幅度图1.6.1简化用户操作的步骤图1.6.2（反例）图1.6.3尽可能预料用户的想法和需求图1.6.4熟悉尽可能使用用户熟悉的概念和语言尽可能使界面自然，模仿用户的行为模式完美地兼容老产品灵活系统必须对不同用户的需求很敏锐，并且提供不同层次类型的功能，基于：1、用户的知识和技能2、用户经验3、用户的个人偏好4、用户的习惯5、当时的条件图1.8.1容错对于常见的人为失误有妥善的应对措施图1.9.1当错误发生时，提供建设性的提示图1.9.2无论发生什么错误，尽最大努力确保用户不丢失工作成果图1.9.3可预测用户能够预测到每个任务的正常进度图1.10.1所有用户希望达成的目标都应该完成简洁尽可能简洁的用户界面：突出重要的功能，隐藏复杂的，不常用的功能图1.11.1透明让用户关注他的任务而不是实现机制计算机内部的工作内容应该是不可见权衡最后的设计应该是基于一系列设计原则相互权衡的结果人们的需求总是凌驾于技术之上通用设计原则字体使用原则中文字体同级菜单，字体大小格式统一。图2.1.1.1使用的字体大小要规范：正文一般采用12px。图形字体与标题字体一般采用14px。图2.1.1.2推荐使用“微软雅黑”和“华文细黑”字体。不宜使用艺术字体，如华文彩云、隶书。图2.1.1.3英文字体默认字体使用“Tahoma”，大小12px。标题字体使用“Trebuchet MS。”图2.1.2.1文字对齐原则表单字段名左对齐，或者中线对齐。图2.2.1图2.2.2界面配色原则产品背景色体现浪潮品牌的蓝色；项目产品背景色体现客户行业品牌色，如深圳药监的天蓝色。图2.3.1图2.3.2要统一色调，颜色的使用要正确：如安全软件用黄色；高科技软件使用蓝色；环保软件易用用绿色。界面配色要有对比，在浅色背景上使用深色文字，深色背景上使用浅色文字同一页面，不宜采用3种以上颜色。图2.3.3链接应该有3种颜色：未点击，点击中，点击后。图2.3.4按钮设计原则宜使用圆角图标、渐变效果。图标大小通常为8的倍数，最小图标12px、16px，顶部24px或32px图片。图2.4.1图标树的大小是16px，树的大小适合宽度为210px。保持与系统整体特点以及风格一致。使用让用户容易联想到的事物，按钮能清晰表达意思。图2.4.2内页中按钮使用平面效果、不使用三维效果图。按钮应具备简洁的图示效果，应能够让使用者产生功能关联反应，群组内按钮应该风格统一，大小相似，标题字体保持一致，在整个系统中的显示位置要统一。功能差异大的按钮应该有所区别。图2.4.3按钮应该至少有4种状态效果：点击前鼠标未放在上面时的状态；鼠标放在上面但未点击的状态；点击时状态；不能点击时状态。图2.4.4按钮上若没有文字，必须提供鼠标悬停提示信息；按钮上有文字但是不足以准确传达按钮的功能时，也应该提供鼠标悬停提示信息。图2.4.5操作功能按钮向左对齐，按照使用频度（重要程度）从左到右排列；设置功能按钮和帮助按钮向右对齐。图2.4.6折叠菜单的标题栏应该做成”展开/折叠”的响应区域，方便鼠标点击。图2.4.7有图标和功能说明文字的，实现点击图片和说明文字，都可以达到预期的页面图2.4.8相同功能按钮的描述一致性表2.4.1统一名称操作描述增加对“新增”“添加”的统一描述修改对“修改”、“管理