UI设计规范.docx
- 文档编号:8910360
- 上传时间:2023-02-02
- 格式:DOCX
- 页数:15
- 大小:27.28KB
UI设计规范.docx
《UI设计规范.docx》由会员分享,可在线阅读,更多相关《UI设计规范.docx(15页珍藏版)》请在冰豆网上搜索。
UI设计规范
UI设计规范
1.界面规范
1.1.总体原则
l以用户为中心。
设计由用户控制的界面,而不是界面控制用户。
l清楚一致的设计。
所有界面的风格保持一致,所有具有相同含义的术语保持一致,且易于理解
l拥有良好的直觉特征。
以用户所熟悉的现实世界事务的抽象来给用户暗示和隐喻,来帮助用户能迅速学会软件的使用。
l较快的响应速度。
l简单且美观。
1.2.原则详述
1.2.1.用户控制
用户界面设计的一个重要原则是用户应该总是感觉在控制软件而不是感觉被软件所控制。
l操作上假设是用户-而不是计算机或软件-开始动作。
用户扮演主动角色,而不是扮演被动角色。
在需要自动执行任务时,要以允许用户进行选择或控制它的方式来实现该自动任务。
l提供用户自定义设置。
因为用户的技能和喜好各不相同,因此他们必须能够个性化界面的某些方面。
Windows为用户提供了对许多这方面的访问。
您的软件应该反应不同的系统属性-例如颜色、字体或其他选项的用户设置。
l采取交互式和易于感应的窗口,尽量避免使用模态对话框,而使用"非模式"辅助窗口。
"模式"是一种状态,它排除一般的交互,或者限制用户只能进行特定的交互。
当最好使用一个模式或该模式只是可替换的设计时-例如,用于在一个绘图程序中选定一个特定感觉-请确保该模式是显然的、可见的,是一个明确的用户选定的结果,并且容易取消。
l在后台运行长进程时,保持前台式交互。
例如,当正在打印一个文档,即使该文档不能被改变,用户也应该可以最小化该窗口。
l谅解。
用户喜欢探索一个界面,并经常从尝试和错误中学习。
一个有效的界面允许交互式的发现,它只提供一组合适的选择,并在用户可能破坏系统或数据的情况时发出警告。
如果可行,还应提供可逆转或可还原的操作。
即使在设计得很好得界面中,用户也可能犯错误。
这些错误既可以是物理上得(偶然地指向了错误的命令或数据),也可以是逻辑上的(对选定哪一个命令或哪些数据做出了错误的决定)。
有效的设计避免很可能导致错误的情况。
它还包容潜在的用户错误,并且使用户易于还原。
1.2.2.清楚一致的设计
一致允许用户将已有的知识传递到新的任务中,更快地学习新事物,并将更多的注意力集中在任务上。
这是因为他们不必花时间来尝试记住交互中的不同。
通过提供一种稳定的感觉,一致使得界面熟悉而又可预测。
一致在界面的所有方面都是很重要的,包括命令的名称、信息的可视表示,操作行为,以及元素在屏幕和窗口内部的放置。
l相同含义的词使用统一的术语。
比如对于仓库中存放的物料,不可同时又称为物品、货物、备品、产品和材料等等,而统一约定一个称谓,且此称谓是用户熟悉的和易于理解的。
l使用一组一致的命令和界面来展示常见功能。
例如,避免一个"复制"命令在一种情况下立刻执行一个操作,但在另一种情况显示一个对话框要求用户键入目标然后才执行。
应该使用同样的命令来执行对用户来说相似的功能。
l操作环境内的一致。
保持Windows提供的交互操作和界面约定之间的高度一致,用户将能很快熟悉软件的使用。
l使用隐喻的一致性。
如果一个特定的行为更多的是一个不同的事物的特征,而不是它的隐喻的含义,那么用户可能在学习将行为和该事物相关联时遇到困难。
例如,对于放在回收站中的对象而言,焚烧炉和废纸箩代表不同的模型。
l建立项目保留字。
通过建立保留字来明确和统一术语和操作命令。
l提供可视反馈。
在后台运行长进程时(时间超过1~10秒,视具体情况而定),必须提供进度条等信息指示。
l除非特别必要时,不要提供声音反馈。
在有严重的问题发生时,可以使用声音来提示用户,但是通常应该允许用户取消声音。
l保持文字内容清楚。
信息的表达要言简意赅,易于理解而又不罗嗦;避免使用冗长的文字给用户反馈。
1.2.3.有良好的直觉特征
l用熟悉的隐喻为用户的任务提供直接而直观的界面。
通过允许用户利用他们的知识和经验,隐喻使得预测和学习基于软件的表示的行为更加容易。
l在使用隐喻时,不需要将基于计算机的实现局限在真实世界的对应物上范围之内。
例如,与其基于纸张的对应物不同,Windows桌面上的文件夹可以被用来组织各种对象,例如打印机、计算器、以及其他文件夹。
同样,Windows文件夹可以其真实世界对应物不可能的方式被排序。
在界面中使用隐喻的目的是提供一个认知的桥梁;隐喻并不以其自身为最终目的。
l隐喻支持用户认知而不是记忆。
用户记起与一个熟悉的事物相关联的意义要比他们记起一个特定命令的名称要容易得多。
l同常见软件保持一致性。
出色的用户界面在程序中将实现同用户以前用过的其它成功软件一致的动作。
1.2.4.较快的响应速度
l保持界面能很快对用户操作作出反应。
l提供快捷键。
特别对于有大量录入项的界面,能让用户不使用鼠标即可完成快速数据录入。
在用户界面中加入一些功能,这些功能可以让熟练用户在不同的区域快速的输入数据。
这些功能包括重复功能、快捷键、带有有意义的图标的按钮等等,所有这些可以使速度快的用户可以控制界面并加快数据的输入。
l除非必要,不要重绘屏幕。
1.2.5.简单且美观
l简单。
界面应该很简单(不是过分单纯化)、易于学习、并且易于使用。
它还必须提供对应用程序的所有功能的访问。
在界面中,扩大功能和保持简单是相互矛盾的。
一个有效的设计应该平衡这些目标。
支持简单性的一种方法是将信息的表示减少到进行充分交流所需的最少信息。
例如,避免命令名和消息的文字描述。
不相关或冗长的句子扰乱了您的设计,使得用户难以很容易地提取重要信息。
另一个设计简单而有用的界面的方法是使用自然的映射和语意。
界面元素的排列和表示影响它们的意义和关联。
简单还与熟悉相互关联。
熟悉的事物通常似乎更简单。
尽可能尝试建立利用用户已有的知识和经历的联系。
您可以使用渐进揭示来帮助用户管理复杂的事物。
"渐进揭示"涉及到仔细的信息组织,以便只在恰当的时候才显示信息。
通过隐藏向用户表达的信息,您减少了用户必须处理的信息数量。
例如,您可以使用菜单来显示操作或选择的列表,还可以使用对话框来显示一组选项。
渐进揭示并不意味着对显示信息使用非传统的技术,例如需要一个修饰键作为访问基本功能的唯一方法,或者强迫用户通过一个更长的分级交互序列。
这会使用户界面更加复杂和麻烦。
l美观。
可视设计是应用程序界面的重要部分。
可视属性提供了非常好的印象,并传达特定对象的交互行为的重要线索。
同时,出现在屏幕上的每一个可视元素也是很重要的,它们可能竞争用户的注意。
提供清楚地促进用户对表达的信息的理解的连贯环境。
图形或可视设计器的技巧对于这一方面是无价的。
1.3.细节约定
1.3.1.界面风格
l使用一致性一致的外观将使用户界面更易于理解和使用。
用户界面控件看起来应该是一致的。
l使用安排和流程在西方文化中(包括中国),人们习惯于从左到右,从上到下进行阅读,因此,应该将重要信息放在上面和左边。
左上角最容易吸引起人们的注意力。
l使用对齐通常,使用左对齐来使用户界面控件更易于浏览。
对于数值文本,应该使用小数点对齐或右对齐。
对于非数值文本,应该避免使用右对齐或居中对齐。
不必对什么都使用中间对齐,或者使它们保持对称形式。
在右边或底部保留空白区域更适合习惯。
l使用分组将相关的用户界面控件分成组,以体现它们之间的关系。
同时,还要显示相关信息。
将控件放在它所作用的对象旁。
使用空格、分组框、线条和标签,或者其它分隔符对用户界面控件进行分组。
l使用强调使用焦点、位置、分组、层次、启用/禁用、大小、颜色或者字体等,来将注意力集中在需要首先看到的用户界面控件上。
尽量以可视的方式指明用户接下来应该进行的操作。
l使用可视的提示尽量使用近似的大小和间距来指出用户界面控件是相似的,而使用不同的大小和间距来指出用户界面控件视是不同的。
l使用空格使用空格来创建一个"透气室",以使窗口布局更易于理解,并且查看起来更舒服。
空格的多少要适当,不要显得太分散。
但是,要避免过多地使用空格。
如果可能,尽量使窗口小一些。
l警惕空洞不要到处粘贴公司或产品的名称及徽标。
虽然在启动屏或"关于"框中出现公司或产品名称及徽标是完全可以接受的,但其他窗口中的可用空间应该出现其他内容。
如果没有其他内容,那么应尽量使窗口小一些。
l注意大小使用用户界面控件的分辨率具有独立性。
使用系统规格(使用GetGystemMetricsAPI函数)或文本规格(使用GetTextMetrics或GetTextExtentPoint32API函数)来确定用户界面控件的大小。
任何显示文本的对象(如对话框或定义的文本文档)都应该使用文本规格。
l考虑使用资源或预定义的布局网格资源模板或预定义的布局网格有助于您在不同的窗口之间实现一致性。
注意,下页所示图的第二个对话框,与第一个不同,它有一个紧凑、从左到右、从上到下的流程,并且,左对齐的标签很便于浏览;通过对齐编辑框并调整其大小,使它显得更有组织,更加平衡。
不合理的
平衡的对话框
1.3.2.统一术语
1.3.2.1.术语的重要性
我们用名称来区别、描述和查找事物,使用名称来分解并理解不熟悉的事物。
采用统一的术语有助于我们更好地理解和进行交流-简化并统一用户界面术语有助于用户理解和充分应用我们设计的界面。
使用不同的术语描述相同的事物是最让人迷惑的,而改变人人都已经熟悉的术语也是有害的。
这两种情况都使得程序难以讨论、描述,以及归档。
甚至使它难以编程。
1.3.2.2.命名
下面是一些需要命名的、与界面有关的典型对象:
●程序本身;
●程序使用的文档类型;
●用户利用程序执行的主要操作;
●所有的窗口、对话框和属性表;
●主程序窗口中的使用区域;
●认为非标准的屏幕对象、命令、属性、交互、或者技术。
简而言之,用户可以看到或需要与其进行交互的、显示在菜单、工具栏、窗口、对话框、状态栏、联机帮助或文档中的任何内容都需要有一个名称。
当然,您将会使用已存在的标准屏幕对象的名称。
例如,您不需要命名常用的对话框,因为它们已经拥有名称。
1.3.2.3.用用户的语言说话
使用软件面向的用户所熟悉的词语,除非您的软件是为了程序员设计的,否则应该避免使用计算机行话,而应用常用的单词代替。
例如,对绝大多数用户来说,常用单词"separator"(分隔符)就比技术术语"delimiter"(定界符)要好得多。
如果必须使用技术词汇,那么应采用那些用户可能知道的术语。
1.3.2.4.要避免的术语
也有些术语是千万不要用在您的用户界面中的。
尽管"execute"执行、"kill"(杀死)、"terminate"(结束)、"fatal"(致命的)和"abort"(中止)这样的术语在程序员文献中是完全可接受的,但完全应该避免出现在其他的文字中。
关于UI规范的几点意见
1、UI规范分为两个方面:
a、GUI规范,指导产品GUI设计和GUI编码。
b、交互设计规范,指导产品设计,着重统一团队意识,作为设计产品交互行为的最高标准。
这里大家讲的主要是GUI规范。
2、GUI规范的制定时间可前可后,但是有两个关键点:
a、必须在编码之前完成,否则就成花架子了。
b、GUI规范不是一蹴而就,它和设计相互迭代,彼此补充,相互完善。
3、GUI规范的内容70%是通用原则,涉及产品图形控件的基本属性和构建的基本参数和原则,30%是与项目或产品特点相适应的内容。
这部分内容就是在设计过程中迭代产生。
4、规范制定不是问题,最大的问题在于执行。
必须打破现有的开发流程和组织架构,有专人负责界面编码和界面测试,才能保证规范能贯彻下来。
让做逻辑和函数的编码工程师来执行,完全不可控,走样是自然的,因为他不懂,也不在乎,而且他有理由逃避责任。
5、规范不能直接拿出来执行,篇幅太多,操作有难度。
所以必须要让规范落地。
也就是说,要有具体的设计文档作为执行的依据。
设计文档按照产品设计思路分片分线组织,所有设计文档结合起来就是整合的产品原型。
所以说,GUI设计、交互设计、设计、规范、原型,执行是一个完整的互动的概念,牵一发而动全身。
原文:
UIdesign
1.InterfaceSpecification
1.1.Thegeneralprinciples
luser-centered.Controlledbytheuserinterfacedesign,ratherthancontroltheuserinterface.
lclearandconsistentdesign.Allconsistentinterfacestyle,allhavethesamemeaningintermsconsistentandeasytounderstand
lhaveagoodintuitivefeatures.Usersarefamiliarwiththerealitiesofworldaffairstogivetheuserhintsandabstractmetaphorstohelpusersquicklylearntousethesoftware.
lfastresponse.
lSimpleandbeautiful.
1.2.Theprincipleofdetailed
1.2.1.UserControl
Userinterfacedesignisanimportantprincipleisthattheusershouldalwaysfeelincontrolofthesoftware,ratherthanfeelingcontrolledbysoftware.
loperatingontheassumptionthattheuser-notthecomputerorsoftware-Startaction.Usersplayanactiverole,ratherthanplayingapassiverole.Automatetaskswhenneeded,toallowtheusertoselectorcontrolofitswaytoachievetheautomatedtasks.
ltoprovideuser-definedsettings.Becausetheuser'sskillsandpreferencesvary,sotheymustbeabletopersonalizecertainaspectsofinterface.Windowsprovideuserswithaccesstomanyinthisarea.Yoursoftwareshouldreflectthedifferentsystemattributes-suchascolor,font,orotheroptionsforusersettings.
ltakeaninteractiveandeasyinductionofthewindowasfaraspossibleavoidtheuseofmodaldialogboxes,theuseof"non-model"secondarywindow."Model"isastate,itexcludesgeneralinteractionorrestrictspecificusercanonlyinteract.Whenisbesttouseamodelorthemodelisdesignedtoreplace-forexample,adrawingprogramforaspecificselectedsense-makesurethepatternisclear,visible,isaclearresultoftheuserselectedandeasytocancel.
llongprocessrunninginthebackground,keepingtheformerdesktopinteraction.Forexample,whenadocumentisprinted,evenifthedocumentcannotbechanged,theusershouldbeabletominimizethewindow.
lunderstand.Usersliketoexploreaninterface,andoftenlearnfromtrialanderror.Aneffectiveinterfaceallowsinteractivediscovery,onlytoprovideasuitablealternative,andmaydamagethesystemortheuserwhendatawarned.Ifpossible,alsoprovidereversibleorrestoreoperation.Eveninwelldesignedinterfacetoo,theusermaymakemistakes.Theseerrorscanbebothphysicallyhave(accidentallypointstothewrongcommandordata),itcanbelogical(towhichtheselectedcommandordatawhichmadethewrongdecision).Effectivedesigntoavoidthesituationislikelytocauseerrors.Itisalsoinclusiveofpotentialusererrors,andenablesuserstoeasilyrestore.
1.2.2.Aclearandconsistentdesign
Agreedtoallowuserstotransferexistingknowledgetonewtasks,learnnewthingsfasterandmorefocusonthetask.Thisisbecausetheydonottakethetimetotrytorememberthedifferentinteractions.Byprovidingasenseofstability,consistencymakestheinterfacefamiliarandpredictable.Consistentinallaspectsoftheinterfaceisveryimportant,includingthenameofthecommand,thevisualinformationthattheoperationbehavior,andtheelementswithinthescreenandthewindowplacement.
lusethesamewordmeaningaunifiedterminology.Forexample,thematerialsstoredinwarehouse,notatthesametimeasitems,goods,spareparts,productsandmaterials,etc.,andunifiedconventionofatitle,andthisappellationisfamiliarandeasytounderstand.
lUseaconsistentsetofcommandsandinterfacetodisplaycommonfeatures.Forexample,toavoida"copy"commandinasituationtoperformanoperationimmediately,butinothercases,displayadialogboxaskstheusertypetargetandthenbeenforced.Shouldusethesamecommandtoperformasimilarfunctionfortheuser.
lwithinthesameoperatingenvironment.MaintaintheWindowsinterfacetoprovideinteractiveoperationandahighdegreeofconsistencybetweentheagreement,userswillbeabletoquicklyfamiliarwiththeuseofthesoftware.
luseofmetaphorconsistency.Ifaparticularbehaviorismoreafeatureofdifferentthings,butnotitsmetaphoricalmeaning,thentheusermaylearntoactandthethingsassociatedwithdifficulties.Forexample,anobjectplacedintheRecycleBin,theincineratorandthewastepaperbasketonbehalfofdifferentmodels.
lestablishmentoftheprojectreservedwords.Throughtheestablishmentofreservedwordstoaclearanduniformterminologyandoperationcommands.
ltoprovidevisualfeedback.Whenalongprocessrunninginthebackground(morethan1to10seconds,asthecasemaybe),mustprovideinformationsuchasinstructionsprogressbar.
lUnlessnecessary,donotprovideaudiblefeedback.Inaseriousproblemoccurs,youcanuseso
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- UI 设计规范