界面原型设计准则.ppt

产品管理系列之界面设计准则 产品管理部2011年十月 懊恼 培训内容 介绍各种控件的设计方法介绍各种交互方式的设计原型设计案例分享 怎样开始考虑一个界面的设计 界面设计基本准则 从用户的角度出发 深入了解用户的习惯与需求保持一致性运用视觉等级降低界面和操作复杂性 引导用户操作及时的提示 使用户明确目前的状态或者操作 防止用户出错允许用户犯错提供快捷菜单 支持快捷键使用用户的语言 而不是技术术语保持简洁 实用易用才是王道重视可用性测试 不断改进设计 布局 确定分辨率 页面长度原则上不超过3屏 宽度不超过1屏 每个标准页面为A4幅面大小 即8 5X11英寸 分辨率为800 600px 网页宽度保持在778px以内 就不会出现水平滚动条 高度则视版面和内容决定 分辨率为1024 768px 网页宽度保持在1002px以内 如果满框显示的话 高度是612 615px之间 就不会出现水平滚动条和垂直滚动条 应考虑宽屏下页面显示 视觉上注意浏览器背景的处理 布局设计 布局确定 两栏 三栏菜单 导航 内容区域的摆放 文字 文字设计准则需要选取在不同的分辨率和不同类型的显示器上都能容易阅读的字体 一个系统一种字体 字体的大小要与界面的大小比例协调 建议规范 中文统一采用宋体 英文采用标准MicrosoftSansSerif统一采用宋体五号 10 5磅 即10 5pt 12px 一般字体颜色 000000 666666 超链接字体颜色 0066CC 鼠标移动上去以后颜色为 CC0000 页面名称 一级导航 未读信息 表单标题和已选择的文字显示粗体 控件 控件使用准则 放置完控件后界面不应有很大的空缺位置 控件风格统一 如果是使用现成的控件 则尽量使用标准控件 不要错误使用控件 例如 使用Button样式做TTable的功能 拿主菜单条显示版权信息 统一类型的控件操作方式相同 例如一个控件双击可以执行某些动作 而同样控件 双击却没有任何反映 控件布局上 窗口不拥挤 拥挤的屏幕让人难以理解 因而难以使用 当然 也要避免太松散 整个项目 采用统一的控件间距 通过调整窗体大小达到一致 即使在窗体大小不变的情况下 宁可留空部分区域 也不要破坏控件间的行间距 当屏幕有多个编辑区域 要以视觉效果和效率来组织这些区域 菜单 导航 设计准则 一组菜单的使用有先后要求或有向导作用时 应该按先后次序排列 没有顺序要求的菜单项按使用频率和重要性排列 常用的放在开头 不常用的靠后放置 重要的放在开头 次要的放在后边 如果菜单选项较多 应该采用加长菜单的长度而减少深度的原则排列 菜单深度一般要求最多控制在三层以内 对常用的菜单可以使用快捷命令方式 菜单前的图标不宜太大 与字高保持一致最好 主菜单的宽度要接近 字数不应多于四个 每个菜单的字数能相同最好 主菜单数目不应太多 最好为单排布置 有明显区别 用户很容易就能看出目前所在操作 控件 树 初始进入该页面默认展开哪个节点 节点是否可以拖动排序 允许添加的最多节点级别 分类下是否可以添加分类 病历文件是否为叶子节点 删除某个节点后该节点下的所有子节点是否全部删除 树的层次结构如何展现 控件 按钮 使用基本准则 定义按钮名称定义按钮动作按钮大小基本相近 忌用太长的名称 免得占用过多的界面位置 按钮的大小要与界面的大小和空间要协调 点击后是否变灰是否有tooltipTab键的顺序与控件排列顺序一致 目前流行总体从上到下 同时行间从左到右的方式 控件 文本框 设计准则 定义文本框名称 定义文本框数据 高度应该统一 宽度统一或根据填写内容设计 可写控件检测到非法输入后应给出说明并能自动获得焦点 对可能引起致命错误或系统出错的输入字符或动作要加限制或屏蔽 对一些特殊符号的输入 与系统使用的符号相冲突的字符等进行判断并阻止用户输入该字符 在输入有效性字符之前应该阻止用户进行只有输入之后才可进行的操作 在读入用户所输入的信息时 根据需要选择是否去掉前后空格 有些读入数据库的字段不支持中间有空格 但用户切实需要输入中间空格 这时要在程序中加以处理 控件 列表 使用基本准则 定义列表的行数 列数 定义列表每列的字段 控件 列表 排序标识统一链接标识统一字段名称字体加粗 列宽和行宽对齐方式 分页 标题过长时的显示方式 控件 下拉框 使用基本准则 定义下拉框的名称 定义下拉框的数据源 控件 下拉框 设计准则 长度自适应 选择项超过一个 按照选择频率排序 界面空间较小时使用下拉框而不用选项框 要有默认选项或选择提示 并支持Tab或翻页键选择 下拉菜单要根据菜单选项的含义进行分组 并切按照一定的规则进行排列 用横线隔开 控件 单选框 使用基本准则 定义单选框的名称 定义单选框的数据类别 控件 复选框 设计准则 定义复选框的数据名称 定义每个选项的数据 按选择几率的高底而先后排列 要有默认选项 并支持Tab选择 选项数较少时使用选项框 相反使用下拉列表框 选项数相同时多用选项框而不用下拉列表框 列表中的复选框点击整行都可选中 默认为常用选项 并且最常用选项一般在前 页面 进入路径 初始默认加载的数据状态 按enter键默认执行按钮 页面数据加载的前置条件 培训内容 介绍各种控件的设计方法介绍各种交互方式的设计原型设计案例分享 交互 鼠标操作 键盘操作 告警 交互 响应 设计准则 对系统不同操作的响应时间的最低标准 包括刷新 如局部刷新 列表即时刷新 超过1秒的操作要有动画效果或等待图标分散用户注意力 超过10秒的操作有动态条块说明进度 超过30秒的操作提供 取消 操作 操作进行中 该操作按钮为灰色不可用 交互 提示 提示消息 操作成功的提示 一些破坏性操作的确认提示 在线提示 操作完成进度提示等等 向用户展示一般性的系统消息 警告消息 执行操作后所产生的影响告知 动作执行结果的告知 不利环境产生后的告知 用户操作错误的提醒 4 动作执行确认提醒 5 操作成功的提醒 交互 键盘操作 常用的键盘操作 TAB键跳转ENTER键提交或缺省 C 新增D 删除常用的组合键 面向事务的组合有 Ctrl D删除 Ctrl F寻找 Ctrl H替换 Ctrl I插入 Ctrl N新记录 Ctrl S保存Ctrl O打开 列表 Ctrl R Ctrl G定位 Ctrl Tab下一分页窗口或反序浏览同一页面控件 编辑 Ctrl A全选 Ctrl C拷贝 Ctrl V粘贴 Ctrl X剪切 Ctrl Z撤消操作 Ctrl Y恢复操作 文件操作 Ctrl P打印 Ctrl W关闭 系统菜单 Alt A文件 Alt E编辑 Alt T工具 Alt W窗口 Alt H帮助 MSWindows保留键 Ctrl Esc任务列表 Ctrl F4关闭窗口 Alt F4结束应用 Alt Tab下一应用 Enter缺省按钮 确认操作 Esc取消按钮 取消操作 Shift F1上下文相关帮助 交互 鼠标操作 常用鼠标交互方式 mouseover文字应有tooltip提示 点击按钮等元素时应有颜色变化 操作进行中 鼠标为忙 可点击处 鼠标为手型 鼠标放在可点击的非按钮元素上时 元素应有状态变化 培训内容 介绍各种控件的设计方法介绍各种交互方式的设计原型设计案例分享 练习 议题管理 省政府常务会议 召开之前由办公厅按照领导要求先准备好议题 提交给领导审批 经相关领导审批通过 拟上会讨论的议题由专人管理 审批不走网上流程 由系统按照标准格式生成送审表 打印后由专