原文：7 Rules for Creating Gorgeous UI (Part 1)

翻译：David Lee

简介

各位，友情提醒先。这篇指导并不适用于所有人，那么，对谁才有用呢？

开发者--在必要的时候，希望自己能够设计出漂亮UI的开发工程师

用户体验（UX）设计师--他们希望自己的作品集比呆板的PPT更好看，或者，想通过绚丽的UI包装传达更极致的用户体验，也同样适用。

如果你读过艺术院校或者你认为自己已经成为一个视觉设计师了，那你很有可能发现这篇文章中充斥着：

a 无聊 b 错误 还有 c 让人恼怒的内容。

我不会介意的，你们所有的批评都是对的。关了这个，去读点别的吧。

或者，还是我告诉你你到底能在这篇文章中学到什么吧。

首先，我曾是一名完全不懂视觉设计的用户体验设计师。我真心热爱用户体验设计，但当我意识到，我可以找到一大堆理由来支持自己去学习——如何设计一个看上去不错的界面的时候，就放弃了单纯的UX设计：

我的作品集就是个垃圾，完全没能展现出我工作和思考的过程

如果能提供更多专业的意见，而不仅仅是画几个方框和箭头这么简单，我的咨询客户肯定更愿意为此买单。

说不准某天我会考虑加入一个早期的创业项目？最好能成为工作中的全能王。

理由是找到了，但我真的不懂美学这玩意儿。毕竟我只是个工程学的学士–最值得骄傲的地方，大概就是能把某个东西设计的奇丑无比。

“我只是个工程学的学士–最值得骄傲的地方大概就是能把某个东西制造的奇丑无比。 ”

最终，APP的设计美学还是被我搞懂了，用的是我一贯的方法：冷酷，扎实的分析。而且只要能用的上，我不以“抄袭”为耻。我会花10小时来搞定一个设计项目，但实际的设计工作只有1小时。其余9小时都在被痛苦的学习过程折磨着。几乎绝望的在google，pinterest和dribbble上面找一些能借鉴的设计素材。

下面的“规则”就是从这些时光里归纳出来的。

送给那些书呆子：现在我的UI设计算是做的不错，那是因为我分析研究了很多东西——并不是因为我突然开窍凭着直觉就理解了美和平衡。

这篇文章讲的不是理论，纯粹是实用性的内容。你不会在文章里看到黄金比例。我甚至不会提及配色法则。我从失败的设计中学到的就是，这事儿只能凭靠坚持不懈的练习才能达成。

试着这么想一下：柔道的建立源自于几个世纪以来日本的物质文化和哲学传统。你去报个柔道班，除了打斗外，你还会听到很多关于能量，气流和协调的说辞。大概我要讲的也是这类东西。

马伽术，简单介绍一下，1930年的捷克，某个彪悍的犹太人对付纳粹时发明的格斗术。这玩意一点儿都不艺术。在马伽术的课程里，你会学到如何用一支钢笔或者书来挖掉对方的眼睛。

我要讲的就是界面版的马伽术。

规则

如下：

光来自于天空

先用黑白来检验设计

留白的地方放大两倍

学习文字置于图上的方法（Part 2）

让文字看上去很时尚— 或者不时尚（Part 2）

只用好看的字体（Part 2）

像艺术家一样去剽窃（Part 2）

我们开始学习吧。

规则1:光来自于天空

大脑在理解我们看到的界面时，影子是至关重要的因素。

这也许是学习UI设计时最重要却又不明显的一个理念：光是来自于天空的。.光从天而降，这事儿太稀疏平常了，而且一直如此，以至于从下方打出的光看上去真的很诡异。

呃……

光源来自于上方时，它会照亮物体的顶部并在下方制造阴影。物体的顶部就会更亮，下方就会更暗。

你不会希望人们的下眼睑都特别的黑吧，所以，如果我们在这些恶魔般的眼睛上面多加一些光亮，突然间他们就变成了你家门前的魔鬼女郎。

是的，这个真理同样适用于UI。就好像在我们的面部特征中总能看到阴影处于下方，当你看遍那些UI元素，你会发现他们的下方同样有阴影存在。屏幕虽然是平的，但我们花了大量心血，造就了平面上也可以显现三维效果的艺术。

我最喜欢的部分是图片下方靠右的那个手指图标。

比如这个按钮，即使是近乎“扁平”的按钮，也有着很多与光线相关的细节：

未点击的按钮有一个黑色的底边，少年你懂的，太阳是照不到那里的……

按钮在未点击状态下，顶部会比底部更亮一些。这是因为按钮上有一个细微的曲面。比如，你需要把一面镜子在你面前向上翘起才能在镜中看到阳光，所以向上翘起的平面总会对你反射更多的光。

未点击的按钮会投射一些稀薄地阴影 —— 可能在放大的截图中能看的更清楚。

点击后的按钮，底部依然比顶部还要暗一些，并且整个按钮全都更暗……这是因为它与屏幕本身处于同一个平面，光线就不能轻易的照到它了。也有人提出现实世界中的按钮，点击之后也会变暗，是因为我们的手挡住了光线。

这只是个按钮而已，就已经呈现了4个细微的光线效果。学习暂告一阶段，我们现在要把光线理论用在所有地方。

iOS 6有一点过时了，但是如果你想了解光线的特征，它可以做为一个很好的案例来进行研究。

这是一对iOS 6设置按钮 — “勿扰模式” 和 “提醒”。这没什么了不起的，对吧？但是我们仔细看看有多少光线效果在其中起了作用。

嵌入式的控制器顶部边缘投射了一个很微小的阴影

滑动按钮“打开”的边缘也有一些阴影

滑动按钮“打开”的表面是凹陷的，底部会反射更多光线

小图标有一点点凸起。你看到它上半部分的亮光了吗？这说明它的表面和光源是有些垂直的，因此它能接受到很多光线，同样它也能把很多管线反射到你的眼睛里。

分栏凹槽的阴影处有一点儿弯曲的感觉，这是因为阳光来自上方，如果光线反过来，那么阴影也会随之变化。

又一个分栏凹槽的样式，来自于我曾经设计的Hubster。

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

文字输入区域

点击后的按钮

滑动轨迹

Radio按钮 (未选中时)

勾选框

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

按钮 (未点击时)

滑动的按钮

下拉控制面板

卡片

已被选中的radio按钮（其中的按钮部分）

弹出框

现在你懂了吧，你会在很多地方看到他们。欢迎入门，少年。

等等，那扁平的设计呢?

iOS7的“扁平设计”曾经在各大科技论坛掀起了轰动。正如它的名字所说，它真心是扁平的。没有任何模拟现实的突出或者凹痕——只有线，形状和单色。

我跟你们一样，真心喜欢干净简洁的设计，但是实话实说，我不认为这会是个持久的趋势。那些在细微处模仿3D空间的界面设计真的让人感觉很自然，似乎我们很难将这种做法完全放弃。

更有可能的是，我们会在不远的将来看到更多半扁平化的设计。(这也是我建议你尽快掌握的设计风格）。 我会称这种风格为 “扁平化设计”。依然干净，依然简洁，但是当你敲击，滑动，点击的时候，还是能看到阴影和曲线 。

OS X Yosemite— 扁平化，但不扁平。

就在我写这篇文章的时候，Google基于旗下不同产品推出了他们的“Material Design”语言。这是独树一帜的视觉语言，它的精髓就在于，追求模仿物理世界。

这是Material Design上面的一个图示，示意如何通过不同的阴影来表示不同的深度。

这才是我身边最常出现的事物。

它使用了真实世界一些细微的元素来传递信息。这一点至关重要，只是细微的。

也不能说它完全没有模拟真实世界，但是这不同于2006年的网页设计风格。并没有使用材质，渐变和光泽的情况出现。

我认为，扁平化就是未来之路，至于扁平的？估计很快就要成为过眼云烟。

扁平设计现在看起来可真火啊！

规则 2: 以黑白效果起步

颜色是最为复杂的设计元素，在增加颜色之前，设计只是灰度的，这更容易让你关注元素之间的空间和布局。

用户体验设计师最近真的很关注“移动优先”。这意味着你得想象页面上的交互在一个手机上是否行得通，即使你面对的是一台超高分辨率的Retina显示器。

这种预设的限制条件非常好，它能让思路更明晰。你从一个较难的问题起步（在小屏幕上构建一个可用的应用），然后再让方案适应更容易解决的问题（大屏幕上的可用应用）。

这个限制条件的情况跟上面类似：从黑白效果开始设计。从更难的问题出发，先让应用无论在任何情况下都漂亮和好用，唯独缺少颜色。最后再加入颜色，同时要保证，颜色的加入都有目的性。

Haraldur Thorleifsson的灰度线框看上去要比少数设计师最终的网页设计作品还好

这就是让应用看上去“干净”“整洁”的最靠谱方法。如果你在每个地方都使用了很多颜色，那会让设计看上去很糟糕。黑白效果会强迫你优先专注于空间，大小和布局，而这才是让页面看起来干净简洁的更深层次的原因。

经典灰度设计。

有些情况下，黑白效果就没什么用了。比如为了这几个明确的目标进行设计的时候——“动感的”，“炫目的”，“卡通风格的”等等，这需要设计师支配颜色的能力异常强大。但是大多数应用并不需要如此明确的设计目标，只要做到干净和简洁就够了。而对于设计来说，这正是公认更难做到的事情。

炫目且充满活力的设计，由Julien Renvoye(左侧）和Cosmin Capitanu(右侧)所设计。这些设计要比看起来难得多。

黑白效果，无处不在。

步骤2: 如何增加颜色

最简单的颜色使用方法就是添加单色。

为一个灰度的网页设计增加单色能够轻易高效的吸引眼球。

你也可以更进一步。灰度＋两种颜色，或者灰度＋同一色调下的多种颜色。

颜色密码实战——等等，什么是色调？

大多数情况下网页中的颜色都是使用RGB16进制代码来实现的。因为RGB的使用几乎成为常识，所以我们往往忽略了这样一个事实，RGB并非在设计中实现颜色的最优框架。而比它更好的框架是HSB（H代表色调，S代表饱和度，B代表亮度）

HSB比RGB更好是因为它更符合我们认知颜色的方式，而且你能够预料到当你改变HSB数值时会对颜色产生怎样的影响。

如果这对你来说还是个新闻，那你可以读读这篇文章，高级的HSB颜色框架。

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

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

通过修改一个色调的饱和度和亮度，你可以创建多种颜色——暗色，亮色，背景色，强调色，抢眼——但是又不至于让眼睛无法承受。

在设计中强调或者中和某种元素时，最靠谱的方法是使用基于统一色调（或两种色调）的多种颜色，这能避免将整个设计搞得乱七八糟。

由Kerem Suer所做的倒数计时器，颜色的使用很有亮点

在视觉设计领域，颜色是最为复杂的。所以当你开始手头的设计工作时，很多关于颜色的工具都低效或者并不实用，但我要介绍几个真心给力的好工具。

小工具合集:

永不使用黑色(Ian Storm Taylor). 这个网站上秉持的观点是纯粹的灰色在真实世界里几乎没有出现过，还有色调是如何影响阴影的灰度 － 尤其是阴影的暗部 － 这能为你的设计增添更多视觉丰富感。另外，带有色调的灰度色更加接近对真实世界的模拟，这是个固有的优点。

Adobe Color CC用来查找颜色，修改颜色和创建颜色组合的超酷工具。

Dribbble按颜色查找这是另一个技巧，你可以按特定颜色查找设计作品的。让颜色的运用有据可查，一旦你已经确定了需要实用的颜色，就来这里看看世界上最优秀的设计师在他们的设计上如何使用同样的颜色。

规则3: 让留白扩大两倍

为了让UI看上去更有设计感，可以留出更多通透的空间。

在规则2里，我们提过黑白效果会强迫设计师在考虑颜色之前先去思考页面空间和布局，并且这种思考模式非常好。好吧，接下来的时间我们好好聊聊空间和布局。

如果你写过HTML代码，你可能很熟悉HTML代码以这种最原始的样子展示在页面上。

基本上，所有东西都被打散放置到屏幕上，字体很小；行与行之间基本没有空间。段落之间有一点点空间，但是远远不够。段落的直接延伸到页面的另一端，无论页面宽度是100px还是10000px，这显然也不够好。

从美学角度说，这简直糟透了。如果你希望你所做的UI看起来是设计过的，你需要在设计中增加更多透气的空间。

有时候需要增加的空间多到近乎荒谬。

空白区块，HTML和CSS

如果你跟我一样，习惯于使用CSS来控制页面的布局，并且默认状况下不会使用空白区块，那现在是时候来改变自己的坏习惯了。在一开始就把空白区块当作页面默认的样子——一切都从空白区块开始，知道你用别的页面元素来替代这个位置。

听起来很有禅意？我觉得这正是大多数人直接忽略这件事的原因所在。

以空白的表格来搭建你的页面，这需要你只使用空白区来开始设计。你会在最初就考虑到边距和空间。无论你在页面上面画些什么东西，都会慎重考虑其对空白区域的影响。

从一堆没有样式的HTML开始布局，也意味着你会更关注页面和内容的关系。空间和留白是后续考虑的事情，这一点必须明确。

这是一个音乐播放界面的概念设计，来自Piotr Kwiatkowski.

特别注意一下左边的菜单。

左侧菜单

菜单项之间的垂直空间高度正好是文字高度的两倍。你所看到的12px字体上下正好有同样高度的留白。

或者也可以注意一下列表中的标题。标题“播放列表”和它下面的下划线之间有15px的距离。这比字体本身的高度还要高一些。更不用说每个列表之间的距离有25px那么远。

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

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

Piotr在留白这件事上真是做到了仁至义尽，而且结果显而易见。这虽然是他自娱自乐做的概念设计，但因为在美感上下足了功夫，能够和市面上最好的音乐播放器UI界面相提并论。

好吧，充分的留白可以让最乱的界面看上去简洁和诱人——像Forum一样。

Forum的概念设计，来自Matt Sisto

活着Wikipedia.

Wikipedia概念设计，来自Aurélien Salomon

你会发现对此有很多争论，比如，有人指出Wikipedia的再设计从理念上完全忽略了使用网站时的功能性。但是我们也不能说这不是个好设计，完全不值得学习！

在行之间留出空间。

在元素之间留出空间。

在元素构成的组之间留出空间。

分析怎么样才是最有效的。

好吧，这就是第一部分的内容。谢谢你的持续关注。