系统产品UI交互细则

UI交互细则

规范性细则

  1. 常用菜单要有命令快捷方式。
  2. 完成相同或相近功能的菜单用横线隔开放在同一位置。
  3. 菜单前的图标能直观的代表要完成的操作。
  4. 菜单深度一般要求最多控制在三层以内。
  5. 工具栏要求可以根据用户的要求自己选择定制。
  6. 相同或相近功能的工具栏放在一起。
  7. 工具栏中的每一个按钮要有及时提示信息。
  8. 一条工具栏的长度最长不能超出屏幕宽度。
  9. 工具栏的图标能直观的代表要完成的操作。
  10. 系统常用的工具栏设置默认放置位置。
  11. 工具栏太多时可以考虑使用工具厢。
  12. 工具厢要具有可增减性,由用户自己根据需求定制。
  13. 工具厢的默认总宽度不要超过屏幕宽度的1/5。
  14. 状态条要能显示用户切实需要的信息,常用的有:目前的操作、系统状态、用户位置、用户信息、提示信息、错误信息等,如果某一操作需要的时间较长,还应该显示进度条和进程提示。
  15. 滚动条的长度要根据显示信息的长度或宽度能及时变换,以利于用户了解显示信息的位置和百分比。
  16. 状态条的高度以放置五号字为宜,滚动条的宽度比状态条的略窄。
  17. 菜单和工具条要有清楚的界限;菜单要求凸出显示,这样在移走工具条时仍有立体感。
  18. 菜单和状态条中通常使用5号字体。工具条一般比菜单要宽,但不太多。
  19. 右键快捷菜单采用与菜单相同的准则。

合理性细则

  1. 父窗体或主窗体的中心位置应该在对角线焦点附近。
  2. 子窗体位置应该在主窗体的左上角或正中。
  3. 多个子窗体弹出时应该依次向右下方偏移,以显示窗体出标题为宜。
  4. 重要的命令按钮与使用较频繁的按钮要放在界面上注目的位置。
  5. 错误使用容易引起界面退出或关闭的按钮不应该放在易点位置。横排开头或最后与竖排最后为易点位置。
  6. 与正在进行的操作无关的按钮应该加以禁止(Windows中用灰色显示,没法使用该按钮)。
  7. 对可能造成数据无法恢复的操作必须提供确认信息,给用户放弃选择的机会。
  8. 非法的输入或操作应有足够的提示说明。
  9. 对运行过程中出现问题而引起错误的地方要有提示,让用户明白错误出处,避免形成无限期的等待。
  10. 提示、警告、或错误说明应该清楚、明了、恰当。

协调性细则

  1. 长宽接近黄金点比例,切忌长宽比例失调、或宽度超过长度。
  2. 布局要合理,不宜过于密集,也不能过于空旷,合理的利用空间。
  3. 按钮大小基本相近,忌用太长的名称,免得占用过多的界面位置。
  4. 按钮的大小要与界面的大小和空间要协调。
  5. 避免空旷的界面上放置很大的按钮。
  6. 放置完控件后界面不应有很大的空缺位置。
  7. 字体的大小要与界面的大小比例协调, 通常使用的字体中宋体9-12较为美观,很少使用超过12号的字体。
  8. 前景与背景色搭配合理协调,反差不宜太大,最好少用深色,如大红、大绿等。常用色考虑使用Windows界面色调。
  9. 如果使用其他颜色,主色要柔和,具有亲和力与磁力,坚决杜绝刺目的颜色。
  10. 大型系统常用的主色有”#E1E1E1″、”#EFEFEF”、”#C0C0C0″等。
  11. 界面风格要保持一致,字的大小、颜色、字体要相同,除非是需要艺术处理或有特殊要求的地方。
  12. 如果窗体支持最小化和最大化或放大时,窗体上的控件也要随着窗体而缩放;切忌只放大窗体而忽略控件的缩放。
  13. 对于含有按钮的界面一般不应该支持缩放,即右上角只有关闭功能。
  14. 通常父窗体支持缩放时,子窗体没有必要缩放。
  15. 如果能给用户提供自定义界面风格则更好,由用户自己选择颜色、字体等。

UI交互细则

易用性细则

  1. 完成相同或相近功能的按钮用Frame框起来,常用按钮要支持快捷方式。
  2. 完成同一功能或任务的元素放在集中位置,减少鼠标移动的距离。
  3. 按功能将界面划分局域块,用Frame框括起来,并要有功能说明或标题。
  4. 界面要支持键盘自动浏览按钮功能,即按Tab键的自动切换功能。
  5. 界面上首先应输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。
  6. 同一界面上的控件数最好不要超过10个(不含LABEL控件),多于10个时可以考虑使用分页界面显示。
  7. 分页界面要支持在页面间的快捷切换,常用组合快捷键Ctrl+Tab
  8. 默认按钮要支持Enter及选操作,即按Enter后自动执行默认按钮对应操作。
  9. 可写控件检测到非法输入后应给出说明并能自动获得焦点。
  10. Tab键的顺序与控件排列顺序要一直,目前流行总体从上到下,同时行间从左到右的方式。
  11. 复选框和选项框按选择几率的高底而先后排列。
  12. 复选框和选项框要有默认选项,并支持Tab选择。
  13. 选项数相同时多用选项框而不用下拉列表框。
  14. 界面空间较小时使用下拉框而不用选项框。
  15. 选项数叫少时使用选项框,相反使用下拉列表框。
  16. 专业性强的软件要使用相关的专业术语,通用性界面则提倡使用通用性词眼。

独特性细则

  1. 安装界面上应有单位介绍或产品介绍,并有自己的图标。
  2. 主界面,最好是大多数界面上要有公司图标。
  3. 登录界面上要有本产品的标志,同时包含公司图标。
  4. 帮助菜单的“关于”中应有版权和产品信息。
  5. 公司的系列产品要保持一直的界面风格,如背景色、字体、菜单排列方式、图标、安装过程、按钮用语等应该大体一致。

安全性细则

  1. 最重要的是排除可能会使应用非正常中止的错误。
  2. 应当注意尽可能避免用户无意录入无效的数据。
  3. 采用相关控件限制用户输入值的种类。
  4. 当用户作出选择的可能性只有两个时,可以采用单选框。
  5. 当选择的可能再多一些时,可以采用复选框,每一种选择都是有效的,用户不可能输入任何一种无效的选择。
  6. 当选项特别多时,可以采用列表框,下拉式列表框。
  7. 在一个应用系统中,开发者应当避免用户作出未经授权或没有意义的操作。
  8. 对可能引起致命错误或系统出错的输入字符或动作要加限制或屏蔽。
  9. 对可能发生严重后果的操作要有补救措施。通过补救措施用户可以回到原来的正确状态。
  10. 对一些特殊符号的输入、与系统使用的符号相冲突的字符等进行判断并阻止用户输入该字符。
  11. 对错误操作最好支持可逆性处理,如取消系列操作。
  12. 在输入有效性字符之前应该阻止用户进行只有输入之后才可进行的操作。
  13. 对可能造成等待时间较长的操作应该提供取消功能。
  14. 特殊字符常有;;’”><,`‘:“[”{、/|}]+=)-(_*&&^%$#@!~,.。?/还有空格。
  15. 与系统采用的保留字符冲突的要加以限制。
  16. 在读入用户所输入的信息时,根据需要选择是否去掉前后空格。
  17. 有些读入数据库的字段不支持中间有空格,但用户切实需要输入中间空格,这时要在程序中加以处理。

UI交互细则

帮助设计细则

  1. 帮助文档中的性能介绍与说明要与系统性能配套一致。
  2. 打包新系统时,对作了修改的地方在帮助文档中要做相应的修改。
  3. 操作时要提供及时调用系统帮助的功能。常用F1。
  4. 在界面上调用帮助时应该能够及时定位到与该操作相对的帮助位置。也就是帮助要有即时针对性
  5. 最好提供目前流行的联机帮助格式或HTML帮助格式。
  6. 用户可以用关键词在帮助索引中搜索所要的帮助,当然也应该提供帮助主题词。
  7. 如果没有提供书面的帮助文档的话,最好有打印帮助的功能。
  8. 在帮助中应该提供我们的技术支持方式,一旦用户难以自己解决可以方便的寻求新的帮助方式。
  9. 保持多语言版本之间帮助文档的内容一致性。

菜单设计细则

  1. 菜单通常采用“常用–主要–次要–工具–帮助”的位置排列,符合流行的Windows风格。
  2. 常用的有“文件”、“编辑”,“查看”等,根据不同的系统有所取舍。
  3. 下拉菜单要根据菜单选项的含义进行分组,并切按照一定的规则进行排列,用横线隔开。
  4. 一组菜单的使用有先后要求或有向导作用时,应该按先后次序排列。
  5. 没有顺序要求的菜单项按使用频率和重要性排列,常用的放在开头, 不常用的靠后放置;重要的放在开头,次要的放在后边。
  6. 如果菜单选项较多,应该采用加长菜单的长度而减少深度的原则排列。
  7. 菜单深度一般要求最多控制在三层以内。
  8. 对常用的菜单要有快捷命令方式。
  9. 对与进行的操作无关的菜单要用屏蔽的方式加以处理,例如采用动态加载方式,即只有需要的菜单才显示(参考Windows 2000程序组),但需要提供用户可以找到被屏蔽菜单的方式。
  10. 菜单前的图标不宜太大,与字高保持一致最好。
  11. 主菜单的宽度要接近,字数不应多于四个。
  12. 主菜单数目不应太多,最好为单排布置。
  13. 菜单和工具条要有清楚的界限;菜单要求凸出显示,这样在移走工具条时仍有立体感。
  14. 菜单和状态条中通常使用5号字体。工具条一般比菜单要宽,但不太多。
  15. 右键快捷菜单采用与菜单相同的准则。

键盘设计细则

  1. 保持软件所有窗口键盘操作方式和对应功能的一致
  2. 保持键盘操作方式同操作系统类似操作方式一致,简单易理解
  3. 键盘组和操作按键不要超过三个,对于初级用户不要超过2个
  4. 组和操作采用CTRL、ALT、SHIFT、Windows专用键+数字/字符/F X形式
  5. 避免界视觉上接近的元素键盘组合快捷操作在同一键盘区域
  6. 避免和操作系统已有的键盘操作冲突
  7. 对于多语言版本的键盘操作快捷键不能采用基于某一个语言版本的特定内容
  8. 不应存在只有键盘能访问而鼠标无法访问的元素

UI交互细则

鼠标设计细则

  1. 点击选中而不是滑动停留选中
  2. 支持滑轮(鼠标中间的滚动轮)上下翻动操作
  3. 对于相同种类的元素采用相同的操作激活
  4. 用沙漏表示系统忙,用手型表示可以点击

控件使用细则

  1. 按钮
  2. 除主界面外命令按钮不超过6个
  3. 命令按钮文字简单明了
  4. 相同功能的命令按钮使用同一个图标和文字
  5. [确认][放弃][关闭][重置][应用][帮助]六个按钮为标准按钮应使用标准含义
  6. 当确认按钮代表诸如“打印”“搜索”之类具体功能的时候,使用功能含义代替确认
  7. 对话框中所有按钮文字内容长度类似的话采用同样大小的按钮
  8. 按钮和其他部分用空白或者分割线分开
  9. 如果同排按钮超过3个应该分组。
  10. 在统一的位置放置按钮
  11. 按钮尽可能按照下列顺序摆放:确认离开、放弃离开、应用
  12. 按钮文字中加入“…”表示需要输入数据
  13. 禁止而不是消失暂时不起作用的按钮
  14. 一般情况下选择非破坏性按钮作为默认按钮

标签

  • 文字内容应该明了
  • 同一窗口不同标签文字大小应该一致
  • 尽量不采用大红颜色作为标签文字
  • 预先考虑不同字体大小的情况标签的大小

单选按钮

  • 应该带有明白的文字解释
  • 集中竖排放置单选按钮
  • 同时放置的单选按钮不超过6个
  • 避免两个单选按钮表示同一内容的两种状态(例如YES/NO)

UI交互细则

复选按钮

  • 应该带有明白的文字解释
  • 集中竖排放置复选按钮
  • 同时放置的复选按钮不超过10个
  • 不要带有“选择全部”“取消全部选择”的复选按钮
  • 复选按钮多行放置时左对齐

文本输入框

  • 有边框的用于可输入文本框,不可输入的用无边框的
  • 灰掉只读的文本框
  • 文本框的宽度应和可输入的内容长度一致
  • 当存在做个文本输入框(超过3个)可以按照一定规则分类用组件范围框架
  • 放置LABEL说明文本输入框用途,说明文本后加“:”

列表框

  • 同时显示项数为3-8个
  • 应该为列表框增加一个说明意义的文本解释放置在列表框左上方
  • 对于超过30个选项的列表框应提供选项过滤方式
  • 保持列表框中被用户选中选项的焦点

下拉列表框

  • 当用户需要同时看到多个选项时采用列表框而不是下拉列表框
  • 应该为列表框增加一个说明意义的文本解释

组件范围框架

  • 按照一定规则放置控件在组件范围框架内:
    根据逻辑关系
    根据任务关系
    根据使用频率

滑动条

  • 同时显示当前的代表值会更加有效
  • 当可选择数目在10以内的时候不使用滑动条
  • 滑动条位置代表实际数值
  • 在用户知道精确位置情况下允许其输入数值定位
  • 用小箭头表示小的改变

UI交互细则

  • 树控件对于初级用户可能不合适
  • 树不能代替菜单和按钮

列表树

  • 让用户可以选择一个选项的任何一个部分表示选中该选项(行选择)

多页面选择

  • 按照一定规则放置控件在多页面不同页面内:
    根据逻辑关系
    根据任务关系
    根据使用频率
  • 如果是软件设置按钮增加一个恢复到默认的按钮在多页面选择控件下面
  • 避免只有一个控件的页面

UI交互细则

-END-

分享到:
赞(0)