UI设计规范.doc

美工页面美观设计标准版本 UI设计标准1 整体风格规范用一句概括就是：“设计由用户控制的界面，而不是用界面来控制用户，以人为本”。l 界面设计简洁美观、配色合理、大方一致。l “以用户为中心”根据用户合理的需求进行设计，针对不同用户的层次进行设计。1.1 一致性界面的一致性使得在用户对于界面运作建立起精确的心里模型，从而降低培训和支持成本。设计能做的最重要的事情就是保证用户界面的运作的一致性。1.2 美观性设计合理的界面，在审美上令人愉悦。1. 在界面元素之间提供有意义的对比。2. 创建分组。3. 对齐界面元素和分组。1.3 易用性1. 清晰准确、易理解的语言文字。2. 容易理解。一个系统应该容易被用户学会和理解，用户应该知道： a.看什么 b.做什么 c.在什么时候做 d.在哪里做 e.为何要做 f.如何让做3. 动作，响应的流程应可视呈现，信息的放置顺序应该是深思熟虑的，以便在操纵的上下文容易记忆和容易找到。4. 提供默认值。5. 使界面对齐点（间隔）最小。6. 尽可能使用常用的功能菜单。7. 尽可能利用用户熟悉的概念和语言。8. 尽可能使界面自然，模仿用户的行为模式。1.4 可配置性1. 允许用户很容易的进行个性化配置，以及复原系统默认值，增强操控感觉。2. 鼓励用户活动，有利于理解。1.5 可操控性1. 用户必须控制交互过程。 a.动作必须是用户显示请求的结果。 b.动作必须快速执行。 c.动作必须可以被打断和终止。 d.用户不应该被错误所打断和终止。2. 必须从用户的视角维护上下文界面。3. 达成目标的方式应该是灵活的，并和用户的技能，习惯，经验。4. 提供反悔和取消的功能。1.6 效率性1. 最小化眼手的移动，以及其他控制行为的幅度。 a.在系统不同控制流直接切换应该很容易且自由。 b.超控路径尽可能短。 c.眼睛在屏幕上的移动应该明显且有顺序。2. 尽可能预料用户的想法和需要。1.7 灵活性系统必须对不同的用户需求和敏锐，并且提供不同层次类型的性能/功能，基于：1. 用户的知识和技能。2. 用户经验。3. 用户的个人偏好。4. 用户的习惯。5. 用当时的条件。1.8 宽容性1. 能够容忍和宽容常见的不可避免的人为错误。2. 尽可能的阻止错误的发生。3. 对灾难性的错误进行防护。4. 当错误发生时，提供建设性的消息。1.9 可预测性1. 用户能够预测到每个任务的正常进度。 a.提供清晰可见的界面元素。 b.提供被执行的动作的结果线索。2. 所有用户希望达成的目标应该完成。1.10 可恢复性1. 一个系统应该允许： a.命令和动作能够被废除或者退回。 b.如果发生问题时能够立即返回到特定的状态点。2. 在如下情况发生时确保用户不会丢失工作成果。 a.操作中发生错误。 b.硬件、软件、通讯发生问题。2 页面规范2.1 颜色 整体要求页面不能有明显的色系冲突，以冷色或暖色的一个色系为主导色系，同时搭配另一色系为辅助色系，主次比例为95%：5%左右，最高不要超过90%：10%。 文字颜色规范规定了带链接文字以及导航菜单的文字可以使用的颜色。链接文字：使用通用字色，鼠标悬停状态加下划线。注：其中333333色为左侧导航文字颜色。 头部导航菜单链接文字，鼠标悬停状态更改背景图片，字体颜色更改为1368af。正文字体颜色为333333。2.2 文字页面文字规范是指整个页面中出现的文字大小和字体类型的规定。页面字体最多不要超过3种，并且都是以px为单位的。系统名称：字体为宋体，24px，加粗。标题文字：字体为宋体，14px,加粗。介绍文字：字体为宋体，12px。2.3 标签1. 所有的标签文字默认采用简体中文汉字描述，需要多语言则要维护多语言维护表和建立相关的语言包。2. 不允许出现与当前语言环境不符的文字（如当前环境为简体，出现繁体）和错别字的现象。3. 统一界面中标签文字的长短，不要差异太大，能是四个字的尽量都是四个字，能三个字的尽量都是三个字。4. 原则上标签文字不能超过10个汉字。5. 汉字中间不要加空格，不要刻意两端对齐。例如：“用户名”，应该为“用户名”6. 标签对齐方式默认采用左对齐，标签的文字描述的结尾添加中文格式的冒号。文本标签与控件的最小距离是6px。7. 除非特殊含义的文字，如查询结果标题，否则不要设置标签的字体、颜色和宽高，使用统一的标签样式（包括字体、颜色、其他修饰等等），要保持交互状态一致。2.4 按钮1. 按钮忌用太长的名称，免得占用过多的界面位置。2. 重要的命令按钮与使用较频繁的按钮要放在界面上注目的位置。3. 如果没有特殊情况，使用系统默认的大小（界面设计器默认为23px；手写界面需要明确设置大小）。4. 按钮的大小要与界面的大小和空间要协调。5. 避免空旷的界面放置很大的按钮。6. 成组按钮之间的间距统一为10px，按钮距离右边的距离为10px。7. 两个字按钮的最小长度54px，三个字的长度64px。四个字73px。8. 按钮应具备简洁的视图效果，应能够让使用者产生功能相关联反应。群组内按钮应该风格统一，功能差异大的按钮应该有所区别。9. 保持同样含义的按钮应该使用同样的文字、图标、命令提示等，名称应尽量一致，如放弃、取消，统一为取消，退出、关闭统一为关闭。10. 在录入等情况下根据需要加入默认的命令按钮（如登录界面里的“登录”按钮，用户录入用户名和密码后，按回车可激活）。2.5 文本框1. Text空间的长度，在界面大小足够的情况下，应尽量大些，以足够显示字段内容。但是，调整输入框的设置长度（不一定非要拉长到填满），做到适合，美观即可。2. 提供适当的默认值来减少用户不必要的操作，从而帮助用户完成工作。3. 对于无法更改的录入字段，采用置灰效果，设置控件disable（true）。4. 文本框要有交互状态，如鼠标点击后框变色等。5. 无特殊情况文本框的高度设置为21px。2.6 单选按钮/复选框1. 单选复选框和文字的间距为4px，复选框最好有交互形式（如鼠标动作变化）2.7 页面布局页面布局原则：以最