软件界面设计规则和规范文档

转自:http://www.iconfans.org/thread-10153-1-1.html

这个是公司的规范1.0版,虽然有一些问题.例如教条化\实际可操作性不高\没有规范到细节\不有利于实际操作等0问题.但还是对新进设计师有一定的指导作用,可以让新进设计师快速掌握设计要领.
目前正在进行的2.0版有了很大改进.等写完有机会再发上来,大家一起进步吧.

目前流行的界面风格有三种方式:多窗体、单窗体以及资源管理器风格,无论哪种风格,均适用于以下十条规则

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.菜单和工具条要有清楚的界限。
19.菜单和状态条中通常使用5号字体。工具条一般比菜单要宽,但不要宽的太多,否则看起来很不协调。
20.右键快捷菜单采用与菜单相同的准则。


3:帮助设施:

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

帮助设施细则:

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

4:合理性:

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

合理性细则:

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

5:美观与协调性:

界面设计的风格,色彩应基于公司的VI手册,形成自己独特的品牌风格;另外,页面元素应该大小适合美学观点,感觉协调舒适,能在有效的范围内吸引用户的注意力。

美观与协调性细则:

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

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工具;Alt-W窗口;Alt-H帮助。
6.MS Windows保留键:Ctrl-Esc 任务列表 ;Ctrl-F4 关闭窗口; Alt-F4 结束应用;Alt-Tab 下一应用 ;Enter 缺省按钮/确认操作 ;Esc 取消按钮/取消操作 ;Shift-F1 上下文相关帮助 。

按钮中:

可以根据系统需要而调节,以下只是常用的组合。Alt-Y确定(是);Alt-C取消;Alt-N 否;Alt-D删除;Alt-Q退出;Alt-A添加;Alt-E编辑;Alt-B浏览;Alt-R读;Alt-W写。

这些快捷键也可以作为开发中文应用软件的标准,但亦可使用汉语拼音的开头字母。

9:安全性:

在界面上通过下列方式来控制出错几率,会大大减少系统因用户人为的错误引起的破坏。开发者应当尽量周全地考虑到各种可能发生的问题,使出错的可能降至最小。如应用出现保护性错误而退出系统,这种错误最容易使用户对软件失去信心。因为这意味着用户要中断思路,并费时费力地重新登录,而且已进行的操作也会因没有存盘而全部丢失。

安全性细则:

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

10:多窗口的应用与系统资源:

设计良好的软件不仅要有完备的功能,而且要尽可能的占用最低限度的资源。

1.在多窗口系统中,有些界面要求必须保持在最顶层,避免用户在打开多个窗口时,不停的切换甚至最小化其它窗口来显示该窗口。
2.在主界面载入完毕后自动卸出内存,让出所占用的WINDOWS系统资源。
3.关闭所有窗体,系统退出后要释放所占的所有系统资源 ,除非是需要后台运行的系统。
4.尽量防止对系统的独占使用。
  • 2
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
UIDesigner(腾讯公司出品) 在软件设计阶段,交互设计师或者产品经理等常常需要使用一些工具(比如Visio、Axure RP、Flash或者OmniGraffle等)制作出静态稿或者原型来表达设计思想。这些工具是各有各的优势,当然也各有各的缺点啦。那么腾讯CDC是如何设计软件原型的呢?这里向大家介绍我们正在研发的原型设计利器UIDesigner。   首先,先让我们来体验一下UIDesigner制作出来的原型效果。这个原型是一个设置窗体,主要由按钮、复选框、分组框和文本框等控件构成,其中一些按钮还具有响应的动作(如打开另一个界面,关闭窗体等)。如图一所示,这是使用Firework制作出来的交互图。 图一、使用Firework制作出来的设计稿   这种交互图的特点是简单明了,能够表示出各种控件的基本属性(如文本、位置和选中状态等),但它只是一个静态的图片,不能真实表现出每个控件的响应动作,如仅看这张图,是不清楚点击代理服务器设置分组框上的“设置…”按钮会有什么响应的。   那再看看你若使用UIDesigner制作出来的效果:最终输出的是一个EXE可执行文件(见图二左上角),双击运行后就会出现一个与最终实现效果完全一致的窗体(见图二右)。另外,它还是一个具有响应动作的真实原型,例如你若点击了“设置…”按钮,那就会弹出一个新的窗体(见图三)。 图二、使用UIDesinger制作出来的原型 图三、点击“设置…”按钮后弹出的另一窗体   实际上,这个新弹出的窗体都是一个独立的原型,也是由UIDesigner制作出来的。由于它里面的控件同样可以设置下一步的响应动作,所以从总体上来看,众多原型就像一个树状结构,而其中的父节点就是图二中的设置窗体了。这种结构具有一个很大的好处:无论你完成了多个界面的原型,只需要它们之间有链接关系,最后输出的只是一个EXE可执行文件。这样,你可以很方便地与其它人员表达自己的设计思路,让沟通变得更加快捷。   接下来,我们看看这个原型是如何制作出来的。   第一步:建立空白窗体,调整它的大小、风格、标题和Icon 图四、使用UIDesigner制作原型—建立窗体   第二步:从工具箱中拖曳控件到窗体上,修改这些控件的属性(如Text等) 图五、使用UIDesigner制作原型—加入控件   由于UIDesigner具有自动对齐的功能,所以在拖动控件到窗体时就可以完成排版工作,不需要再逐个像素去调整。另外,不单单在加入控件到窗体时,在改变已存在于窗体内的控件的位置或者大小时,自动对齐功能一样会生效。这样,设计者在调整控件大小或者位置时(包括控件与控件,控件与窗体边缘等的距离等情况),工作变得很简单。 图六、使用UIDesigner制作原型—自动对齐功能   第三步:几分钟后,所有的控件都放到窗体并设置好属性了,如下图。 图七、使用UIDesigner制作原型—整体界面效果   此时,设计者就可以使用软件的导出图片或者导出原型功能分享你的设计成果了。当然,现在这种效果还只是一个没有响应动作效果的原型。接下来,我们再给“设置…”按钮加入响应动作。首先,选中“设置…”按钮,然后点击工具栏的“响应”按钮,你将会看到如图八的响应设置窗口。此时,你可以选择打开窗体、打开网页、弹出对话框、修改属性值和关闭本身窗体等五种效果,这里我们选择“打开窗体”,然后在弹出的对话框里指向弹出窗体的文件。最后,点击“完成”按钮即可。 图八、使用UIDesigner制作原型—设置控件的响应动作   到此为止,你就完成了一个与最终实现效果完全一致的高保真原型了。产品经理和开发人员等若想了解你的设计思想就不需要看着长长几页的说明文档了,而只需要运行你输出的原型文件,就可以对你的设计思路一目了然。   UIDesigner除了能让使用者能够快速地搭建起软件界面的高保真原型外,还提供了项目管理,让使用者能够方便地管理工程文件;提供了图片库和模板库功能,让使用者可以方便地重用以前的设计资源;提供了32个Windows客户端软件常用控件,满足使用者的设计需求;提供了多个属性设置入口,分别实现最常用属性设置、一般属性设置和高级属性设置功能。当然,UIDesigner不是专用来设计QQ的,其它的Windows客户端产品都在它的工作范围之内。总的来说呢,使用UIDesigner来制作原型是很高效的,而制作出来的原型也能够实现设计师、产品经理和程序开发工程师三者间的快速沟通,减少不必要的工作内耗。 ------------------------------------------------------------------ GUI_Design_Studio_3.5.94.0 在2008
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页

打赏

zhuruxin1234

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值