结合一位开发工程师的心得整理了这篇设计技巧,这是从实战中得来的客户端软件界面、交互、实施的方法,不具备系统的组织结构,所以,我称其为技巧。理论性不强也没有上升到规则的程度,但是很实用。如果设计和开发工程师们都能够把这些技巧看通用好,那么软件的产品化正规化水平会有大的改善。
一、遵循一致性原则
操作模式、引导步骤、窗口布局、控件使用、提示信息措辞、颜色、字体等遵循一致性原则。
1、使用户在使用过程中建立起标准统一的认知概念和心理模型,举一反三,避免不一致引起的认知摩擦;
2、降低客户支持和培训成本,行为支持的软件操作不需要单独解释;
3、强化产品形象,培养品牌和用户忠诚;
贯彻一致性原则需要建立UI执行规范
·参照行业标准规范产品控件的显示规格、基本属性、使用细则、屏幕窗口布局细节等;
·界面编程序人员、设计人员共同建立统一使用的控件库,控件样式在允许的范围内统一修改;
·根据实际需要和业务领域,设计开发特殊控件,以简化操作。由设计和编码人员商榷特殊控件的设计和可实现性,(否则会导致各自对对方工作不满意,引起混乱)
·建立并发布正式的《UI实施规范》
·界面设计和编码人员必须强制性阅读规范并应用到实际工作中;
·SQA人员监控开发人员是否遵循规范。
二、颜色
1、统一色调,根据工业标准、软件类型和用户工作环境选择恰当色调
如黄色表示警告用于安全类软件、绿色表示环保用于公益类软件,蓝色表示科技时尚用于管理办公类软件、紫色表示雅致浪漫用于医疗女性类软件等,长时间面对的软件产品使用低纯度颜色避免视觉疲劳等
2、如果产品没有专用色系或明确的色彩取向,采用windows标准界面风格,读取系统标准色表
3、对色盲、色弱用户,使用特殊指示符、着重符号、图标等
4、由于显示器、显卡的不同,每台机器的色彩表现都可能出现偏差,应该使用不同机器进行颜色测试
5、遵循对比原则、在浅色背景上使用深色文字,深色背景上使用浅色文字,蓝色文字以白色背景容易识别,而在红色背景则不易分辨,原因是红色和蓝色没有足够反差,而蓝色和白色反差很大。除非特殊场合,杜绝使用对比强烈,让人产生憎恶感的颜色。
6、少使用不同的颜色
三、icon和图像
1、界面图标也需要遵循统一的规则,包括颜色表的建立,包括色调、对比度、色阶,风格等;
2、图标、图像应该很清晰的表达出意思,能做到自我说明,使用户容易联想的到对应的功能和操作,绝对不允许仅仅作为美化作用的图片和icon。
3、鼠标光标样式统一,尽量使用系统标准
4、图标的设计步骤应该形成标准,如《如何创建XP图标》http://www.microsoft.com/china/msdn/library/dnwxp/html/winxpicons.asp
四、字体
1、使用统一字体,字体标准的选择依据操作系统类型决定。
2、中文采用标准字体,“宋体”,英文采用标准 Microsoft Sans Serif 不考虑特殊字体(隶书、草书等,特殊情况可以使用图片取代),保证每个用户使用起来显示都很正常。
3、字体大小根据系统标准字体来,例如 MSS字体8磅,宋体的小五号字(9磅)五号字(10.5磅)。
4、所有控件尽量使用大小统一的字体属性,除了特殊提示信息、加强显示等例外情况
5、ITop采用BCB,所有控件默认使用 parent font,不允许修改,这样有利于统一调整。
五、交互文本
交互文本指产品界面中所有的文字,包括控件title、界面属性元素,对话框提示、帮助文档等,拟订交互文本应遵循以下要求:
1、口语化,用用户的语言,不要用或少用专业术语;
2、语气要柔和、客气,使和软件交互的人觉得在和一位绅士对话;
2、没有错别字,没有语法和标点符号错误,文字较多要适当断句;
3、警告、信息、错误有标准的文句结构;
4、统一性原则,同样的界面元素在不同的界面中出现应该是一致的,包括文句和结构;
5、区别产品的用户类型使用合适的语气和用辞。
六、控件使用
尽量按照标准用法使用标准控件,防止杂乱无章,随意搭配控件
1、控件功能要专一,不要错误使用控件,例如使用Button做TTable的功能,拿主菜单条显示版权信息;
2、同一类型控件的操作行为要一致,例如一个控件在任何地方单击或双击后执行动作是一样的;
3、一类控件只执行单一类型的功能,不为类控件设计多种属性,很多人为了写程序方便,喜欢把一个控件在不同情况下做不同功能用,这会增加用户理解和使用的难度;
4、尽量不开发陌生的控件,这会增加用户的学习成本,牺牲产品的友好和易用性;
七、屏幕布局,窗口不拥挤,按数据结构和操作流程顺序组织控件
1、控件摆放疏密有致,不能拥挤,也不能太松散
拥挤的屏幕会加重视觉负担,不利于理解和使用。试验结果表明(Mayhew,1992年)屏幕总体覆盖度不应该超过40%,而分组钟覆盖度不应该超过62%。
采用统一的窗口大小和控件布局间距,在窗体大小不变的情况下,即使控件不多,宁可留空部分区域,也不要破坏控件间的行间距。
2、区域排列
控件间距基本保持一致;行与行之间间距相同,靠窗体Border距离应大于行间间距(间距加边缘留空);当屏幕有多个编辑区域,要明确区分并按照操作步骤来组织这些区域。
3、数据对齐要适当
标题文字纵向按冒号右对其,中文应使用全角冒号,纵向控件宽度尽量保持相同并左对齐。特殊字符右对齐,如金额等字符穿应根据小数点对齐,或者右对齐
4、有效组合
组合逻辑上关联紧密的控件,以表示其延续性,反之,关联性弱的元素应当分割开,在元素组之间,用间隔区别,或者使用方框划分各自区域。
5、窗口缩放对屏幕布局的影响
为了使界面不出现跑版或者难以控制的局面,可以1、固定窗口大小,不允许改变尺寸;2、改变尺寸的窗口,在Onsize的时候做控件位置、大小的相应改变。
八、TAB顺序
按照用户的阅读顺序和使用习惯,从从左到右,从上到下设置tab顺序。
九、用户交互
1、disable而不是not visible
当控件功能在某种情况下不允许使用时,这个控件也不能随便隐藏,应该使用disable属性进行表示,帮助用户建立稳定的产品形态;
2、窗口弹出位置要明显
点击一个控件,弹出窗口或者菜单,应该给人明显提示,最低要求是覆盖刚才点击的位置,让用户轻松跳转到新的界面。
3、执行动作要有反馈
产品对用户的任何一个操作都应该有明确的交互反馈;
十、联机帮助
1、系统默认、行业标准的控件操作不需要逐一描述,只需要对特殊控件加以描述;
2、特殊操作、特殊功能界面,在界面上加帮助icon控件直接连接到对应的HELP文件中;
3、特殊设置,应该在界面上用简洁明了的语句说明,或者用Tiptool;
帮助文档按功能模块划分,阐述软件功能的使用方法。帮助文件不是广告、商业软件不允许打广告。描述公司信息目的是为了方便用户在没有办法的情况下找到售后支持,网址连接、信箱地址、电话号码绝对不允许无效。
十一、发行时阐明规则
对统一的东西进行逐一阐述,并加以典型描述,放入HELP和用户手册中,同时加有词汇表