这是用户在 2025-6-25 10:26 为 http://bokardo.com/principles-of-user-interface-design/ 保存的双语快照页面,由 沉浸式翻译 提供双语支持。了解如何保存?
You might also like: Principles of Product Design
您可能还会喜欢:产品设计原则

Principles of User Interface Design
用户界面设计原则

"To design is much more than simply to assemble, to order, or even to edit; it is to add value and meaning, to illuminate, to simplify, to clarify, to modify, to dignify, to dramatize, to persuade, and perhaps even to amuse." - Paul Rand
“设计远不止是组装、排序,甚至是编辑;它更是增添价值和意义,是阐明、简化、澄清、修改、升华、戏剧化、说服,甚至可能还有逗趣。” - 保罗·兰德
  1. Clarity is job #1
    清晰是第一要务

    Clarity is the first and most important job of any interface. To be effective using an interface you've designed, people must be able to recognize what it is, care about why they would use it, understand what the interface is helping them interact with, predict what will happen when they use it, and then successfully interact with it. While there is room for mystery and delayed gratification in interfaces, there is no room for confusion. Clarity inspires confidence and leads to further use. One hundred clear screens is preferable to a single cluttered one.
    清晰是任何界面的首要且最重要的任务。要有效地使用你设计的界面,人们必须能够识别它是什么,关心他们为什么要使用它,理解界面帮助他们与之互动的是什么,预测当他们使用它时会发生什么,然后成功地与之互动。虽然界面中有留给神秘感和延迟满足的空间,但没有留给混乱的空间。清晰能激发信心并带来进一步的使用。一百个清晰的屏幕比一个混乱的屏幕更受欢迎。

  2. Interfaces exist to enable interaction
    界面是为了实现互动而存在的

    Interfaces exist to 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 designing interfaces is not Art. Interfaces are not monuments unto themselves. Interfaces do a job and their effectiveness can be measured. They are not just utilitarian, however. The best interfaces can inspire, evoke, mystify, and intensify our relationship with the world.
    界面是为了实现人与我们世界之间的互动而存在的。它们可以帮助我们澄清、阐明、实现、展示关系、将我们聚集在一起、将我们分开、管理我们的期望,并让我们获得服务。设计界面的行为不是艺术。界面本身不是纪念碑。界面是用来做事的,其有效性是可以衡量的。然而,它们不仅仅是功利性的。最好的界面可以激发、唤起、迷惑并加深我们与世界的联系。

  3. Conserve attention at all costs
    不惜一切代价节省注意力

    We live in a world of interruption. It's hard to read in peace anymore without something trying to distract us and direct our attention elsewhere. Attention is precious. Don't litter the side of your applications with distractible material…remember why the screen exists in the first place. If someone is reading let them finish reading before showing that advertisement (if you must). Honor attention and not only will your readers be happier, your results will be better. When use is the primary goal, attention becomes the prerequisite. Conserve it at all costs.
    我们生活在一个充满干扰的世界。现在很难安安静静地阅读,总有东西试图分散我们的注意力,将我们的注意力引向别处。注意力是宝贵的。不要在你的应用程序侧边充斥着容易分散注意力的内容……首先要记住屏幕存在的意义。如果有人在阅读,请让他们读完再展示广告(如果你必须这样做)。尊重注意力,不仅你的读者会更开心,你的结果也会更好。当使用是主要目标时,注意力就成了先决条件。不惜一切代价保护它。

  4. Keep users in control
    让用户保持控制

    Humans are most comfortable when they feel in control of themselves and their environment. Thoughtless software takes away that comfort by forcing people into unplanned interactions, confusing pathways, and surprising outcomes. Keep users in control by regularly surfacing system status, by describing causation (if you do this that will happen) and by giving insight into what to expect at every turn. Don't worry about stating the obvious…the obvious almost never is.
    当人们感觉能够掌控自己和周围环境时,会感到最舒适。欠考虑的软件会迫使人们进行计划外的交互、令人困惑的操作路径和出乎意料的结果,从而剥夺了这种舒适感。通过定期显示系统状态、解释因果关系(如果你这样做,就会发生那样的事情)以及让用户了解每一步的预期,来让用户保持控制。不要担心说出显而易见的事情……显而易见的事情几乎永远不是显而易见的。

  5. Direct manipulation is best
    直接操作是最好的

    The best interface is none at all, when we are able to directly manipulate the physical objects in our world. Since this is not always possible, and objects are increasingly informational, we create interfaces to help us interact with them. It is easy to add more layers than necessary to an interface, creating overly-wrought buttons, chrome, graphics, options, preferences, windows, attachments, and other cruft so that we end up manipulating UI elements instead of what's important. Instead, strive for that original goal of direct manipulation…design an interface with as little a footprint as possible, recognizing as much as possible natural human gestures. Ideally, the interface is so slight that the user has a feeling of direct manipulation with the object of their focus.
    最好的界面就是没有界面,当我们能够直接操作我们世界中的物理对象时。由于这并非总是可能,而且对象日益信息化的,我们创建界面来帮助我们与它们互动。很容易给界面添加不必要的层级,创建过于繁琐的按钮、装饰、图形、选项、偏好设置、窗口、附件和其他杂乱的东西,以至于我们最终操作的是用户界面元素而不是重要的东西。相反,要努力实现最初的直接操作目标……设计一个占位尽可能小的界面,尽可能多地识别自然的人类手势。理想情况下,界面非常精巧,以至于用户感觉能够直接操作他们关注的对象。

  6. One primary action per screen
    每屏一个主要操作

    Every screen we design 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 on when necessary. Screens that support two or more primary actions become confusing quickly. Like a written article should have a single, strong thesis, every screen we design should support a single, strong action that is its raison d'etre.
    我们设计的每一个屏幕都应该支持对使用者有实际价值的单一操作。这使得它更容易学习、更容易使用,并在必要时更容易进行扩展或构建。支持两个或两个以上主要操作的屏幕会很快变得令人困惑。就像一篇书面文章应该有一个单一、有力的论点一样,我们设计的每一个屏幕都应该支持一个单一、有力的操作,这才是它的存在理由。

  7. Keep secondary actions secondary
    保持次要操作的次要性

    Screens with a single primary action can have multiple secondary actions but they need to be kept secondary! The reason why your article exists isn't so that people can share it on Twitter…it exists for people to read and understand it. Keep secondary actions secondary by making them lighter weight visually or shown after the primary action has been achieved.
    具有单一主要操作的屏幕可以有多个次要操作,但它们需要保持次要性!你的文章存在的目的不是为了让人们在 Twitter 上分享它……而是为了让人们阅读和理解它。通过使次要操作在视觉上更轻量级或在主要操作完成后显示,来保持其次要性。

  8. Provide a natural next step
    提供自然的下一步

    Very few interactions are meant to be the last, so thoughtfully design a next step for each interaction a person has with your interface. Anticipate what the next interaction should be and design to support it. Just as we like in human conversation, provide an opening for further interaction. Don't leave a person hanging because they've done what you want them to do…give them a natural next step that helps them further achieve their goals.
    很少有交互是最后一次,因此请为用户与您的界面进行的每一次交互深思熟虑地设计下一步。预测下一步交互应该是什么,并进行设计以支持它。就像我们在人际对话中一样,为进一步的互动提供一个机会。不要因为用户完成了您希望他们做的事情就让他们停滞不前……给他们一个自然的下一步,帮助他们进一步实现目标。

  9. Appearance follows behavior
    外观遵循行为

    Humans are most comfortable with things that behave the way we expect. Other people, animals, objects, software. When someone or something behaves consistently with our expectations we feel like we have a good relationship with it. To that end designed elements should look like how they behave. Form follows function. In practice this means that someone should be able to predict how an interface element will behave merely by looking at it. If it looks like a button it should act like a button. Don't get cute with the basics of interaction…keep your creativity for higher order concerns.
    人类最习惯于那些按照我们预期行事的事物。其他人、动物、物体、软件。当某人或某事物的行为符合我们的预期时,我们会觉得与它建立了良好的关系。为此,设计元素的外观应该与其行为相匹配。形式追随功能。在实践中,这意味着人们仅凭外观就应该能够预测界面元素的行为方式。如果它看起来像一个按钮,它就应该像一个按钮一样运作。不要在交互基础方面耍小聪明……将您的创造力用于更高级别的问题。

  10. Consistency matters  一致性很重要

    Following on the previous principle, screen elements should not appear consistent with each other unless they behave consistently with each other. Elements that behave the same should look the same. But it is just as important for unlike elements to appear unlike (be inconsistent) as it is for like elements to appear consistent. In an effort to be consistent novice designers often obscure important 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 visual hierarchy is achieved when there is a clear viewing order to the visual elements on a screen. That is, when users view the same items in the same order every time. Weak visual hierarchies give little clue about where to rest one's gaze and end up feeling cluttered and confusing. In environments of great change it is hard to maintain a strong visual hierarchy because visual weight is relative: when everything is bold, nothing is bold. Should a single visually heavy element be added to a screen, the designer may need to reset the visual weight of all elements to once again achieve a strong hierarchy. Most people don't notice visual hierarchy but it is one of the easiest ways to strengthen (or weaken) a design.
    当屏幕上的视觉元素具有清晰的观看顺序时,就能实现强大的视觉层次结构。也就是说,用户每次都以相同的顺序查看相同的项目。薄弱的视觉层次结构几乎没有提示用户目光应该停留在哪里,最终会显得杂乱无章且令人困惑。在变化巨大的环境中,很难维持强大的视觉层次结构,因为视觉权重是相对的:当所有东西都加粗时,就没有什么特别加粗的了。如果向屏幕添加一个视觉上很重的元素,设计师可能需要重置所有元素的视觉权重,才能再次实现强大的层次结构。大多数人不会注意到视觉层次结构,但它是加强(或削弱)设计的最简单方法之一。

  12. Smart organization reduces cognitive load
    智能的组织可以减轻认知负荷

    As John Maeda says in his book Simplicity, smart organization of screen elements can make the many appear as the few. This helps people understand your interface easier and more quickly, as you've illustrated the inherent relationships of content in your design. Group together like elements, show natural relationships by placement and orientation. By smartly organizing your content you make it less of a cognitive load on the user…who doesn't have to think about how elements are related because you've done it for them. Don't force the user to figure things out…show them by designing those relationships into your screens.
    正如约翰·梅达(John Maeda)在他的著作《简洁》(Simplicity)中所说,巧妙地组织屏幕元素可以让“多”化为“少”。这有助于用户更轻松、更快速地理解你的界面,因为你在设计中已经阐明了内容的内在联系。将相似的元素分组,通过布局和方向展示自然的关联。通过巧妙地组织内容,可以减轻用户的认知负担……用户无需思考元素之间的关系,因为你已经为他们做好了安排。不要强迫用户去弄清楚,而是通过将这些关系设计到屏幕中来展示它们。

  13. Highlight, don't determine, with color
    用颜色进行强调,而非决定

    The color of physical things changes as light changes. In the full light of day we see a very different tree than one outlined against a sunset. As in the physical world, where color is a many-shaded thing, color should not determine much in an interface. It can help, be used for highlighting, be used to guide attention, but should not be the only differentiator of things. For long-reading or extended screen hours, use light or muted background colors, saving brighter hues for your accent colors. Of course there is a time for vibrant background colors as well, just be sure that it is appropriate for your audience.
    物理事物的颜色会随着光线的变化而变化。在白天的充足光线下,我们看到的树与在日落时勾勒出的树截然不同。正如在物理世界中,颜色是一个多层次的事物,颜色在界面中也不应决定太多。它可以提供帮助,用于高亮显示,用于引导注意力,但不应成为事物的唯一区分因素。对于长时间阅读或长时间使用屏幕,请使用浅色或柔和的背景色,将更鲜艳的色调留给强调色。当然,也有使用鲜艳背景色的时候,但请确保它适合您的受众。

  14. Progressive disclosure  渐进式披露

    Show only what is necessary on each screen. If people are making a choice, show enough information to allow them the choice, then dive into details on a subsequent screen. Avoid the tendency to over-explain or show everything all at once. When possible, defer decisions to subsequent screens by progressively disclosing information as necessary. This will keep your interactions more clear.
    在每个屏幕上只显示必要的信息。如果人们正在做出选择,请显示足够的信息以允许他们做出选择,然后在后续屏幕中深入了解细节。避免过度解释或一次性显示所有内容的倾向。如果可能,通过根据需要渐进式披露信息来将决策推迟到后续屏幕。这将使您的交互更加清晰。

  15. Help people inline  内联帮助

    In ideal interfaces, help is not necessary because the interface is learnable and usable. The step below this, reality, is one in which help is inline and contextual, available only when and where it is needed, hidden from view at all other times. Asking people to go to help and find an answer to their question puts the onus on them to know what they need. Instead build in help where it is needed…just make sure that it is out of the way of people who already know how to use your interface.
    在理想的界面中,由于界面是可学习且易于使用的,因此不需要帮助。现实情况是,帮助是内联的、情境化的,仅在需要时、在需要的地方可用,而在其他所有时间都隐藏起来。要求人们去帮助那里寻找问题的答案,是将责任推给他们,让他们自己知道自己需要什么。相反,在需要的地方构建帮助……只需确保它不会妨碍那些已经知道如何使用你的界面的人。

  16. A crucial moment: the zero state
    关键时刻:零状态

    The first time experience with an interface is crucial, yet often overlooked by designers. In order to best help our users get up to speed with our designs, it is best to design for the zero state, the state in which nothing has yet occurred. This state shouldn't be a blank canvas…it should provide direction and guidance for getting up to speed. Much of the friction of interaction is in that initial context…once people understand the rules they have a much higher likelihood of success.
    用户初次体验界面至关重要,但设计师却常常忽视这一点。为了更好地帮助用户快速上手我们的设计,最好为零状态进行设计,即尚未发生任何事情的状态。这种状态不应是一片空白……它应提供方向和指导,帮助用户快速上手。交互中的大部分阻碍都存在于初始情境中……一旦人们理解了规则,他们成功的可能性就会大大增加。

  17. Great design is invisible
    优秀的设计是无形的

    A curious property of great design is that it usually goes unnoticed by the people who use it. One reason for this is that if the design is successful the user can focus on their own goals and not the interface…when they complete their goal they are satisfied and do not need to reflect on the situation. As a designer this can be tough…as we receive less adulation when our designs are good. But great designers are content with a well-used design…and know that happy users are often silent.
    优秀设计的奇妙之处在于,使用者通常不会注意到它。其中一个原因是,如果设计成功,用户就可以专注于自己的目标,而不是界面……当他们完成目标时,他们会感到满意,而无需反思当前状况。作为设计师,这可能很艰难……因为当我们的设计出色时,我们得到的赞美会更少。但优秀的设计师满足于被充分利用的设计……并知道用户满意时往往是沉默的。

  18. Build on other design disciplines
    借鉴其他设计学科

    Visual and graphic design, typography, copywriting, information architecture and visualization…all of these disciplines are part of interface design. They can be touched upon or specialized in. Do not get into turf wars or look down on other disciplines: grab from them the aspects that help you do your work and push on. Pull in insights from seemingly unrelated disciplines as well…what can we learn from publishing, writing code, bookbinding, skateboarding, firefighting, karate?
    视觉和平面设计、排版、文案、信息架构和可视化……所有这些学科都是界面设计的一部分。它们可以被触及或专门研究。不要陷入地盘之争或看不起其他学科:从中汲取有助于你工作的方面并继续前进。也要借鉴看似无关的学科的见解……我们可以从出版、编写代码、装订、滑板、消防、空手道中学到什么?

  19. Interfaces exist to be used
    界面是为了被使用而存在的

    As in most design disciplines, interface design is successful when people are using what you've designed. Like a beautiful chair that is uncomfortable to sit in, design has failed when people choose not to use it. Therefore, interface design can be as much about creating an environment for use as it is creating an artifact worth using. It is not enough for an interface to satisfy the ego of its designer: it must be used!
    与大多数设计学科一样,当人们使用你设计的东西时,界面设计就成功了。就像一把漂亮的椅子坐起来不舒服一样,当人们选择不使用它时,设计就失败了。因此,界面设计可以像创造一个值得使用的制品一样,更多地是创造一个使用的环境。界面仅仅满足设计师的自我是不够的:它必须被使用!

Currently working on:  当前正在进行:

What to Wear Daily Be prepared for your day. A daily email that delivers clothing recommendations and other helpful info based on the weather. Remarkably useful. It's free to sign up.
每日穿搭 做好全天准备。一封每日邮件,根据天气提供穿搭建议和其他有用信息。非常实用。免费注册。

Written by Joshua Porter, creator of the What to Wear daily report and publisher of Bokardo.com. If you're interested in product design you can follow me on Twitter here.
由 Joshua Porter 撰写,他是 What to Wear 日报的创建者以及 Bokardo.com 的发布者。如果您对产品设计感兴趣,可以在这里关注我的 Twitter。