2019-08-10

7 Rules for Creating Gorgeous UI

如何快速设计出迷人的UI？你需要掌握这七个潜规则！

Introduction·前言

OK, first things first. This guide is not for everyone. Who is this guide for?
好的，首先要做的事情。本指南并非适合所有人。这个指南是谁？

Developers who want to be able to design their own good-looking UI in a pinch.
希望能够在紧要关头设计自己的漂亮UI的开发人员。

UX designers who want their portfolio to look better than a Pentagon PowerPoint. Or UX designers who know they can sell an awesome UX better in a pretty UI package.
用户体验设计师希望他们的产品组合看起来比五角大楼PowerPoint更好。或者知识产权设计师，他们知道他们可以在漂亮的UI包中更好地销售出色的用户体验。

If you went to art school or consider yourself a UI designer already, you will likely find this guide some combination of a.) boring, b.) wrong, and c.) irritating. That’s fine. All your criticisms are right. Close the tab, move along.
如果你去艺术学校或者认为自己已经是一名UI设计师了，你可能会发现这本指南的一些组合：a。无聊，b。）错误，c。）刺激性。没关系。你所有的批评都是正确的。关闭标签，继续前进。

Let me tell you what you’ll find in this guide.
让我告诉你在本指南中你会发现什么。

First, I was a UX designer with no UI skills. I love designing UX, but I wasn’t doing it for long before I realized there were a bunch of good reasons to learn how to make an interface look nice:
首先，我是一名没有UI技能的用户体验设计师。我喜欢设计用户体验，但在我意识到有一些很好的理由来学习如何使界面看起来不错之前，我并没有这么做。

My portfolio looked like crap, reflecting poorly on my work and thought process
我的投资组合看起来像废话，反映了我的工作和思考过程

My UX consulting clients would rather buy someone’s skills if their expertise extended to more than just sketching boxes and arrows
我的用户体验咨询客户宁愿购买某人的技能，如果他们的专业知识不仅仅是草绘盒子和箭头

Did I want to work for an early-stage startup at some point? Best to be a sweeper
我想在某个时候为早期创业公司工作吗？最好是清扫工

I had my excuses. I don’t know crap about aesthetics. I majored in engineering – it’s almost a badge of pride to build something that looks awful.
我有我的借口。我不知道关于美学的废话。我主修工程学 - 这几乎是构建看起来很糟糕的东西的骄傲徽章。

“I majored in engineering — it’s almost a badge ofpride to build something that looks awful.”
“我主修工程学 - 它几乎是构建看起来很糟糕的东西的骄傲徽章。”

In the end, I learned the aesthetics of apps the same way I’ve learned any creative endeavor: cold, hard analysis. And shameless copying of what works. I’ve worked 10 hours on a UI project and billed for 1. The other 9 were the wild flailing of learning. Desperately searching Google and Pinterest and Dribbble for something to copy from.
最后，我学习了应用程序的美学，就像我学习任何创造性的努力一样：冷酷，难以分析。并且无耻地复制有效的东西。我在一个UI项目上工作了10个小时并且为1付费。其他9个是学习的疯狂。拼命搜索谷歌，Pinterest和Dribbble，以便从中复制。

These “rules” are the lessons from those hours.
这些“规则”是那些时间的教训。

So word to the nerds: if I’m any good at designing UI now, it’s because I’ve analyzed stuff — not because I came out the chute with an intuitive understanding of beauty and balance.
对于书呆子这么说：如果我现在擅长设计UI，那是因为我分析了一些东西 - 不是因为我通过对美感和平衡的直观理解而走出滑槽。

This article is not theory. This article is pure application. You won’t see anything about golden ratios. I don’t even mention color theory. Only what I’ve learned from being bad and then deliberately practicing.
这篇文章不是理论。本文是纯粹的应用程序。你不会看到有关黄金比例的任何信息。我甚至没有提到色彩理论。只有我从坏事中学到的，然后刻意练习。

Think of it this way: Judo was developed based on centuries of Japanese martial and philosophical traditions. You take judo lessons, and in addition to fighting, you’ll hear a lot about energy and flow and harmony. That sort of stuff.
可以这样想：柔道是基于几个世纪的日本武术和哲学传统而发展起来的。你参加柔道课程，除了战斗，你还会听到很多关于能量，流动和和谐的知识。那种东西。

Krav Maga, on the other hand, was invented by some tough Jews who were fighting Nazis in the streets of 1930s Czechoslovakia. There is no art to it. In Krav Maga lessons, you learn how to stab someone’s eye with a pen and book it.
另一方面，Krav Maga是由一些在20世纪30年代捷克斯洛伐克街头与纳粹作战的强硬犹太人发明的。它没有艺术。在Krav Maga课程中，您将学习如何用笔刺伤别人的眼睛并预订。

---

The Rules·规则

Here they are:

1.Light comes from the sky
2.Black and white first
3.Double your whitespace
4.Learn the methods of overlaying text on images (see Part 2)
5.Make text pop — and un-pop (see Part 2)
6.Only use good fonts (see Part 2)
7.Steal like an artist (see Part 2)

1.光来自天空
2.黑白第一
3.加倍你的空白
4.了解在图像上叠加文本的方法（参见第2部分）
5.使文本弹出 - 取消弹出（参见第2部分）
6.只使用好的字体（见第2部分）
7.偷艺术家（见第2部分）

---

Rule 1: Light Comes From the Sky·光来自天空

Shadows are invaluable cues in telling the human brain what user interface elements we’re looking at.
阴影是告诉人类大脑我们正在看什么用户界面元素的无价线索。

This is perhaps the most important non-obvious thing to learn about UI design: light comes from the sky. Light comes from the sky so frequently and consistently that for it to come from below actually looks freaky.
这可能是了解UI设计最重要的非显而易见的事情：光来自天空。光线来自天空如此频繁和持续，以至于从下面来的它实际上看起来很怪异。

When light comes from the sky, it illuminates the tops of things and casts shadows below them. The tops of stuff are lighter, the bottoms are darker.
当光线来自天空时，它照亮了物体的顶部并在它们下面投下阴影。东西的顶部较轻，底部较暗。

You wouldn’t think of people’s lower eyelids as being particularly shaded, but shine some light on those suckers and all of a sudden it’s demon girl at your front door.
你不会认为人的下眼睑特别阴影，但是会对那些吸盘有所启发，突然之间它就是你前门的恶魔女孩。

woooooooo

Well, the same is true for UI. Just as we have little shadows on all the undersides of all our facial features, there are shadows on the undersides of tons of UI elements. Our screens are flat, but we’ve invested a great amount of art into making so many elements on them appear be 3-D.
嗯，UI也是如此。就像我们在所有面部特征的所有底面上都有小阴影一样，在大量 UI元素的底面上有阴影。我们的屏幕是扁平的，但我们投入了大量的艺术品来制作它们上面的许多元素看起来都是三维的。

My favorite part of this image is the poker finger in the lower-right. 我最喜欢的部分是右下方的扑克手指。

Take buttons. Even with this relatively “flat” button, there are still a handful of light-related details:
拿按钮。即使使用这个相对“平坦”的按钮，仍然有一些与光有关的细节：

1.The unpushed button (top) has a darkened bottom edge. Sun don’t shine there, son.
未按下的按钮（顶部）有一个黑暗的底边。儿子，太阳不亮了。

2.The unpushed button is slightly brighter at the top than at the bottom. This is because it imitates a slightly curved surface. Just as how you’d need to tilt a mirror held in front of you up to see the sun in it, surfaces that are tilted up reflect a biiiiit more of the sun’s light towards you.
未按下的按钮在顶部比在底部略亮。这是因为它模仿了略微弯曲的表面。就像你需要倾斜在你面前的镜子倾斜以看到太阳在其中一样，向上倾斜的表面反射出更多的阳光照射到你身上。

3.The unpushed button casts a subtle shadow – perhaps easier to see in the magnified section.
未按下的按钮投下一个微妙的阴影 - 在放大的部分可能更容易看到。

4.The pushed button, while still darker at the bottom than at the top, is overall darker – this is because it’s at the plane of the screen and the sun can’t hit it as easily. One could argue that all the pushed buttons we see in real life are darker too, because our hands are blocking the light.
按下的按钮虽然底部比顶部更暗，但是总体上更暗 - 这是因为它位于屏幕的平面上，太阳不能轻易地击中它。有人可能会争辩说，我们在现实生活中看到的所有按钮都是较暗的，因为我们的手挡住了光线。

That was just a button, and yet there are these 4 little light effects present. That’s the lesson here. Now we just apply it to everything.
那只是一个按钮，但是这里有4个小灯光效果。这就是我们的教训。现在我们只将它应用于一切。

iOS 6 is old news, but it makes a good case study in light behavior. iOS 6是旧闻，但它在轻松行为方面做了很好的案例研究。

Here is a pair of iOS 6 settings — “Do Not Disturb” and “Notifications”. NBD, right? But look how many light effects are going on with them.
这是一对iOS 6设置 - “请勿打扰”和“通知”。NBD，对吗？但看看它们有多少光效。

• The top lip of the inset control panel casts a small shadow
  嵌入式控制面板的上唇投下一个小阴影

• The “ON” slider track is also immediately set in a bit
  “ON”滑块轨道也会立即设置

• The “ON” slider track is concave and the bottom reflects more light
  “ON”滑块轨道是凹形的，底部反射更多光线

• The icons are set out a bit. See the bright border around the top of them? This represents a surface perpendicular to the light source, hence receiving a lot of light, hence bouncing a lot of light into your eyes.
  图标设置了一下。看到它们顶部周围的明亮边框？这代表垂直于光源的表面，因此接收大量光线，从而将大量光线反射到您的眼睛中。

• The divider notch is shadowed where angled away from the sun and vice versa
  分隔器凹口被遮挡，远离太阳成角度，反之亦然

A close-up of a divider notch, from an old concept of mine. 分裂器凹口的特写镜头，从我的一个老概念。

Elements that are generally inset:
通常插入的元素：

• Text input fields文本输入字段

• Pressed buttons按下按钮

• Slider tracks滑块轨道

• Radio button (unselected)单选按钮（未选中）

• Checkboxes复选框

Elements that are generally outset:
通常开始的元素：

• Buttons (unpressed)按钮（未按下）

• Slider buttons滑块按钮

• Dropdown controls下拉控件

• Cards牌

• The button part of a selected radio button所选单选按钮的按钮部分

• Popups弹出窗口

Now that you know, you’ll notice it everywhere. You’re welcome, kid.
既然你知道，你会发现它到处都是。小孩，你很受欢迎。

Wait, what about flat design, Erik?
等等，平面设计怎么样，Erik？

We’re 5 years into a trend of “flat design”, which is, well, exactly what it sounds like. Flat design is a visual style in which the elements lack simulated indentations or protrusions. They’re just lines and shapes of solid color.
我们已经有5年的时间进入“平面设计”的潮流，这就是它听起来的样子。平面设计是一种视觉风格，其中元素缺少模拟压痕或突起。它们只是纯色的线条和形状。

image.png

I love clean and simple as much as the next guy, but I don’t think this is a long-term trend here. The subtle simulation of 3-D in our interfaces seems far too intuitive to give up entirely.
我和下一个人一样喜欢干净简单，但我不认为这是一个长期的趋势。在我们的界面中对3-D的微妙模拟似乎太过直观而不能完全放弃。

Five years ago, I predicted we’d see a rise of “flatty design”, and, at least of 2019, that’s where we are – elements of flat’s clean appearance, with a dusting of shadows to help us figure out what we’re looking at.
五年前，我预测我们会看到“扁平设计”的兴起，至少在2019年，这就是我们所处的位置 - 平面外观的元素，阴影的尘埃，帮助我们弄清楚我们是什么看着。

image.png

We live in a golden age, here in this happy medium between difficult-to-get-right skeuomorphism and usability-challenged flat design. Flatty is still clean, still simple, but you’ll have some shadows and cues for what to tap/slide/click.
我们生活在一个黄金时代，在这个令人愉快的媒介中，在难以获得的正确的特征和可用性挑战的平面设计之间。Flatty仍然干净，仍然很简单，但你会有一些阴影和线索来点击/滑动/点击。

OS X Yosemite— flatty, not flat. OS X Yosemite-扁平，不平坦。

Or, another example of flatty design: Google’s Material Design language.
或者，另一个扁平设计的例子：谷歌的Material Design语言。

image.png

This is the sort of thing I see sticking around.
这是我看到的那种东西。

It uses subtle real-world cues to convey information. Key word, subtle.
它使用微妙的现实世界提示来传达信息。关键词，微妙。

You can’t say it doesn’t imitate the real-world, but it’s also not the web of 2006. There are no textures, no sheens, and the only gradients are purely decorative.
你不能说它不模仿现实世界，但它也不是2006年的网络。没有纹理，没有光泽，唯一的渐变是纯粹的装饰。

Flatty is the way of the future, I think. Flat? Psh, just a thing of the past.
我想，Flatty是未来的发展方向。平面？Psh，只是过去的事情。

---

Rule 2: Black and White First·黑白优先

Designing in grayscale before adding color simplifies the most complex element of visual design– and forces you to focus on spacing and laying out elements.
在添加颜色之前进行灰度设计简化了视觉设计中最复杂的元素，并迫使您专注于间距和布局元素。

UX designers are really into designing “mobile-first” these days. That means you think about how pages and interactions work on a phone before imagining them on your zillion-pixel Retina monitor.
UX设计师现在正在设计“移动优先”。这意味着您可以在想象它们在数百万像素Retina显示器上之前考虑手机上的页面和交互如何工作。

That sort of constraint is great. It clarifies thinking. You start with the harder problem (usable app on a teeny-weeny screen), then adopt the solution to the easier problem (usable app on a large screen).
这种约束很棒。它澄清了思考。你从更难的问题开始（在一个微小的屏幕上可用的应用程序），然后采用解决方案来解决更容易的问题（在大屏幕上可用的应用程序）。

Well here’s another similar constraint: design black and white first. Start with the harder problem of making the app beautiful and usable in every way, but without the aid of color. Add color last, and even then, only with purpose.
那么这是另一个类似的约束：首先设计黑色和白色。从困难的问题开始，使应用程序美观，可用于各种方式，但没有颜色的帮助。最后添加颜色，即使这样，只有目的。

Haraldur Thorleifsson’s grayscale wireframes look as good as lesser designer’s finished sites. Haraldur Thorleifsson的灰度线框看起来和较小的设计师完成的网站一样好。

There are some cases where B&WF isn’t as useful. Designs that have a strong specific attitude— “sporty”, “flashy”, “cartoony”, etc. — need a designer who can use color extremely well. But most apps don’t have a specific attitude except clean and simple. Those that do are admittedly much harder to design.
这是让应用程序看起来“干净”和“简单”的可靠而简单的方法。在太多的地方有太多的颜色是一个非常简单的方法搞砸干净/简单。B＆WF迫使您首先关注间距，尺寸和布局等内容。这些是清洁简单设计的主要问题。

Classy grayscale.优雅的灰度。

There are some cases where B&WF isn’t as useful. Designs that have a strong specific attitude— “sporty”, “flashy”, “cartoony”, etc. — need a designer who can use color extremely well. But most apps don’t have a specific attitude except clean and simple. Those that do are admittedly much harder to design.
在某些情况下，B＆WF不那么有用。具有强烈特定态度的设计 - “运动型”，“华丽”，“卡通”等 - 需要能够非常好地使用颜色的设计师。但大多数应用程序没有特定的态度，除了干净和简单。那些确实难以设计的东西。

image.png Flashy and vibrant designs by Julien Renvoye (left) and Cosmin Capitanu (right). Harder than it looks. 由Julien Renvoye(左)和Cosmin Capitanu(右)设计的华丽而充满活力的设计。比看起来难。

For all the rest, there’s B&WF.
对于所有其他人，有B＆WF。

Step 2: How to add color
The simplest color to add is one color.
最简单的颜色是一种颜色。

[图片上传失败...(image-dda134-1565414029639)]
Adding one color to a grayscale site draws the eye simply and effectively.
在灰度网站上添加一种颜色可以简单有效地吸引眼球。

[图片上传失败...(image-731c7a-1565414029639)]

You can also take it one step up. Grayscale + two colors, or grayscale + multiple colors of a single hue.
你也可以迈出一步。灰度+ 两种颜色，或灰度+单色调的多种颜色。

Color codes in practice — i.e. wait, what’s a hue?
实践中的颜色代码 - 即等待，什么是色调？

The web by and large talks about color as RGB hex codes. It’s most useful to ignore those. RGB is not a good framework for coloring designs. Much more useful is HSB (which is synonymous with HSV, and similar to HSL).
网络大体上谈论颜色为RGB十六进制代码。忽略这些是最有用的。RGB不是着色设计的好框架。更有用的是HSB（与HSV同义，与HSL类似）。

HSB is better than RGB because it fits with the way we think about color naturally, and you can predict how changes to the HSB values will affect the color you’re looking at.
HSB优于RGB，因为它符合我们自然思考颜色的方式，您可以预测HSB值的变化将如何影响您正在查看的颜色。

If this is news to you, here’s a good primer on HSB colors.
如果这对你来说是新闻，这里有一篇关于HSB颜色的好的入门读物。

Single-hue gold theme from Smashing Magazine. 来自Smashing Magazine的单色金色主题。 Single-hue blue theme from Smashing Magazine. 来自Smashing Magazine的单色蓝色主题。

By modifying the saturation and brightness of a single hue, you can generate multiple colors— darks, lights, backgrounds, accents, eye-catchers— but it’s not overwhelming on the eye.
通过修改单个色调的饱和度和亮度，您可以生成多种颜色 - 黑暗，灯光，背景，重音，捕捉眼睛 - 但它并不会让人眼花缭乱。

Using multiple colors from one or two base hues is the most reliable way to accentuate and neutralize elements without making the design messy.
使用来自一个或两个基色调的多种颜色是在不使设计混乱的情况下强调和中和元素的最可靠方法。

Countdown timer by Kerem Suer Kerem Suer的倒数计时器

In my experience, adjusting your theme color to fit the use-cases your UI calls for is the most important skill in using color, and I’ve written a practical guide to it here.
根据我的经验，调整主题颜色以适应UI所需的用例是使用颜色最重要的技巧，我在这里写了一个实用的指南。

A few other notes on color
关于颜色的一些其他说明

Color is the most complicated area of visual design. And while a lot of stuff on color is obtuse and not practical for finishing the design in front of you, I’ve seen some really good stuff out there.
颜色是视觉设计中最复杂的领域。虽然很多颜色的东西是钝的，并且不适合在你面前完成设计，但我已经看到了一些非常好的东西。

A small toolbox:
一个小工具箱：

• Learn UI Design. Shameless plug: this is a course I’ve created, and it contains 3 hours of video about designing with color (and over 20 hours of total videos on UI design topics). Check it out at learnui.design.

学习UI设计。无耻的插件：这是我创建的一门课程，它包含3小时的关于彩色设计的视频（以及超过20小时的UI设计主题视频）。在 learnui.design上查看。

• Color in UI Design: A (Practical) Framework. If you liked this section, but want to hear more about color (as opposed to just black and white), this is your article. And guess who wrote it!
  UI设计中的颜色：（实用）框架。如果你喜欢这个部分，但想要了解更多关于颜色（而不仅仅是黑色和白色），这是你的文章。猜猜是谁写的！

• Never Use Black (Ian Storm Taylor). Talks about how totally flat grays almost never appear in the real-world, and how saturating your shades of gray– especially your darker shades– adds a visual richness to your designs. Plus, saturated grays more closely mimic the real-world, which is its own virtue.
  永远不要使用黑色（伊恩风暴泰勒）。谈论完全平坦的灰色几乎从未出现在现实世界中，以及如何使灰色阴影饱和 - 特别是你的深色调 - 为你的设计增添了视觉上的丰富感。此外，饱和灰色更接近现实世界，这是它自己的美德。

• Accessible Color Generator. A handy tool for taking one color (your theme color, logo color, etc) and turning it into a whole, accessible color palette.
  可访问的颜色生成器。一种方便的工具，用于获取一种颜色（您的主题颜色，徽标颜色等）并将其转换为整个可访问的调色板。

• Dribbble search-by-color. Another awesome way to find what works with a particular color. Talk about practical. If you already have one color decided, come look at what the world’s best designers are doing/matching with that color.
  Dribbble按颜色搜索。找到适合特定颜色的另一种很棒的方法。谈实用。如果你已经确定了一种颜色，那么来看看世界上最好的设计师正在做什么/与那种颜色匹配。

---

Rule 3: Double your whitespace·加倍你的空白

To make UI that looks designed, add a lot of breathing room.
要使外观设计的UI，增加大量的喘息空间。

In Rule 2, I said that B&WF forces designers to think about spacing and layout before considering color, and how that’s a good thing. Well, it’s time we talk about spacing and layout.
在规则2中，我说B＆WF迫使设计师在考虑颜色之前考虑间距和布局，以及这是一件好事。好吧，是时候讨论间距和布局了。

If you’ve coded HTML from scratch, you’re probably familiar with the way HTML is, by default, laid out on the page.
如果您从头开始编写HTML，那么您可能熟悉默认情况下HTML在页面上的布局方式。

image.png

Basically, everything is smashed towards the top of the screen. The fonts are small; there’s absolutely no space between lines. There’s a biiit of space between paragraphs, but it isn’t much. The paragraphs just stretch on to the end of the page, whether that’s 100 px or 10,000 px.
基本上，一切都被砸到了屏幕的顶部。字体很小; 线条之间绝对没有空间。有一个biiit的段落之间的空间，但并不多。段落只是延伸到页面的末尾，无论是100 px还是10,000 px。

Aesthetically speaking, that’s awful. If you want to make UI that looks designed, you need to add in a lot of breathing room.
从美学角度讲，这太糟糕了。如果你想制作外观设计的 UI ，你需要增加很多喘息空间。

Sometimes a ridiculous amount.
有时是一个荒谬的数额。

Whitespace, HTML, and CSS
空白，HTML和CSS

If you, like me, are used to formatting with CSS, where the default is no whitespace, it’s time to untrain yourself of those bad habits. Start thinking of whitespace as the default— everything starts as whitespace, until you take it away by adding a page element.
如果你和我一样习惯于使用CSS进行格式化，默认情况下没有空格，那么就应该自己解决这些坏习惯了。开始将空白视为默认空间 - 所有内容都以空格开头，直到您通过添加页面元素将其删除。
Sound zen? I think it’s a big reason people still sketch this stuff out on paper.
声音禅？我认为这是人们在纸上画出这些东西的一个重要原因。
Starting with a blank page means starting with nothing but whitespace. You think of margins and spacing right from the very beginning. Everything you draw is a conscious whitespace-removing decision.
从空白页开始意味着从空白开始。你从一开始就想到了边距和间距。你绘制的所有内容都是有意识的删除空白的决定。
Starting with a bunch of unstyled HTML means starting with content. Spacing is the afterthought. It has to be explicitly stated.
从一堆无格式的HTML开始意味着从内容开始。间距是事后的想法。必须明确说明。

Here’s an illustrative music player concept by Piotr Kwiatkowski.

这是Piotr Kwiatkowski的说明性音乐播放器概念。

Pay particular attention to the menu on the left.
请特别注意左侧的菜单。

左菜单

The vertical space between the menu items is fully twice the height of the text itself. You’re looking at 12px font with just as much padding above and below it.
菜单项之间的垂直空间是文本本身高度的两倍。您正在查看12px字体，其上方和下方的填充量都相同。

Or take a look at the list titles. There’s a 15px space between the word “PLAYLISTS” and its own underline. That’s more than the cap height of the font itself! And that’s to say nothing of the 25 pixels between the lists.
或者看看列表标题。单词“PLAYLISTS”和它自己的下划线之间有15px的空格。这超过了字体本身的上限！这就是说清单之间的25个像素。

More space in the top nav bar. The text “Search all music” is 20% of the height of the bar. The icons are similarly proportioned. 顶部导航栏中有更多空间。“搜索所有音乐”文本是条形高度的20％。图标的比例相似。

顶部导航栏中有更多空间。“搜索所有音乐”文本是条形高度的20％。图标的比例相似。</u>

The left sidebar shows generous spacing in between lines of text, and more.
左侧边栏显示文本行之间的宽松间距等等。

Piotr was conscientious about putting in extra space here, and it paid off. While this is just a concept he put together for the fun of it (as far as I know), as far as aesthetics go, it’s beautiful enough to compete with the best music UIs out there.
Piotr认真考虑在这里增加额外的空间，并且得到了回报。虽然这只是他为了它的乐趣而放在一起的概念（据我所知），就美学而言，它足以与最好的音乐UI竞争。

Good, generous whitespace can make some of the messiest interfaces look inviting and simple— like forums.
好的，慷慨的空白可以使一些最混乱的界面看起来像邀请和简单的论坛。

Forum design concept by Matt Sisto 论坛设计概念由Matt Sisto

Or Wikipedia.
或维基百科。

AurélienSalomon的维基百科设计理念

You can find plenty of argument that, say, the Wikipedia redesign leaves out key functionality to using the site. But you can’t say it’s not a good way to learn!
你可以找到很多论据，比如，维基百科的重新设计省去了使用该网站的关键功能。但你不能说这不是一个好学的方法！

Put space between your lines.
在你的线之间放置空间。

Put space between your elements.
在元素之间放置空格。

Put space between your groups of elements.
在元素组之间放置空格。

Analyze what works.
分析什么有效。

---

OK, that wraps up Part 1. Thanks for sticking around!
好的，这包括第1部分。感谢您的坚持！

In Part 2, I’ll be talking about the last 4 rules:
在第2部分中，我将讨论最后4条规则：

4. Learn the methods of overlaying text on images
   了解在图像上叠加文本的方法
5. Make text pop— and un-pop
   使文本弹出和不弹出
6. Only use good fonts
   只使用好的字体
7. Steal like an artist
   像艺术家一样窃取

If you learned something useful in Part 1, read Part 2.
如果您在第1部分中学到了一些有用的东西，请阅读第2部分。