UI设计的7条“规则”一

介绍

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1.让光影天然

2.条理优先

3.充分留白

4.学习图文堆叠

5.使用多种文本样式

6.选择适合的字体

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

条：让光影天然

阴影是好天然的暗示，它可以凸起我们想让用户注重到的界面元素。

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

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

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

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

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

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

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

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

3.个按钮的投影特别很是细腻，放大看会更显明。

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

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

虽然iOS6的风格已经有点过时了，但是它在光的质感体现方面做的特别很是好。

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

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

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