当前位置:文档之家› Windows用户界面开发规范模板

Windows用户界面开发规范模板


鼠标指针
通过不同的显示,为用户表
现更多使用信息:
表示程序状态 表示操作结果的提示
文本 (Text),字体( Font)& 颜色(Color)
规格: • 在界面中出现的中文一般使用宋体12像素大小的文字; • 英文字体:System(默认)、Fixedsys、Microsoft Sans Serif、 Tahoma、Terminal。 规则 • 粗体来吸引人的注意力;斜体表示解释,但要很少使用; • 将文本放在颜色适中的背景上,确保在文本和背景之间存在良好的对比。 • 采用一致的大小写规则
滚动条( Scroolbar )
滑块
用途:方便用户察看该窗口没有显示出来的更多信息,可以通过按住拖动操作实现。 滚动条仅用于滚动; 尺寸: 横向滚动条高为17,滑块为16; 纵向滚动条宽为17,滑块为16。 起止位置:滚动条的起止位置和其操作对象等宽或等高,并置于操作对象内,并使
滚动条足够长,保证有可用的滑块;
采用危急消息框通知用户继续工作前需要修改一个
错误。 2 不再推荐对消息框使用疑问标记符,问号已经用 来表达帮助的意思,而非二次确认。
3 并确保消息框选项按钮与文本一致
4 仔细选择默认按钮,避免无用的帮助 5 对经常出现或可能经常出现的非危急性消息,向 用户提供一个压制该消息的选项。如加入一个选择 框,标示 “不再提示”。
5 最安全或最常用的选项作为默认按钮
复选框 & 列表框
1 用复选框开关选项,用复选框进行选项的开关操作是很有效的
2 避免一组复选框中选项个数超过8(大约)个,应该考虑用复选框列表代替,它占 用的空间更少,但复选框列表需要滚动时使用就稍微麻烦了。 3 考虑将相关组的复选框置于一个分组框中,这样的分组使得复选框之间的关系更为
工具栏(Toolbar)
显示该程序常用功能的图标,以便于用户直接点击使用
分割线
图标 文字 扩展按钮
• 构成:图标 文字提示 分割线 扩展按钮 • 状态:将无效的工具栏按钮置为不可用,而不是删除或者报错,以保持工具栏稳定。 但是,应考虑删除用户进入一种模式时用不到的整个工具栏。如需文字提示,显示在
图标右侧或下侧;常用,重要,推荐的功能出现文字提示;当工具图标显示不完的时
候,出现扩展按钮,点击出现菜单。 • 图标状态:
• 分类:不同类别图标间用静态竖线隔开
工具栏(Toolbar)
显示该程序常用功能的图标,以便于用户直接点击使用
分割线
图标 文字 扩展按钮
• 位置:工具栏的拖动,当工具栏可拖动的时候,工具栏前端出现拖动标识,鼠标指 针变成移动箭头,同时具有磁性粘附 • • TIPS:所有的工具栏图标都需要TIPS,但要简短。如果该命令已分配有快捷键, TIPS显示时间规则: 则显示该快捷键。 当界面上没有tips时,第一个tips的响应延时为1秒;当界面有tips显示,则下一个 tips出现无延时。15秒后工具提示将自动消去。 如果工具提示的文字很多,不要自动消去包含许多文字的工具提示,15秒种对用户来 说就看不完了。
使用标准菜单:提供通用的“文件”、“编辑”和“帮助”菜单。
菜单(Menu)
排列:左对齐,一项菜单只占用一行; 不要使用多列的下拉菜单,多列增加了菜单不必要的复杂性; 不要使用看起来像下拉菜单,但实际是选择后立即执行的命令,如 “退出”,。用户希望菜单标题就只是菜单,而不是命令; 顺序:图标 菜单名称 访问键省略号 快捷键或者二级菜单箭头 将无效菜单置为不可用,但对整个程序实例中都无效的菜单则需要删 除;并避免有仅产生出错消息的可用命令; 采用省略号来表示需要更多信息,命令中的省略号表示执行时需要更 多信息,而不是简单确认。省略号并不表示一定有对话框出现; 将相关菜单项组合在一起,不同类型的菜单项之间加分割线。重要的 命令应该位于菜单的顶部,而不重要的菜单则位于菜单的底部; 统一放置“查找”和“选项”命令:一般将“查找”命令放在“编辑” 菜单中,而有“工具”菜单时,总将“选项”置于其中,否则置于 “查看”菜单中。 用复选标记来开关选项:用单选组来改变模式。 规则: 当菜单项过多时的处理方法1智能收缩 2 分二级菜单 重要、常用、推荐的菜单项表现方式: 1 加图标,2 纯文字菜单时,使用文字加粗 就近原则:推荐项距单击点之间距离最短
以及用户使用程序的整个过程。
规范windows平台下用户界面设计的意义

建立交互一致性 降低开发成本,提高生产效率


易学,降低用户教育成本
减少误操作几率
避免程序冲突
………
标准窗口界面开发规范
界面主要部件应用规范
控件应用规范
窗口的定义 ——程序或过程能运行的部分视屏。窗口可以 关闭、改变尺寸、移动、最小化到任务栏上,或最大
化到整个屏幕上。
窗口构成
标题栏 菜单栏 工具栏
滚 动 条
状态栏
标题栏(Title)
位于窗口最上端,显示窗口名称、对窗口进行控制
标题图标 Icon
标题名称 Caption(VB)
属性信息
标题栏控制按钮: Min,Max,Close
标题图标(Icon) ——显示在标题栏最左端,一般只有主窗口需要放置标题图标。规格:16*16像素, 256色。 标题名称(Caption ) ——Title中该窗口名称放在前边,以便用户在最小化时可以通过名称快速找到需要 的窗口。类别等属性信息放在后边,中间用“—”隔开。字体:宋体粗体13像素 标题栏控制按钮(Min,Max,Close) ——主窗口依次显示最小化、最大化、关闭按钮;弹出式窗口需要固定大小的,不显 示最小化、最大化按钮;
明显。
4 竖向对齐的一组复选框更易于浏览。 —————————————————————————————————— 1 必须用标签来标明列表框的用途。并多于5行。 2 对多选列表考虑提供“全部选中”和“全部取消选中”命令
单选按钮
1 避免一组单选按钮中选项个数超过8(大约)个, 2 避免用单选按钮进行“开/关”或“是/否”选择,用复选框代替。 3 总将单选按钮置于一个分组框中,由于单选按钮是一组相互排斥的选项, 所以分组框使选择更为明确。 4 宁可竖向对齐,虽然更合适的情况下采用横向对齐或直角对齐也是可接受 的,但竖向对齐的一组单选按钮更易于浏览。
2 对列项大约超过30的列表视图总使其可进行排序,用户能够对列表进行排序方便 了对信息的查找。 3 但仅在列表可排序时采用可单击的表头。首次单击时应按正序对列表进行排序, 而第二次单击时按反序进行排列。
分组框
1 利用分组框分组相关控件,分 组框通常是用于单选按钮的分组, 但也可用于任何控件的分组。避
组合框
1 总给组合框提供一个标签,必须用标签来表明组合框的用途。 2 少于5行的列表不需要給滑块。请注意,如果组合框没有足够的列项来填
满列表,那么将自动缩短列表的长度。
3 避免组合框的列项少于4项,如果少于四项,可以考虑用单选按钮代替, 它们虽然多占空间,但更一目了然,易于操作。如果空间更为重要或为了 保持与同一窗口中其他组合框一致时,采用组合框则更为可取。
菜单栏(Menu)位于窗口上方第二层,对该程序所有功能进行归类
菜单标题 菜单标题
访问键提示
——建议尽量使用两个字为菜单文字,菜单文字:宋体 12像素
访问键提示
——如需要添加访问键则在中文名称后面显示访问键字母。一个菜单里的访问键字母 必须是唯一对应的,避免使用小写字母或单词中与它们靠近的字母来分配访问键;
3 用微调框和浏览按钮使编辑框可视 4 按期望输入来设置编辑框的宽度,编辑框的宽度是对期望输入的可视提 示。例如,如果用户是输入地址,两个字符宽的State字段明显暗示用户输 入两个字符的州名缩写。如果期望的输入没有特别的大小,就选择与其他 编辑框或控件一致的宽度。
列表视图
1 使需要滚动的列表视图高度至少5行。
标准对话框控件应用规范
命令按钮 复选框 单选按钮 组合框 编辑框 列表框 列表视图 分组框
对话框 —— 一种次要窗口,包含按钮和各种选项,通 过它们可以完成特定命令或任务。
复选按钮
组合框
编辑框 命令按钮
命令按钮
1 采用最小的宽度和标准的高度 带中文文字的命令按钮应该最少为21像素高度。在同一行或同一列的按钮宽度尽量 保持一致,最长为145像素。按钮间的距离标准为8像素。尽量将不同大小的带文字 命令按钮的个数控制在两个以内。对父窗口拖动(owner-draw)按钮或无文字的按 钮(如…),其大小可以任意设置,原则是使命令按钮外观简朴一致。 2 将无效按钮置为不可用,以取消报错 3 总采用省略号来表示需要更多信息,命令中的省略号表示执行命令时需要更多信息, 而不是简单的确认。省略号并不表示一定会出现对话框。 4 绝对不要指定双击行为,用户意料不到命令按钮会响应双击,因此不可能发现这样 的行为。
自动出现的工具提示:对于推荐的新功能可以采用自动出现的工具提示教育用户使用。
但一个窗口只能出现一次自动提示。有鼠标动作以后才消失。
状态栏(Status bar)
显示状态栏所在窗口的一些属性、状态信息和鼠标、键盘操作信息
概念:与当前程序相关的一行信息,包括属性、状态信息和鼠标、键盘操作。 位置:状态栏通常位于窗口的底部。但不是所有的窗口都有状态栏。 状态:并且允许通过操作进行状态等的转换。 规格:宋体 12
OTHER
1 避免不必要的消息框,不要用出错消息来报告正常行为,而应该用来报
告不正常或不期望的结果。不要对很容易恢复的操作进行确认。
2 避免无用的帮助,除非提供真正有用的附加信息,否则不要提供“帮助” 按钮。不要附加带无用帮助信息的没意义的消息框。TITLE上的帮助按钮
通常不与最小化和最大化按钮同时出现;
Windows用户界面开发规范
Enya HCI Design UI Design CertenProgram
相关主题