ui设计规范

UI设计规范---论文

UI设计规范

1.界面规范

1.1.总体原则

l以用户为中心。设计由用户控制的界面，而不是界面控制用户。

l清楚一致的设计。所有界面的风格保持一致，所有具有相同含义的术语保持一致，且易于理解

l拥有良好的直觉特征。以用户所熟悉的现实世界事务的抽象来给用户暗示和隐喻，来帮助用户能迅速学

会软件的使用。

l较快的响应速度。

l简单且美观。

1.2.原则详述

1.2.1.用户控制

用户界面设计的一个重要原则是用户应该总是感觉在控制软件而不是感觉被软件所控制。

l操作上假设是用户-而不是计算机或软件-开始动作。用户扮演主动角色，而不是扮演被动角色。在需要自

动执行任务时，要以允许用户进行选择或控制它的方式来实现该自动任务。

l提供用户自定义设置。因为用户的技能和喜好各不相同，因此他们必须能够个性化界面的某些方面。

Windows为用户提供了对许多这方面的访问。您的软件应该反应不同的系统属性-例如颜色、字体或其他

选项的用户设置。

l采取交互式和易于感应的窗口，尽量避免使用模态对话框，而使用"非模式"辅助窗口。"模式"是一种状

态，它排除一般的交互，或者限制用户只能进行特定的交互。当最好使用一个模式或该模式只是可替换的

设计时-例如，用于在一个绘图程序中选定一个特定感觉-请确保该模式是显然的、可见的，是一个明确的

用户选定的结果，并且容易取消。

l在后台运行长进程时，保持前台式交互。例如，当正在打印一个文档，即使该文档不能被改变，用户也

应该可以最小化该窗口。

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.用用户的语言说话

使用软件面向的用户所熟悉的词语，除非您的软件是为了程序员设计的，否则应该避免使用计算机行话，

而应用常用的单词代替。例如，对绝大多数用户来说，常用单词"parator"（分隔符）就比技术术语

"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

aceSpecification

eralprinciples

lledbytheurinterfacedesign,ratherthancontroltheurinterface.

sistentinterfacestyle,allhavethesamemeaninginterms

consistentandeasytounderstand

refamiliar性感的图片 withtherealitiesofworldaffairstogivethe

urhintsandabstractmetaphorstohelpursquicklylearntouthesoftware.

lfastrespon.

lSimpleandbeautiful.

ncipleofdetailed

ntrol

Urinterfacedesignisanimportantprincipleisthattheurshouldalwaysfeelincontrolofthe

software,ratherthanfeelingcontrolledbysoftware.

loperating

playanactiverole,tetaskswhenneeded,toallowthe

urtolectorcontrolofitswaytoachievetheautomatedtasks.

etheur'sskillsandpreferencesvary,sotheymust

sprovideurswithaccesstomany

ftwareshouldreflectthedifferentsystemattributes-suchascolor,font,or

otheroptionsforurttings.

ltakeaninteractiveandeasyinductionofthewindowasfaraspossibleavoidtheuofmodal

dialogboxes,theuof"non-model"condarywindow."Model"isastate,itbesttouamodelorthemodelis

designedtoreplace-forexample,adrawingprogramforaspecificlectedn-makesure

thepatternisc螳螂剑 lear,visible,isaclearresultoftheurlectedandeasytocancel.

llongprocessrunninginthebackground,mple,

whenadocumentisprinted,evenifthedocumentcannotbechanged,theurshouldbeableto

minimizethewindow.

iketoexploreaninterface,ctive

interfaceallowsinteractivediscovery,onlytoprovideasuitablealternative,andmaydamagethe

ible,alsoprovidereversibleorrestoreoperation.

Eveninwelldesignedinterfacetoo,rrorscanbeboth

physicallyhave(accidentallypointstothewrongcommandordata),itcanbelogical(towhich

thelectedcommandordatawhichmadethewrongdecision).Effectivedesigntoavoidthe

soinclusiveofpotentialurerrors,andenablesursto

easilyrestore.

andconsistentdesign

Agreedtoallowurstotransferexistingknowledgetonewtasks,learnnewthingsfasterand

becautheydonottakethetimetotrytorememberthedifferent

idinganofstability,consistencymakestheinterfacefamiliarand

tentinallaspectsoftheinterfaceisveryimportant,includingthenameofthe

command,thevisualinformationthattheoperationbehavior,andtheelementswithinthescreen

andthewindowplacement.

mple,thematerialsstoredin

warehou,notatthesametimeasitems,goods,spareparts,productsandmaterials,etc.,and

unifiedconventionofatitle,andthisappellationisfamiliarandeasytounderstand.

mple,to

avoida"copy"commandinasituationtoperformanoperationimmediately,butinothercas,

uthesame

commandtoperformasimilarfunctionfortheur.

intheWindowsinterfacetoprovideinteractive

operationandahighdegreeofconsistencybetweentheagreement,urswillbeabletoquickly

familiarwiththeuofthesoftware.

ticularbehaviorismoreafeatureofdifferentthings,but

notitsmetaphoricalmeaning,thentheurmaylearntoactandthethingsassociatedwith

mple,anobjectplacedintheRecycleBin,theincineratorandthewastepaper

basketonbehalfofdifferentmodels.

htheestablishmentofrervedwordstoa

clearanduniformterminologyandoperationcommands.

ongprocessrunninginthebackground(morethan1to10

conds,asthecamaybe),mustprovideinformationsuchasinstructionsprogressbar.

lUnlessnecessary,iousproblemoccurs,youcanu

soundtoprompttheur,butshouldgenerallyallowurstocancelsound.

ressionofinformationtobeconciandeasytounderstandwithout

wordy;toavoidlengthytexttotheurfeedback.

oodintuitivefeatures

lwithafamiliarmetaphorfortheur'wing

urstoutheirknowledgeandexperience,metaphorandlearningbadonthepredicted

behaviorofthesoftwarethatmucheasier.

ltheuofmetaphor,theneedtolimittherealizationofcomputer-badcounterpartinthereal

mple,insteadofdifferentpaper-badcounterpart,Windowsfolder

onthedesktopcanbeudtoorganizevariousobjects,suchasprinters,calculators,andother

rly,Windowsfolderscanbetheirrealworldcounterpartsinwaysnotpossibleto

ofmetaphorintheinterfaceisintendedtoprovideacognitivebridge;

metaphorisnottheultimategoalofitsown.

rtorememberwithafamilia德育案例 r

nofthingsthantheyassociatedwithaspecificcommandtorememberthenamemuch

easier.

enturinterfaceandtheprogramwillachieve

thesameurpreviouslyudthesoftwareinlinewithothersuccessfulaction.

spon

ltokeeptheinterfacetoquicklyrespondtouractions.

allyforalargenumberofinputitemsoftheinterfacethat羊肉炖什么 letsurs

rinterfacetoincludesomefeatures

teaturesinclude

therepeatfunction,shortcutkeys,buttonswithmeaningfulicons,etc.,allofwhichallowtheur

tocontrolthespeedandacceleratethedataentryinterface.

lunlessabsolutelynecessary,donotredrawthescreen.

andbeautiful

erfaceshouldbeverysimple(notsimplistic),

nterface,expandedfeaturesand

to

supportthesimplicityoftheinformationthatisreducedtotheminimumrequiredforafull

mple,toavoidthecommandnameandmessagetextdescription.

Longntencesarenotrelevantordisturbyourdesign,makingitdifficultforurstoeasily

rsimpleandufu幼儿园食品安全 linterfacedesignapproachistou

aceelementsthataffecttheirarrangementandthe

arthingsoftenemto

spossibletrytobuildusingtheurhastheknowledgeandexperienceofthe

utheprogressiverevealtohelpursmanagecomplexthings."Progressive

reveal"theinformationrelatingtothecarefullyorganizedsothatonlyjustattherighttimeto

dbyhiddentotheurinformation,youreducetheamountof

mple,youcanuthemenutodisplayalistofactions

orchoices,ssivedoesnot

meanthatthedisplayofinformationrevealtheuofnon-traditionaltechniques,suchasthe

needofamodifierkeyastheonlywaytoaccessbasicfunctions,orforceurstointeract

kesurinterfacemorecomplicatedand

cumbersome.

typrovidesa

verygoodvisualimpression,

thesametime,appearsonthescreeneveryvisualelementisveryimportant,theymaycompete

ur'eclearinformationforursontheexpressionofacoherent

cdesignerorvisualskillsforthisaspectispriceless.

softheagreement

1.3.1.

luthesameconsistentlookandfeelwill

interfacecontrolsshouldlookthesame.

lu

arrangementsandprocessinWesternculture(includingChine),theyareudfrom

lefttoright,toptobottomreading,therefore,importantinformationshouldbeplacedonthetop

eupperleftcorneroftheeasiesttoattractattention.

luthealignment

usuallyutheleft-alignedtomakemoreeasytonavigateurinterface

numericaltext,

non-numerictext,the

middleofwhatarealigned,htorbottomoftheblankarea

ismoresuitableforcustom.

luoftherelevantgroup

urinterfacecontrolsaredividedintogroupstoreflectthe

ametime,rol

interfacestyle

,groupboxes,linesandtags,orotherparatorstogroupof

urinterfacecontrols.

ludtoustress

focus,location,group,level,enable/disable,size,colororfont,etc.,to

wayasfaraspossibleshouldbe

specifiedbytheurfollowingtheoperation.

lutomakeuofvisualprompts

different.

luthespaces

uspacestocreatea"breathableroom"tomakeeasiertounderstandthe

windowlayout,yspacesshouldbeappropriateandnottoo

r,ible,trytomakethewindow

smaller.

ldonotguardagainstempty

gh

thestartscreenorthe"About"boxappearscompanyorproductnamesandlogosareperfectly

acceptable,ing

el,itshouldtrytomakethewindowsmaller.

lNotethatthesizeofurinterfacecontrols

hesystem

specification(usingGetGystemMetricsAPIfunction)ortextsize(usingGetTextMetricsor

GetTextExtentPoint32APIfunction)

displayoftextobjects(suchasthedefinitionofthedialogboxortextdocument)shoulduthe

textsize.

lconsidertheuofresourcesorapredefinedgridlayout

Note,asshowninF带鸟的四字成语 igurenextpagetheconddialogbox,withthefirstdifference,ithasa

compact,fromlefttoright,toptobottomintheprocess,and,left-alignedlabelsareeasyto

navigate;byAlignmenteditboxandadjustitssize,itemsmoreorganized,morebalanced.

Irrational

Balanceofthedialogbox

1.3.2.

ortanceofterms

Weunamestodistinguish,describeandfindthings,uthenametodecompoand

dterminologywillhelpusbetterunderstandandcommunicate-tosimplifyandharmonizeterminologyhelpsurstounderstandurinterface

uniformterminology

resourcespredefinedlayout

templateorgridwillhelpyoutoachieveconsistencybetweendifferentwindows.

approximatethesizeandspacingtothaturinterface

controlsaresimilar,butdifferentinsizeandspacingtothaturinterfacecontrols,asis

andfullapplicationofourinterfacedesign.

udifferentterminologytodescribethesamethingisconfusing,buttochangeand

whichmakestheprogramdifficulttodiscuss,

describe,keitdifficulttoprogram.

Herearesomeneedtonamed,andtheinterfaceofthetypicalobject:

●Processitlf;

●Programusthedocumenttype;

●Urstoprocesstheimplementationofthemainoperation;

●Allofthewindows,dialogboxesandpropertysheets;

●Theuofthemainprogramwindowarea;

●Thatthenon-standardscreenobjects,order,property,interaction,ortechnology.

Inshort,theurcaneorneedtointeractwith,anddisplaythemenu,toolbar,windows,

dialogboxes,statusbar,theonlinehelpordocumentationinanyofthecontentneedstohavea

,mple,you

donotneedtonamethecommondialogbox,becautheyalreadyhavenames.

kwiththeur'slanguage

Uthesoftwareforursfamiliarwords,unlessyoursoftwareisdesignedforprogrammers,or

computerjargonshouldbeavoided,mple,

thevastmajorityofurs,oftenudtheword"parator"(parator)thanthetechnicalterm

"delimiter"(delimiter)ustutechnicalterms,itshouldadoptthe

terminologythattheurmayknow.

dtheterm

ghthe"execute"the

implementation,"kill"(kill),"terminate"(end),"fatal"(fatal),and"abort"(stop)thisterminthe

literatureintheprogrammeriscompletelyacceptable,butshouldbeavoidedcompletelyinthe

othertext.

SomecommentsonUIspecification

1,UIspecificationisdividedintotwoareas:

a,GUIstandardstoguideproductdesignandGUIGUIcode.

b,interactiondesign,toguideproductdesign,focusingonunifiedteamawareness,interaction

designproductsasthehigheststandardsofconduct.

HerewearemainlytalkingaboutGUIspecification.

2,GUIspecificationbeforethedevelopmenttimecanbelater,buttherearetwokeypoints:

a,mustbecompletedbeforethecode,otherwiwebecomesuperfluousandthe.

b,GUIspecificationis公休 notdoneovernight,betweenitandthedesigniterations,eachadded

anotherperfect.

3,GUIspecification,70%ofgeneralprinciples,involvingthebasicpropertiesofproductgraphics

andbuildingcontrolbasicparametersandprinciples,30%ofprojectsorproductswithfeatures

rtofthedesignprocessisiterativeproduce.

4,standardformulationisnotaproblem,eakthe

existingdevelopmentprocessandorganizationalstructure,withdedicatedstafftointerfacecode

ndfunctionstodothecoding

engineerstoperform,completelycontrollable,aliasingisnatural,becauhedidnotunderstand,

donotcare,buthehasreasontoavoidresponsibility.

5,normscannotbedirectlyouttodo,alotofspace,ore,wemustlet

rwords,theremustbespecificdesigndocumentasthebasisfor

documentsinaccordancewithproductdesignideasslicepointline

organization,combiningalldesigndocumentationisintegratedprototype.

Therefore,GUIdesign,interactiondesign,design,specification,prototyping,implementationisacompleteinteractiveconcept,onewhichwillaffectthewhole.