[译] 创造华丽 UI 的 7 个规则（Part 1）

• 原文地址：7 Rules for Creating Gorgeous UI (Part 1)
• 原文做者：Erik D. Kennedy
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：wzasd
• 校对者：xujunjiejack、lihanxiang

数学美学的非艺术性入门指南

介绍

好的，让咱们先说重要的事。这个指南并不适用于全部人。那这本指南的目标用户是谁呢？

• 开发人员 但愿可以在一个开发中设计一个属于他们的看起来很不错的用户界面。
• UX 设计师 但愿他们的产品组合看起来比五角大楼幻灯片更好看。或者那些知道他们能够在一个漂亮的 UI 中更好的实现他们出色的用户体验的设计师。

若是你去过艺术学校或者自认为已是一名 UI 设计师，那么你可能发现这个指南结合了 a.) 无聊、b.) 错误和 c.) 使人生气。不要紧，您的全部批评必定都是对的。让咱们一块儿关闭标签。

让我告诉你会在本指南中找到什么。

首先，我是一名没有任何 UI 技能的 UX 设计师。我热爱 UX 设计，好久之前，我并不关心用户界面，在我意识到有不少好的理由来学习如何使界面看起来不错后，才下定决心学习。

• 个人做品集看起来很糟糕，没办法充分反应个人思考过程和个人工做。
• 咨询我 UX 的客户宁愿购买其余人的技能，由于他们的专长不只仅是绘制箱子和箭头。
• 我是否像在某个时期进行创业工做？最好作一个清扫工。

我有我本身的借口。我并不理解美学，由于我认为他们都是在说废话，我主修工程学 — 我都快以创造一些难看的东西为荣了。

“我并不理解美学，由于我认为他们都是在说废话，我主修工程学 — 这简直就是一种标签，我都快以创造一些难看的东西为荣了。”

最后，我终于学会了到底什么是应用程序的美学，就像是我努力学习其余创做的事物同样：冷静，理性分析。厚颜无耻的复制了有用的东西。我已经在一个 UI 项目上工做了 10 个小时，然而实际只为了项目付出了 1 个小时。其余 9 个小时拼命搜索谷歌、Pinterest 和 Dribbble 去里面复制有用的东西！

我在这些时间里学到的教训。

对于书呆子而言：若是我如今擅长设计用户界面，那是由于我已经分析不少东西 — 而不是由于我经过直观的对美以及平衡的理解才走出误区。

这篇文章并非理论的阐述。只是很纯粹的应用文章。你不会看到关于黄金分割线的任何信息。我甚至不会提色彩理论。只有我从错误学到的东西，并不断将进行刻意练习。

用这种方式思考：柔道是根据几个世纪的日本武术和哲学传统演化而来的。你参加了柔道课程，除此以外，你还会听到关于能量、流动以及和谐等知识。

另外一方面，Krav Maga 则是由一些在 30 年代捷克斯洛伐克犹太人在街头与纳粹抗争时发明的。那并无艺术在中间。在 Krav Maga 课程中，你将会学到如何用笔刺入某人的眼睛。

这是屏幕中的 Krav Maga。

规则

规则在这里:

1. 光线来自天空。
2. 首选白色和黑色。
3. 添加更多的空白。
4. 学习如何在图片上添加文字。（查看部分 2）
5. 使文本弹出和取消弹出。（查看部分 2）
6. 只使用好看的文体。（查看部分 2）
7. 像艺术家同样借鉴。（查看部分 2）

让咱们开始吧。

规则一：光线来自天空

阴影是最有效的提示，用来告诉人类的大脑哪些是他们正在查看的用户界面的元素。

这也许是容易被忽视却很重要去学习 UI 设计的一个内容：**光线来自天空。**光不断的从天空而来，所以若是光从下而上则确实看起来很是怪异。

妈呀~

当光线来自于天空的时候，它照亮了物体的顶部并在其下面投下阴影。物体的顶部较为明亮，底部较暗。

你毫不会认为人们的下眼皮是须要画出来眼影的，可是当一个化了下眼影的女孩忽然出如今他们门前的时候确实会亮瞎那些呆子的眼睛。

那么，用户界面也正是如此。正如咱们在全部的面部特征的下侧都有少许的阴影，几乎每一个 UI 元素的底部都有能够被发现的阴影。咱们的屏幕是平的，可是咱们投入了大量的艺术创做来制做出 3D 的效果。

这张图片中我最喜欢的就是右下角的手指。

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

1. 按钮没有按下的时候具备黑色的底部边缘，太阳并无照耀到的位置。
2. 按钮没有按下的时候顶部会亮一些对比底部。这是由于它模仿了一个稍微弯曲的表面。就像当你须要倾斜一面在你面前的镜子来观察太阳同样，在上面的镜面会向你的身上反射多一丁丁丁丁点的阳光。
3. 按钮没有按下的时候投射了微妙的阴影 — 若是放大可能看的更清楚一些。
4. 按下的按钮虽然底部比顶部暗一些，可是总体颜色更深，由于他们虽然位于屏幕的平面上，太阳并不容易照射到它。有人可能会说咱们在现实生活中看到的全部按钮都会变暗，由于咱们手挡住了光线。

这只是一个按钮，然而这里有四个小小的灯光效果。这些灯光效果就是咱们的经验。如今咱们应该将它用于全部的东西。

虽然 iOS 6 有点过期了，可是它在光照行为方面确实是很好的研究案例。

这里有一对 iOS 6 设置 — “请勿打扰”和“通知”。很简单，对吧？可是看看他们有多少灯光效果。

• 插图的控制面板边缘投下了一个小阴影。
• “ON” 滑块轨道也跟着设置了一点。
• “ON” 滑块轨道为凹型，底部反射了更多的光线。
• 图标边缘被设置了一点点。看到他们顶部的明亮边框了吗？这表明一个垂直于光源的表面。由于垂直，因此这个表面接受了大量的光线，将大量的光线反射到眼睛中。
• 分隔的凹口在远离太阳的部分被遮盖，反之亦然。

分割线的凹槽的特写镜头。来自个人一个旧 Hubster 概念。

一般在嵌入的界面元素：

• 编辑栏
• 按下的按钮
• 滑块
• 单选按钮（未选中）
• 复选框

一般在突出的元素：

• 按钮（未按下）
• 滑块按钮
• 下拉控件
• 卡块
• 所选单选按钮的 button 部分
• 弹出窗口

如今你知道了，你会注意到他们处处都是。不客气，初学者。

等等，扁平化设计怎么样呢，Erik?

iOS 7 让“半扁平化设计”在科技界引发了轰动。这就是说他的半扁平化。 没有模拟凸起或者凹痕 — 只是纯色的线条和形状。

我虽然和你们同样喜欢干净和简单。可是我认为这不是一个长期的趋势。如何将咱们的界面用 3D 来在细微处进行模拟的更加天然是不能彻底放弃的。

更多的多是，咱们将会在不久的未来看到半扁平化的 UI 设计（并且我建议你精通这种设计）。咱们将会继续称之为“扁平化设计”。依旧干净，依旧简单简单，可是会有一些阴影和点击/滑动的提示。

OS X Yosemite — 扁平化而不平面化。

在写这篇文章时，Google 正在他们的产品中推出他们“Material 设计”语言。这是一种统一的视觉语言，它的核心理念就是模仿现实的世界。

Material 设计指南中的例证展现了如何使用不一样的阴影来表达不一样的深度。

我感受这种东西是一种长期的趋势。

它使用了现实世界的微妙的线索来传达信息。关键词，微妙。

咱们并不能说它没有模拟现实世界，可是它又不像是 2006 年的网络。没有纹理，没有渐变，没有发光。

我认为扁平化是将来的一种方式，平面化？切，只是过去而已。

这样的平面化设计如今看起来很火！

规则 2：黑色和白色优先

在添加颜色以前进行灰度设计能够简化视觉设计中最复杂部分 — 而且可使强迫使您专一于间距和布局元素。

UX 设计师如今真的是“移动优先”来进行设计。这意味着您在想象没法想象的像素的 Retina 显示器前优先考虑手机上的页面和互动是如何工做的。

**其实这种约束很好。它能够简化思想。**您从较难的问题开始（在小屏幕上可用的应用程序），而后经过一样的解决方案去解决简单的问题（大屏幕上可使用的应用程序）。

那么这里就是一种相似的约束：优先设计黑色和白色。首先是在没有色彩的帮助下让应用变得美观而且可用。最后添加色彩，仅此而已。

Haraldur Thorleifsson 的灰度线框看起来就如同极少的设计师完成的网站设计同样好。

这是保持应用程序“干净”和“简单”最可靠也是最简单的方法。在过多的地方使用过多的颜色很容易搞砸设计的简单和干净。黑和白优先这个原则强迫你首先关注诸如间距，尺寸和布局等事情。这些都是干净简单设计的首要关注点。

优雅的灰度

有些状况下黑白优先的原则并非那么有用。那些须要特殊感受的设计 — “动感”、“华丽”或“卡通”等等。须要一个可以很是好使用多种颜色搭配的设计师。可是大多数的应用程序没有一个特别强烈的需求属性，除了“干净”和“简洁”。那些须要特殊设计的很难设计。

Julien Renvoye （左）和 Cosmin Capitanu （右）的华丽和充满活力的设计。比看起来更难。

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

步骤 2：怎么去添加颜色

只加一种颜色是能添加的最简单的颜色。

添加一种颜色在灰度设计的网站能够很简单而又有效的吸引眼球。

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

让咱们用下颜色代码 — 等等，什么是色调？

网页上大致将颜色做为 RGB 十六进制代码进行讨论。其实忽略他们才是最有用的。RGB 并非适合着色设计的一个有用的框架。HSB（与HSV同义，与HSL相似）更有用。

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

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

单色调金色主题来自 Smashing Magazine。

单色调蓝色主题来自 Smashing Magazine。

经过修改单色调的饱和度以及亮度，您能够生成多种颜色 — 深色、亮色、背景、重点以及各类吸引注意的效果 — 并且不会让人眼花缭乱。

使用来自一种或者两种基本色调的多种颜色是为了在保持设计不凌乱的同时又能够强调和中和元素的最可靠的方法。

倒数计时器来自 Kerem Suer。

关于颜色的其余一些说明

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

一个小工具箱：

• 学习 UI 设计。无耻的推广：这是我建立的一门课程，它包含3个小时的关于颜色设计的视频（以及在 UI 设计中的其余主题总共13个多小时）。请看 learnui.design。
• 设计色彩学：（实用）框架。若是你喜欢这个部分，可是但愿听到更多的颜色（而不只仅是黑色和白色），这是属于你的文章。猜猜是谁写的！
• 永远不要用黑色 （Ian Storm Taylor）。这篇文章谈论了彻底平面化的灰色几乎历来没有出如今现实世界中。同时它也提到了如何饱和灰色阴影 — 尤为是深色阴影 — 为设计增添了视觉丰富性。另外，饱和的灰色其实更贴近现实世界，这是它最美的地方。
• Adobe Color CC。一个很棒的工具，用于查找、修改和建立配色方案。
• Dribbble 经过颜色进行搜索。 另外一种很棒的方式来查找特定颜色的做品。若是您已经肯定了一种颜色，那就看看世界上最好的设计师是怎么与这种颜色搭配。

规则 3：多用空白

为了让 UI 看起来设计感十足，要添加更多的呼吸空间。

在规则 2中，我说使用白或者黑原则迫使设计者在考虑颜色以前考虑间距和布局，为何这是件好事，那么，如今就是讨论如何进行间距和布局的构造。

若是您从头开始编写 HTML 代码，你可能很熟悉HTML在页面上默认的布局方式。

基本上，全部的东西都拥挤在屏幕的顶部。字体很小，线条之间是绝对没有空间的。段落之间确实有一丢丢空白，少得可怜。段落只是延伸到页面的末尾，不管是 100 px 仍是 10000 px。

从审美的角度上来说，这太糟糕了。若是你想让你的 UI 看起来颇有设计感，您须要在这之间添加呼吸的空间。

有时候就是一个荒谬的数值。

HTML 和 CSS 的留白

若是你像我同样常用 CSS 进行格式设置，那么默认状况下不会有留白的，如今是时候解决这些不良的习惯了。开始考虑将空格做为默认空间 — 全部的内容都是以空格开始，直到您经过添加页面元素将其删除。

听起来像是禅学？我认为这是人们仍然素描出这些东西的重要缘由。

从空白页开始意味着以空白开头。您从一开始就会想到利润率和间距。您绘制的全部内容都是有意识的去删除空白。

从一堆无格式的 HTML 开始，意味着就是之内容开头，间距则是后来才考虑的事情。这必须明确说明。

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

要特别注意左侧的菜单。

左侧菜单

菜单项之间的垂直空间彻底是文本自己高度的两倍。您注意到这是 12px 的字体，而且在上面和下面填充一样多的间距。

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

---

顶部导航栏中有更多的空间。文字 “Search all music” 是导航栏高度的 20%。图标也是相应的比例。

左侧边栏显示了充裕的文本行间的间距，等等。

Piotr 认真考虑在这里增长更多的空白，而且效果很好。尽管这只是他为了更有乐趣（据我所知），就美学而言，它很是漂亮，足以与最好的音乐用户界面进行竞争。

---

适当的留白可使一些复杂的界面看起来很简单 — 就像是论坛。

论坛的设计来自于 Matt Sisto。

或者维基百科。

维基百科设计理念来自 Aurélien Salomon。

你能够找到更多的样例，好比说，维基百科的从新设计舍弃了一些关键的网站的功能。可是你不得不说这是一个很好的学习方式！

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

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

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

分析可行性。

---

好的，第一部分已经完结，感谢你坚持看完！

在 Part 2，我会继续讨论剩下的 4 条规则:

4. 学习在图片上叠加文字的方法。

5. 使文本弹出或者取消弹出。

6. 只使用优秀字体。

7. 像艺术家同样复制。

若是你学到了有用的东西，读 Part 2。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。