优质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：

1. Button 未被按下 时，底边有一个黑色做为明暗交界。
2. Button 表面的颜色也从上到下有一个由浅变深的渐变效果，从而展现出了一个微曲的弧线。
3. Button 未被按下时下端有一块明确的阴影，来表示光被遮挡。
4. 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将会引领将来，那扁平设计呢？哈哈，其实早就实现啦：