UI(用户界面)设计规则和规范

#UI(用户界面)设计规则和规范| 来源: 网络整理| 查看: 265

UI(用户界面)设计规则和规范

界面是软件与用户交互最直接的层，界面好坏决定用户对软件第一印象，而且设计良好的界面能够引导用户自己完成相应操作，起到向导作用。

目前流行的界面风格有三种方式：多窗体、单窗体以及资源管理器风格，无论那种风格，以下规则是应该被重视的。

1. 易用性

按钮名称应该通俗易懂、用词准确，摒弃模棱两可字眼；要与同一界面上其他按钮易于区分。理想情况是用户不用查阅帮助就能知道该界面功能并进行相关正确操作。易用性细则如下：

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

通常界面设计都按 Windows 界面的规范来设计，即包含“菜单条、工具栏、工具箱、状态栏、滚动条、右键快捷菜单”的标准格式，可以说：界面遵循规范化程度越高，则易用性就越好。小型软件一般不提供工具箱。规范性细则如下：

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

系统应提供详尽、可靠的帮助文档，在用户使用产生迷惑时可以自己寻求解决方法。帮助设施细则如下：

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

屏幕对角线相交位置是用户直视区域，正上方四分之一处为易吸引用户注意力区域，在放置窗体时要注意利用这两个位置。合理性细则如下：

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

【转载】https://cloud.tencent.com/developer/article/1177990

【本文地址】

公司简介

联系我们