《Principles of User Interface Design》之20大UI设计原则

1.           Clarity is job #1

Clarity is thefirst and most important job of any interface. To be effective using aninterface you've designed, people must be able to recognize what it is, careabout why they would use it, understand what the interface is helping theminteract with, predict what will happen when they use it, and then successfullyinteract with it. While there is room for mystery and delayed gratification ininterfaces, there is no room for confusion. Clarity inspires confidence andleads to further use. One hundred clear screens is preferable to a singlecluttered one.

清晰度是首要工作
　　清晰度是界面设计中，第一步也是最重要的工作。要想你设计的界面有效并被人喜欢，首先必须让用户能够识别出它?让用户知道为什么会使用它?比如当用户使用时，能够预料到发生什么，并成功的与它交互。有的界面设计得不是太清晰，虽然能够满足用户一时的需求，但并非长久之计，而清晰的界面能够吸引用户不断地重复使用。

2.         Interfaces exist to enable interaction

Interfaces existto enable interaction between humans and our world. They can help clarify,illuminate, enable, show relationships, bring us together, pull us apart,manage our expectations, and give us access to services. The act of designinginterfaces is not Art. Interfaces are not monuments unto themselves. Interfacesdo a job and their effectiveness can be measured. They are not just utilitarian,however. The best interfaces can inspire, evoke, mystify, and intensify ourrelationship with the world.

界面是为促进交互而存在的
　　界面的存在，促进了用户和我们的世界之间的互动。优秀的界面不但能够让我们做事有效率，还能够激发、唤起和加强我们与这个世界的联系。

3.         Conserve attention at all costs

We live in aworld of interruption. It's hard to read in peace anymore without somethingtrying to distract us and direct our attention elsewhere. Attention isprecious. Don't litter the side of your applications with distractiblematerial…remember why the screen exists in the first place. If someone isreading let them finish reading before showing that advertisement (if you must).Honor attention and not only will your readers be happier, your results will bebetter. When use is the primary goal, attention becomes the prerequisite.Conserve it at all costs.

保护和尊重用户的注意力
　　我们在阅读的时候，总是会有许多事物分散我们的注意力，使得我们很难集中注意力安静地阅读。因此，在进行界面设计的时候，能够吸引用户的注意力是很关键的，所以千万不要将你应用的周围设计得乱七八糟分散人的注意力，谨记屏幕整洁能够吸引注意力的重要性。如果你非要显示广告，那么请在用户阅读完毕之后再显示。尊重用户的注意力，不仅让用户更快乐，而且你的广告效果也会更佳。因此要想设计好的界面，保护和尊重用户的注意力是先决条件。

4.        Keep users in control

Humans are mostcomfortable when they feel in control of themselves and their environment.Thoughtless software takes away that comfort by forcing people into unplannedinteractions, confusing pathways, and surprising outcomes. Keep users incontrol by regularly surfacing system status, by describing causation (if youdo this that will happen) and by giving insight into what to expect at everyturn. Don't worry about stating the obvious…the obvious almost never is.

让界面处在用户的掌控之中

　　人类往往对能够掌控自己和周围的环境感到很舒心。不考虑用户感受的软件往往会让这种舒适感消失，迫使用户不得不进入计划外的交互，这会让用户很不舒服。保证界面处在用户的掌控之中，让用户自己决定系统状态，稍加引导，我想你会达到你希望的目标。

5.         Direct manipulation is best

The bestinterface is none at all, when we are able to directly manipulate the physicalobjects in our world. Since this is not always possible, and objects areincreasingly informational, we create interfaces to help us interact with them.It is easy to add more layers than necessary to an interface, creatingoverly-wrought buttons, chrome, graphics, options, preferences, windows,attachments, and other cruft so that we end up manipulating UI elements insteadof what's important. Instead, strive for that original goal of directmanipulation…design an interface with as little a footprint as possible,recognizing as much as possible natural human gestures. Ideally, the interfaceis so slight that the user has a feeling of direct manipulation with the objectof their focus.

直接操作的感觉是最好的
　　当我们能够直接操作物体时，用户的感觉是最棒的，但这并不太容易实现，因为在界面设计时，我们增加的图标往往并不是必须的，比如我们过多的使用按钮、图形、选项、附件等等其他繁琐的东西以便我们最终操纵UI元素而不是重要的事情。而最初的目标呢?就是希望简化而能够直接操纵……因此在进行界面设计时，我们要尽可能多的了解一些人类自然手势。理想情况下，界面设计要简洁，让用户有一个直接操作的感觉。

6.        One primary action per screen

Every screen wedesign should support a single action of real value to the person using it.This makes it easier to learn, easier to use, and easier to add to or build onwhen necessary. Screens that support two or more primary actions becomeconfusing quickly. Like a written article should have a single, strong thesis,every screen we design should support a single, strong action that is itsraison d'etre.

.每个屏幕需要一个主题
　　我们设计的每一个画面都应该有单一的主题，这样不仅能够让用户使用到它真正的价值，也使得上手容易，使用起来也更方便，在必要的时候更容易进行修改。如果一个屏幕支持两个或两个以上的主题，立马会让整个界面看起来混乱不堪。正如文章应该有一个单一的主题以及强有力的论点，我们的界面设计也应该如此，这也是界面存在的理由。

7.          Keep secondary actions secondary

Screens with asingle primary action can have multiple secondary actions but they need to bekept secondary! The reason why your article exists isn't so that people canshare it on Twitter…it exists for people to read and understand it. Keepsecondary actions secondary by making them lighter weight visually or shown afterthe primary action has been achieved.

勿让次要动作喧宾夺主
　每个屏幕包含一个主要动作的同时，可以有多个次要动作，但尽量不要让它们喧宾夺主!文章的存在是为了让人们去阅读它，并不是让人们在Twitter上面分享它。所以在设计界面的时候，尽量减弱次要动作的视觉冲击力，或者在主要动作完成之后再显示出来。

8.        Provide a natural next step

Very fewinteractions are meant to be the last, so thoughtfully design a next step foreach interaction a person has with your interface. Anticipate what the nextinteraction should be and design to support it. Just as we like in humanconversation, provide an opening for further interaction. Don't leave a personhanging because they've done what you want them to do…give them a natural nextstep that helps them further achieve their goals.

自然过渡

　　界面的交互都是环环相扣的，所以设计时，要深思熟虑地考虑到交互的下一步。考虑到下一步的交互是怎样的，并且通过设计将其实现。这就好比我们的日常谈话，要为深入交谈提供话由。当用户已经完成该做的步骤，不要让他们不知所措，给他们自然而然继续下去的方法，以达成目标。

9.        Appearance follows behavior (aka formfollows function)

Humans are mostcomfortable with things that behave the way we expect. Other people, animals,objects, software. When someone or something behaves consistently with ourexpectations we feel like we have a good relationship with it. To that end designedelements should look like how they behave. In practice this means thatsomeone should be able to predict how an interface element will behave merelyby looking at it. If it looks like a button it should act like abutton. Don't get cute with the basics of interaction…keep your creativity forhigher order concerns.

外观追随功能(类似于形式追随功能)

　　人总是对符合期望的行为最感舒适。当其他人、动物、事物或者软件的行为始终符合我们的期望时，我们会感到与之关系良好。这也是与人打交道的设计应该做到的。在实践中，这意味着用户只要看一眼就可以知道接下来将会有什么的动作发生，如果它看上去像个按钮，那么它就应该具备按钮的功能。设计师不应该在基本的交互问题上耍小聪明，要在更高层次的问题上发挥创造力。

10.             Consistency matters

Following on theprevious principle, screen elements should not appear consistent with eachother unless they behave consistently with each other. Elements that behave thesame should look the same. But it is just as important for unlike elements toappear unlike (be inconsistent) as it is for like elements to appearconsistent. In an effort to be consistent novice designers often obscureimportant differences by using the same visual treatment (often to re-use code)when different visual treatment is appropriate.

区分重点

　　如果屏幕元素各自的功能不同，那么它们的外观也理应不同。反之，如果功能相同或相近，那么它们看起来就应该是一样的。为了保持一致性，初级设计师往往对应该加以区分的元素采用相同的视觉处理效果，其实采用不同的视觉效果才是合适的。

11.   Strong visual hierarchies work best

A strong visualhierarchy is achieved when there is a clear viewing order to the visualelements on a screen. That is, when users view the same items in the same orderevery time. Weak visual hierarchies give little clue about where to rest one'sgaze and end up feeling cluttered and confusing. In environments of greatchange it is hard to maintain a strong visual hierarchy because visual weightis relative: when everything is bold, nothing is bold. Should a single visuallyheavy element be added to a screen, the designer may need to reset the visualweight of all elements to once again achieve a strong hierarchy. Most peopledon't notice visual hierarchy but it is one of the easiest ways to strengthen(or weaken) a design.

 强烈的视觉层次感

　　如果要让屏幕的视觉元素具有清晰的浏览次序，那么应该通过强烈的视觉层次感来实现。也就是说，如果用户每次都按照相同的顺序浏览同样的东西，视觉层次感不明显的话，用户不知道哪里才是目光应当停留的重点，最终只会让用户感到一团糟。在不断变更设计的情况下，很难保持明确的层次关系，因为所有的元素层次关系都是相对的：如果所有的元素都突出显示，最后就相当于没有重点可言。如果要添加一个需要特别突出的元素，为了再次实现明确的视觉层级，设计师可能需要重新考虑每一个元素的视觉重量。虽然多数人不会察觉到视觉层次，但这是增强设计的最简单的方法。

12. Smartorganization reduces cognitive load

As John Maedasays in his book Simplicity, smart organization of screen elements can makethe many appear as the few. This helps people understand your interfaceeasier and more quickly, as you've illustrated the inherent relationships ofcontent in your design. Group together like elements, show naturalrelationships by placement and orientation. By smartly organizing your contentyou make it less of a cognitive load on the user…who doesn't have to thinkabout how elements are related because you've done it for them. Don't force theuser to figure things out…show them by designing those relationships into yourscreens.

恰当的组织视觉元素，减轻用户的认知负荷

　　正如注明设计师 JohnMaeda 在其著作《 Simplicity 》中所言，恰当地组织视觉元素能够化繁为简，帮助他人更加快速简单地理解你的表达，比如内容上的包含关系。用方位和方向上的组织可以自然地表现元素间的关系。恰如其分地组织内容可以减轻用户的认知负荷，他们不必再琢磨元素间的关系，因为你已经表现出来了。不要迫使用户做出分辨，而是设计者用组织表现出来。不要迫使用户自己去把问题搞明白，设计师应当直接在

13. Highlight, don'tdetermine, with color

The color ofphysical things changes as light changes. In the full light of day we see avery different tree than one outlined against a sunset. As in the physicalworld, where color is a many-shaded thing, color should not determine much inan interface. It can help, be used for highlighting, be used to guideattention, but should not be the only differentiator of things. Forlong-reading or extended screen hours, use light or muted background colors,saving brighter hues for your accent colors. Of course there is a time forvibrant background colors as well, just be sure that it is appropriate for youraudience.

色彩不是决定性的因素
　　物体的色彩会随光线改变而改变。艳阳高照与夕阳西沉时，我们看到的景物会有很大反差。换句话说，色彩很容易被环境改变，因此，设计的时候不要将色彩视为决定性因素。色彩可以醒目，作为引导，但不应该是做区别的唯一元素。在长篇阅读或者长时间面对电脑屏幕的情况下，除了要强调的内容，应采用相对暗淡或柔和的背景色。当然，视读者而定，也可采用明亮的背景色。

14. Progressivedisclosure

Show only whatis necessary on each screen. If people are making a choice, show enoughinformation to allow them the choice, then dive into details on a subsequentscreen. Avoid the tendency to over-explain or show everything all at once. Whenpossible, defer decisions to subsequent screens by progressively disclosinginformation as necessary. This will keep your interactions more clear.

循序展现
　　每个屏幕只展现必需的内容。如果用户需要作出决定，则展现足够的信息供其选择，他们会到在下一屏找到所需细节。避免过度阐释或把所有一次展现，如果可能，将选择放在下一屏以有步骤地展示信息。这会使你的界面交互更加清晰。

15.  Help peopleinline

In idealinterfaces, help is not necessary because the interface is learnable andusable. The step below this, reality, is one in which help is inline andcontextual, available only when and where it is needed, hidden from view at allother times. Asking people to go to help and find an answer to their questionputs the onus on them to know what they need. Instead build in help where it isneeded…just make sure that it is out of the way of people who already know howto use your interface.

内嵌“帮助”选项
　　在理想的用户界面，“帮助”选项是不必要出现的，因为用户界面能够有效地指引用户学习。类似“下一步”实际上就是在上下文情境中内嵌的“帮助”，并且只在用户需要的时候出现在适当的位置，其他时候都是隐藏的。

　　设计者的任务不是在用户有需要的地方建立一个帮助系统，把发现用户需要的义务推诿给用户，让用户去在帮助系统中寻找他们问题的答案。而是应该确保用户知道如何使用你提供的界面，让用户在界面中得到指导并学习。

16. A crucialmoment: the zero state

The first timeexperience with an interface is crucial, yet often overlooked by designers. Inorder to best help our users get up to speed with our designs, it is best todesign for the zero state, the state in which nothing has yet occurred. Thisstate shouldn't be a blank canvas…it should provide direction and guidance forgetting up to speed. Much of the friction of interaction is in that initialcontext…once people understand the rules they have a much higher likelihood ofsuccess.

关键时刻：零状态
　　用户对一个界面的首次体验是非常重要的，而这常常被设计师忽略。为了更好的帮助用户快速适应我们的设计，设计应该处于零状态，也就是什么都没有发生的状态。但这个状态不是一块空白的画布，它应该能够为用户提供方向和指导，以此来帮助用户快速适应设计。在初始状态下的互动过程中会存在一些摩擦，一旦用户了解了各种规则，那将会有很高的机会获得成功。

17.  Existing problems are most valuable

People seek outsolutions to problems they already have, not potential problems or problems ofthe future. Therefore, resist creating interfaces for hypothetical problems,observe existing behavior and design to solve existing problems. This isn't asexciting as blue sky wondering but can be much more rewarding as people willactually use your interface.

针对现有问题去完善界面
　　人们总是寻求各种方案去解决已经存在的问题，而不是潜在的或者未来的问题。所以，不要为假设的问题设计界面，我们应该观察现有的行为和设计，解决现存的问题。这确实不是件能够让人兴奋的事情，但却是最有价值的事情，因为一旦你的用户界面愈加完善，会有更多的用户愿意使用你的界面。

18.             Great design is invisible

A curiousproperty of great design is that it usually goes unnoticed by the people whouse it. One reason for this is that if the design is successful the user canfocus on their own goals and not the interface…when they complete their goalthey are satisfied and do not need to reflect on the situation. As a designerthis can be tough…as we receive less adulation when our designs are good. Butgreat designers are content with a well-used design…and know that happy usersare often silent.

优秀的设计是无形的

　　优秀的设计有个古怪的属性，它通常会被它的用户所忽略。其中的一个原因是这个设计非常成功，以至于它的用户专注于完成自己的目标而忽略了自己面对的界面，用户顺利达成自己的目标后，他们会很满意地退出界面。但是作为设计师，这可能会有点不公平，当我们的设计很优秀的时候，我们不会受到很多阿谀奉承。当然，优秀的设计师不会去介意这些，因为他们心里明白，满意的用户往往都是沉默的。

19. Build on otherdesign disciplines

Visual andgraphic design, typography, copywriting, information architecture andvisualization…all of these disciplines are part of interface design. They canbe touched upon or specialized in. Do not get into turf wars or look down onother disciplines: grab from them the aspects that help you do your work andpush on. Pull in insights from seemingly unrelated disciplines as well…what canwe learn from publishing, writing code, bookbinding, skateboarding,firefighting, karate?

多领域学习，借鉴其他学科
　　视觉、平面设计、排版、文案、信息结构以及可视化，所有的这些知识领域都应该是界面设计应该包含的内容，设计师对这些知识都应该有所涉猎或者比较专长。不要看不起这些知识：要从中获取许多值得学习的东西，以此来提高你的工作能力。设计师的眼光要长远，要能从看似无关的学科中学习，比如出版、编程、装订、滑板、消防甚至空手道。

20.          Interfaces exist to be used

As in mostdesign disciplines, interface design is successful when people are using whatyou've designed. Like a beautiful chair that is uncomfortable to sit in, designhas failed when people choose not to use it. Therefore, interface design can beas much about creating an environment for use as it is creating an artifactworth using. It is not enough for an interface to satisfy the ego of itsdesigner: it must be used!

界面的存在必须有所用途

　　在大多数设计领域，界面设计成功的要素就是有用户使用它。打个比方，一把漂亮的椅子，虽然精美但坐着不舒服，那么用户不会选择使用它，它也就是失败的设计。因此，界面设计不仅仅是设计一个使用环境，还需要是创造一个值得使用的艺术品。界面设计仅仅能够满足其设计者的虚荣心是不够的：它必须要有用!

 

 

 8.自然过渡

　　界面的交互都是环环相扣的，所以设计时，要深思熟虑地考虑到交互的下一步。考虑到下一步的交互是怎样的，并且通过设计将其实现。这就好比我们的日常谈话，要为深入交谈提供话由。当用户已经完成该做的步骤，不要让他们不知所措，给他们自然而然继续下去的方法，以达成目标。

9.外观追随功能(类似于形式追随功能)

　　人总是对符合期望的行为最感舒适。当其他人、动物、事物或者软件的行为始终符合我们的期望时，我们会感到与之关系良好。这也是与人打交道的设计应该做到的。在实践中，这意味着用户只要看一眼就可以知道接下来将会有什么的动作发生，如果它看上去像个按钮，那么它就应该具备按钮的功能。设计师不应该在基本的交互问题上耍小聪明，要在更高层次的问题上发挥创造力。

10.区分重点

　　如果屏幕元素各自的功能不同，那么它们的外观也理应不同。反之，如果功能相同或相近，那么它们看起来就应该是一样的。为了保持一致性，初级设计师往往对应该加以区分的元素采用相同的视觉处理效果，其实采用不同的视觉效果才是合适的。

11.强烈的视觉层次感

　　如果要让屏幕的视觉元素具有清晰的浏览次序，那么应该通过强烈的视觉层次感来实现。也就是说，如果用户每次都按照相同的顺序浏览同样的东西，视觉层次感不明显的话，用户不知道哪里才是目光应当停留的重点，最终只会让用户感到一团糟。在不断变更设计的情况下，很难保持明确的层次关系，因为所有的元素层次关系都是相对的：如果所有的元素都突出显示，最后就相当于没有重点可言。如果要添加一个需要特别突出的元素，为了再次实现明确的视觉层级，设计师可能需要重新考虑每一个元素的视觉重量。虽然多数人不会察觉到视觉层次，但这是增强设计的最简单的方法。

20.界面的存在必须有所用途

　　在大多数设计领域，界面设计成功的要素就是有用户使用它。打个比方，一把漂亮的椅子，虽然精美但坐着不舒服，那么用户不会选择使用它，它也就是失败的设计。因此，界面设计不仅仅是设计一个使用环境，还需要是创造一个值得使用的艺术品。界面设计仅仅能够满足其设计者的虚荣心是不够的：它必须要有用!