16 little UI design rules that make a big impact
16个小的UI设计规则，产生巨大的影响
User interface design is hard. With so many options to choose from regarding layout, spacing, typography, and colour, making design decisions can be overwhelming. When you add usability, accessibility, and psychology to the mix, it gets even harder.
用户界面设计很难。在布局、间距、字体和颜色等方面有如此多的选择，做出设计决策可能会让人感到不知所措。当你加入可用性、可访问性和心理学等因素时，情况变得更加困难。
Luckily, UI design doesn’t have
幸运的是，用户界面设计并不需要那么困难。在我作为产品设计师工作的近20年中，我意识到，我大部分的视觉和交互设计决策都受到一套逻辑规则的支配。并非艺术才华或神奇直觉，只是简单的规则。to be so hard. Over nearly 2 decades working as a product designer, I’ve realised that most of my visual and interaction design decisions are governed by a system of logical rules. Not artistic flair or magical intuition, just simple rules.
Having a system of logical rules helps you efficiently make informed design decisions. Without a logical system, you’re just using gut feeling to move stuff around until it looks pretty.
拥有一套逻辑规则系统可以帮助您高效地做出明智的设计决策。如果没有逻辑系统，您只是凭直觉将事物移动，直到它看起来漂亮。
I love rules and logic, but design decisions are rarely black and white. Rather than strict rules that you must follow, think of the following advice as helpful guidelines that work well in most cases.
我喜欢规则和逻辑，但设计决策很少是非黑即白的。与其说是必须遵循的严格规则，不如将以下建议视为在大多数情况下非常有帮助的指南。
The quickest way to learn is by doing, so let’s get started.
学习最快的方法就是动手去做，所以让我们开始吧。
Let’s fix this example using logical rules
让我们使用逻辑规则来修复这个例子
The following 2 designs are for the property details page of a short-term property rental app. The first one is the original design. The second is the result of applying some logical rules or guidelines.
以下两个设计是用于短期房屋租赁应用程序的房产详情页面。第一个是原始设计。第二个是应用了一些逻辑规则或指导方针后的结果。
Even without much visual or interaction design experience, you’ll probably notice that the original design feels messy, complicated, and difficult to use. This is because it contains many problematic design details that pose a risk to usability. Perhaps you can already spot a few?
即使没有太多的视觉或交互设计经验，你可能会注意到原始设计感觉凌乱、复杂且难以使用。这是因为它包含了许多有问题的设计细节，对可用性构成了风险。也许你已经能够发现其中一些了？
Let’s fix the problems with the original design one at a time using the following logical rules or guidelines:
让我们使用以下逻辑规则或指南逐个解决原始设计中的问题：
1\. Use space to group related elements
使用空间来分组相关元素
Breaking up information into smaller groups of related elements helps to structure and organise an interface. This makes it faster and easier for people to understand and remember.
将信息分成相关元素的较小组有助于构建和组织界面。这样做可以让人们更快速、更容易地理解和记住信息。
You can group related elements using the following methods:
您可以使用以下方法将相关元素分组：
- Place related elements in the same container 将相关元素放置在同一个容器中
- Space related elements close together 太空相关元素紧密相连
- Make related elements look similar 使相关元素看起来相似
- Align related elements in a continuous line 将相关元素对齐成一条连续的线
Using containers is the strongest visual cue to group interface elements, but it can add unnecessary clutter. Look for opportunities to use other grouping methods, they’re often more subtle and can help simplify designs.
使用容器是将界面元素分组的最强视觉提示，但它可能会增加不必要的混乱。寻找其他分组方法的机会，它们通常更加微妙，可以帮助简化设计。
Using space in particular is a very effective and simple way to group related elements. You can also combine grouping methods to help display groupings more clearly.
使用空间是一种非常有效且简单的方式来对相关元素进行分组。您还可以结合不同的分组方法，以更清晰地显示分组。
In our example, the lack of space between content makes the design look cluttered and difficult to understand. Increasing spacing helps to clearly group content, making it more organised and easier to understand.
在我们的例子中，内容之间缺乏空间使得设计看起来杂乱且难以理解。增加间距有助于清晰地分组内容，使其更有组织性和易于理解。
2\. Be consistent 保持一致
Consistency in UI design means that similar elements look and work in a similar way. This should be true both within your product and when compared with other well-established products. This predictable functionality improves usability and reduces errors, as people don’t need to keep learning how things work.
UI设计的一致性意味着相似的元素在外观和功能上都表现出相似的方式。这一点不仅适用于您的产品内部，还适用于与其他成熟产品的比较。这种可预测的功能性能提高了可用性，减少了错误，因为人们不需要不断学习事物的工作方式。
In our example, the icon styles are inconsistent, as some are filled and others aren’t. This could confuse some people, as filled icons often indicate that an element is selected. Outlining all icons with a 2pt stroke weight and rounded corners improves consistency and gives each icon a similar visual weight.
在我们的示例中，图标的样式不一致，有些是填充的，而其他的则不是。这可能会让一些人感到困惑，因为填充的图标通常表示元素已被选中。通过使用2pt的描边宽度和圆角来勾勒所有图标，可以提高一致性，并赋予每个图标相似的视觉重量。
Text labels are also added to the icons to help ensure people can understand what they mean, especially those using screen readers (software that describes an interface, using speech or braille, to someone who can’t see it).
还为图标添加了文本标签，以帮助确保人们能够理解它们的含义，尤其是那些使用屏幕阅读器的人（屏幕阅读器是一种通过语音或盲文描述界面的软件，供无法看到界面的人使用）。
3\. Ensure similar looking elements function similarly
确保外观相似的元素具有相似的功能
If elements look similar, people will expect them to work in a similar way. So try to ensure that you use a consistent visual treatment for elements with the same functionality. Conversely, try to ensure elements with different functionality look different.
如果元素看起来相似，人们会期望它们以类似的方式工作。因此，请尽量确保对具有相同功能的元素使用一致的视觉处理。相反地，请尽量确保具有不同功能的元素看起来不同。
In our example, the icon containers have a similar visual style to the “book now” button. This makes them seem interactive, even though they’re not. Removing the blue colour and button styling from the icons helps to avoid them being mistaken for interactive elements.
在我们的示例中，图标容器的视觉风格与“立即预订”按钮相似。这使它们看起来具有互动性，尽管实际上并非如此。从图标中去除蓝色和按钮样式有助于避免将它们误认为是可互动的元素。
4\. Create a clear visual hierarchy
4\. 创建清晰的视觉层次
Not all information in an interface has the same level of importance. Aim to present information in order of importance by making more important elements look more prominent.
界面中的所有信息并不具有相同的重要性。通过使更重要的元素更加突出，以重要性的顺序呈现信息。
A clear order of importance, or visual hierarchy, helps people scan information quickly and focus on areas of interest. It also improves aesthetics by creating a sense of order. You can create a clear visual hierarchy using variations in size, colour, contrast, spacing, position, and depth.
一个明确的重要性顺序，或者说视觉层次，可以帮助人们快速浏览信息并集中注意力在感兴趣的区域。它还通过创造一种有序感来提升美感。你可以通过大小、颜色、对比度、间距、位置和深度的变化来创建一个清晰的视觉层次。
Here’s an example of a website hero banner without a clear visual hierarchy, followed by one with elements clearly presented in order of importance.
这是一个没有明确视觉层次的网站主横幅的例子，接下来是一个元素按重要性明确呈现的主横幅。
A quick and easy way to test whether your visual hierarchy is clear is to use The Squint Test. Simply squint your eyes and look at your design. Alternatively you can move further away from the screen or blur your design. You should still be able to tell what the most important elements are and recognise what the interface is for.
一个快速简便的方法来测试你的视觉层次是否清晰，就是使用“眯眼测试”。只需眯起眼睛看着你的设计。或者你可以离屏幕更远一些，或者模糊你的设计。你仍然应该能够看出哪些元素最重要，并且能够认识到界面的用途。
Let’s apply the Squint Test to our example. We can see that there are multiple elements with similarly strong prominence competing for attention. Meanwhile, the primary action in the bottom left doesn’t stand out at all.
让我们将Squint测试应用到我们的例子中。我们可以看到有多个具有相似强烈突出性的元素在争夺注意力。与此同时，左下角的主要动作根本不突出。
The primary action should generally be the most prominent element on an interface. Giving it a high contrast background colour and bold font weight helps achieve this. This also fixes an accessibility issue with the low contrast button, which we’ll look into later.
主要操作通常应该是界面上最突出的元素。给它一个高对比度的背景颜色和粗体字重可以帮助实现这一点。这也修复了低对比度按钮的可访问性问题，我们稍后会研究一下。
Applying the Squint Test to the updated design, the primary action is clearly the most prominent element.
应用斜视测试到更新的设计中，主要动作显然是最突出的元素。
The visual hierarchy is now clearer, but there’s still room for improvement. For example, the block of body text is still too prominent relative to its level of importance. We’ll learn some quick typography guidelines shortly, which will help correct the visual hierarchy.
视觉层次现在更清晰了，但仍有改进的空间。例如，正文的块仍然相对突出，与其重要性不符。我们很快将学习一些快速的排版指南，这将有助于纠正视觉层次。
5\. Remove unnecessary styles
5\. 删除不必要的样式
Unnecessary information and visual styles can be distracting and can increase cognitive load (the amount of brain power required to use an interface). Avoid unnecessary lines, colours, backgrounds, and animations to create a simpler, more focused interface.
不必要的信息和视觉样式会分散注意力，增加认知负荷（使用界面所需的大脑能量）。避免不必要的线条、颜色、背景和动画，以创建一个更简单、更专注的界面。
In our example, the white space and borders around the image add unnecessary visual complexity. They’re not needed to convey information or group elements, so we can safely remove them to simplify the design.
在我们的例子中，图像周围的空白和边框增加了不必要的视觉复杂性。它们不需要传达信息或分组元素，因此我们可以安全地将它们移除以简化设计。
6\. Use colour purposefully
6\. 有目的地使用颜色
Use colour sparingly and with purpose. Try to avoid using colour purely for decoration, as it can be confusing and distracting. Start with black and white and introduce colour where it conveys meaning.
谨慎地并有目的地使用颜色。尽量避免仅仅为了装饰而使用颜色，因为这可能会造成混乱和分散注意力。从黑白开始，只在需要传达意义的地方引入颜色。
A simple and effective approach is to apply the brand colour to interactive elements like text links and buttons. This helps teach people what’s interactive and what’s not. Try to avoid using the brand colour on non-interactive elements.
一个简单而有效的方法是将品牌颜色应用于文本链接和按钮等交互元素上。这有助于教导人们什么是可交互的，什么是不可交互的。尽量避免在非交互元素上使用品牌颜色。
You don’t need to add colour to all interactive elements, as some already have visual cues that indicate they’re interactive. For example, the cards in the following example still feel interactive, with or without the blue coloured link.
您不需要为所有的交互元素添加颜色，因为有些已经有视觉提示表明它们是可交互的。例如，下面的示例中的卡片即使没有蓝色链接，仍然具有交互性。
In our original example, the blue heading might look nice, but it makes the text seem interactive. To help avoid confusion, we remove the blue colour from the heading as it’s not interactive.
在我们的原始示例中，蓝色的标题可能看起来很漂亮，但它会让文本看起来具有互动性。为了避免混淆，我们将标题中的蓝色去掉，因为它并不具有互动性。
We also remove the blue colour from other non-interactive elements like the star rating. This makes it much easier to see what’s interactive and what’s not.
我们还将星级评分等其他非交互元素的蓝色去除，这样更容易区分哪些是可交互的，哪些不是。
7\. Ensure interface elements have a 3:1 contrast ratio
确保界面元素具有3:1的对比度比例
Contrast is a measure of the difference in perceived brightness between two colours. It’s expressed as a ratio ranging from 1:1 to 21:1. For example, black text on a black background has the lowest 1:1 contrast ratio, whereas black text on a white background has the highest 21:1 ratio. There are many online tools to help you measure contrast ratios between different colours.
对比度是衡量两种颜色之间感知亮度差异的度量。它以1:1到21:1的比率表示。例如，黑色背景上的黑色文字具有最低的1:1对比度比率，而黑色文字在白色背景上具有最高的21:1比率。有许多在线工具可帮助您测量不同颜色之间的对比度比率。
In order to help ensure people with vision impairments can clearly see interface details, aim to at least meet Web Content Accessibility Guidelines (WCAG) 2.1 level AA colour contrast requirements. This means user interface elements, like form fields and buttons, need to have at least a 3:1 contrast ratio.
为了帮助确保视力受损的人能够清晰地看到界面细节，请努力至少满足Web内容无障碍指南（WCAG）2.1级AA色彩对比要求。这意味着用户界面元素，如表单字段和按钮，需要至少具有3:1的对比度比例。
In our example, the arrow icon contrast is too low. Adding a shadow to the icon and a gradient overlay on the top third of the image gives the icon sufficient 3:1 contrast, regardless of the image it sits on.
在我们的示例中，箭头图标的对比度太低。给图标添加阴影，并在图像的顶部三分之一处添加渐变叠加，无论它所在的图像如何，都能给图标提供足够的3:1对比度。
The primary button contrast in the original example was also too low. We fixed it previously when addressing the visual hierarchy, but it’s also worth mentioning here.
原始示例中的主要按钮对比度也太低了。我们之前在解决视觉层次时已经修复了它，但在这里也值得一提。
The risk with the low contrast button is that people with low vision might not identify it as a button, as they can’t see the button shape. Increasing the button contrast ratio above 3:1 makes the button accessible and also helps correct the visual hierarchy.
低对比度按钮的风险在于视力较差的人可能无法将其识别为按钮，因为他们无法看到按钮的形状。将按钮的对比度比例提高到3:1以上可以使按钮易于访问，并且有助于纠正视觉层次结构。
Increasing the arrow and button contrast to a ratio above 3:1 gives us the following design. We’re getting there bit by bit, but we’ve still got more issues to fix.
将箭头和按钮的对比度提高到3:1以上，我们得到了以下设计。我们正在逐步改进，但还有更多问题需要解决。
8\. Ensure text has a 4.5:1 contrast ratio
确保文本具有4.5:1的对比度比例
In order to help ensure people with vision impairments can clearly read text, it needs to meet the following WCAG 2.1 level AA contrast requirements:
为了帮助确保视力受损的人能够清晰地阅读文本，它需要满足以下 WCAG 2.1 AA 级对比度要求：
- Small text (18px and under) needs a minimum contrast of 4.5:1. 小文字（18像素及以下）需要最低对比度为4.5:1。
- Large text (above 18px with bold weight or above 24px with regular weight) needs a minimum contrast of 3:1. 大号文本（18像素以上，加粗字重或24像素以上，常规字重）需要至少3:1的对比度。
In our example, the small text in the photo count element has insufficient contrast. We increase the contrast ratio above 4.5:1 by increasing the opacity of the grey container and also adding a text shadow.
在我们的示例中，照片中的小文本计数元素对比度不足。我们通过增加灰色容器的不透明度并添加文本阴影，将对比度比例提高到4.5:1以上。
The contrast of the location text is also too low. The thin font weight makes it even harder to read. Using a darker shade of grey helps make the text more accessible. We’ll make further updates to the text to improve it shortly.
位置文本的对比度也太低了。细字重量使阅读变得更加困难。使用较深的灰色阴影有助于提高文本的可读性。我们将很快对文本进行进一步更新以改进它。
9\. Don’t rely on colour alone as an indicator
9\. 不要仅仅依靠颜色作为指示器
There are many different types of colour blindness and they mainly affect men. Commonly, people who are colour blind have difficulty distinguishing between red and green, but some aren’t able to see any colour at all.
有许多不同类型的色盲，主要影响男性。通常，色盲者难以区分红色和绿色，但有些人则完全无法看到任何颜色。
To ensure an interface is accessible to those who are colour blind, you can’t rely on colour alone to convey meaning or distinguish visual elements. You need to use additional visual cues to differentiate interface elements.
为了确保界面对色盲人士可访问，你不能仅仅依赖颜色来传达意义或区分视觉元素。你需要使用额外的视觉提示来区分界面元素。
In our example, the colour blue is used on the “reviews” text to indicate that it’s a link. If colour is removed, the link text looks the same as other text, so the colour blind can’t tell it’s a link. Underlining the link text clearly differentiates it from other text in the absence of colour.
在我们的示例中，蓝色被用于“reviews”文本上，以表示它是一个链接。如果去掉颜色，链接文本看起来与其他文本相同，因此色盲无法辨别它是一个链接。在没有颜色的情况下，给链接文本加下划线可以清晰地将其与其他文本区分开来。
10\. Use a single sans serif typeface
10\. 使用一种无衬线字体
A typeface is a set of related fonts with a similar style or aesthetic. Helvetica is an example of a typeface. Fonts are variations within a typeface, like weights or sizes. For example, Helvetica bold and Helvetica regular are 2 different fonts within the Helvetica typeface.
字体是一组具有相似风格或美学的相关字体。Helvetica是一个字体的例子。字体是字体中的变体，如粗细或大小。例如，Helvetica bold和Helvetica regular是Helvetica字体中的两种不同字体。
It’s safest to use a single sans serif typeface for interface design, as they’re generally the most legible, neutral, and simple.
在界面设计中，使用单一的无衬线字体是最安全的选择，因为它们通常具有最易读、中性和简洁的特点。
In our example, the heading uses a detailed serif typeface that’s a bit difficult to read and could be distracting to some. It also has a personality that might not match some of the photos in this property rental app. Simplifying it using a sans serif typeface can help improve usability and aesthetics.
在我们的示例中，标题使用了一种详细的衬线字体，这种字体有点难以阅读，可能会分散注意力。它的个性也可能与这个房屋租赁应用中的一些照片不匹配。使用无衬线字体来简化它可以提高可用性和美观度。
11\. Use a typeface with taller lower case letters
11\. 使用具有较高小写字母的字体
Look for typefaces with taller lower case letters and greater letter spacing, as they’re generally more legible at small sizes. The height of lowercase letters in a typeface is known as the x-height.
寻找具有较高的小写字母和更大的字母间距的字体，因为它们在小尺寸下通常更易读。字体中小写字母的高度被称为x高度。
Our example uses the Gill Sans typeface, which has a relatively low x-height. Changing the typeface to one with a larger x-height, like Lato, helps to improve readability.
我们的示例使用了Gill Sans字体，它的x高度相对较低。将字体更改为具有较大x高度的字体，如Lato，有助于提高可读性。
Here’s what our example looks like after the typeface is updated from Gill Sans to Lato.
这是我们的示例在字体从Gill Sans更新为Lato后的样子。
12\. Limit the use of uppercase
12\. 限制大写字母的使用
Unless you’re shouting at people, there aren’t many valid reasons to use uppercase. IT’S LOUD AND DIFFICULT TO READ.
除非你在对人大喊大叫，否则没有太多合理的理由使用大写字母。它太吵闹且难以阅读。
When you read, you look at the shape of a word, rather than looking at each letter. The shape helps you recognise the word more quickly. Uppercase words all have the same rectangular shape. This forces you to read each letter one by one.
当你阅读时，你看的是一个单词的形状，而不是每个字母。形状能帮助你更快地识别单词。大写字母的单词都有相同的矩形形状。这迫使你逐个字母地阅读。
In our example, the location text uses uppercase. Changing it to sentence case, where only the first word and proper nouns (names of people, places or things) are capitalised, helps to improve readability.
在我们的示例中，位置文本使用大写字母。将其改为句子大小写，即只有第一个单词和专有名词（人名、地名或物名）首字母大写，有助于提高可读性。
13\. Use regular and bold font weights only
13\. 仅使用常规和粗体字重
Just because there are lots of font weights available in a typeface, doesn’t mean you need to use all of them in your designs. Using lots of different font weights can add noise and clutter to your interface. It also makes it more difficult to use each font weight consistently.
仅仅因为一个字体中有很多字重可供选择，并不意味着你需要在设计中使用所有字重。使用过多不同的字重会给界面增加噪音和混乱。它还会使得每个字重的使用变得更加困难。
Keep your design system simple and concise by using regular and bold font weights only.
只使用常规和粗体字重，使您的设计系统简单而简洁。
Quick usage tips: 快速使用提示：
- Use bold font weight for headings to emphasise them. 使用粗体字体以突出标题。
- Use regular font weight for other smaller text. 其他较小的文本请使用常规字重。
- If you decide to use very thin or thick font weights, reserve them for headings and larger text, as they can be difficult to read at smaller sizes. 如果你决定使用非常细或非常粗的字体，最好将它们保留给标题和较大的文字，因为在较小的尺寸下阅读可能会有困难。
In our example, the location text uses a light font weight. Even though we’ve increased the contrast above the required 4.5:1 contrast ratio, the thin characters could still be difficult for some people to read. Increasing the font weight to regular helps improve readability and simplifies the design.
在我们的示例中，位置文本使用了较轻的字体。尽管我们已经将对比度提高到了所需的4.5:1对比度比例以上，但细小的字符仍然可能对某些人阅读困难。将字体的粗细增加到正常可以提高可读性并简化设计。
14\. Avoid pure black text
14\. 避免使用纯黑色文字
For UI design, it’s generally safest to avoid pure black, as it has a very high contrast against white. This high contrast can cause eye strain and fatigue when reading text.
对于UI设计来说，最好避免使用纯黑色，因为它与白色形成了非常高的对比度。这种高对比度会导致阅读文本时眼睛疲劳和不适。
Black has 0% colour brightness and white has 100% colour brightness. The large difference in colour brightness causes our eyes to work harder. It’s safest to avoid pure black against white and opt for a dark grey instead.
黑色的色亮度为0%，而白色的色亮度为100%。色亮度的巨大差异会使我们的眼睛更加努力。最安全的做法是避免纯黑与白色的对比，而选择深灰色。
In our example, pure black is used on multiple elements. Changing it to a dark grey helps to improve readability. Previously when looking at visual hierarchy, we noted that the property description text was too prominent. To make sure interface elements are presented in order of importance, we use a lighter grey for the property description text to decrease its prominence.
在我们的示例中，多个元素使用了纯黑色。将其改为深灰色有助于提高可读性。之前在查看视觉层次时，我们注意到属性描述文本过于突出。为了确保界面元素按重要性顺序呈现，我们使用了较浅的灰色来减弱属性描述文本的突出性。
15\. Left align text 15\. 左对齐文本
English is read from left to right, downwards in an F-shaped pattern. So it’s best to keep text left aligned for optimal readability. For long body text, it’s safest to avoid centre aligned or justified text. It’s more difficult to read, especially for those with cognitive disabilities.
英语是从左到右阅读的，以F形状的模式向下阅读。因此，最好将文本左对齐以获得最佳可读性。对于长篇正文，最安全的做法是避免居中对齐或两端对齐的文本。这样更难阅读，尤其对于认知障碍者来说。
Centre alignment can work for headings and short text, as it can be quickly read. However, centre alignment makes longer body text harder to read, because the starting point of each line constantly changes. Your eyes need to work harder to find the starting point of each line.
居中对齐适用于标题和短文本，因为可以快速阅读。然而，对于较长的正文来说，居中对齐会使阅读变得更加困难，因为每行的起始点不断变化。你的眼睛需要更加努力地找到每行的起始点。
In our example, the property description text is centre aligned. Left aligning the text improves readability and is also consistent with the left aligned text above.
在我们的示例中，属性描述文本是居中对齐的。将文本左对齐可以提高可读性，并且与上方的左对齐文本保持一致。
16\. Use at least 1.5 line height for body text
16\. 正文文本的行高至少为1.5倍。
Line height is the vertical distance between two lines of text. The space between lines helps prevent people from rereading the same line of text. It also looks and feels more comfortable to read.
行高是两行文字之间的垂直距离。行与行之间的间距有助于防止人们重读同一行文字。同时，它也使阅读更加舒适和自然。
For accessibility and readability, especially for long body text, ensure that line height is at least 1.5 (150%). Keeping line height between 1.5 and 2 generally works well.
为了提高可访问性和可读性，尤其是对于长篇正文，确保行高至少为1.5（150%）。保持行高在1.5到2之间通常效果良好。
In our example, the line height is only 1 (100%). Increasing it to 1.6 (160%) helps to improve readability.
在我们的例子中，行高只有1（100%）。将其增加到1.6（160%）有助于提高可读性。
We fixed it! 我们修好了！
With a handful of simple but powerful UI design guidelines, we quickly found and fixed a whole bunch of problems with our example design.
凭借一些简单但强大的用户界面设计准则，我们迅速发现并修复了我们示例设计中的一系列问题。
I hope you’re starting to see that UI design doesn’t have to be so hard. It might appear to be a magical art form, but a lot of it is made up from logical rules or guidelines like the ones we just learned. Using objective logic, rather than subjective opinion, makes it faster and easier to design intuitive, accessible, and beautiful interfaces.
希望你开始意识到UI设计并不需要那么难。它可能看起来像是一门神奇的艺术形式，但其中很大一部分是由逻辑规则或指南构成的，就像我们刚刚学到的那些。使用客观的逻辑，而不是主观的意见，可以更快、更容易地设计直观、易于访问和美观的界面。