`
senton
  • 浏览: 200579 次
  • 性别: Icon_minigender_1
  • 来自: 紫禁城
社区版块
存档分类
最新评论

界面设计规则和规范

    博客分类:
  • Web
阅读更多

界面设计规则和规范

界面是软件与用户交互的最直接的层,界面的好坏决定用户对软件的第一印象。而且设计良好的界面能够引导用户自己完成相应的*作, 起到向导的作用。同时界面如同人的面孔,具有吸引用户的直接优势。设计合理的界面能给用户带来轻松愉悦的感受和成功的感觉,相反由于界面设计的失败,让用 户有挫败感,再实用强大的功能都可能在用户的畏惧与放弃中付诸东流。目前界面的设计引起软件设计人员的重视的程度还远远不够,直到最近网页制作的兴起,才 受到专家的青睐。而且设计良好的界面由于需要具有艺术美的天赋而遭拒绝。

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

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

10):提示、警告、或错误说明应该清楚、明了、恰当。

5:美观与协调性:

界面应该大小适合美学观点,感觉协调舒适,能在有效的范围内吸引用户的注意力。

美观与协调性细则:

1): 长宽接近黄金点比例,切忌长宽比例失调、或宽度超过长度。

2): 布局要合理,不宜过于密集,也不能过于空旷,合理的利用空间。

3): 按钮大小基本相近,忌用太长的名称,免得占用过多的界面位置。

4): 按钮的大小要与界面的大小和空间要协调。

5): 避免空旷的界面上放置很大的按钮。

6):放置完控件后界面不应有很大的空缺位置。

7): 字体的大小要与界面的大小比例协调, 通常使用的字体中宋体9-12较为美观,很少使用超过12号的字体。

8): 前景与背景色搭配合理协调,反差不宜太大,最好少用深色,如大红、大绿等。常用色考虑使用Windows界面色调。

9): 如果使用其他颜色,主色要柔和,具有亲和力与磁力,坚决杜绝刺目的颜色。

10): 大型系统常用的主色有"#E1E1E1""#EFEFEF""#C0C0C0"等。

11): 界面风格要保持一致,字的大小、颜色、字体要相同,除非是需要艺术处理或有特殊要求的地方。

12): 如果窗体支持最小化和最大化或放大时,窗体上的控件也要随着窗体而缩放;切忌只放大窗体而忽略控件的缩放。

13):对于含有按钮的界面一般不应该支持缩放,即右上角只有关闭功能。

14): 通常父窗体支持缩放时,子窗体没有必要缩放。

15):如果能给用户提供自定义界面风格则更好,由用户自己选择颜色、字体等。

6:菜单位置:

菜单是界面上最重要的元素,菜单位置按照按功能来组织。

菜单设测试细则:

1):菜单通常采用“常用--主要--次要--工具--帮助”的位置排列,符合流行的Windows风格。

2):常用, 的有“文件”、“编辑”,“查看”等,几乎每个系统都有这些选项,要根据不同的系统有所取舍。

3):下拉菜单要根据菜单选项的含义进行分组,并切按照一定的规则进行排列,用横线隔开。

4): 一组菜单的使用有先后要求或有向导作用时,应该按先后次序排列。

5): 没有顺序要求的菜单项按使用频率和重要性排列,常用的放在开头, 不常用的靠后放置;重要的放在开头,次要的放在后边。

6): 如果菜单选项较多,应该采用加长菜单的长度而减少深度的原则排列。

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

8): 对常用的菜单要有快捷命令方式,组合原则见8

9):对与进行的*作无关的菜单要用屏蔽的方式加以处理,如果采用动态加载方式——即只有需要的菜单才显示——最好。

10):菜单前的图标不宜太大,与字高保持一直最好。

11):主菜单的宽度要接近,字数不应多于四个,每个菜单的字数能相同最好。

12):主菜单数目不应太多,最好为单排布置。

7:独特性:

如果一味的遵循业界的界面标准,则会丧失自己的个性.在框架符合以上规范的情况下,设计具有自己独特风格的界面尤为重要。尤其在商业软件流通中有着很好的迁移默化的广告效用。

1):安装界面上应有单位介绍或产品介绍,并有自己的图标。

2):主界面,最好是大多数界面上要有公司图标。

3):登录界面上要有本产品的标志,同时包含公司图标。

4):帮助菜单的“关于”中应有版权和产品信息。

5):公司的系列产品要保持一直的界面风格,如背景色、字体、菜单排列方式、图标、安装过程、按钮用语等应该大体一致。

8:快捷方式的组合

在菜单及按钮中使用快捷键可以让喜欢使用键盘的用户*作得更快一些 在西文Windows及其应用软件中快捷键的使用大多是一致的。

菜单中:

1):面向事务的组合有: Ctrl-D 删除 Ctrl-F 寻找 Ctrl H替换;Ctrl-I 插入 Ctrl-N 新记录 Ctrl-S 保存 Ctrl-O 打开。

2):列表: Ctrl-R Ctrl-G定位;Ctrl-Tab下一分页窗口或反序浏览同一页面控件;。

3):编辑:Ctrl-A全选;Ctrl-C 拷贝;Ctrl-V 粘贴;Ctrl-X 剪切;Ctrl-Z撤消*作;Ctrl-Y恢复*作。

4)文件*:Ctrl-P 打印;Ctrl-W 关闭。

5):系统菜单Alt-A文件;Alt-E编辑;Alt-T工具;AltW窗口;AltH帮助。

6):MS Windows保留键:Ctrl-Esc 任务列表 Ctrl-F4 关闭窗口; Alt-F4 结束应用;Alt-Tab 下一应用 Enter 缺省按钮/确认* Esc 取消按钮/取消* Shift-F1 上下文相关帮助

按钮中:

可以根据系统需要而调节,以下只是常用的组合。Alt-Y确定(font-size: 9pt; color: #333333; line-height: 125

分享到:
评论

相关推荐

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

    由于界面设计的失败,让用户有挫败感,再实用强大的功能都可能在用户的畏惧与放弃中付 诸东流。 目前流行的界面风格有三种方式:多窗体、单窗体以及资源管理器风格,无论那种风格,本文总结的十条规则是应该被重视的...

    UI(用户界面)设计规则和规范[定义].pdf

    UI(用户界面)设计规则和规范[定义].pdf

    软件开发中的用户界面设计与测试规则[1]

    规则软件开发中的用户界面设计与测试规则[1]软件测试在工作中总结了一些有关界面设计与测试的规范,与大家共享。界面设计与测试规则界面是软件与用户交互的最直接的层,界面的好坏决定用户对软件的第一印象。而且...

    软件界面设计详细规则描述

    关于UI设计的详细规则描述,可以帮助你了解在UI设计中需要注意的问题和一些设计的普通规范。

    出色图形用户界面(GUI)设计规范

    图形用户界面(GUI)已经成为用户界面的首选,但不论GUI如何流行,令人诧异的是没几个程序有好的界面设计。另外,想找一些介绍如何编制出色用户界面的材料也相当困难。本文给出了出色界面应该如何和不该如何的一些最...

    Android_UI_的设计规则.

    Android_UI_的设计规则.详细的安卓用户界面设计规则

    软件开发中的用户界面设计与测试规则[4]

    规则软件开发中的用户界面设计与测试规则[4]软件测试7:独特性:如果一味的遵循业界的界面标准,则会丧失自己的个性.在框架符合以上规范的情况下,设计具有自己独特风格的界面尤为重要。尤其在商业软件流通中有着很好...

    软件设计与规范实验报告出租车计费.doc

    软件设计与规范实验报告出租车计费,大学生作业优秀等级 一.实验题目 根据9.1节的教学视频采用策略模式和装饰者模式完成出租车计费系统,计费规则如下图所示 1:创建出租车计费领域模型 2:创建测试项目,完成对...

    Axure团队项目页面原型规范.zip

    Axure原型规范,包括如何组织目录结构、页面大小、弹出框大小、页面各元素规则等。主要用于团队项目中规范设计。

    基于交通违章查询系统以及交规学习系统的毕业设计实现.pdf

    该应用程序将提供用户友好的界面和方便的操作,以满足用户的需求。 该系统将具有以下功能: - 用户可以注册和登录系统。 - 用户可以查询与其车牌号码相关的交通违章记录。 - 用户可以学习交通规则和安全知识。 - ...

    WEB界面开发规范--更好的开发web应用程序 

    页面设计规则 页面命名规则 1、每个功能页面在系统中配置菜单时统一使用index.jsp或index.html。例如客户管理配置的URL为http://Server:Port/cc/custmgr/index.jsp。 2、每个页面的title必须设置为和菜单配置中相同...

    URULE是一款基于RETE算法的纯Java规则引擎.zip

    对于UI/UX设计,有界面设计工具,如Sketch、Adobe XD,可以帮助设计师快速构建应用程序界面模型,并生成规范的设计稿供开发人员参考实现。 跨平台支持: 跨平台开发工具如Xamarin、React Native和Flutter,让...

    Allegro封装焊盘命名规则及设计方法.pdf

    Allegro封装焊盘命名规则及设计方法,Allegro 中封装焊盘命名规则及设计方法 本文档主要目的是: 1. 对目前所制作使用的焊盘库进行规范、整理,以便焊盘 一. 对编辑焊盘的界面进行介绍 1. Allegro SPB 15.5\Pcb ...

    springboot072基于JavaWeb技术的在线考试系统设计与实现毕业源码案例设计

    随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟。...系统具有界面清晰、操作简单,功能齐全的特点,使得基于Java Web技术的在线考试系统设计与实现管理工作系统化、规范化。本

    CadenceDesignEntryHDL约束管理器打包设计设计同步设计派生工具使用教程.doc

    通过此培训教材旨在让员工能掌握CADENCE原理图相关工具的基本使用方法,能熟练运用此工具进行原理图设计,并对公司相关规范进行简单介绍。   1 原理图输入介绍 在中兴使用的是Cadence板级设计中的原理...

Global site tag (gtag.js) - Google Analytics