界面原型设计准则
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
控件
控件使用准则:
放置完控件后界面不应有很大的空缺位置。 控件风格统一,如果是使用现成的控件,则尽量使用标准控件。 不要错误使用控件,例如: 使用Button样式做TTable的功能,拿主菜单条显示版
权信息。 统一类型的控件操作方式相同,例如一个控件双击可以执行某些动作,而同样控件
出错 5. 允许用户犯错 6. 提供快捷菜单,支持快捷键 7. 使用用户的语言,而不是技术术语 8. 保持简洁,实用易用才是王道 9. 重视可用性测试,不断改进设计
确定分辨பைடு நூலகம்:
布局
页面长度原则上不超过3屏,宽度不超过1屏。每个标准页面为A4幅面大小,即 8.5X11英寸;
分辨率为800*600px,网页宽度保持在778px以内,就不会出现水平滚动条,高度 则视版面和内容决定;
配色
基本配色 准则
配色图例
文字
文字设计 准则
建议规范
控件
菜单 树
按钮
文本框
。。。
交互
响应 提示 鼠标操作 。。。
文字
文字设计准则
需要选取在不同的分辨率和不同类型的显示器上都能容易阅读的字体。 一个系统一种字体。 字体的大小要与界面的大小比例协调。
建议规范:
中文统一采用宋体,英文采用标准 Microsoft Sans Serif 统一采用宋体五号(10.5磅,即10.5pt/12px)。 一般字体颜色:#000000/#666666; 超链接字体颜色:#0066CC,鼠标移动上去以后颜色为#CC0000。 页面名称、一级导航、未读信息、表单标题和已选择的文字显示粗体。
分辨率为1024*768px,网页宽度保持在1002px以内,如果满框显示的话,高度是 612-615px之间,就不会出现水平滚动条和垂直滚动条;
应考虑宽屏下页面显示,视觉上注意浏览器背景的处理。
布局设计:
布局确定:两栏、三栏
菜单、导航、内容区域的摆放
布局
基本布局 准则
布局图例
菜单、导航
设计准则:
一组菜单的使用有先后要求或有向导作用时,应该按先后次序排列。 没有顺序要求 的菜单项按使用频率和重要性排列,常用的放在开头, 不常用的靠后放置;重要的 放在开头,次要的放在后边。
如果菜单选项较多,应该采用加长菜单的长度而减少深度的原则排列。 菜单深度一般要求最多控制在三层以内。 对常用的菜单可以使用快捷命令方式。 菜单前的图标不宜太大,与字高保持一致最好。 主菜单的宽度要接近,字数不应多于四个,每个菜单的字数能相同最好。 主菜单数目不应太多,最好为单排布置。 有明显区别,用户很容易就能看出目前所在操作。
入该字符。 在输入有效性字符之前应该阻止用户进行只有输入之后才可进行的操作。 在读入用户所输入的信息时,根据需要选择是否去掉前后空格。 有些读入数据库的字段不支持中间有空格,但用户切实需要输入中间空格,这时要
在程序中加以处理。
是否有输入长度限制? 是否有水印文字提示?
是否为必填项? 光标离开后是否有验证?
产品管理系列之 界面设计准则
产品管理部 2011年十月
懊恼。。。。。。
由于界面设计的时间往往都比 较紧张,我没有足够的时间去 太多考虑控件的细节问题。。。
为什么每次我已经绞尽脑汁地
培训内容
一.介绍各种控件的设计方法 二.介绍各种交互方式的设计 三.原型设计案例分享
界面设计基本准则
1. 从用户的角度出发,深入了解用户的习惯与需求 2. 保持一致性 3. 运用视觉等级降低界面和操作复杂性,引导用户操作 4. 及时的提示,使用户明确目前的状态或者操作,防止用户
式。
点击后状态是否改变? 点击后页面是否跳转? 点击后本页面是否刷新? 点击操作成功后是否对其他页面的数据产生相关的影响?
控件-文本框
设计准则:
定义文本框名称。 定义文本框数据。 高度应该统一,宽度统一或根据填写内容设计。 可写控件检测到非法输入后应给出说明并能自动获得焦点。 对可能引起致命错误或系统出错的输入字符或动作要加限制或屏蔽。 对一些特殊符号的输入、与系统使用的符号相冲突的字符等进行判断并阻止用户输
控件-树 初始允1节进.许树23点入添.. 展定定是该加示义义否页的的树树可面最点数的的以默多?据 层 操拖认节说 级 作动展点明 。 。排开级。序哪别?个?节
分类下是否可以添加分类? 病历文件是否为叶子节点? 删除某个节点后该节点下的所有
子节点是否全部删除? 树的层次结构如何展现?
使用基本准则:控件-按钮
定义按钮名称 定义按钮动作 按钮大小基本相近,忌用太长的名称,免得占用过多的界面位置。 按钮的大小要与界面的大小和空间要协调。 点击后是否变灰 是否有tooltip Tab键的顺序与控件排列顺序一致,目前流行总体从上到下,同时行间从左到右的方
控件-列表
使用基本准则:
定义列表的行数、列数。 定义列表每列的字段。
排序标识统一 控件-列表
链接标识统一
字段名称字体
加粗、列宽和行宽
对齐方式、分页、标题过长时的显示方式
列表中显示的数据来源说明? 列表数据的默认排序方式? 列表字段是否需要排序? 列表中的字段是否是用户最关心的?字段的排序是不是按照重要
程度排序? 列表中的数据是否发生变化?历史数据是否需要查看?
控件-下拉框
使用基本准则:
定义下拉框的名称。 定义下拉框的数据源。
控件-下拉框
设计准则:
长度自适应、选择项超过一个、按照选择频率排序。 界面空间较小时使用下拉框而不用选项框。 要有默认选项或选择提示,并支持Tab或翻页键选择。 下拉菜单要根据菜单选项的含义进行分组,并切按照一定的规则进行排列,用横线
,双击却没有任何反映 。 控件布局上,窗口不拥挤,拥挤的屏幕让人难以理解,因而难以使用。当然,也要
避免太松散。 整个项目,采用统一的控件间距,通过调整窗体大小达到一致,即使在窗体大小不
变的情况下,宁可留空部分区域,也不要破坏控件间的行间距。 当屏幕有多个编辑区域,要以视觉效果和效率来组织这些区域。