文章总结了关于优秀UI设计的7条准则，希望对你有所启发。
首先声明，这篇指南并不适用于所有人，那么它适用于哪些人呢？
那些在必要时需要做出好看的UI设计的前端工程师们；
那些希望自己的产品结构演示比五角楼风格幻灯片更好看的，或那些明确知道自己的一套很棒的用户体验，如果有更好的UI设计包装，那么会卖得更好的UX设计师和产品经理们。
如果你曾经上过艺术学校，或者已经是一位资深UI设计师了，那么你看这篇指南，收获可能不会很大，因为这些对于你来讲应该是基本功了。
那么，在这篇文章（指南）中，你会获得什么呢？
我是一名不懂任何UI技术的UX设计师，我很喜欢UX设计，但是在意识到我应该去学习怎样把产品交互界面做得很漂亮之前，并没有想过以下这些事：
我的产品结构糟糕得仿若车祸现场，这反应出我的工作和思考过程情况不佳；
当UX设计师的技能不仅仅是做一些可以拖拽、跳转的草图、方框和箭头时，客户会更加买账。（也就是说，UX设计师只是做一套简单的线框原型已经无法满足客户了。）
我愿意为一个初创公司服务吗？
其实这里面有我自己的原因，我对于美学了解甚少，我的专业是工程学——好像这个专业十分擅长做出一些很难看的东西来。
最后，我像学习其他创造性的东西一样去学习应用程序的美学：非常冷硬地去分析……和非常无耻地去抄袭别人的作品。我经常花十个小时在项目的UI设计上，用其中1个小时制作完成，其余9个小时则是用来野蛮、生硬地学习——在Google、Pinterest、Dribbble上拼命地搜索、寻找可以借鉴的东西。
而这篇文章中的“准则”就是我从这大量的“搜索”时间中总结出来的。
因此，我必须提前说明：如果说我现在对UI设计方面比较擅长了，那是因为经过了长时间的分析，我总结出一套规律来，并不是因为我本身对美观、平衡感这些美学类的东西有直观的理解。
这篇文章不是理论，它是纯粹的实践经验。你在这里不会看到任何关于黄金比例之类的东西，我也不会强调什么色彩理论。你只能看到那些我从失败的设计中学到的教训和我经过长时间刻苦实践得来的经验。
你可以这样去想：柔道是基于日本几个世纪以来的武学和传统哲学发展而来的。你学习柔道，那么除了战斗，你还需要学习很多关于精神、能量流转、和谐这些的东西。
而与之相反，Krav Maga（近身格斗的一种）是由那些30世纪居于捷克斯洛伐克街道上的犹太人，为了抵抗纳粹而发明的。这里面没有艺术，在Krav Maga的课程中，你要学的就是如何用一支笔迅速刺伤敌人的眼睛并尽快逃离。
这篇文章，就像Krav Maga的课程一样，没有太多理论的东西，只讲实践中有用的那部分。
目录：
光来自天空
黑色和白色优先
双倍的空白区域
学习将文案覆在图片上的方法
使你的文案看起来很潮
使用好看的字体
像艺术家一样“偷窃”
好了，我们进入正文
准则1：光来自天空
阴影对于告诉人们大脑，我们看到的用户界面元素是什么有着莫大的作用。
这大概是我们学习UI设计时最不显眼却十分重要的部分了：光来自天空。光源自上而下是比较常态且持续的，一旦光源是自下而上的，那么看起来就很古怪。
你从不会觉得人的下眼睑是什么特殊的形状，但是一旦被自下而上的光照亮，一瞬间出现在你的门前，你会被吓一跳……
同理适用于UI设计，我们产品基础页面是没有阴影的，而那些带阴影的基本上都是UI元素。我们的屏幕是平面的，但是我们会为这些产品UI元素添加各种艺术加持，让它们看起来像3D的。
拿按钮举例，这个看上去很平的按钮，也是有一套阴影细节需要注意的：
未按下去的按钮（图上方的那个）会有深色的侧边边缘，因为光是照不到那里的。
未按下去的按钮的中心顶部会比边缘处稍微浅，因为它在模仿一个有着细微弧度的表面，光从顶部投射下来，顶部会比边缘更亮。
未按下去的按钮会投射出非常浅的灰色阴影，在放大的情况下更容易识别。
按下去的按钮顶部依旧比边缘处颜色浅，但是整个按钮的色调都会变暗，这是因为在模拟这个按钮被按下去，和屏幕平行，光照与之前比无法完全照射下来；另一种说法是，现实中我们按下一个按钮也会变暗，是因为我们的手挡住了光源。
这只是一个小小的按钮，就有4条阴影细节影响它的表现效果。这就是我们总结出来的经验，可以应用到更多的场景中。
iOS 6有点过时了，却是学习光影行为的好素材
这是一对儿iOS 6的设置按钮——“请勿打扰”和“通知”，看上去没什么大不了的，对吗？但是你仔细看看，它们有多少阴影表现？
① 设置栏上边框投射出小的阴影。
② “ON”的滑块轨道也在滑轨里投射出阴影。
③ “ON”的滑块轨道是凹面的，里面的按钮能反射出更多的光（更亮）。
④ 左侧图标看着比较立体（凸出来像玻璃一样），看到它们上半部那条有点亮线了吗？这条线垂直于光源，因此接收到更多的光，并把这些光反射到你的眼睛里（更亮更浅）。
⑤ 两栏中间的分割线也做了阴影处理，被光照到的角落亮一些，反之暗一些。
边栏分割线特写
通常表现出来是嵌在屏幕里的元素：
文字填写区域
按下的按钮
滑块轨道
单选按钮（还未被选择）
复选框
通常表现出来是从屏幕里凸出来的元素：
未按下的按钮
滑块轨道上的滑块
下拉控件
卡片
单选按钮（已经选中状态）
弹窗
现在你知道了，你需要注意方方面面。
等等，那么扁平化设计呢？
iOS 7用“扁平化设计”震撼了科技交流界。它说它的设计完全是平面化的——不用模拟任何凸起或者凹痕，只有纯色的线条和图形。
我非常喜欢简洁风，但我并不认为完全扁平化是一个长期的趋势。拟物3D风格在我们的交互体系里看上去很自然地完全被放弃了。
可是我认为现在正悄悄崛起另一种设计风格——半扁平化的UI设计。依旧干净、简单，但是在一些元素上要做阴影处理，用来提示用户交互动作——按下/点击/滑动等。
OS X Yosemite——半扁平UI设计
在我写这篇文章的时候，Google正通过他们的产品推出“Material Design”。这种视觉语言的核心就是模拟真实的物理世界。
下面这张图就是“Material Design”指南中的一部分，讲解的就是如何用阴影来表现不同的深度。
这是我认为会延续发展下去的东西。它使用很细微的真实世界元素来传达信息，请注意关键词：细微。
你不能说它没有模仿真实的世界，但它也不是2006年风格的网页。它没有纹理、没有梯度、不油腻。
我认为半扁平化是未来的发展趋势，至于扁平化设计，我觉得它已然过时了。
准则2：黑色和白色优先
在添加色彩之前，使用灰色可以简化大多数复杂的视觉设计元素，有助于我们将精力集中于元素的排版上。
现在的UX设计都会遵循“移动先行”（mobile-first）的策略，这意味着你需要先考虑产品在手机上的页面呈现和交互设置，然后再去拓展到像素更精密的显示屏上（Retina monitor）。
这种方式很赞，可以让你的思考更加清晰。你首先需要解决比较困难的问题（在一块非常小的屏幕上设计一个可行的app），然后参考其解决方案去解决比较简单的问题（在一块大屏幕上设计一个可行的app）。
同理：在设计中，黑色和白色优先。
首先解决比较困难的问题——在没有其他颜色的加持下，想办法把页面设计得好看又实用。最后再添加颜色，锦上添花，如虎添翼。
Haraldur Thorleifsson灰色的网页线框图（比一部分设计成品还好看）
这种方式可以让app清爽又简洁。在很多地方用太多色彩很容易把这种简洁破坏掉。黑白色优先有助你集中精力在间距、大小、布局这些地方，这些是简洁的设计最基本的内容。
优雅的灰色
当然，也有很多的app并不适用于“黑白优先”的原则。因为这些app需要表达一种特定的态度，比如“运动”“浮夸”“卡通”等风格，这需要设计对色彩的运用十分老练。但是大部分的app并没有这种需要表现的特殊的态度，只需要简单干净就行了。不可否认，前者设计起来难度会更高。
色彩张扬的网页，看着简单，设计起来很有难度
除了有特别需求的情况，我们都可以使用“黑白优先原则”。
接下来，我们需要了解：怎么去添加颜色。
最简单的方法是，只添加一种颜色。
在灰色风格的网页上添加一种颜色犹如画龙点睛，非常亮眼且有效。
也可以在此基础上进行延展：灰度+两种颜色；灰度+同一色调的多种颜色；
在实践中的色彩代码
什么是色调呢？
通常来讲，我们说到的色彩是RGB十六进制代码。这一点很重要，但经常被忽略。对于框架设计来讲，RGB并不是最好的选择，HSB比较实用。（HSB又被称为HSV，和HSL相似。）
HSB比RGB好，是因为它更自然，你可以预测当你改变一个HSB色值后，你看到的颜色会有什么改变。
如果你是第一次知道HSB，这里有一篇HSB入门推荐给你：《The HSB Color System: A Practitioner’s Primer》
纯色调-金色系
纯色调-蓝色系
通过修改纯色的饱和度和亮度，你可以得到丰富的色彩——深的、浅的、适合做背景的、色泽浓郁的、引人注目的——而且，这些丰富的色彩还不会让人眼花。
使用从同一个或两个基础色调中提炼出来的多种色彩，可以突出和中和产品中的各个元素，而且不会让你的设计看上去混乱。
Kerem Suer设计的倒数计时器
准则 3：双倍空白区域
如果想让你的UI有设计感，那么就多给页面一些呼吸空间。
在准则2中，我提到“黑白优先”可以迫使你在考虑色彩前关注间距和布局。现在我们来讲讲关于间距和布局的一些事情。
如果你从一开始就去填充HTML内容，那么你的页面可能会自然而然地形成这个样子。
所有内容密密麻麻地挤满了整个屏幕。字号特别小，行之间也没有间距，段落之间也只有那么一点点空隙，无论是100xp还是10000xp的页面，都会被这些内容填充得满满登登。
从审美角度来看，这太可怕了，如果想让页面有设计感，我们需要在元素中间留出更多的空白，甚至这些空白的数值也许听起来有些匪夷所思。
