【译】建立华丽 UI 的 7条规则 (2019年更新)

译者：前端小智

原文：medium.com/@erikdkenne…

原文：medium.com/@erikdkenne…

想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！

简介

首先也是比较重要的，先说明点这篇指南并不适合全部人，主要适合如下从业者：

• 开发者但愿可以在必要时设计出本身漂亮的 UI。

• 用户体验设计师但愿他们的产品组合看起来比五角呆板的 PPT 更好看或者让用户获得更好的用户体验。

本文中主要围绕如下 7 规则讲解：

1. 光来自天空 (Light comes from the sky)

2. 黑白优先 (Black and white first)

3. 加倍你的空白 (Double your whitespace)

4. 学习在图像上叠加文本的方法（Part 2） (Learn the methods of overlaying text on images)

5. 使文本井井有条 （Part 2）( Make text pop — and un-pop )

6. 使用好看的字体 （Part 2）(Only use good fonts)

7. 像艺术家同样借鉴 （Part 2）(Steal like an artist)

规则一： 光来自天空 (Light comes from the sky)

大脑在理解咱们看到的界面时，影子是相当重要的因素。

这多是关于 UI 设计最重要又容易被忽视一个内容：光来自天空。 光线来自天空，从上往上，以致于从下往上的光让人看起来很怪异。

当光从天空而来时，它照亮事物的顶部，并在其下方投射阴影，物体的顶部比较亮，底部比较暗。

你不会但愿人们的下眼睑都特别的黑吧，因此，若是咱们在这些恶魔般的眼睛上面多加一些光亮，忽然间他们就变成了你家门前的魔鬼女郎。

UI 也是同样，正如咱们在全部的面部特征的下侧都有少许的阴影，大量 UI 元素的底面也有阴影 。咱们的屏幕是平的，但咱们已经投入了大量的艺术创做让元素富有 3D 效果。

拿按钮举例,即便有了这个相对 “平面” 的按钮，仍然有一些与光线相关的细节：

1. 未点击的按钮(顶部)底部具备黑色的底部边缘，正如夏天中午的，咱们站在太阳时影子的样子。

2. 未点击的按钮顶部的 亮度略高于底部。这是由于它模仿了一个稍微弯曲的表面，就像你须要把面前的镜子倾斜才能看到太阳同样，倾斜的表面会把更多的阳光反射到你身上。

3. 未点击的按钮投射出一个稀薄地阴影——在放大的截图中能看的更清楚。

4. 点击后的按钮，底部依然比顶部还要暗一些，而且整个按钮全都更暗。这是由于它与屏幕自己处于同一个平面，光线就不能轻易的照到它了。有人可能会说，咱们在现实生活中看到的全部按键都是暗的，由于咱们的手去按按钮时挡住了光线。

这只是个按钮而已，就已经呈现了4个细微的光线效果，咱们如今要把光线理论用在全部地方。

iOS 6已通过时了，但它在轻度行为方面提供了一个很好的案例研究。

这是 iOS 6的两个设置—— “请勿打扰” 和 “通知”，看看它们有多少光线效果。

• 嵌套控制面板的上边缘投射一个微小的阴影

• “ON” 滑块轨道也跟着设置了一些阴影 * “ON” 滑块表面是凹的，底部会反射更多光线

• 顶部的边框颜色比较其它的深点，这表明一个垂直于光源的表面，所以接收到大量的光，所以将大量的光反射到你的眼睛中，致使周围会变暗点。

常见向内凹陷的视觉元素：

• 文本输入框
• 点击后的按钮
• 滑块
• 单选按钮（未选中）
• 复选框

常见向外突出的视觉元素：

• 按钮 (未点击)
• 滑块按钮
• 下拉控件
• 卡片
• 选中的单选按钮
• 弹框

扁平化设如何

扁平化设计是一种视觉风格，其中的元素缺少模拟的凹痕或凸出，它们只是纯色的线条和形状。

我和其余人同样喜欢干净和，但我不认为这是一个长期的趋势。如何将咱们的界面用 3D 来在细微处进行模拟的更加天然，彷佛很难将这种作法彻底放弃。

五年前，我预测咱们将会看到“扁平设计”的兴起，至少在 2019 年，这就是咱们的现状——扁平干净外观的元素，加上一层阴影，帮助更加直接看到咱们所想要看到的内容。

在平面设计中，当点击元素时，能够适当加些阴影效果加强体验。

扁平化设计的另外一个例子:谷歌的 Material Design language。

这才是我身边最常出现的事物，它使用微妙的现实世界的线索来表达展现事件特征。

也不能说它彻底没有模拟真实世界，可是这不一样于 2006 年的网页设计风格，并无使用材质，渐变和光泽的状况出现。我认为扁平化是将来的一种趋势。

规则二：黑白优先 (Black and white first)

在添加颜色以前先进行灰度化设计能够简化视觉设计中最复杂的元素——并迫使用户关注元素的间距和布局。

最近用户体验设计师们热衷于**“移动优先”**的设计。这意味着，在 Retina 屏幕中,得想象页面上的交互在一个手机上是否行得通。

这种限制是有好处的，这有助于简化思想。从较难的问题开始(在小屏幕上可用的应用程序)，而后采用更容易的问题的解决方案(在大屏幕上可用的应用程序)。

这里有另外一个相似的结束:黑白优先。首先是在没有色彩的帮助下让应用变得美观而且可用，最后添加色彩，仅此而已。

Haraldur Thorleifsson 的灰度线框图看起来和其余设计师的成品网站同样好。

这是一个可靠和简单的方法，可让应用程序看起来 “干净” 和 “简单”。在过多的地方使用过多的颜色很容易搞砸设计的简单和干净。

**黑白优先 **迫使你首先关注空间、大小和布局，这些都是简洁设计的主要关注点。

在有些状况下，黑白优先没有那么有用。那些具备强烈的特定主题的设计——“运动”、“华丽”、“卡通”等等——须要一个能很好地运用色彩的设计师。可是大多数应用除了干净和简单以外，并无特别强烈的需求属性。这些特定需求的设计难度也大得多。

对于其余的设计来说，都是黑和白优先原则

步骤 2：怎么添加颜色

最简单的添加颜色是须要一种色调的。

在灰度网站上添加一种颜色能够简单有效地吸引眼球。

一样能够采起更深的一步。灰度 + 两种颜色，或者灰度 + 单一色调的多种颜色。

什么是色调

web 一般将颜色称为RGB十六进制代码，RGB 并不是在设计中实现颜色的最优框架，更有用的是 HSB（H 表明色调，S 表明饱和度，B 表明亮度）(与HSV 同义，与 HSL 相似)。

HSB 比 RGB 更好，由于它符合咱们对颜色天然的见解，而且能够观察到 HSB 值的变化所给你看到颜色来带的影响。

若是 HSB 对你来讲是个新的东西，这里 HSB 颜色的 优质入门文章。

《Smashing》 杂志的金色主题。

《Smashing》 杂志的蓝色主题。

经过修改单一色调的饱和度和亮度，能够生成多种颜色——暗色调、灯光、背景、重点、吸引眼球的特效——并且不会让人眼花缭乱。

使用一种或两种基本色调的多种颜色是强调和中和元素的最可靠的方法，并且不会使设计变得混乱。

关于颜色的其余一些补充

色彩是视觉设计中最复杂的领域。虽然不少关于色彩的东西在你完成设计时并非很实用，可是我却看到了一些很是有用的东西：

* 学习 UI 设计：这是做者建立的一门课程，包含3个小时的彩色设计视频(以及 20 多个小时的 UI设计主题视频)，观看地址 learnui.design。

* 设计色彩学：一个实用的框架。

• 永远不要使用黑色 (伊恩·斯托姆·泰勒)：这篇文章谈到彻底平面化的灰色几乎历来没有出如今现实世界中，同时它也提到了如何饱和灰色阴影 — 尤为是深色阴影 — 为设计增添了视觉丰富性。另外，饱和的灰色其实更贴近现实世界，这是它最美的地方。

• Adobe Color CC：一个很是棒的工具，用于查找、修改和建立配色方案。

• Dribbble search-by-color： 看看世界上最好的设计师正在使用什么颜色设计。

规则三：加倍你的空白 (Double your whitespace)

在规则 2 中，黑色优先 迫使设计师在考虑颜色以前考虑间距和布局，接下来谈谈间距和布局了。

若是你从头编写 HTML 代码，那么你可能熟悉默认状况下 HTML 在页面上的布局方式。

基本上，全部东西都挤在页面的顶部。字体很小，行与行之间没有空格，段落之间有一小段空白，但很少。段落一直延伸到页面的末尾，无论是 100px 仍是 10000 px。

从美学角度来讲，这太糟糕了，若是你想让 UI 看起来像设计好的，须要增长不少空白的间距。

如下是 Piotr Kwiatkowski 的音乐播放器概念图。

特别要注意左边的菜单。

菜单项之间的垂直空间是文本自己高度的两倍，上面和下面有一样多的内边距。

或者看看列表标题。“播放列表” 和下划线之间有 15px 的空间。这比字体自己还要高，更别提每一个列表之间间隔了 25 个像素了。

顶部的导航条有更多的空间。文字“搜索音乐”占了整个导航条高度的20%。图标也使用了相似的高度。

左边栏的文字之间留出了比较充裕的空间，甚至更多。

Piotr 认真考虑在这里增长更多的空白，而且效果很好。尽管这只是它为了更多乐趣（据我所知），就美学而言，它很是漂亮，可以和市面上最好的音乐播放器UI界面相提并论。

适当的空白可让一些最混乱的界面看起来更吸引人、更简单，就像论坛同样。

或者维基百科

你会发现对此有不少争论，好比说，维基百科的从新设计舍弃了一些关键的网站的功能，可是你不得不说这是一个很好的学习方式！

• 在你的线条之间预留空间。

• 在你的元素之间预留空间。

• 在你的元素组之间预留空白。

4. 学习在图像上叠加文本的方法

在图像上添加吸引人文本方法只那么几种，这里介绍五种常规和一种额外的方法。

若是想成为一名优秀的 UI 设计师，必须学会如何以一种吸引人的方式将文本放置于图像之上。每一个优秀的 UI 设计师在这个方面都能作得很好，相反的糟糕的 UI 设计师都处理的不好，或者根本不处理。无论你是优秀仍是平庸的设计师，阅读这篇文章后，多多少少对你都有帮助。

方法一：将文本直接放置于图片上

我一直在考虑要不要把这个方法算进五种方法的一种，但设计上，直接将文字放置于图片上让视觉效果更好是可行的。

这种方法有各类各样的问题和须要注意事项:

1. 图像色调应该偏暗，而且竖直方向上不能有太大的色差。

2. 文本必须是白色的。

3. 测量不一样尺寸的屏幕或窗口以确保图像显示正常。

我想我历来没有在任何专业项目中直接在图像上使用文本，之因此提到它，是把它看作是一种应该掌握的技巧，就是说这种方法虽然可能能够产生很是酷炫的效果，但使用的时候须要当心

方法二：文本覆盖整个图像

将文本放在图像上最简单的方法就是用遮罩将图片整个覆盖，若是原始图像不够暗，能够在整个图像上添加半透明的黑色图层。

下图是一个时下流行的、用半透明黑色遮罩覆盖图片的示例。

若是打开发工具并删除覆盖层，将看到原始图像太亮，对比度太大，文本难以辨认。可是用黑色半透明的图层覆盖，看上去就没问题了!

这个方法用在缩略图和小的图片上一样好用。

虽然黑色覆盖是最简单和最通用的，固然也有用彩色覆盖。

方法三：盒模型中的文本

这种方法简单又可靠。试试把一个稍微透明的黑色长方形框里放上一些白色的文字。若是图片的不透明度（opaque）足够，你可使用任意一张图片，均可以保证文字的清晰可读。

固然也可使用一些颜色，只是在选择色彩时候要有依据。

方法四：模糊图片

使文本内容清晰的一个神奇的方法，是将背景图像的一部分变得模糊。

苹果确实让背景变得模糊了，尽管它是在 Windows 系统中最早实现的。

你也能够用照片的散焦（out-of-focus）部分来做为模糊区域。可是请注意 —— 这个办法并很差使。若是图片作了一点改变，就得确保这些文字位置在对应的模糊区域中。

请阅读下图中的子标题：

**方法五：Floor Fade **

Floor Fade 指的是图片靠近底部的地方逐渐变黑，而后接着把白字填在上面。这是个很是巧妙的办法，我不知道是谁发明的，在Medium使用它以前，我从未见过有人用它。

对于上面的图像，你可能会以为就是直接在图像上放置了白色的文字，其实否则，你仔细看，你会发现实际上是一个由 0% 不透明度到20%不透明度渐变的矩形框。

这种渐变效果确实很难看出来，但确实是有的，绝对改善清晰度。

还要注意的是，这几张缩略图使用了文本阴影来进一步加强可读性，这个作法真棒!

Medium达到了这样的境界：任何文字放置在任何图片上，都能得到良好的阅读效果。

哦，还有一件事——为何图像底部逐渐变暗? 关于这个问题的答案，上篇讲的规则1——灯光一般是从上面照下来的。为了让咱们的眼睛看起来更天然，图像的底部稍微暗一点，就像咱们所见过的其余事物同样。

更高级的作法，就是结合模糊化，这样的结合就是底部模糊化了。

额外的办法：纱罩

不管背景图像怎么变,Elastica blog的标题老是清晰易读的，这是怎么作到的？应该是这样：

• 并非特别黑的
• 有一点高对比度

然而，很难描述为何文本如此易读。 看一看：

答案是：纱罩。

纱幕是一种使光线更柔和的摄影器材。如今它也是一种视觉设计技术，用于软化图像，使叠加的文本更清晰。

在浏览器放大 Elastica 博客上，就能够更清楚地作了什么效果。

在这句标题 “145,000 Salesforce Users Come out to Celebrate…”有一个让透光度渐变的框。应该能够很简单的注意到高对比度的照片下这个深蓝色的背景。

这多是在图像上可靠地叠加文本的最微妙的方式，我在其余任何地方都没有见过(但它至关隐蔽)。不过要记下来，你或许在未来某些时候须要它。

5. 使文本井井有条

让文本看起来美观和合适一般作法的是以对比的方式设置样式 - 例如，更大但更轻。

在我看来，建立一个漂亮的用户界面最困难的部分就是文本的样式 - 固然不是由于不熟悉这些属性。 若是你刚小学毕业，那么你极可能已经使用了一种方法来引发注意或远离咱们看到的文本：

• 尺寸(大或小)

• 颜色（反差较大或较小；色彩鲜明）

• 字重（加深或者变轻）

• 拼写（小写，大写和标题的格式）

• 斜体

• 字母间距

• 边距

还有一些其作法能够引发别人的注意，一般不经常使用也不推荐使用：

• 下划线 --下划线默认表示连接，除了连接外也不必用它。
• 文本的背景色 -- 不常见，但37 signals的网站曾使用它作为连接的样式。
• 删除线 -- 90年代的CSS用法了

根据个人我的经验，当我发现一个我彷佛没法找到合适的文本样式时，并非由于我忘了尝试使用边距或更暗的颜色 - 而是由于最好的解决办法是同时设置几组“相矛盾的（competing）”属性。

Up-pop and down-pop

能够将设计文本的全部方式分为两组：

• 增长文本可见性的样式。大号字体、粗体、大写的等等。

• 下降文本可见性的样式。小号字体，对比度小的，边距小的，等等。

咱们会这些叫作 "up-pop" 和 "down-pop" 的样式，以记念 favorite adjective。

“Material Design” 的标题有不少“up-pop”。大字号，强烈对比，粗体。

底部的元素就是“down-pop”的。字体小，对比度低，而且字体较细。

如下是很是重要的内容。

这个页的标题是仅有的用上了全部 up-pop 方法的文本。 对于全部别的东西，你须要 up-pop 而且 down-pop。

若是须要强调一个网站的内容元素，那么就同时使用“up-pop”和“down-pop”。这是为了防止元素过于突兀，将不一样元素限制在它们应有的视觉重要性以内。

完美设计的 Blu Homes 网站有一些大标题，可是须要强调的单词都是小写的——过多的强调看起来会让人看不到重点。

Blu Homes 网站上的这些数字以它们的大小、颜色和对齐方式吸引你的眼球，可是请注意，它们同时被淡化了，字体很轻，低对比度的颜色。

然而，数字下面的小标签虽然是灰色和小字体的，但也是大写字重大的。

这一切构成了平衡。

Contents Magazine 是一个 up-pop 和 down-pop 很不错的案例分析。

• 文章标题基本上是唯一的非斜体页面元素。在这种状况下，缺少斜体字会更有效地吸引眼球(特别是结合粗体的字体)

• 在 by 的这一行里的做者名字是被加粗的 — 让它和日常字重的 "by" 分别了开来。

• 小的、低对比度的“已通过时”文本不会碍手碍脚——可是因为它的大写类型、大的字母间距和大的空白，你能够在查找时当即看到它。

选中和鼠标停留样式

被选中和鼠标停留的文本样式是另一回事了——而且很难。

一般，改变字体大小、大小写或字体权重会改变文本占用的区域大小，这种变化能够限制住悬浮效果。

因此还有哪些属性能够更改呢？

• 字段颜色
• 背影颜色
• 阴影
• 下划线
• 轻微的动画 - 升高，下降等

一个实用的办法:尝试将白色元素变成彩色，或者将彩色的元素变为白色，可是文本的背景色要选用深色。

设计文本的样式是很难的。

最后我仍是要告诉你，给文本加样式是很难的。

若是你想学习更多关于文本样式的知识，请查看学习UI设计，在这里有更多的详细介绍。

6. 使用好看的字体

有些字体不错，使用这些字体。

本节没有策略或内容须要学习，只列出一些不错的免费字体供你下载和使用。

这份学习指南是给学习者的，外面有超多免费的字体，因此就让咱们用吧。

我建议你们如今就去下载它们，而后使用它们来对你的项目进行可视化设计。

如下推荐字体跟级别没有关系：

1. Work Sans

有时候正在设计一些须要现代，干净字体的东西，可是还要有一点乐趣。 Work Sans 很是适合这种场景。

下载地址：没包含斜体的 有包含斜体的。

** 2. Roboto**

一种极好、干净的、通用的字体。虽然它是 Android 的默认字体，但对于 iPhone 和 web 应用程序来讲，仍然没有获得充分的使用主要仍是免费的!

谷歌地图有用到该字体

下载地址请点击这里。

3. Montserrat

我曾经犹豫是否推荐 Montserrat 字体，由于它没有斜体字，字距怪异，并且厚得很难看)。但这个项目一直很活跃，Montserrat 变成了一种难以想象的字体。

它最有名的多是最受欢迎（和精心设计的）Proxima Nova 的最佳免费替代品。

在选择任何字体时，最好查看大写、句子大小写和全部的字重。你永远不知道何时稍微不一样的设置会成为你想要的风格。比较上面的两个镜头——一样的字体，两种不一样的感受。

下载地址点击这里。

4. Source Sans Pro

我喜欢 Source Sans 的一件事是当你想要使用使人难以置信的过分使用的 Open Sans 或 Lato 时，它是一个很好的选择。

Source Sans与 Open Sans或 Lato - neutral 字符有许多相同的优势，只是有一点人性化(而不是冷冰冰的、生硬的几何字体)，并且对于用户界面很是有用。

能够在 Google Fonts 上找到

5. IBM Plex Sans

去年，IBM 发布了本身的字体 Plex。

Plex Serif 和 Plex Mono 轻松配对。

能够在 Google Fonts 上找到

6. Feather Icons

虽然许多流行的图标集（ahem，Font Awesome）具备过于圆润和起泡的形状，但与简洁的设计不能很好地搭配，可是 Feather Icons 是一种很是不受欢迎的解决方案。

做者尚未把它打包成图标字体，可是有人在 Github 上放了一个字体版本，能够很好地跟踪原始设置（若是你只使用了套装中的10或20个图标，没有必要加载整个包）。

下载地址：SVG set, partial icon font

有一些资源：

• Beautiful Google web fonts。这个网站很是棒得展示出 Google Fonts 能有多好看。做者从它那找了好多好屡次灵感。

• FontSquirrel。一组最好的字体可供商业使用，并且彻底免费。

• Adobe Fonts。若是你使用的是 Adobe Creative Cloud（ 即订阅 Photoshop 或Illustrator等 ），那么能够免费访问大量专业字体。甚至比我上面推荐的还要好：Proxima Nova，Adelle Sans，DIN，Freight Text 等等。

• Learn UI Design。寻找更好的字体？做者的用户界面设计课程有一个字体推荐列表，包含超过 60 种免费，涵盖全部类型的字体（衬线，平板，等宽字体，手写等），并包括每一个字体的注释 字体效果最好。

7. 像艺术家同样借鉴

我第一次尝试设计一些应用程序元素 - 按钮，表，图表，弹出窗口 - 这是我第一次意识到我对如何让这些元素好看而知之甚少。

但幸运的是，我尚未发明任何新的 UI 元素。这意味着我总能看到别人是如何作到的，并从中挑选最好的。

可是咱们要从哪里挑呢？这里有：

1.Dribbble

这个特邀的“给设计师展现”网站有网络上最好质量的 UI 设计做品。你能够在这里找到几乎最好的网站。

事实上，你能够在 Dribble 关注个人里面的做品，这里还有一些人你也能够关注:

• Jamie Syke。基本上天天都发布新的UI，一些流行的东西回归丰富的经验和设计。我能说什么呢？关注就对咯。

• Balkan Brothers。彷佛是一个老生常谈的说法，设计师越接近俄罗斯，他们就越擅长颜色。 这些克罗地亚设计师很是棒，保持平淡有趣。 老是很棒的渐变，颜色和阴影。

• Elegant Seagulls。若是你曾经想过“天哪，我怎么作比标准网格更有趣的事情？”，浏览他们的一些照片，这里有你想要的答案。

• Cosmin Capitanu。一个很是厉害的多面手。他作得东西将来感十足，但又不过于高调。他很是善于使用颜色，然而他并不十分注重 UX 的东西 — 固然这个批评也针对 Dribbble 这个网站。

分别来自 Balkan Brothers 和 Cosmin Capitanu。

分别来自 Elegant Seagulls 和 Jamie Syke。

2.Flat UI Pinboard

我不知道“warmarc”是谁，可是他的手机UI的pinboard让我找到了许多漂亮的UI。

3. Pttrns

一个移动app屏幕截图的汇总。Pttrns 的好处是整个网站都是由用户体验模式来组织的。这使得快速研究目前正在使用的任何界面，不管是登陆页面、用户配置文件、搜索结果等等，都很是方便。

我坚信每一个艺术家都应该像鹦鹉同样去模仿，直到他们擅长模仿最好的。而后去寻找你本身的风格，发明新的潮流。

在这期间，让咱们都先当一个模仿者吧。

总结

我写这篇文章是由于我但愿本身在之前能够读到这篇。但愿对你有帮助。若是你是一个用户体验设计师，画好线框图后作一个漂亮的模型。

若是你是一名开发人员，那就把你的下一个次要项目作好。我不想UI只有专业的人才能作的很好。就是观察、模仿和记录有用的东西。

不管如何，这就是我到目前为止所学到的，同时我永远都是一个学生，会不断向别学习！

你的点赞是我持续分享好东西的动力，欢迎点赞！

交流

干货系列文章汇总以下，以为不错点个Star，欢迎 加群 互相学习。

github.com/qq449245884…

我是小智，公众号「大迁世界」做者，对前端技术保持学习爱好者。我会常常分享本身所学所看的干货，在进阶的路上，共勉！

关注公众号，后台回复福利，便可看到福利，你懂的。