软件界面设计原则

一:遵循一致的准则,确立标准并遵循

无论是控件使用,提示信息措辞,还是颜色、窗口布局风格,遵循统一的标准,做到真正的一致。
这样得到的好处:

1:使用户使用起来能够建立起精确的心里模型,使用熟练了一个界面后,切换到另外一个界面能够很轻松的推测出各种功能,语句理解也不需要费神理解
2:降低培训、支持成本,支持人员不会行费力逐个指导。
3:给用户统一感觉,不觉得混乱,心情愉快,支持度增加

做法:

项目组有经验人士,确立UI规范:
美工提供色调配色方案,提供整体配色表 界面控制程序人员、用户体验人员提出合理统一使用的控件库。参考标准界面使用规范

控件功能遵循行业标准,windows平台参见《Microsoft 用户体验》(MSDN中有,中文已经翻译发行,项目组必须有一本)
控件样式在允许的范围内可以统一修改其样式、色调
参考其他软件先进操作,提取对本项目有用的功能,以使用,绝对不能盲从,漫无目的。
根据需要,设计特殊操作控件,准则为:简化操作、达到一定功能目的

界面实施人员与美工商榷控件可实现性,(如不实行此步骤,将会导致各自对对方工作不满意,也会产生不一致的混乱)。重复叠代上述工作。
建立合理化文档《UI标准》描述上述规范,
强行界面设计者理解之,并作为开发准则,
SQA人员进行监控开发人员是否遵循,及时告诫开发人员。


二:(Color)颜色使用恰当,遵循对比原则

1:统一色调,针对软件类型以及用户工作环境选择恰当色调:
如:安全软件,根据工业标准,可以选取黄色,绿色体现环保,蓝色表现时尚、紫色表现浪漫等等,淡色可以使人舒适,暗色做背景使人不觉得累等
2:如果没有自己的系列界面,采用标准界面则可以少考虑此方面,做到与操作系统统一,读取系统标准色表
3:色盲、色弱用户,即使使用了特殊颜色表示重点或者特别的东西,也应该使用特殊指示符,如"!","?"着重号,以及图标等
4:颜色方案也需要测试,常常由于显示器、显卡的问题,色彩表现每台机器都不一样,应该经过严格测试,不同机器进行颜色测试
5:遵循对比原则:在浅色背景上使用深色文字,深色背景上使用浅色文字,蓝色文字以白色背景容易识别,而在红色背景则不易分辨,原因是红色和蓝色没有足够反差,而蓝色和白色反差很大。除非特殊场合,杜绝使用对比强烈,让人产生憎恶感的颜色。
6:整个界面色彩尽量少的使用类别不同的颜色
itop色表
具体标准参考美术学统计学术标准。
色表的建设,对于美工在图案设计、包装设计上起着标准参考作用,对于程序界面设计人员设计控件、窗体调色起到有章可循的作用。


三:(Resource)资源

一个多姿多彩的人机交互界面,少不了精美的鼠标光标、图标以及指示图片、底图等。

1:也需要遵循统一的规则,包括上述颜色表的建立,图标的建立步骤也应该尽可能的形成标准,参考itop的outlookbar图标设计标准
2:有标准的图标风格设计,有统一的构图布局,有统一的色调、对比度、色阶,以及图片风格
3:底图应该融于底图,使用浅色, 低对比,尽量少的使用颜色。
4:图标、图像应该很清晰的表达出意思,遵循常用标准,或者用户机器容易联想的到物件,绝对不允许画出默认奇妙的图案。
5:鼠标光标样式统一,尽量使用系统标准,杜绝出现重复的情况,例如某些软件中一个手的形状就有4钟不同的样子。
如:《如何创建XP图标》http://www.microsoft.com/china/msdn.../winxpicons.asp
附件:Itop outlook howto.doc 描述itop项目中,outlookxp风格图标的制作方法


四:(Font)字体

使用统一字体,字体标准的选择依据操作系统类型决定。
中文采用标准字体,“宋体”,英文采用标准 Microsoft Sans Serif 不考虑特殊字体(隶书、草书等,特殊情况可以使用图片取代),保证每个用户使用起来显示都很正常。
字体大小根据系统标准字体来,例如 MSS字体8磅,宋体的小五号字(9磅)五号字(10.5磅)。
所有控件尽量使用大小统一的字体属性,除了特殊提示信息、加强显示等例外情况
ITop采用BCB,所有控件默认使用 parent font,不允许修改,这样有利于统一调整。

系统大小字体属性改变的处理。

Windows系统有个桌面设置,设置大字体属性,很多界面设计者常常为这个恼火,如果设计时遵循微软的标准,全部使用相对大小作为控件的大小设置,当切换大小字体的时候,相对不会有什么特殊问题。
但是由于常常方便使用点阵作为窗口设计单位,导致改变大字体后,出现版面混乱的问题。
这个情况下,应该做相应处理:
1:写程序自动调节大小,点阵值乘以一个相应比例
2:全部采用点阵作为单位,不理会系统字体的调节,这样可以减少调节大字体带来的麻烦。BCB/DELPHI中多采用这种方法,但是必然结果是和系统不统一。


五:(Text)文字表达

提示信息、帮助文档文字表达遵循以下准则:

1:口语化、客气、多用您、请,不要用或少用专业术语,杜绝错别字
2:断句逗号句号顿号分号的用法,\r\n 提示信息比较多的话,应该分段,
3:警告、信息、错误 使用对应的表示方法
4:使用统一的语言描述,例如一个关闭功能按钮,可以描述为退出、返回、关闭,则应该统一规定。
5: 根据用户不同采用相应的词语语气语调,如专用软件,可以出现很多专业属于,用户为儿童:这可以语气亲切和蔼,老年用户则应该成熟稳重。制定标准遵循之。


六:(STYLE)控件风格

不要使用错误控件,控件功能要专一

有设计好的同一风格的控件,如果没有能力设计出一套控件,则使用标准控件,绝对不能不伦不类,杂乱无章

不要错误使用控件

例如:使用Button样式做TTable的功能,拿主菜单条显示版权信息

统一类型的控件操作方式相同

例如一个控件双击可以执行某些动作,而同样控件,双击却没有任何反映

一个控件只做单一功能,不复用

很多人为了写程序方便,喜欢把一个控件在不同情况下做不同功能用,这些对用户初次理解增加难度,只有用户熟悉后才能理解。
例如 :改变红色选项,左边的参数代表不同的设置,可能由于为了节省控件或者编程量,但是只有熟练用户才回使用,这种情况下解决方法:
1:分组,使用双份控件.
2:使用TABLE页,给用户很明显的视觉变化


七:(ALIGN)控件布局,窗口不拥挤,按功能组合控件

1:屏幕不能拥挤
拥挤的屏幕让人难以理解,因而难以使用。试验结果(Mayhew,1992年)屏幕总体覆盖度不应该超过40%,而分组钟覆盖度不应该超过62%。
让人看上去,不能太拥挤,也不能太松散。
整个项目,采用统一的控件间距,通过调整窗体大小达到一致,即使在窗体大小不变的情况下,宁可留空部分区域,也不要破坏控件间的行间距。

2:区域排列
一行控件,纵向中对齐, 控件间距基本保持一致
行与行之间间距相同,靠窗体Border距离应大于行间间距(间距加边缘留空)。
当屏幕有多个编辑区域,要以视觉效果和效率来组织这些区域。
3:数据对齐要适当
说明文字,中文版应使用中文全角冒号,纵向对齐时,并按冒号右对其,如图。
纵向控件宽度尽量保持相通。并左对齐。
例如金额等字符穿应根据小数点对齐,或者右对齐
4:有效组合
逻辑上相关联的控件应当加以组合,以表示其关联性,反之,任何不想光的项目应当风格开,在项目集合间,用间隔对其进行分组,或者使用方框划分各自区域。
例如: 以下界面,选择搜索方式来判断号码范围是表示主叫号码范围还是被叫号码范围,和入帐方式无关,
则应该修改为: 搜索方式和入帐方式调换位置。以免用户产生误解。
5:窗口缩放时,控件位置、布局:
为了使界面不出现跑版或者难看的局面,解决方法:
1:固定窗口大小,不允许改变尺寸,
2:改变尺寸的窗口,在Onsize的时候做控件位置、大小的相应改变。
BCB/DELPHI的VCL中,大部分控件有布局属性:
某些控件拥有alignment属性,可以用来做布局调节:TcustomPanel,Tmemo等,考左靠右靠上靠下以及撑满(Client)属性,用来根据版面自动调节。
大部分控件有属性Anchors,里面上下左右akLeft, akTop等如果为true,则表示相对各个边缘的距离是否改变。这个可以进一步设计好排版工作。


八:(TAB ORDER)TAB顺序

习惯用法,阅读顺序,从左到右,从上到下
窗体中控件的Tab按键激活顺序,TabOrder,. BCB/DELPHI中使用窗体设计右键菜单选择taborder设置,VC中窗体RES编辑区域使用ctrl+D


九:(ShortcutKey & Accelerator& PopMenu)快捷键、加速键和弹出菜单



另一篇:

1. 一致性,一致性,一致性!必须保证用户界面的一致性,这是最重要的。如果你可以通过在某个列表框里双击其中一个条目来触发一个事件,那你必须保证在所有的列表框里双击条目都会产生相似的反应。所有窗口里的按钮都应该放在同一个位置,按钮标题与提示的措辞应保持一致,还应保持一致的色彩设置。一致的用户界面会使得使用者建立起关于应用程序工作流程的正确理解,而用户对应用程序工作流程的正确理解会带来更低的训练与支持费用。

2. 制订并严格遵守标准。使得你能够真正的保持一致性原则的唯一一个解决办法是制订一个用户界面设计标准并严格遵守。最好的办法是遵循当前的行业标准,同时根据你个人的应用程序的特殊需要不断的加以增添和完善。行业标准,例如IBM(1993)与Microsoft(1995)指定的用户界面设计规范可以满足一般用户界面设计者95%-99%的需要。采用行业标准不仅可以吸收同行的优秀建议,而且可以更容易的使你的应用程序用户界面与最终用户已经使用或者购买的其他同类软件产品的用户界面保持近似。

3. 更简单的解释你的规则。你的软件用户需要知道如何使用你为他们提供的软件产品。如果你的应用程序界面严格遵守一致性原则的话某个界面使用规则你只需要解释一遍,这比一步又一步的向用户解释每一个使用环节的每一个使用方法要简单的多。

4. 为初学者与专家都提供足够的支持。虽然一个图书目录能为一个随意的浏览者提供足够的图书馆藏书信息,但这不是最有效的为专业用户以及图书馆员提供服务的方法。图书馆员是经过专业训练的能够熟练运用复杂的信息检索系统在图书馆里查阅信息的人员。这意味着你必须为专业人员准备一套更复杂但功能更强大的搜索手段来满足他们的特殊需要。

5. 在窗口之间进行导航与指引是非常重要的。如果从一个窗口进入到另一个窗口变得很困难或者复杂,你的用户会有强烈的失败感并放弃使用软件。用户会试图尽量使得自己的工作流程与界面转接流程合拍,如果用户成功的做到这一点的话就会觉得在使用你的应用程序时非常顺手。但必须注意,不同的使用者有不同的工作流程,你的界面转接流程必须足够灵活以适应各种不同的用户习惯与需求。界面流程图可以很方便的用来设计并实现一个优秀的用户界面窗口转接流程。

6. 在一个窗口中的使用导引也非常重要。西方人的阅读习惯是从左到右,由上至下。因为人们已对此习以为常所以你在界面设计中必须遵循从左到右,由上至下的原则。如果你将窗口中的控件元素以令人舒适的顺序加以组织的话用户在使用中会对界面产生一种亲切感。

7. 适当的用户界面的标签与消息内容措辞。显示在用户界面上的文字是你的用户了解当前系统状态的最主要也是最重要的信息来源。拙劣的措辞在用户看来只会导致拙劣的用户界面。使用完整的词语与句子,尽量不采用缩写的短语与代码可以使你的信息被更好的理解。信息的语气必须是确定的,暗示用户一切都处于控制之中,同时保证使用户得知如何进行下一步动作。例如下列信息:“你输入了错误的信息”或者“账号长度必须为8位”。而且,提示信息必须保持一致的措辞以及显示位置的一致性。虽然“必须输入用户名”、“应该输入账号”的措辞分开来看没有问题,但它们没有保持一致。因此,如果以第一句为标准的话,第二句应改为“必须输入账号”来保持措辞的一致性。

8. 理解每一个控件。你必须保证使用正确的控件来完成某个特定的任务,这有助于增强用户界面的一致性与第一次使用该应用软件时的简易性。保证正确的使用每一个控件的唯一方法就是熟悉并且理解你所采用的用户界面设计标准与特点。

9. 仔仔细细的观察别的应用软件用户界面。除非你确定别的应用软件用户界面设计与你的项目遵循同一个标准。绝对不能事先在潜意识中认为另外的应用软件用户界面设计是正确的。虽然通过观察别的用户界面设计来吸取设计灵感与思想是个好办法,但在你能够保证自己拥有判断一个优秀的用户界面与一个拙劣的用户界面之间的区别之前不要这么做。已经有很多的开发者与设计者错误的模仿了某些后来证明是不正确的用户界面设计思想。

10. 适当的使用色彩。必须加以控制的使用色彩,如果你在某一处使用了色彩来表达信息的话就必须保证用户还可以从别的方面获得同样的信息,因为很有可能你的软件用户是一个色盲。如果你使用高亮色来突出屏幕上的某个信息,你就必须同时使用一种别的手段来保证色盲用户也能正确的注意到这个信息,比如在画面上显示一个提示符号。使用色彩同样要求保持严格的一致性以保证用户界面的一致性。另外,在不同的平台之间很难保证一致的色彩表现,在一个系统上表现不错的色彩设计在另一个系统上很可能表现很糟糕。我们经常在一些会议上听到某些人说“在我家里的机器上看起来很不错的...”

11. 遵循色彩对比度规则。如果你决定在界面上使用色彩你就必须保证在各种可能情况下窗口文本的可读性。最好的解决办法是遵循色彩对比度规则:即在浅色背景上显示深色文本或者在深色背景上显示浅色文本。阅读白色背景上的蓝色文本非常轻松但红色背景与蓝色文本搭配就不是那么令人舒适了,因为红色与蓝色没有足够的对比度来保证文本的可读性,而白色与蓝色就有足够的对比度。

12. 使用适当的字体。古体字如果出现在威廉·莎士比亚的剧本封面上看起来确实很不错,但如果显示在屏幕上就会使用户阅读起来很困难。使用容易阅读的字体,例如Times Roman等印刷字体。另外在使用字体时应该很小心的保持一致性。一个使用了两到三种不同字体效果的窗口比使用了五、六种字体的窗口看起来要舒服的多。记住当你每一次改动字体的大小、类型(粗体、斜体、下划线、……)、字体、颜色时你实际上都是在使用另一种不同的字体。

13. 禁止使用,而不是不显示。你会发现在某一个特定的时候无法为你的用户提供应用程序的所有功能,例如在用户删除一个条目之前必须先选择一个条目,而在选择一个条目之前删除功能是无法使用的。这时(在选择一个条目之前)是禁止使用删除按钮还是根本不显示删除按钮?答案是前者。在一个控件无法使用时禁止它会使你的用户建立对你的软件产品的工作流程的准确理解。如果你不显示该控件的话就会增加用户对软件产品工作流程建立准确的理解的难度,因为用户现在只知道什么是可用的,而不知道什么是不可用的。这时那句古老的格言“Out of sight is out of mind”就显得很有道理。

14. 使用非破坏性功能的默认按钮。一般每一个窗口都有一个默认的按钮,当用户按下回车键时就相当于按下该按钮。问题是用户偶尔会因为无意按下回车键而使得该默认按钮生效。因此必须保证默认的按钮功能不存在潜在的破坏性,比如删除或者保存(因为用户这时候很可能并不想保存)。

15. 区域的组织排列。当一个窗口有一个以上的输入框控件的时候,如果你加以组织排列的话窗口看起来会很吸引人并且提高了用户的工作效率。正如第一节所述,左对齐是最好的控件排列方法,也就是说所有输入控件的左边界处于同一条竖直线并一个一个的从上到下排列起来。同时每个输入控件相应的标签以右对齐的方式位于输入控件的左边。这是组织窗口区域的最简单而有效的方式。

16. 对齐数据。一般来说一列数据应以下列方式对齐:整形数右对齐,浮点数以小数点为基准对齐,字符串左对齐。

17. 不要把窗口塞的过于拥挤。拥挤的窗口非常难于理解并且难于使用。试验结果表明(Mayhew,1992)整体窗口布局的密度不应大于40%,局部密度不应该大于62%。

18. 将窗口元素加以有效的分组。逻辑上有关联的条目应该放到一起以表明它们在逻辑上的关联性,相互毫无关系的条目则应该分开。你可以用空白区域将它们分开,也可以使用箱型控件分别加以包括以达到分组的目的。

19. 当前要处理的窗口应该显示在用户关心的地方。当你的用户通过双击一个对象来显示其编辑/细节窗口时他(或她)的注意力都被集中到了这一点。因此接下来显示的窗口也应该显示在这一区域而不是别的什么地方。

20. 弹出菜单不应该是用来调用软件功能的唯一手段。如果你隐藏了软件产品的主要功能的话用户是不会试图自己去发掘它们的。开发者最容易犯的错误就是滥用弹出菜单,也叫上下文相关菜单。一般来说当用户使用鼠标在屏幕上显示弹出菜单时该菜单内容应该只与用户当前点击区域的内容有关。


  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值