十个 UI 设计的基本原理
It's no great mystery that truly great user interfaces are the ones that are engineered to stay out of the way.
真正优秀的用户界面都是那些设计得「不挡路」的 —— 这并不是什么奥秘。
'Staying out of the way' means not distracting your users. Rather, good UIs let your users complete goals. The result? A reduction in training and support costs, and happier, satisfied and highly engaged users.
「不挡路」意味着不会分散用户的注意力。事实上,良好的用户界面可以让你的用户完成目标。结果呢?减少培训和支持的成本,以及让用户更快乐、更满意并被深深吸引。
Check out our other design courses at Treehouse.
在 Treehouse 查看我们的其他设计课程。
When getting started on a new interface, make sure to remember these fundamentals:
在开始设计新的用户界面时,请务必记住以下原则:
Know your user
了解你的用户
"Obsess over customers: when given the choice between obsessing over competitors or customers, always obsess over customers. Start with customers and work backward." -- Jeff Bezos
「对顾客的关注:当在关注竞争对手或顾客之间做出选择时,总是应该关注顾客。从顾客开始,用逆向思维工作。」 —— Jeff Bezos
Your user's goals are your goals, so learn them. Restate them, repeat them. Then, learn about your user's skills and experience, and what they need. Find out what interfaces they like and sit down and watch how they use them. Do not get carried away trying to keep up with the competition by mimicking trendy design styles or adding new features. By focusing on your user first, you will be able to create an interface that lets them achieve their goals.
你的用户的目标就是你的目标,因此请了解它们。重申它们,重复它们。然后,了解你的用户的技能和经验,以及他们需要什么。找出他们喜欢的界面,坐下来看看他们如何使用这些界面。不要试图通过模仿时尚的设计风格或添加新功能来跟上竞争对手,而忘乎所以。通过首先关注你的用户,你将能够创建一个让他们完成目标的界面。
Pay attention to patterns
注意 UI 样式
Users spend the majority of their time on interfaces other than your own (Facebook, MySpace, Blogger, Bank of America, school/university, news websites, etc). There is no need to reinvent the wheel. Those interfaces may solve some of the same problems that users perceive within the one you are creating. By using familiar UI patterns, you will help your users feel at home.
用户会将大部分时间花在除你以外的其他界面上(Facebook,MySpace,Blogger,美国银行,学校 / 大学,新闻网站等等)。没有必要重新发明轮子。这些接口可以解决用户在你正在创建的问题中感知的一些相同问题。通过使用熟悉的 UI 模式,你将让你的用户有宾至如归的感觉。
Stay consistent
保持一致性
"The more users' expectations prove right, the more they will feel in control of the system and the more they will like it." -- Jakob Nielson
「越多用户的期望被证明是正确的,他们对系统的控制感越强,他们就会越喜欢它。」 —— Jakob Nielson
Your users need consistency. They need to know that once they learn to do something, they will be able to do it again. Language, layout, and design are just a few interface elements that need consistency. A consistent interface enables your users to have a better understanding of how things will work, increasing their efficiency.
你的用户需要一致性。他们需要知道,一旦他们学会做某事,他们就能再次做到。语言、布局和设计只是需要一致性的一些界面元素。一致的界面使你的用户能够更好地了解事物的运作方式,从而提高效率。
Use visual hierarchy
使用视觉层次结构
"Designers can create normalcy out of chaos; they can clearly communicate ideas through the organizing and manipulating of words and pictures." -- Jeffery Veen, The Art and Science of Web Design
「设计师可以摆脱混乱的局面;他们可以通过组织和操纵文字和图片清晰地传达思想。」 —— Jeffery Veen,网页设计的艺术与科学
Design your interface in a way that allows the user to focus on what is most important. The size, color, and placement of each element work together, creating a clear path to understanding your interface. A clear hierarchy will go great lengths in reducing the appearance of complexity (even when the actions themselves are complex).
以允许用户专注于最重要的方式设计界面。每个元素的大小、颜色和位置协同工作,为理解界面创建了清晰的途径。明确的层次结构将大大减少复杂性的出现(即使行动本身很复杂)。
Provide feedback
提供反馈信息
Your interface should at all times speak to your user, when his/her actions are both right and wrong or misunderstood. Always inform your users of actions, changes in state and errors, or exceptions that occur. Visual cues or simple messaging can show the user whether his or her actions have led to the expected result.
无论用户的行为正确、错误还是被误解时,你的界面应始终向你的用户提供反馈。始终通知用户操作、状态和错误的改变或发生的异常。视觉提示或简单消息可以向用户显示他或她的行为是否已导致预期结果。
Be forgiving
对用户宽容
No matter how clear your design is, people will make mistakes. Your UI should allow for and tolerate user error. Design ways for users to undo actions, and be forgiving with varied inputs (no one likes to start over because he/she put in the wrong birth date format). Also, if the user does cause an error, use your messaging as a teachable situation by showing what action was wrong, and ensure that she/he knows how to prevent the error from occurring again.
无论你的设计多么清晰,人们都会犯错误。你的 UI 应该允许并容忍用户错误。设计用户撤销操作的方式,并对不同的输入进行宽容(没有人希望因为他 / 她输错了出生日期的格式,就得全部重新输入)。此外,如果用户确实导致错误,请通过显示哪些操作出错来将你的消息传递作为可接受的情况,并确保他 / 她知道如何防止错误再次发生。
A great example can be seen in How to increase signups with easier captchas.
在如何使用更简单的验证码增加注册中可以看到一个很好的例子。
Empower your user
为你的用户提供支持
Once a user has become experienced with your interface, reward him/her and take off the training wheels. The breakdown of complex tasks into simple steps will become cumbersome and distracting. Providing more abstract ways, like keyboard shortcuts, to accomplish tasks will allow your design to get out of the way.
一旦用户熟悉你的界面,奖励他 / 她并把「辅助轮」取下来(注:就像在学习骑自行车时那样)。将复杂任务分解为简单的步骤将变得麻烦和分散注意力。提供更抽象的方法,如键盘快捷键,来完成任务 —— 这将使你的设计摆脱困境。
Speak their language
说出他们的语言
"If you think every pixel, every icon, every typeface matters, then you also need to believe every letter matters. " -- Getting Real
「如果你认为每个像素,每个图标,每个字体都很重要,那么你还需要相信每个字母都很重要。」 —— Getting Real
All interfaces require some level of copywriting. Keep things conversational, not sensational. Provide clear and concise labels for actions and keep your messaging simple. Your users will appreciate it, because they won't hear you -- they will hear themselves and/or their peers.
所有接口都需要一定程度的文案。让它们亲切随和,而不是耸人听闻。为操作提供清晰简洁的标签,并使你的消息保持简单。你的用户会很感激,因为他们不会听到你的声音 —— 他们会听到自己和 / 或他们的同伴的声音。
Keep it simple
把事情简单化
"A modern paradox is that it's simpler to create complex interfaces because it's so complex to simplify them." -- Pär Almqvist
「一个现代悖论是,创建复杂的界面更简单,因为简化这些界面非常复杂。」 —— Pär Almqvist
The best interface designs are invisible. They do not contain UI-bling or unnecessary elements. Instead, the necessary elements are succinct and make sense. Whenever you are thinking about adding a new feature or element to your interface, ask the question, "Does the user really need this?" or "Why does the user want this very clever animated gif?" Are you adding things because you like or want them? Never let your UI ego steal the show.
最好的界面设计是无形的。它们不包含 UI-bling 或不必要的元素。相反,必要的元素是简洁而有意义的。无论何时考虑在界面中添加新功能或元素,都要问「用户真的需要这个吗?」或「为什么用户想要这个巧妙的 gif 动图?」。你是否只是因为喜欢或想要而添加新东西?永远不要让你的 UI 自身抢了风头。
Keep moving forward
不忘初心,继续前进
Grandpa Bud: If I gave up every time I failed, I would never have invented my fireproof pants!
[Pants burn up, revealing his underwear]
Grandpa Bud: Still working the kinks out a bit.
from Meet the Robinsons
巴德爷爷:如果我每次失败就放弃了,我永远都不会发明我的防火裤!
[裤子烧了,露出他的内衣]
巴德爷爷:仍然在努力解决问题。
来自拜见罗宾逊一家
Meet the Robinsons is one of my all time favorite movies. Throughout the movie Lewis, the protagonist, is challenged to "keep moving forward." This is a key principle in UI design.
拜见罗宾逊一家是我最喜欢的电影之一。在整个电影中,主角刘易斯面临着「继续前进」的挑战。这是 UI 设计的关键原则。
It is often said when developing interfaces that you need to fail fast, and iterate often. When creating a UI, you will make mistakes. Just keep moving forward, and remember to keep your UI out of the way.
在开发接口时经常会说你需要快速失败,并经常迭代。在创建 UI 时,你会犯错误。继续前进,并记住保持你的 UI 不受影响。
本文由 Kyle Sollenberger 撰写。
This article was written by Kyle Sollenberger.