UI设计新手？试试这7条实用法则吧一

本文编译自Medium，作者是一位UX（User Experience，用户体验）设计师，他通过自己学习UI设计的过程，总结出7条实用的法则，为UI设计新手提供了珍贵的经验。文章分为2个部分，今天禀享部分，来学习咯！

序言

首先，明确一点，这篇文章并不是为所有人预备的，而是有特定的目标读者：

想要在开发产品时设计出悦目UI的开发者。 想要让自己作品集更出彩的UX设计师，或者是想要做出更优美的UI和UX的设计师。

假如你是学艺术的学生或者已经是UI设计师了，你可能觉得这篇文章很无聊，而且观点都是错的。没关系，你的指斥没错，把这个网页关了，去忙别的事吧。

那么从这篇文章中到底能学到什么呢？我曾是一名不懂UI的UX设计师。我特别很是热爱UX设计，后来我发现，做出优美的界面是多么的需要:

我以前的作品集看起来一团糟，显得我的作品和思考过程很差劲。 我做UX咨询的客户更喜好有能力呈现作品的人，而不是只会画一堆方块和箭头的人。 我能为一些早期的创业公司工作吗？照旧一边儿呆着吧。

我当然也有托言：

我没有美术基础，我主修工程专业，所以我做出难看的东西也无可厚非。

好终，我照旧学了app设计，赓续地分析案例，厚着脸皮临摹成功的作品。假设我在1个UI项目上花10个小时的时间，其中只有1个小时是有用的，其它9个小时都是在失败中赓续地学习，玩命的在Google、Pinterest或者Dribble上找值得借鉴的东西。

下面这些“法则”都是我从失败中总结出来的。所以，我需要提醒新人：我现在擅长UI，主要得益于我经常分析，并不是倏忽开悟，理解了什么是美，什么是平衡。

这篇文章不讲理论，只谈应用。我不会讲什么黄金分割、色彩理论，只有实站中总结出的经验和教训。就彷佛，柔道源于日本几个世纪以来的尚武精神和哲学理念。上柔道课时，不仅能学到打斗，还会学到许多关于能量、气息与协调之类的东西。而以色列格斗术（Krav Maga）则完全不同。这种格斗术是纳粹榨取下犹太人发明的。其中根本没有“艺术”，在以色列格斗术的课堂上，你学到就是怎样用一根笔或者本书袭击别人的眼睛。

这篇文章就是产品设计领域的以色列格斗术。

以下是我要讲的法则：

光线来自天空 诟谇优先 增添空白空间 学会在图片上呈现文字（第２部分）

做好强调和淡化（第２部分）

只用合适的字体（第２部分）

善于借鉴优异的作品（第２部分）

我们来一路看看这些法则。

法则1：光线来自天空

阴影能够告诉人脑我们到底在看什么样的UI元素。

这可能是学习UI设计时，好容易忽略却又极为主要的一点了：光线来自天空。光线总是从天空（上方）来的，从下面照上来的光看起来会特别很是诡异。

当光线从天上照下来的时候，物品的上端会偏亮，而下方会出现阴影。上半部分颜色浅一些，而下半部分深一些。

从下面打一束光到人脸上是不是看起来很渗人？UI设计也是同理。我们的屏幕是平的，但是我们可以通过一些艺术手法让它看起来是3D的，在每个元素的下方加一些阴影。

就拿这个按钮举例，这是一个相对“扁平化”（flat）的按钮，但依然可以看出一些光线转变的细节:

没有按下去的按钮底部边缘更暗，因为没有光线照到那里。 没有按下去的按钮上半部分比下半部分稍微亮一些。这是在模拟一个略有弧度的外观（见侧视图）。 没有按下去的按钮下方有一些细微的阴影，在放大图中看得更清楚。 按下去的按钮整体颜色都更暗了，但下半部分的颜色依然比上面深。这是因为按钮在屏幕的平面上，光线不容易照到。也有人说，在现实中，按下去的按钮颜色更深，因为手遮挡住了光线。

这么一个简单的按钮就有4种不同的光线转变。现实上，我们可以把这种原则运用到各处。

iOS 6有点过时了，但照旧学习光线不错的案例。这张图是iOS 6“勿扰模式”和“通知”的设置，看看上面有多少种不同的光线转变。

控制面板的上边缘有一小块阴影。 “开启”滑动槽上部也有阴影。 “开启”滑动槽的下半部分，反射了一些光线。 按钮是凸起的，上边缘较亮，因为是与光源垂直的，接收了大量光线，折射到你的眼睛中。 因为光线角度的问题，分割线处出现了阴影。

通常会内嵌的元素：

文字输入框 按下的按钮 滑动槽 单选框（未选择的） 复选框

通常会外凸的元素

未按下的按钮 滑动按钮 下拉控件 卡片 选择后的单选按钮 弹出新闻

等等，现在不是追求扁平化的设计吗？

iOS 7引发了科技界对于“扁平化设计”（flat design）的追求。也就是说图标是平的，不再模拟实物而外凸或内凹，只有线条和单一颜色的外形。

我很喜好这种干净、简洁的风格，但是我认为这种趋势不会长久。通细致微的转变模拟出3D的效果特别很是天然，不会被完全庖代的。

在不久的未来，我们很可能会看到半扁平的UI（这也是我推荐你使用的设计风格）我把它称为“flatty design”，依然特别很是干净简洁，但是也有一些阴影，有轻点、滑动、按下操作的提醒。

现在，Google也在各个产品上推行他们的Material Design，提供一种同一的视觉设计语言。Material Design的设计指导为我们展示了它如何运用阴影体现不同的条理。

这也是我所认同的类型。用现实世界的元素来传递信息，关键在于：细微。你不能说它没有模拟现实世界，但也绝不是2006年的网页风格，没有纹理，没有梯度，更没有光泽。

我认为“flatty”是未来的方向。扁平化？早晚会过时的。