厦门UI设计培训：优雅的UI设计7条准则

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

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

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

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

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

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

　　让光影自然

　　层次优先

　　充分留白

　　学习图文堆叠

　　使用多种文本样式

　　选择适合的字体

　　像艺术家一样寻找灵感

　　第一条：让光影自然

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

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

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

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

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

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

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

　　没有按下去的按钮(第一个)，底边有深色的投影。

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

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

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

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

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

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

　　“请勿打扰”所在的控制面板有微弱的投影。

　　“ON”的滑块轨道有微凹感。

　　“ON”的滑块轨道的凹面的底部有反光。图标是微微向外突出的，有看到他们上边的高光吗?他们的光是从上方垂直投射下来的，所以你可以看到很大块的高光。

　　离边角越远，光的层次越丰富，反之则越单一。

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

　　大多数凹面感觉的元素：

　　文本输入区域

　　下压的按钮

　　滑块轨道

　　单选按钮(不可恢复得)

　　复选框

　　大多数凸面感觉的元素：

　　按钮(自然状态)

　　滑块按钮

　　下拉控制菜单

　　选项卡

　　部分单选按钮

　　弹出窗口

　　现在你了解了，以后就可以全面的赏析光影效果了。伙计们，不用太感谢我。

　　等等，扁平化设计的光影效果又是怎样的呢?

　　iOS7因为“扁平化设计”轰动一时，正如其名，它的设计风格就是“扁平”。它形状没有拟物化，也没有刻意追求材料质感，只是用了线条、形状和纯色块来进行设计。

　　尽管我非常喜欢简洁风，但是我并不认为这种风格能一直流行。反而在界面设计中，那种看起来很逼真的拟物化风格是我们无法完全抛弃的。

　　更有可能的是，半扁平化的界面设计可能会在未来更受欢迎，与君共勉，希望你能在以后熟练掌握这种风格。虽说要保持简洁，但是你还是得应用光影来增加用户触摸，滑动，点击的交互欲望。