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

界面是软件与用户交互的最直接的层,界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的操作,起到向导的作用。同时界面如同人的面孔,具有吸引用户的直接优势。

设计合理的界面能给用户带来轻松愉悦的感受和成功的感觉,相反由于界面设计的失败,让用户有挫败感,再实用强大的功能都可能在用户的畏惧与放弃中付诸东流。目前界面的设计引起软件设计人员的重视的程度还远远不够,直到最近网页制作的兴起,才受到专家的青睐。

而且设计良好的界面由于需要具有艺术美的天赋而遭拒绝。目前流行的界面风格有三种方式:多窗体、单窗体以及资源管理器风格,无论那种风格,以下十条规则是应该被重视的。

1:易用性:

按钮名称应该易懂,用词准确,屏弃没楞两可的字眼,要与同一界面上的其他按钮易于区分,能望文知意最好。理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。

易用性细则:

1):完成相同或相近功能的按钮用Frame框起来,常用按钮要支持快捷方式。

2):完成同一功能或任务的元素放在集中位置,减少鼠标移动的距离。

3):按功能将界面划分局域块,用Frame框括起来,并要有功能说明或标题。

4):界面要支持键盘自动浏览按钮功能,即按 Tab键的自动切换功能。

5):界面上首先应输入的和重要信息的控件在 Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。

6):同一界面上的控件数最好不要超过 10个,多于10个时可以考虑使用分页界面显示。

7):分页界面要支持在页面间的快捷切换,常用组合快捷键 Ctrl+Tab

8):默认按钮要支持Enter 及选操作,即按Enter后自动执行默认按钮对应操作。

9):可写控件检测到非法输入后应给出说明并能自动获得焦点。

10):Tab键的顺序与控件排列顺序要一直,目前流行总体从上到下,同时行间从左到右的方式。

11):复选框和选项框按选择几率的高底而先后排列。

12):复选框和选项框要有默认选项,并支持 Tab选择。

13):选项数相同时多用选项框而不用下拉列表框。

14):界面空间较小时使用下拉框而不用选项框。

15):选项数叫少时使用选项框,相反使用下拉列表框。

16):专业性强的软件要使用相关的专业术语,通用性界面则提倡使用通用性词眼。

2: 规范性:

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

规范性细则:

1):常用菜单要有命令快捷方式。

2):完成相同或相近功能的菜单用横线隔开放在同一位置。

3):菜单前的图标能直观的代表要完成的操作。

4):菜单深度一般要求最多控制在三层以内。

5):工具栏要求可以根据用户的要求自己选择定制。

6):相同或相近功能的工具栏放在一起。

7):工具栏中的每一个按钮要有及时提示信息。

8):一条工具栏的长度最长不能超出屏幕宽度。

9):工具栏的图标能直观的代表要完成的操作。

10):系统常用的工具栏设置默认放置位置。

11):工具栏太多时可以考虑使用工具箱。

12):工具箱要具有可增减性,由用户自己根据需求定制。

13):工具箱的默认总宽度不要超过屏幕宽度的 1/5。

14):状态条要能显示用户切实需要的信息,常用的有:目前的操作、系统状态、用户位置、用户信息、提示信息、错误信息等,如果某一操作需要的时间较长,还应该显示进度条和进程提示。

15):滚动条的长度要根据显示信息的长度或宽度能及时变换,以利于用户了解显示信息的位置和百分比。

16):状态条的高度以放置五好字为宜,滚动条的宽度比状态条的略窄。

17):菜单和工具条要有清楚的界限;菜单要求凸出显示,这样在移走工具条时仍有立体感。

18):菜单和状态条中通常使用5 号字体。工具条一般比菜单要宽,但不要宽的太多,否则看起来很不协调。

19):右键快捷菜单采用与菜单相同的准则。

3:帮助设施:

系统应该提供详尽而可靠的帮助文档,在用户使用产生迷惑时可以自己寻求解决方法。

帮助设施细则:

1):帮助文档中的性能介绍与说明要与系统性能配套一致。(我们的系统帮助文档都是系统的祖先时期的说明,让人困惑)。

2):打包新系统时,对作了修改的地方在帮助文档中要做相应的修改。

3):操作时要提供及时调用系统帮助的功能。常用 F1。

4):在界面上调用帮助时应该能够及时定位到与该操作相对的帮助位置。也就是说帮助要有即时针对性。

5):最好提供目前流行的联机帮助格式或 HTML帮助格式。

6):用户可以用关键词在帮助索引中搜索所要的帮助,当然也应该提供帮助主题词。

7):如果没有提供书面的帮助文档的话,最好有打印帮助的功能。

8 ):在帮助中应该提供我们的技术支持方式,一旦用户难以自己解决可以方便的寻求新的帮助方式。

4:合理性:

屏幕对角线相交的位置是用户直视的地方,正上方四分之一处为易吸引用户注意力的位置,在放置窗体时要注意利用这两个位置。

合理性细则:

1):父窗体或主窗体的中心位置应该在对角线焦点附近。

2):子窗体位置应该在主窗体的左上角或正中。

3):多个子窗体弹出时应该依次向右下方偏移,以显示窗体出标题为宜。

4):重要的命令按钮与使用较频繁的按钮要放在界面上注目的位置。

5):错误使用容易引起界面退出或关闭的按钮不应该放在易点位置。横排开头或最后与竖排最后为易点位置。

6):与正在进行的操作无关的按钮应该加以屏蔽(Windows 中用灰色显示,没法使用该按钮)。

7):对可能造成数据无法恢复的操作必须提供确认信息,给用户放弃选择的机会。

8):非法的输入或操作应有足够的提示说明。

9):对运行过程中出现问题而引起错误的地方要有提示,让用户明白错误出处,避免形成无限期的等待。

原文发布于微信公众号 - 设计谜(UXMystery)

原文发表时间:2017-10-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员互动联盟

你所不知道的html5与html中的那些事(三)

文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么...

2966
来自专栏ZKEASOFT

会HTML/CSS就可以轻松创建网站

网站其本质就是HTML + CSS 外加一些JavaScript构成的。所以基本上只要你会一些前端,就可以开始花样搭网站了。

64321
来自专栏iOS技术

iOS图片浏览器(功能强大/性能优越)

支持 cocopods,功能完善,性能不错,代码质量尚可,喜欢的朋友可以给个小星星?。

5107
来自专栏思衍 Jax 专栏

企鹅辅导课程详情页毫秒开的秘密 - PWA 直出

随着近几年的前端技术的高速发展,越来越多的团队使用 React、Vue 等 SPA 框架作为其主要的技术栈。以 React 应用为例,从性能角度,其最重要的指标...

93311
来自专栏向治洪

ReactJs和React Native的那些事

介绍  1,React Js的目的 是为了使前端的V层更具组件化,能更好的复用,它能够使用简单的html标签创建更多的自定义组件标签,内部绑定事件,同时可以让你...

19910
来自专栏从零开始学 Web 前端

从零开始学 Web 之 JavaScript(一)JavaScript概述

JavaScript历史 要了解JavaScript,我们首先要回顾一下JavaScript的诞生。在上个世纪的1995年,当时的网景公司正凭借其Naviga...

1162
来自专栏做全栈攻城狮

小白学编程实战项目-利用Winform开发美女音乐播放器

这是小白学习软件开发系列课程,旨在帮助对电脑编程感兴趣的朋友学习并熟悉C#技术。其中基础部分已经讲解完毕,可以查看:电脑编程入门(10)-C#面向对象编程浅聊,...

2153
来自专栏Material Design组件

Human Interface Guidelines — Widgets

1183
来自专栏web前端教室

风继续吹&&先行者成员:王广铎(duo 二声)的作业分析,从他的作业理解“React单向数据流”

他的作业:“分页组件”React版,写的很好,主要是思路很清晰。本来是想上周日视频课程直播的时候讲一下了,现在只能是放在文章中大概的说说了。先看截图, ? 很...

2008
来自专栏王大锤

iOS各种调试技巧豪华套餐

4159

扫码关注云+社区

领取腾讯云代金券