[精品]UI设计指南
界面设计指南 一:遵循一致的准则,确立标准并遵循 无论是控件使用,提示信息措辞,还是颜色、窗口布局风格,遵循统一的标准,做到真正的 一致。 这样得到的好处: 1:使用户使用起来能够建立起精确的心里模型,使用熟练了一个界面后,切换到另外一个 界面能够很轻松的推测出各种功能,语句理解也不需要费神理解 2:降低培训、支持成本,支持人员不会行费力逐个指导。 3:给用户统一感觉,不觉得混乱,心情愉快,支持度增加 做法: 项目组有经验人士,确立UI规范: •美工提供色调配色方案,提供整体配色表 •界面控制程序人员、用户体验人员提出合理统一使用的控件库。参考标准界面使用规范: 控件功能遵循行业标准,windows平台参见《Microsoft用户体验》(MSDN中有,中文 已经翻译发行,项目组必须有一本) 控件样式在允许的范围内可以统一修改其样式、色调 参考其他软件先进操作,提取对本项目有用的功能,以使用,绝对不能盲从,漫无目的。 根据需要,设计特殊操作控件,准则为:简化操作、达到一定功能目的 •界面实施人员与美工商榷控件可实现性,(如不实行此步骤,将会导致各自对对方工作不满 意,也会产生不一致的混乱)。重复叠代上述工作。 •建立合理化文档《UI标准》描述上述规范, •强行界面设计者理解之,并作为开发准则, ■SQAA员进行监控开发人员是否遵循,及时告诫开发人员。 二:(Color)颜色使用恰当,遵循对比原则: 1:统一色调,针对软件类型以及用户工作环境选择恰当色调: 如:安全软件,根据工业标准,可以选取黄色,绿色体现环保,蓝色表现时尚、紫色表现浪 漫等等,淡色可以使人舒适,暗色做背景使人不觉得累等 2:如果没有自己的系列界面,采用标准界面则可以少考虑此方面,做到与操作系统统一, 读取系统标准色表 3:色盲、色弱用户,即使使用了特殊颜色表示重点或者特别的东西,也应该使用特殊指示 符,如“?“着重号,以及图标等 4:颜色方案也需要测试,常常由于显示器、显卡的问题,色彩表现每台机器都不一样,应 该经过严格测试,不同机器进行颜色测试 5:遵循对比原则:在浅色背景上使用深色文字,深色背景上使用浅色文字,蓝色文字以白 色背景容易识别,而在红色背景则不易分辨,原因是红色和蓝色没有足够反差,而蓝色和白 色反差很大。除非特殊场合,杜绝使用对比强烈,让人产生憎恶感的颜色。 6:整个界面色彩尽量少的使用类别不同的颜色 itop色表 具体标准参考美术学统计学术标准。 色表的建设,对于美工在图案设计、包装设计上起着标准参考作用,对于程序界面设计人员 设计控件、窗体调色起到有章可循的作用。 三:(Resource)资源 一个多姿多彩的人机交互界面,少不了精美的鼠标光标、图标以及指示图片、底图等。 1:也需要遵循统一的规则,包括上述颜色表的建立,图标的建立步骤也应该尽可能的形成 标准,参考itop的outlookbar图标设计标准 2:有标准的图标风格设计,有统一的构图布局,有统一的色调、对比度、色阶,以及图片 风格 3:底图应该融于底图,使用浅色,低对比,尽量少的使用颜色。 4:图标、图像应该很清晰的表达出意思,遵循常用标准,或者用户机器容易联想的到物件, 绝对不允许画出默认奇妙的图案。 5:鼠标光标样式统一,尽量使用系统标准,杜绝出现重复的情况,例如某些软件中一个手 的形状就有4钟不同的样子。 如:《如何创建 XP 图标》http:〃 附件:Itop outlook howto.doc描述itop项目中,outlookxp风格图标的制作方法 四:(Font)字体 使用统一字体,字体标准的选择依据操作系统类型决定。 中文采用标准字体,“宋体“,英文采用标准Microsoft Sans Serif不考虑特殊字体(隶书、 草书等,特殊情况可以使用图片取代),保证每个用户使用起来显示都很正常。 字体大小根据系统标准字体来,例如MSS字体8磅,宋体的小五号字(9磅)五号字(10.5 磅)。 所有控件尽量使用大小统一的字体属性,除了特殊提示信息、加强显示等例外情况 ITop采用BCB,所有控件默认使用parent font,不允许修改,这样有利于统一调整。 •系统大小字体属性改变的处理。 Windows系统有个桌面设置,设置大字体属性,很多界面设计者常常为这个恼火,如果设 计时遵循微软的标准,全部使用相对大小作为控件的大小设置,当切换大小字体的时候,相 对不会有什么特殊问题。 但是由于常常方便使用点阵作为窗口设计单位,导致改变大字体后,出现版面混乱的问题o 这个情况下,应该做相应处理: 1:写程序自动调节大小,点阵值乘以一个相应比例 2:全部采用点阵作为单位,不理会系统字体的调节,这样可以减少调节大字体带来的麻烦。 BCB/DELPHI中多采用这种方法,但是必然结果是和系统不统一。 五:(Text)文字表达 提示信息、帮助文档文字表达遵循以下准则: 1: 口语化、客气、多用您、请,不要用或少用专业术语,杜绝错别字 2:断句逗号句号顿号分号的用法,\r\n提示信息比较多的话,应该分段, 3:警告、信息、错误使用对应的表示方法 4:使用统一的语言描述,例如一个关闭功能按钮,可以描述为退出、返回、关闭,则应该 统一规定。 5:根据用户不同采用相应的词语语气语调,如专用软件,可以出现很多专业属于,用户为 儿童:这可以语气亲切和蔼,老年用户则应该成熟稳重。制定标准遵循之。 六:(STYLE)控件风格,不要使用错误控件,控件功能要专一 有设计好的同一风格的控件,如果没有能力设计出一套控件,则使用标准控件,绝对不能不 伦不类,杂乱无章 •不要错误使用控件,例如: 使用Button样式做TTable的功能,拿主菜单条显示版权信息, •统一类型的控件操作方式相同,例如一个控件双击可以执行某些动作,而同样控件,双击 却没有任何反映 •一个控件只做单一功能,不复用 很多人为了写程序方便,喜欢把一个控件在不同情况下做不同功能用,这些对用户初次理解 增加难度,只有用户熟悉后才能理解。 例如 改变红色选项,左边的参数代表不同的设置,可能由于为了节省控件或者编程量,但是只有 熟练用户才回使用,这种情况下解决方法: 1:分组,使用双份控件. 2:使用TABLE页,给用户很明显的视觉变化 七:(ALIGN)控件布局,窗口不拥挤,按功能组合控件, 1:屏幕不能拥挤 拥挤的屏幕让人难以理解,因而难以使用。试验结果(Mayhew,1992年)屏幕总体覆盖度 不应该超过40 %,而分组钟覆盖度不应该超过62 % o 让人看上去,不能太拥挤,也不能太松散。 整个项目,采用统一的控件间距,通过调整窗体大小达到一致,即使在窗体大小不变的情况 下,宁可留空部分区域,也不要破坏控件间的行间距。 2:区域排列 一行控件,纵向中对齐,控件间距基本保持一致 行与行之间间距相同,靠窗体Border距离应大于行间间距(间距加边缘留空)。 当屏幕有多个编辑区