优质UI的7条准则（一）

本文原文来自于 Medium：https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda，作者为：Erik D. Kennedy https://twitter.com/erikdkennedy。

虽然是译文，但是我在字里行间里也会加入自己的一些看法。

简介

首先，这个讲义并不适用于所有人，他主要是为了：

那些想要得心应手地制作出漂亮 UI 的程序员
那些想要自己的产品集超出常人的 UX 设计师，或是那些想要设计出优于知名 UI 库的交互的人。

如果你是一个设计学院的学生或者认为自己是一个很不错的 UI 设计师，那么你也许会觉得这篇文章有点乏味，错误甚至是令人反感的。不过，anyway。

那这些准则可以告诉你什么？

首先，我曾经是一个完全没有 UI 技术的 UX 设计师。当然，我热爱设计交互，但我之前并没有很重视他直到发现设计一款好的交互有很多的好处。

我那时的 portfolio 简直不堪入目，很难反映出自己的思想和努力
那些 UX 的客户愿意去支付一个人的专业技术而非他涂涂画画
有朝一日也许我还想创业，那就一定得搞定这个技术

我和很多人一样，有一个接口，那就是我对“美”没有概念。作为一个工程师、程序员，做一个其丑无比的样式简直像是天赋。

最后，和学习其他的创造性工作一样，我也掌握了一些美学的标准：他们标准化，需要认真的思考。并去借鉴那些展示效果很棒的设计。因此，在被支付1个小时的薪酬下，我用了10个小时来研究一个 UI 项目，而多出的9个小时则是无尽地学习。玩命地在 Google, Pinterest 和 Dribbble 上去搜索、抄袭那些成功的设计。

而这个文章里的“准则”就是从这些多余的学习中总结出来的。@那些“nerds”，如果你觉得我现在做的 UI 设计确实不错，那是因为我用了很久地时间去思考和分析，而非找到了什么窍门或是神乎其技的直觉。

这篇文章也非理论，而单纯的是一些应用层面的指导。所以你绝对看不到啥黄金分割，更不会有什么配色，唯一需要的就是学习、分析、训练。

做个比喻，如本的柔道经历了几个世纪的发展，里面蕴含着武道、哲学的思想。你去上柔道课，除了击败对手，也会学到很多关于能力流动、平衡的知识。而这篇文正里的内容更像是 Krav Maga（一种自卫搏击术），它发明与1930年代的捷克接头，用于反抗纳粹。这种波技术力没有任何的“道理”，你所要学的就是用尽一起方法干掉对手。

准则一：光是从上方照下来的

阴影可以非常有效地让人类大脑去快速分析理解一个 UI 里的元素。

这也许一个非常重要的、但被人忽视的 UI 准则：光从上天上照射下来。当光从上测照下，物体的上面被照亮，而下面会被映出阴影，因而上端颜色略浅，下端略暗。如果翻转过来，你可能会回想起那些恐怖电影里，用手电筒自照的女子。

在 UI 设计里这是同理。为所有的页面元素的底边加上一点点的阴影，就会让一切有一种 3D 效果。

例如这个简单设计过的buttons：

Button 未被按下时，底边有一个黑色作为明暗交界。
Button 表面的颜色也从上到下有一个由浅变深的渐变效果，从而展示出了一个微曲的弧线。
Button 未被按下时下端有一块明确的阴影，来表示光被遮挡。
Button 被按下时，整个表面夜色加深，但上下浅深不变关系。类比于，当按键按下时手会遮挡一部分光线。

这样的光影效果可以被应用于很多地方。例如 iOS 6 里的开关设计，你可以明显感觉到内嵌的按钮通广上端的光纤呈现出拟物立体感，而这其中包含着很多很多的效果：

开关上测的边檐映下来一段小的阴影
ON 内嵌留有缝隙
ON 呈现凹型，且底测有光线
Icons外凸，且边框内的亮白显示凸显了光强
整个内侧的分割除有小凹槽，显示了一个很小的阴影。

同样的设计也出现在下图中：

那些内嵌的元素：

字符输入框
按下的 buttons
滑轨的滑扭
未选中的 radio button
未选中的 checkboxes

那些外凸的元素：

未按下的 buttons
滑轨的 buttons
下拉菜单的按键
卡片
radio button 的按键部分
弹出框

这样的设计几乎随处可见。

那么问题就来了？Flat Design 是咋搞的？

iOS 7 的非标准扁平化设计轰动了整个技术设计界。在没有凸起和内嵌的世界里，只剩下了简单的直线、几何图形和纯色。

我同样喜欢简单干净的设计，但是这可能不是一个长期的潮流，因为抽象出来的类 3D 效果肉眼看起来舒服太多了。而更有可能的是，那种半扁平的设计将会主导设计风格，而这种风格被我称作 “flatty design”。它维持了干净简单的观感，但是较为隐晦的阴影会凸显那些点击、滑动、点触的效果。

当我在写这篇文章的时候，Google 为其全产品线推出了他们的设计语言 “Material Design”。这样一种统一化极高的设计风格其实就是在寻找一种高度抽象的光影色彩来模拟现实世界。

所有的 Material Design 展示、讲解中都明确地表达了不同高度下风格的特点：

这种微妙的样式变化，展现了一个全新的但又更贴近现实的设计风格。当日，这和 2006 年的电脑界面不同，那时没有纹路、渐变色和光泽。

Flatty将会引领未来，那扁平设计呢？哈哈，其实早就实现啦：