2006年10月22日
通用界面指南  

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

1:使用户使用起来能够建立起精确的心里模型,使用熟练了一个界面后,切换到另外一个界面能够很轻松的推测出各种功能,语句理解也不需要费神理解

2:降低培训、支持成本,支持人员不会行费力逐个指导。

3:给用户统一感觉,不觉得混乱,心情愉快,支持度增加

做法:

项目组有经验人士,确立UI规范:

·美工提供色调配色方案,提供整体配色表

·界面控制程序人员、用户体验人员提出合理统一使用的控件库。参考标准界面使用规范:

控件功能遵循行业标准,windows平台参见《Microsoft 用户体验》(MSDN中有,中文已经翻译发行,项目组必须有一本)

控件样式在允许的范围内可以统一修改其样式、色调

参考其他软件先进操作,提取对本项目有用的功能,以使用,绝对不能盲从,漫无目的。

根据需要,设计特殊操作控件,准则为:简化操作、达到一定功能目的

·界面实施人员与美工商榷控件可实现性,(如不实行此步骤,将会导致各自对对方工作不满意,也会产生不一致的混乱)。重复叠代上述工作。

·建立合理化文档《UI标准》描述上述规范,

·强行界面设计者理解之,并作为开发准则,

·SQA人员进行监控开发人员是否遵循,及时告诫开发人员。

二:(Color)颜色使用恰当,遵循对比原则:
1:统一色调,针对软件类型以及用户工作环境选择恰当色调:

如:安全软件,根据工业标准,可以选取黄色,绿色体现环保,蓝色表现时尚、紫色表现浪漫等等,淡色可以使人舒适,暗色做背景使人不觉得累等

2:如果没有自己的系列界面,采用标准界面则可以少考虑此方面,做到与操作系统统一,读取系统标准色表

3:色盲、色弱用户,即使使用了特殊颜色表示重点或者特别的东西,也应该使用特殊指示符,?quot;!,?着重号,以及图标等

4:颜色方案也需要测试,常常由于显示器、显卡的问题,色彩表现每台机器都不一样,应该经过严格测试,不同机器进行颜色测试

5:遵循对比原则:在浅色背景上使用深色文字,深色背景上使用浅色文字,蓝色文字以白色背景容易识别,而在红色背景则不易分辨,原因是红色和蓝色没有足够反差,而蓝色和白色反差很大。除非特殊场合,杜绝使用对比强烈,让人产生憎恶感的颜色。 6:整个界面色彩尽量少的使用类别不同的颜色

itop色表

具体标准参考美术学统计学术标准。 色表的建设,对于美工在图案设计、包装设计上起着标准参考作用,对于程序界面设计人员设计控件、窗体调色起到有章可循的作用。

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

1:也需要遵循统一的规则,包括上述颜色表的建立,图标的建立步骤也应该尽可能的形成标准,参考itop的outlookbar图标设计标准

2:有标准的图标风格设计,有统一的构图布局,有统一的色调、对比度、色阶,以及图片风格

3:底图应该融于底图,使用浅色, 低对比,尽量少的使用颜色。

4:图标、图像应该很清晰的表达出意思,遵循常用标准,或者用户机器容易联想的到物件,绝对不允许画出默认奇妙的图案。

5:鼠标光标样式统一,尽量使用系统标准,杜绝出现重复的情况,例如某些软件中一个手的形状就有4钟不同的样子。

如:《如何创建XP图标》http://www.microsoft.com/china/msdn/library/dnwxp/html/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:断句逗号句号顿号分号的用法, 提示信息比较多的话,应该分段,

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:全局快捷键菜单中加以描述 CTRL+XXX 并入帮助列表。

2:快捷键写入帮助,特殊说明,并在使用培训时强调使用

·加速键:

1:使用非破坏性缺省按钮,回车、ESC键的正确使用 一个窗体,有默认加速键,如回车表示激活当前窗口设置为default的按钮动作,esc表示关闭窗口。

在调用default按钮动作和关闭动作时候,不应该做有破坏性的操作,避免用户错误操作产生危害程度,例如不能把删除数据等功能的按钮作为缺省按钮。当用户要提交很多数据时,应该屏蔽esc,或者做退出提示,告诫用户是否保存提交。

2:可接收动作控件必须拥有加速键,统一加速键描述(&A)

为结合键盘使用,可操作控件都应该有加速键,加速键定义准则,为英文单词第一个字母,如果同一窗体重复则用第二个字母,以此类推,则加速方式为alt+这个加速键,用统一的方法标识在界面中,如XXX(A) 或者wps的 A.XXX 英文可直接在字母下标识下划线 Cancel,

对于无法像button一样显示快捷键的Edit等控件,则在Edit描述的Label中显示快捷键。

·弹出菜单

辅助菜单必须在可视化界面上拥有对应的按钮或者菜单选项。

由于辅助菜单由用户点击鼠标左右键或者别的动作才能调出来显示给用户。无法清晰的显示给用户,所以对应选项应该可以通过别的途径得到,例如界面上有相应控件或弹出右键菜单的按钮等。

十:(ACTION)用户交互
1:disable而不是not visible

要使一个功能有时允许有时不允许用户使用,则这个控件的不能随便隐藏,应该使用disable属性进行表示,以免用户发现控件失踪后措手无策

2:窗口弹出位置要明显

点击一个控件,弹出窗口或者菜单,应该给人明显提示,最低要求是覆盖刚才点击的位置,让用户轻松跳转到新的界面。

3:执行动作要提示

给用户一个视觉感受的同时,写程序的时候应该注意用户的交互感受,UI作为人机对话的工具,用户做了任何动作,应该给用户一个视觉或者听觉、触觉提示。而且这个提示应该行明显,但不应提示过长,可以有以下几种方法:

当用户点击按钮等动作进行一个工作时:

1:弹出交互对话框让用户点击确认。

2:改变UI中控件参数提示:(处理不用用户确认的提示,有一定延时,或者用户按键后自动清除。)

如:改变标题栏字符串,显示“信息:提交成功”,或者专门设置一个状态栏、TLable等用来进行提示。

 

3:听觉提示:

在确定有声卡,用户可以听到声音的时候,发出特殊声音提示。一般作为重要提示的辅助。声音不应过长,紧急错误提示应该短促,频率较高,成功提示应该舒缓,轻松。等等……

 

十一:(HELP)联机帮助:
什么时候要帮助,什么时候不要帮助

1:系统默认、行业标准的控件操作不需要逐一描述,只需要对特殊控件加以描述 2:特殊操作、特殊功能界面,在界面上加控件直接连接到对应的HELP文件中

3:特殊设置详细,应该在界面上用简洁明了的语句说明,或者是好用Tiptool,并由第二步帮助

帮助文档:

结构化,按功能模块划分

必须阐述功能通过什么方法可以在软件中实现

帮助文件是帮助用户更好的使用软件,措辞要恰当、简捷、通俗易懂,每一句话都应该有目的,帮用户解决问题

帮助文件不是广告、商业软件不允许打广告。描述公司信息目的是为了方便用户在没有办法的情况下找到售后支持,网址连接、信箱地址、电话号码绝对不允许无效。

十二:发行时阐明规则
对统一的东西进行逐一阐述,并加以典型描述,放入HELP和用户手册中,同时加有词汇表

 

 

 

 

附录:
美工何时参与进来:

美工作为界面美化的主要人员,不但拥有艺术设计、包装设计的才能,还应该穿插整个项目,给界面程序设计人员提出系统参考意见。

1:软件设计前期,美工参与需求了解,分析同类软件界面有缺点,提出主色调、典型界面风格、以及构思整个美术包装等。

2:界面原型设计过程中,与开发人员共同修改、商榷最终表现样式,以及确立UI标准。

3:程序开发过程中,提供标准风格的资源文件(icon,cur,bmp等),并总结出统一风格的资源的设计过程,形成规范文档* .

4:产品化方面,协助制作帮助文件、网站风格以及参与制作,制作附带宣传图片、动画、产品包装、海报等。

□ 作者:Bruce   2003-1-7 11:00:07

转自:http://www.lanxuan.com/ui/view_ui.asp?id=83

界面设计技巧  

    最好的程序界面就是用户无需去阅读*作手册就知道该如何使用的界面。 

原则 

1.一致性 
   如果你可以在一个列表的项目上双击后能够弹出对话框,那么应该在任何列表中双击都能弹出对话框。要有统一的字体写号、统一的色调、统一的提示用词、窗口在统一的位置、按钮也在窗口的相同的位置。 

2.设置标准并遵循它 
   可以参数一些工业标准,如IBM的界面设计规范或MS的设计规则,它提供了90%你所需要的规范。 

3.设置向导 
   如果用户使用了一个功能后,不知道如何做下一个,他们就会放弃。如果*作流程和手工工作流程一致,用户就会努力去完成它。最好的方式来引导用户就是在桌面上设置一个流程向导。 

4.提示信息必须恰当且规范 
   提示信息必须容易理解并且口径统一,比如“您输入了错误的数据”、“用户编码不能超过8位”。一致的措词,提示信息还应该出现在一致的位置,如弹出提示窗口、窗口的上方或窗口的下方。对用户的称呼应该统一,比如有时提示“用户输入了错误的数据”,有时提示“您输入了错误的数据”,有时又提示“纳税人输入了错误的数据”,这样会使用户无所适从。 

5.借鉴好的程序 
   多了解同类软件的界面,并加以分析与了解,直到能够区别好的用户界面与差的用户界面。但不能够机械的模仿别人的界面。 

6.功能的统一 
   有一些很常用的功能,如添加、修改、删除、查看,同一个软件中,这些功能应该有相同的*作方法。举个例子,几乎我们所有的程序中都有*作员管理这一块功能,但没有一个功能最完善统一的模块可供调用,结果虽然程序员间相互复制这个模块,但经过修改后,每个程序的*作管理都不相同。 

7.变灰的功能 
   有时有些功能不可用,最好不要删除这些按钮若项目,而是使他们变灰为不可用状态,这样有助于用户理解整个程序的功能。 

8.默认按钮 
   使用不具有破坏功能的默认按钮,在每个窗口中,为了方便用户,一般都定义了一个默认按钮,当用户敲回车键时可以快速执行某功能,但有时用户会不小心按错回车键,这时候执行了默认功能后,不能产生不可还原的*作,比如删除或保存。 

用户界面规范 

 

    最好的程序界面就是用户无需去阅读*作手册就知道该如何使用的界面。 

原则 

1.一致性 
   如果你可以在一个列表的项目上双击后能够弹出对话框,那么应该在任何列表中双击都能弹出对话框。要有统一的字体写号、统一的色调、统一的提示用词、窗口在统一的位置、按钮也在窗口的相同的位置。 

2.设置标准并遵循它 
    可以参数一些工业标准,如IBM的界面设计规范或MS的设计规则,它提供了90%你所需要的规范。 

3.设置向导 
   如果用户使用了一个功能后,不知道如何做下一个,他们就会放弃。如果*作流程和手工工作流程一致,用户就会努力去完成它。最好的方式来引导用户就是在桌面上设置一个流程向导。 

4.提示信息必须恰当且规范 
   提示信息必须容易理解并且口径统一,比如“您输入了错误的数据”、“用户编码不能超过8位”。一致的措词,提示信息还应该出现在一致的位置,如弹出提示窗口、窗口的上方或窗口的下方。对用户的称呼应该统一,比如有时提示“用户输入了错误的数据”,有时提示“您输入了错误的数据”,有时又提示“纳税人输入了错误的数据”,这样会使用户无所适从。 

5.借鉴好的程序 
   多了解同类软件的界面,并加以分析与了解,直到能够区别好的用户界面与差的用户界面。但不能够机械的模仿别人的界面。 

6.功能的统一 
   有一些很常用的功能,如添加、修改、删除、查看,同一个软件中,这些功能应该有相同的*作方法。举个例子,几乎我们所有的程序中都有*作员管理这一块功能,但没有一个功能最完善统一的模块可供调用,结果虽然程序员间相互复制这个模块,但经过修改后,每个程序的*作管理都不相同。 

7.变灰的功能 
   有时有些功能不可用,最好不要删除这些按钮若项目,而是使他们变灰为不可用状态,这样有助于用户理解整个程序的功能。 

8.默认按钮 
   使用不具有破坏功能的默认按钮,在每个窗口中,为了方便用户,一般都定义了一个默认按钮,当用户敲回车键时可以快速执行某功能,但有时用户会不小心按错回车键,这时候执行了默认功能后,不能产生不可还原的*作,比如删除或保存。

□ 作者:ChinaUI 整理    2003-2-11 10:19:38

1引言 1.1设计说明 本文档是对系统界面设计风格进行描述,和用户交互的最终界面在《详细设计说明书》中设计和解释。 1.2概念和定义 用户界面:又称人机界面,实现用户与计算机之间得通信,以控制计算机或进行用户和计算机之间得数据传送得系统部件。 GUI:即图形用户界面,一种可视化得用户界面,它使用图形界面代替正文界面。 1.3用户假定 将使用本系统的用户定义为:对应用程序或计算机的一般用法有一定了解,用户希望界面符合WINDOWS9X特别是OFFICE97风格,对易用性、简洁性有比较高的要求,对界面快速交互没有很强的要求(即不希望通过命令方式快速交互)。 2用户界面设计规范 2.1用户界面设计原则 本系统坚持图形用户界面(GUI)设计原则,界面直观、对用户透明:用户接触软件后对界面上对应的功能一目了然、不需要多少培训就可以方便使用本应用系统。 界面设计员应该明白软件中用户是所有处理的核心,不应该有应用程序来决定处理过程,所以用户界面应当由用户来控制应用如何工作、如何响应,而不是由开发者按自己的意愿把*作流程强加给用户。 界面设计必须经过确认才能完成。 2.2界面一致性 在界面设计中应该保持界面的一致性。一致性既包括使用标准的控件,也指使用相同的信息表现方法,如在字体、标签风格、颜色、术语、显示错误信息等方面确保一致。 1)显示信息一致性标准 (1)标签提示:字体为不加重、宋体、黑色、灰底或透明、无边框、右对齐、不带冒号、一般情况为五号(10号); (2)日期:正常字体、宋体、白底黑字、3-D lowered; (3)对齐方法: l 左对齐:一般文字、单个数字、日期等 l 右对齐:数字、时间、日期加时间。 (4)分辨率为800*600,增强色16色 (5)字体缺省为宋替、五号、黑色 (6)底色缺省采用灰色 这些信息的排列显示风格供参考, 在同一个应用中,这些信息的表现方式不一致,会使得用户分散注意力,影响这一软件的使用,因此开发者应当注意在同一软件中表现形式的一致性。 2)布局合理化原则 应注意在一个窗口内部所有控件的布局和信息组织的艺术性,使得用户界面美观。 在一个窗口中按tab键,移动聚焦的顺序不能杂乱无章,tab 的顺序是先从上至下,再从左至右。一屏中首先应输入的和重要信息的控件在tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。 布局力求简洁、有序、易于*作。 3)鼠标与键盘对应原则 应遵循的是可不用鼠标的原则:应用中的功能只用键盘也应当可以完成,即设计的应用中还应加入一些必要的按钮和菜单项。 但是,许多鼠标的*作,如双击、拖动对象等,并不能简单地用键盘来模拟即可实现。例如在一个列表框中用鼠标双击其中一项可以表示选中该项内容。为了用键盘也能实现这一功能,必须在窗口中定义一个表示选中的按钮,以作为实现双击功能的替代(或其它方式)。又如在一个窗口中有两个数据窗口,可以用鼠标从一个数据窗口中将一项拖出然后放到另一个中。如果只用键盘,就应当在菜单中设置拷贝或移动的菜单项。 4)快捷键 在菜单项中使用快捷键可以让使用键盘的用户*作得更快一些,在西文Windows及其应用软件中快捷键的使用大多是一致的。本系统中应用的快捷键在各个配置项上语义必须保持一致。 面向事务的: l Ctrl-D 删除 l Ctrl-F 寻找 l Ctrl-I 插入 l Ctrl-N 新记录 l Ctrl-S 保存 查询/列表: l Ctrl-O l Ctrl-R 其它: l Ctrl-C 拷贝 l Ctrl-H 帮助 l Ctrl-P 打印 l Ctrl-V 粘贴 l Ctrl-W 关闭 l Ctrl-X 剪切 MS Windows保留键: l Ctrl-Tab 下一窗口 l Ctrl-Esc 任务列表 l Ctrl-F4 关闭窗口 l Alt-F4 结束应用 l Alt-Tab 下一应用 l Enter 缺省按钮/确认*作 l Esc 取消按钮/取消*作 l Shift-F1 上下文相关帮助 其它快捷键 其它快捷键使用汉语拼音的开头字母,不常用的可以没有快捷键。 2.3向导(WIZARD)使用原则 对于应用中某些部分的处理流程是固定的,用户必须按照指定的顺序输入*作信息,为了使用户*作得到必要的引用应该使用向导,使用户使用功能时比较轻松明了,但是向导必须用在固定处理流程中,并且处理流程应该不少于3个处理步骤。 2.4系统响应时间 系统响应时间包括两个方面:时间长度和时间的易变性。用户响应时间应该适中,系统响应时间过长,用户就会感到不安和沮丧,而响应时间过短有时会造成用户加快*作节奏,从而导致错误。系统响应时间的易变性是指相对于平均响应时间的偏差。即使响应时间比较长,低的响应时间易变性也有助于用户建立稳定的节奏。因此在系统响应时间上坚持如下原则: 响应时间长度 界面设计 0-10 秒 鼠 标 显 示 成 为 沙 漏 10 到18 秒 由微帮助来显示处理进度 18 秒 以 上 显示处理窗口,或显示进度条 一个长时间的处理完成时 应给予完成警告信息 响应时间的易变性 界面设计 用户感觉不到 不考虑 用户稍微感觉到 由微帮助提供易变性说明 容易性大而且时间绝对差别大 显示易变性提示 2.5用户帮助设施 常用的帮助设施有两种:集成的和附加的。集成的帮助设施一开始就是设计在软件中的,它与语境有关,用户可以直接选择与所要执行*作相关的主题。通过集成帮助设施可以缩短用户获得帮助的时间,增加界面的友好性。附加的帮助设施在系统建好以后再加进去的。通常是一种查询能力比较弱的联机帮助。 本系统提供这两种帮助设施,设计和实现时遵循以下原则: 1) 进行系统交互时,提供部分帮助功能,即:提供主要*作的帮助 2) 用户可以通过帮助菜单、F1键和帮助按钮(如果有的话)访问帮助 3) 表示帮助时根据需要提供三种方式的选择:另一个窗体、微帮助和指出参考某个文档 4) 用户如何回到正常交互方式有两种选择:返回键和功能键 5) 帮助信息的构造:采用分层式帮助 6) 微帮助提供:由状态栏提供,或控件上的提示文本 2.6出错信息和警告 出错信息和警告是指出现问题时系统给出的坏消息,本系统对于出错信息和警告应该遵循以下原则: 1) 信息以用户可以理解的术语描述; 2) 信息应提供如何从错误中恢复的建设性意见; 3) 信息应指出错误可能导致那些不量后果,以便用户检查是否出现了这些情况或帮助用户进行改正; 4) 信息应伴随着视觉上的提示,如特殊的图像、颜色或信息闪烁。 5) 信息不能带有判断色彩,即任何情况下不能指责用户 2.7命令交互 由于本系统用户是WINDOWS用户,故本系统不提供命令交互。 2.8一般交互原则 本系统一般交互遵循以下原则: 1) 一致性:菜单选择、数据显示以及其它功能都应使用一致的格式。 2) 提供有意义的反馈 3) 执行有较大破坏性的动作前要求确认 4) 在数据录入上允许取消大多数*作 5) 减少在动作间必须记忆的信息数量 6) 在对话、移动和思考中提高效率 7) 允许用户非恶意错误,系统应保护自己不受致命作物的破坏 8) 按功能对动作分类,并按此排列屏幕布局,设计者应那里提高命令和动作组织的内聚性 9) 提供语境相关的帮助机制 2.9信息显示原则 本系统信息显示遵循以下原则: 1) 只显示与当前用户语境环境有关的信息; 2) 不要用数据将用户包围,使用便于用户迅速吸取信息的方式表现信息; 3) 使用一致的标记、标准缩写和可预测的颜色,显示信息的含义应该非常明确,用户不必再参考其它信息源; 4) 产生有意义的出错信息,见2.6; 5) 使用缩进和文本来辅助理解; 6) 使用窗口分隔控件分隔不同类型的信息; 7) 高效地使用显示器的显示空间。 2.10数据输入原则 本系统数据输入遵循以下原则: 1) 尽量减少用户输入动作的数量; 2) 维护信息显示和数据输入的一致性; 3) 交互应该时灵活的,对键盘和鼠标输入的灵活性提供支持; 4) 在当前动作的语境中使不合适的命令不起作用; 5) 让用户控制交互流,用户可以跳过不必要的动作、改变所需动作的顺序(如果允许的话)以及在不退出系统的情况下从错误状态中恢复; 6) 为所有输入的动作提供帮助,见2.5; 7) 消除冗余输入。可能的话提供缺省值、绝不要让用户提供程序中可以自动获取或计算出来的信息。 3用户界面设计更改和追加说明 3.1更改说明 更改本用户界面设计时应该征得所有开发者的同意,所有开发者应该按更正后的原则修改和设计用户界面。 3.2追加说明 追加本用户界面设计时应该发布给所有开发者,所有开发者应该按追加后的原则修改和设计用户界面。 □ 作者:Shawls 2003-2-11 10:14:46

UI界面设计——界面设计不存在美工  

      人类社会逐步向非物质社会迈进,互联网信息产业已经走入我们的生活。在这样一个非物质社会中,网站与软件这些非物质产品再也不象过去那样紧紧靠技术就能处于不败之地。工业设计开始关注非物质产品。但是在国内依然普遍存在这样一个称呼“美工”。“工”的意思就是没有思想紧紧靠体力工作的人。这是一个很愚昧的做法,愚昧在于称呼职员美工的企业没有意识到界面与交互设计能给他们带来的巨大经济效益,另一方面愚昧在于被称为美工的人不知道自己应该做什么,以为自己的工作就是每天给界面与网站勾边描图。

  本文主要讲述一套比较科学的设计流程来讲述UI界面设计属于工业设计的范畴,是一个科学的设计过程,理性的商业运作模式。而不是单纯的美术描边。

  UI的本意是user interface也就是用户与界面的关系。他包括交互设计,用户研究,与界面设计 三个部分。本文主要讲述用户研究与界面设计的过程。

      一个通用消费类软件界面的设计大体可分为五个步骤:
1需求阶段
2分析设计阶段
3调研验证阶段
4方案改进阶段
5用户验证反馈阶段

需求阶段

  软件产品依然属于工业产品的范畴。依然离不开3W的考虑(Who,where,why.)也就是使用者,使用环境,使用方式的需求分析。所以在设计一个软件产品之前我们应该明确什么人用(用户的年龄,性别,爱好,收入,教育程度等)。什么地方用(在办公室/家庭/厂房车间/公共场所)。如何用(鼠标键盘/遥控器/触摸屏)。上面的任何一个元素改变结果都会有相应的改变。

  除此之外在需求阶段同类竞争产品也是我们必须了解的。同类产品比我们提前问世,我们要比他作的更好才有存在的价值。那么单纯的从界面美学考虑说哪个好哪个不好是没有一个很客观的评价标准的。我们只能说哪个更合适,更合适于我们的最终用户的就是最好的。如何判定最合适于用户呢,后面我会介绍用户调研。

分析设计阶段

  通过分析上面的需求,我们进入设计阶段。也就是方案形成阶段。我们设计出几套不同风格的界面用于被选。首先我们应该制作一个体现用户定位的词语坐标。例如我们为25岁左右的白领男性制作家居娱乐软件。对于这类用户我们分析得到的词汇有:品质,精美,高档,高雅,男性,时尚,cool,,个性,亲和,放松等。分析这些词汇的时候我们会发现有些词是绝对必须体现的,例如:品质,精美,高档,时尚。但有些词是相互矛盾的,必须放弃一些,例如:亲和,放松与cool,个性与等。所以我们画出一个坐标,上面是我们必须用的品质,精美,高档,时尚。左边是贴近用户心理的词汇:亲和,放松,人性化。右边是体现用户外在形象的词汇:cool,个性,工业化。然后我们开始搜集相呼应的图片,放在坐标的不同点上。这样根据不同作标点的风格,我们设计出数套不同风格的界面。

调研验证阶段
www.dolcn.com
  几套风格必须保证在同等的设计制作水平上,不能明显看出差异,这样才能得到用户客观的反馈。

  测试阶段开始前我们应该对测试的具体细节进行清楚的分析描述。


  例如:
  数据收集方式:厅堂测试/模拟家居/办公室。
  测试时间:X年X月X日X日。
  测试区域:北京、广州、天津。
  测试对象。某消费软件界定市场用户。主要特征为:
  对电脑的硬件配置以及相关的性能指标比较了解,电脑应用水平较高;
  电脑使用经历一年以上;
  家庭购买电脑时品牌和机型的主要决策者
  年龄:X-X岁;
  年龄在X岁以上的被访者文化程度为大专及以上;
  个人月收入X以上或家庭月收入X元及以上;
  样品
  五套软件界面
  样本量:X个,实际完成X个。


  调研阶段需要从以下几个问题出发:
 用户对各套方案的第一印象
 用户对各套方案的综合印象
 用户对各套方案的单独评价
 选出最喜欢的
 选出其次喜欢的
 对各方案的色彩,文字,图形等分别打分。
 结论出来以后请所有用户说出最受欢迎方案的优缺点。
   所有这些都需要用图形表达出来,直观科学。

方案改进阶段

  经过用户调研,我们得到目标用户最喜欢的方案。而且了解到用户为什么喜欢,还有什么遗憾等,这样我们就可以进行下一步修改了。这时候我们可以把精力投入到一个方案上(这里指不能换皮肤的应用软件或游戏的界面)将方案做到细致精美。

用户验证阶段

  改正以后的方案,我们可以将他推向市场。但是设计并没有结束。我们还需要用户反馈,好的设计师应该在产品上市以后去站柜台。零距离接触最终用户,看看用户真正使用时的感想。为以后的升级版本积累经验资料。

  经过上面设计过程的描述,大家可以清楚的发现,界面UI设计是一个非常科学的推导公式,他有设计师对艺术的理解感悟,但绝对不是仅仅表现设计师个人的绘画。所以我们一再强调这个工作过程是设计过程。UI界面设计不存在美工。

□ 作者:怒放   2003-6-9 16:30:02

UI设计流程探讨  
确认目标用户
    在软件设计过程中,需求设计角色会确定软件的目标用户,获取最终用户和直接用户的需求。
    用户交互要考虑到目标用户的不同引起的交互设计重点的不同。
    例如:对于科学用户和对于电脑入门用户的设计重点就不同。
采集目标用户的习惯交互方式
    不同类型的目标用户有不同的交互习惯。这种习惯的交互方式往往来源于其原有的针对现实的交互流程、已有软件工具的交互流程。
    当然还要在此基础上通过调研分析找到用户希望达到的交互效果,并且以流程确认下来。
提示和引导用户
    软件是用户的工具。因此应该由用户来操作和控制软件。软件响应用户的动作和设定的规则。
    对于用户交互的结果和反馈,提示用户结果和反馈信息,引导用户进行用户需要的下一步操作。
一致性原则
设计目标一致
    软件中往往存在多个组成部分(组件、元素)。不同组成部分之间的交互设计目标需要一致。
    例如:如果以电脑操作初级用户作为目标用户,以简化界面逻辑为设计目标,那么该目标需要贯彻软件(软件包)整体,而不是局部。
元素外观一致
    交互元素的外观往往影响用户的交互效果。同一个(类)软件采用一致风格的外观,对于保持用户焦点,改进交互效果有很大帮助。遗憾的是如何确认元素外观一致没有特别统一的衡量方法。因此需要对目标用户进行调查取得反馈。
交互行为一致
    在交互模型中,不同类型的元素用户触发其对应的行为事件后,其交互行为需要一致。
    例如:所有需要用户确认操作的对话框都至少包含确认和放弃两个按钮。
    对于交互行为一致性原则比较极端的理念是相同类型的交互元素所引起的行为事件相同。但是我们可以看到这个理念虽然在大部分情况下正确,但是的确有相反的例子证明不按照这个理念设计,会更加简化用户操作流程。
可用性原则

可理解
    软件要为用户使用,用户必须可以理解软件各元素对应的功能。
    如果不能为用户理解,那么需要提供一种非破坏性的途径,使得用户可以通过对该元素的操作,理解其对应的功能。
    例如:删除操作元素。用户可以点击删除操作按钮,提示用户如何删除操作或者是否确认删除操作,用户可以更加详细的理解该元素对应的功能,同时可以取消该操作。
可达到
    用户是交互的中心,交互元素对应用户需要的功能。因此交互元素必须可以被用户控制。
    用户可以用诸如键盘、鼠标之类的交互设备通过移动和触发已有的交互元素达到其它在此之前不可见或者不可交互的交互元素。
    要注意的是交互的次数会影响可达到的效果。当一个功能被深深隐藏(一般来说超过4层)那么用户达到该元素的几率就大大降低了。
    可达到的效果也同界面设计有关。过于复杂的界面会影响可达到的效果。(参考简单导向原则)
可控制
    软件的交互流程,用户可以控制。
    功能的执行流程,用户可以控制。
    如果确实无法提供控制,则用能为目标用户理解的方式提示用户。
 
    上面的文章提到了UI设计的原则,并且对此做出了一些所谓的定义。大家要明白,本人对UI设计的研究时间不长,这些原则只是个人体会。
 
□ 作者:涩->味小刀    2003-4-3 16:00:50