介绍

事先声明，这篇入门文章不是为所有人准备的，适用人员如下：

开发者：想为自己的作品设计优质界面却不得法

用户体验设计师：想让自己的作品比大师级PPT更加美观。或者是已经发现热销产品的界面和体验总是完美结合的设计师。

如果你是一个艺术学校毕业生或者是一个成熟界面设计师，那么你很可能会觉得这篇入门文章无聊、错漏百出，令人恼火。这没关系，你所有的看法都是对的，那么就请点击上方的“关闭页面”吧。

让我来告诉你你会在这篇文章中了解什么吧。

首先，我是一个没有用户界面设计技能的体验设计师。我热爱我的职业，但是我并没有很多工作经验，因为我以前不知道美观界面的意义：

当时作品没水平，反响不好，急需改进。 我的潜在客户更愿意去用一些不仅仅只会画交互原型图的设计师的作品。 难道我想一直当一个菜鸟吗？当然是想成为中流砥柱了。

我有自己的理由：我不了解垃圾美学，因为我专攻于工程学——难看的设计几乎是它成功的标志。

后来我同样研究了一些看起来好看的APP，我从中得到了一些创造性的发现：完全的、理性的分析。然后不好意思的借鉴了一下。我曾经在一个UI项目上花费了十个小时，其中九个小时在疯狂的学习，一个小时在制作——绝望的在谷歌、图钉和追波上找到了可以借鉴的作品。

这些“规则”就是从那十个小时里学到的。

给菜鸟的良言：如果你在UI设计上不够好，那是因为你更善于分析，而不是在美和平衡上没有天赋。

这篇文章不是理论，而是实践。这里没有黄金分割，也没有配色宝典，只有我的一些经验教训和一直以来的练习。

举例来说，柔道因为日本尚武的传统思想一直延续到现在。可是学习柔道的时候，除了演练，你也会听到关于力量、流派以及和睦这类的东西。

上个世纪三十年代，在（前）捷克斯洛伐克，一些同纳粹斗争的犹太人发明了近身格斗术。在这种不优雅的格斗术课上，你会学到如何用一支钢笔或者一本书来刺瞎敌人的眼睛。

UI是显示屏上的近身格斗术。

下面来介绍设计优雅UI的几条准则：

1.让光影自然

2.层次优先

3.充分留白

4.学习图文堆叠

5.使用多种文本样式

6.选择适合的字体

7.像艺术家一样寻找灵感

第一条：让光影自然

阴影是最自然的暗示，它可以突出我们想让用户注意到的界面元素。

“让光影自然”——这可能是学习UI设计最重要却最容易忽视的准则。因为光总是天上射下来，所以一旦它反着从下而上，我们就会觉得非常别扭。

当光从天空中射下来，会照亮最上面的事物，并且向下投射出它们的影子。所以顶部最亮，而底部最暗。

你平常不会看到下眼睑阴影很重的人，所以如果有人在脸的下方打光，然后站在你的门前，你肯定会被吓个半死。

没错，这对UI来说也是一样。在用户界面中，所有的元素都有阴影和所有的元素都没有阴影效果其实是一样的。我们的屏幕是二维的，但是我们给元素加入了很多效果，让它们看起来像是三维的。

我最喜欢这个按钮被圈出来的右下方的部分：

拿按钮来说，就算是这种扁平化的按钮也会有一些光影细节。

1.没有按下去的按钮（第一个），底边有深色的投影。

2.第一个按钮会有一个从上到下，从浅到深的渐变，这是因为它在模仿微凸的效果。就像你照镜子的时候会把镜子稍稍倾斜来采光，按钮也是如此，表面的微凸会增加光泽质感。

3.第一个按钮的投影非常精致，放大看会更明显。

4.按下状态的按钮虽然仍旧有从上到下，从浅到深的渐变，但是整体明度较低。这是因为光一般很难到达向下凹陷的面。在现实生活中也是如此，因为我们在按下按钮时手会挡住光。

这仅仅是一个按钮，但是仍然会有四种光的微效果。我们可以通过下面这个例子来了解一下。

虽然iOS6的风格已经有点过时了，但是它在光的质感表现方面做的非常好。

这是一对iOS6的设置按钮——“请勿打扰”和“通知”。你是不是觉得这没什么特别的？那我们现在来看看这两个按钮上有多少光影效果吧。

“请勿打扰”所在的控制面板有微弱的投影。 “ON”的滑块轨道有微凹感。 “ON”的滑块轨道的凹面的底部有反光。图标是微微向外突出的，有看到他们上边的高光吗？他们的光是从上方垂直投射下来的，所以你可以看到很大块的高光。 离边角越远，光的层次越丰富，反之则越单一。

是一个分界线的细节图，来自于我很早以前的“Hubster”概念。