界面设计规范.doc

文档编码文档编码保密级别保密级别 编写人员编写人员董永华文档版本文档版本 1 0 全亚通信产品部全亚通信产品部 界面设计规范界面设计规范 北京全亚通信技术有限公司北京全亚通信技术有限公司 2012 年 12 月 05 日 第 2 页 共 18 页 目录目录 1界面设计的规范目的 3 2界面布局 3 2 1登录页面 3 2 2主界面 4 2 3左侧菜单 6 2 4表单 7 2 5当前位置 9 2 6列表 9 2 7弹出窗口 11 2 8可视化控件 13 3常见问题规范 14 4尺寸规范 15 5导航规范 15 6链接规范 15 7字体规范 16 8终端开发图片格式规范 16 9用户体验设计规范 16 10在用户体验设计时需要注意以下几点 17 第 3 页 共 18 页 1 1界面设计的规范目的界面设计的规范目的 界面是软件与用户交互的最直接的层 界面的好坏决定用户对软件的第一印象 设计良 好的界面能够引导用户自己完成相应操作 起到向导作用 界面设计主要是为了达到以下目的 界面设计主要是为了达到以下目的 1 以用户为中心 设计由用户控制的界面 而不是界面控制用户 2 清楚一致的设计 所有界面的风格保持一致 所有具有相同含义的术语保持一致 且 易于理解和使用 3 拥有良好的直觉特征 以用户所熟悉的现实世界事务的抽象来给用户暗示和隐喻 来 帮助用户能迅速学会软件的使用 4 较快的响应速度 5 简洁 美观 2 2界面布局界面布局 2 12 1登录页面登录页面 1 登录界面上要有系统的和系统名称版权等信息 2 登录界面最好有用户名和 ID 的记忆 焦点直接定位到密码输入框 3 如果用户输入用户名或密码错误时 要出现错误提示 提示用户具体是哪项填写错误 4 登录页面要突出操作区域 避免用户眼球左右晃动 操作区保持在任何分辨率下保持 居中 如图 1 第 4 页 共 18 页 如图 1 5 登录页面提示信息应该放置在发生错误区域附近 输入框高度 24px 输入框与输入 框上下间距保持 1 2 倍 鼠标经过输入框要有明显的触碰效果 如图 2 如图 2 2 22 2主界面主界面 1 界面上都有标志和系统名称 如果系统名过长可以用简称 要有用户名 当前的日 第 5 页 共 18 页 期和相关的快捷命令按钮 如图 3 2 下拉菜单要根据菜单选项的含义进行分组 并应该按重要程序先后次序排列 重要的 放在开头 次要的放在后边 没有顺序要求的菜单项按使用频率和重要性排列 常用的放在 开头 不常用的靠后放置 如图 4 如图 4 3 不同内容之间距离保持一致 这样让界面看起来更清晰 如图 5 第 6 页 共 18 页 图 5 4 分辨率适应页面布局 以保证在分辨率 1024 768 下的正确显示为前提 适应高分辨 率情况使用表格宽度或层的宽度等参数使用百分比方式自动适应 5 现在浏览器有很多版本 页面设计和 CSS 编写要兼容现在主流的几个浏览器 IE6 IE10 FIREFOX 2 32 3左侧菜单左侧菜单 1 主菜单的宽度要接近 树型菜单深度最好控制在三层以内 字数控制在 6 个字以内 每个菜单的字数能相同最好 主菜单数目不应太多 最好为单排布置 菜单结构要清晰明了 子菜单对比上级菜单要缩进 2 个字符 如图 6 红色区域 图 6 第 7 页 共 18 页 2 42 4表单表单 1 显示内容结构要清晰行间距与列宽要均匀 表单字数不一样靠左对齐 输入框左对齐 一行两列 输入框标题要明显区别于输入框本身 输入框宽度尽量保持一致 如图 7 图 7 2 常用的表单应该同时支持键盘操作和鼠标操作 复选框和选项框最好有默认选项 并 支持 Tab 选择 Tab 键的顺序与控件排列顺序要一致 目前流行总体从上到下 同时行间从 左到右的方式 3 表单内在特定的字段域附近给出必填信息提示 并用 标注 4 按钮大小基本相近 忌用太长的名称 免得占用过多的界面位置 按钮的大小要与界 面的大小和空间要协调 避免空旷的界面上放置很大的按钮 Enter 缺省按钮 确认操作输入 设计 如图 8 所示 如图 8 5 与正在进行的操作无关的按钮应该加以屏蔽或灰色显示 如图 9 所示 如图 9 第 8 页 共 18 页 6 高效率的输入方式 特定的字段内容的输入方式选用使用效率最高 不容易发生错误 的方式 如录入日期使用户点选弹出的日历控件 并无须干预的自动返回正确的格式 如图 10 所示 如图 10 7 表单格式尽量保持业务原始票据的格式或字段排列顺序 方便用户的集中录入过程 表单字段左对齐 如图 11 所示 如图 11 8 输入框的宽度基本符合数据库能够容纳的宽度 暗示系统能够接受的字符容量 如 图 12 所示 如图 12 第 9 页 共 18 页 2 52 5当前位置当前位置 1 要能准确显示当前内容的位置 字与 之间要有最少一个空格的间隙 如图 13 图 13 2 62 6列表列表 1 每页所显示的条数及列数 以保持当前正好一屏显示无需滚动为标准 如图 14 所 示 如图 14 2 列表记录之间要有不同的底色相间隔 如果没有底色间隔 当鼠标经过某条记录时此 记录底色要有所变化与其它记录有所区别 当选中某条记录时 此记录的底色也要有 变化 以便用户查看编辑 如图 15 所示 第 10 页 共 18 页 图 15 3 表格中字体使用统一的字体和字号 通常都用宋体和 12 号字 表头字体加粗 内 容字体不加粗 带小数点的数字没有特殊要求的情况下保留到小数点后面两位 如 图 16 所示 如图 16 4 列表带竖线的情况下 表头标题居中对齐 内容字符宽度一直的情况下固定列宽 居 中对齐 字符宽度不一致的情况下居左对齐 数值居右对齐 列表不带竖线的情况下 表头及内容全部左对齐 列表内数据要与边缘有 5px 间距 如图 17 所示 如图 17 5 单元格中的内容 最少离表格线 5 个像素的距离 如图 18 所示 第 11 页 共 18 页 如图 18 6 列表中尽量支持排序功能 如图 19 所示 图 19 2 72 7弹出窗口弹出窗口 1 屏幕对角线相交的位置是用户直视的地方 正上方四分之一处为易吸引用户注意力的 位置 在放置窗体时要注意利用这两个位置 窗体的中心位置应该在对角线焦点附近 如 图 20 所示 排序功能 第 12 页 共 18 页 图 20 3 要显示窗口主题 窗口主题显示标志用户当前所在模块或子系统名称 子任务窗体主 题使用 名词 动词 的语法结构指明用户当前的任务 如图 21 所示 图 21 第 13 页 共 18 页 4 必填项要用红色星号标注 5 内容对齐方式要一致 采用左对齐 6 弹出窗体的页面主题 栏目标题等资料与关联的父窗体保持上下文一致 方便用户理 解并做出处理策略 2 82 8可视化控件可视化控件 1 页面上计量单位必须跟在输入框后 计量单位与输入框间保留一个空格 如遇必输项 需显示计量单位的 计量单位在 号之前显示 如图 22 所示 图 22 2 表单中提示信息可以放在表单最上面 逐条提示 提示出错地方要明确标示出来 如图 23 所示 图 23 2 页面元素与元素之间间距要绝对相等 如图 24 所示 第 14 页 共 18 页 图 24 3 3常见问题规范常见问题规范 1 页面中同样的区域同样的位置字体大小保持一致 2 页面中常用字体颜色属性保持一致 如红色 FF0000 蓝色 004888 黑色 333333 白色 000000 灰色 666666 3 页面块与块之间上下间距保持一致 左右间距也要保持一致 4 页面中模块内上下左右间距保持一致 5 页面中各组件形式保持统一 6 表单中文字左对齐数值右对齐 标题居中对齐 不要让单列表单显得空旷 序号 电 话号码属于文字类型 金额 数量属于数值类型 7 页面内出现小写金额时 数字前统一加货币符号 正确规范的表达方式 如 200 00 不在使用 200 元或 200 0 等形式表达 8 页面内所有文字数据与项目主题不相关的不要出现 如 万庄化肥项目所以的文字信 息应该与栏目呼应 9 短日期显示格式必须为 YYYY MM DD 长日期显示格式必须为 YYYY MM DD hh mm 时 间采用 24 小时制 示例 示例 1972 年 10 月 01 日显示为 1972 10 01 1972 年 10 月 01 日上午 8 点 05 分显示为 1972 10 01 08 05 第 15 页 共 18 页 1972 年 10 月 01 日下午 4 点 05 分显示为 1972 10 01 16 05 4 4尺寸规范尺寸规范 1 页面标准按 1024 768 尺寸制作 推荐尺寸带滚动条的为 1002 610px 不带滚动条的 为 1024 610px 2 页面长度原则上不超过 3 屏 宽度不超过 1 屏 3 banner 高度不要超过 150px 4 每个非首页静态页面含图片字节不超过 300K 全尺寸 banner 第一个场景控制在 200k 以内 二个场景在 300K 三个场景在 400K 以此类推 5 5导航规范导航规范 1 导航要简单 清晰 建议不超过 3 层的链接 2 用于导航的文字要简明扼要 3 首页 各栏目一级页面之间互链 各栏目一级和本栏目二级页面之间互链 4 连续性页面应加入上一页 下一页按钮 6 6链接规范链接规范 1 特殊栏目和功能可新开窗口 2 链接带下划线为链接通常的默认风格 顶部导航或特殊位置为了观赏性可用样式表取 消下划线 3 链接的颜色可配合主题颜色风格改变 通常为蓝色 004888 但激活后的链接颜 色 鼠标移动其上时的链接颜色要同本身颜色进行区分 第 16 页 共 18 页 7 7字体规范字体规范 1 为了保证不同浏览器上字号保持一致 字号建议用像素 px 来定义 字体建议采用 宋体 黑体 微软雅黑 没有特殊情况不在使用其它特殊字体 2 网页正文文字一般不小于 14px 行距不小于 24px 4 文字颜色与页面配色协调 不使用与背景色相近的颜色 6 页面文本不使用下划线方式 也尽量少采用粗体显示 8 8终端开发图片格式规范终端开发图片格式规范 1 尽量少使用大图片 图形大于 100K 时 必须采用缩略图 用点击放大方式制作 2 为减少图形文件大小 图形颜色丰富 128 色 时使用 JPG 格式 JPG 压缩比为 6 颜色单调 128 色 时使用 GIF 或者 PNG 格式 9 9用户体验设计规范用户体验设计规范 1 注意屏幕元素布局平衡 功能区域划分合理 避免控件与数据的过分集中而导致的视 觉疲劳和判断错误 2 功能明确 安排合理 让用户通过最少的判断和最少的操作达到目的 3 保持界面的一致性 一致性既包括使用统一的界面元素 标准的控件 也包括使用相 同的信息表现方法 如在字体 标签风格 颜色 术语 显示错误信息等方面确保一致 4 窗体大小与长宽比例合理 空间充分利用 避免过大的灰色空白区域 也不要过于局 促 5 主要功能和点击频率高的按钮应排放在醒目的位置 6 界面关闭或退出按钮应排放在不易点击的位置 避免因错误点击而引起的退出 7 屏蔽与当前操作无关的按钮 8 按钮文字简洁明了 尽量控制在 4 字以内 第 17 页 共 18 页 9 人们习惯于从左到右 从上到下进行阅读 因此 应该将重要信息放在上面和左边 左上角最容易吸引起人们的注意力 10 用户界面控件分成组 以体现它们之间的关系 同时 还要显示相关信息 将控件 放在它所作用的对象旁 使用空格 分组框 线条和标签 或者其它分隔符对用户界面控件 进行分组 11 使用强调使用焦点 位置 分组 层次 启用 禁用 大小 颜色或者字体等 来将 注意力集中在需要首先看到的用户界面控件上 尽量以可视的方式指明用户接下来应该进行 的操作 12 使用可视的提示尽量使用近似的大小和间距来指出用户界面控件是相似的 而使用 不同的大小和间距来指出用户界面控件视是不同的 13 使用空格使用空格来创建一个 透气室 以使窗口布局更易于理解 并且查看起来 更舒服 空格的多少要适当 不要显得太分散 但是 要避免过多地使用空格 如果可能 尽量使窗口小一些 1010 在用户体验设计时需要注意以下几点在用户体验设计时需要注意以下几点 1 要针对目标用户进行设计 2 视觉上别让用户看得费劲 3 要减少交互 4 减少用户操作 减少选择和思考 5 主动提供帮助 以用户为中心 6 把复杂性留给自己 把简单留给用户 7 用户不用的功能 就不该在页面存在 8 视觉设计 不是美化 是导向