打造出色 UI 的 7 个法则（上）

序言

首先，明确一点，这篇文章并不适用于所有的人，而是为以下人群准备的：
 

如果你上过艺术学校，或者已经是一个UI设计师了，你可能会觉得这篇文章比较无趣，而且观点都是错的，甚至会让你感觉不舒服。没关系，你的批评没有错，把网页关掉继续做你的事吧。
 

我曾是一名不懂UI的UX设计师，我喜欢设计UX，但是没过多久我便意识到做出精美的界面是多么有必要：

我也有一些理由来安慰自己：我不知道美学的糟粕是什么，我主修工程专业，因此做出来的东西很不美观也无可厚非。
 

最后，我学习了app的美学，同样我也学会冷静、努力地分析创意，而且毫不羞愧地去临摹好的作品。如果我在一个UI项目上花了10个小时，那么只有1个小时是有效的，其他的9个小时却是在失败中学习。我拼命地Google、Pinterest、Dribbble 里面找可以临摹的东西。
 

这篇文章就是这些失败所总结的“法则”。
 

因此，我想对那些新人说：我现在擅长UI设计，那是因为不断的分析，而不是突然领悟到美与平衡。

这篇文章不是理论研究，只讲实际的应用。文章里不会出现黄金分割，也不会提什么色彩理论，只有我从失败和不断的磨练中学到的东西。比如：柔道的发展源于日本武术和哲学思想。上柔道课时，除了过招，你还能学到能量、气息与和谐之类的东西。以色列格斗与此不同，它是由20世纪30年代的犹太人发明的，那时犹太人正处于纳粹人的压迫之中。其中没有艺术，在以色列格斗术的课上，你会学到怎么用笔和书本去袭击别人的眼睛。这就是荧屏上的以色列格斗术。

 

法则如下：

1. 光线要由上往下
2. 黑白优先
3. 增加空白的空间
4. 处理好图片上的文字
5. 突出与淡化文本
6. 只用优秀字体
7. 像艺术家那样偷师

1：光线要由上往下

阴影对于我们所见到的UI元素意义重大。

或许这就是我们在学习UI设计的过程中最为重要的非明显事物。光线来自天空，光线总来自于天空，因此从下面产生的光就显得很诡异。

当光线来自于天空时，它会照亮食物的顶部，在下面产生阴影。上面部分颜色浅，下面部分颜色深。光纤由上到下照到脸上很自然，如果反过来话就很瘆人：

当然，UI设计也是如此。正如我们五官下都有些许阴影，在任何一个UI元素下方你都能找到阴影。我们的屏幕是平的，但是我们可以采用艺术手段让它看起来是3D的。

当然，UI设计也是如此。正如我们五官下都有些许阴影，在任何一个UI元素下方你都能找到阴影。我们的屏幕是平的，但是我们可以采用艺术手段让它看起来是3D的。

拿按钮来举例。即便是相对“扁平化”的按钮，依然能看到一些光线变化的细节：

1. 未按下去的按钮底边更暗，光线没有照到那里。
2. 这种未按下去的按钮上半部比下半部更亮，这是因为在它模仿了一个稍微弯曲的表面。当你将面前的镜子倾斜来看镜中的太阳时，表面会反射出比太阳投射还要多的光。
3. 未按下去的按钮有微妙的阴影，在放大的图中可能会更清楚。
4. 按下去的按钮虽然底部比上部更暗，但是整体都是暗的，这是因为它处于屏幕的平面上，阳光不容易照到。有人会说，在现实生活中按下去的按钮更暗，那是因为我们的手挡住了光线。

仅仅一个按钮就有4种不同的光线变化，重点就在这里。现在，我们将这种手法用到别的地方。

这里有一组ios6的“勿扰模式”和“通知”设置，现在来看看会有多少种光线的变化。

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

通常会内凹的元素：

• 文本输入框
• 按下的按钮
• 滑动槽
• 单选框（未选中的）
• 复选框

通常会通常会外凸的元素：

• 按钮（未按下的）
• 滑动按钮
• 下拉控件
• 卡片
• 被选中后的单选按钮
• 弹出消息

了解了这些之后，你就会在很多地方发现这一法则。恭喜你入门了！

等等，那扁平化设计呢？

ios7引发了科技界对“扁平化设计”的追求。也就是说图标是扁平化的，不再模仿外凸或内凹，而是只有线条和单一颜色的形状。

我很喜欢，干净、整洁的风格，但我不认为这是一种长久的趋势。通过光纤的微妙变化来模拟3D的效果很自然，但是无法被完全取代。

在不久的将来，我们很可能会看到半扁平的UI（这也是我推荐你们要深入学习的设计）。我把它叫做“flatty design”，依然干净、简洁，但是会有一些阴影，有轻点、滑动和点击操作的提示。

现在，Google在各个产品上推行他们的Material Design语言，这是一种统一的视觉语言，其核心部分就是模仿物理世界。

Material Design的说明展示了它如何运用不同的阴影区表现不同的层次。

这也是我所认同的类型。

它使用了真实世界的元素来传达信息，关键在于：细微。

你不能说它没有模仿现实世界，但它也不是2006年的网页风格。没有纹理，没有梯度，没有光泽。

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

2：黑白优先

在上色前用灰度模式可以简化大多数视觉设计的复杂元素，还能让你专注于空间和元素的布局。

UX设计师现在都喜欢“移动优先”，这就意味着你要先考虑如何在手机上显示页面，然后再考虑在超清Retina显示屏上的显示效果。

这种限制很好，它能理清思路。先解决复杂的问题（在小屏幕上显示），然后再解决简单的问题（在大屏幕上的可用性）。

有个类似的限制：设计黑白优先级。先从复杂的问题入手，使app美观易用，但不要借助颜色，最后再有目的地上色。

这种方法能让app保持“干净”、“简洁”。加入过多的颜色会使丢失干净、整洁的效果。“黑白优先”的原则能促使你关注空间、尺寸和布局的问题。这些是在设计干净、简洁的页面时首要考虑的问题。

下面来看“黑白优先”法则不适用的几个例子。比如运动、卡通等具有鲜明特色设计就需要一个能够将颜色运用到极致的设计师。然而大部分app并没有这样鲜明的特点，只要保持干净和简洁就好。那些色彩绚丽的颜色被公认是很难的。

所以，还是用“黑白优先”原则。

第二步：如何上色

最简单的上色方法是只加一种颜色。

给灰度模式增加一种颜色可以简单快速地吸引注意力。

你可以进一步，灰色基础加上两种颜色，或是同意色调的多种颜色。

实践中的颜色是什么色调？

网页中主要用的是十六进制RGB表。最好不要管这些，RGB不是好的颜色设计框架。大多数采用的是HSB模式（相似的有为HSV或HSL）。

HSB比RGB更符合我们平常看待颜色的方式，而且你也可以预测HSB的变化是如何影响我们所看到的颜色的。

如果你对此不熟悉，可以参考《设计师配色宝典！教你从零开始学配色》

通过调整单一色相的饱和度和亮度，你可以生成多种颜色——深色、浅色、背景色、强调的地方和吸引人的地方，但是这不会扎眼。只用一种或两种色调的颜色是强调和淡化元素却不把设计搞得一团糟的最好方法。

关于颜色的其他建议

颜色是视觉设计中最复杂的部分。从负复杂的理论和长期的实践中，我得出了一些好的建议：

小贴士：

• 不要使用纯黑色，在现实世界中是几乎没有纯黑色的，调整不同的饱和度，尤其是阴影部分的饱和度，能够给你的设计提高丰富程度。此外，饱和的灰色更加接近现实世界。
• Adobe Color CC：寻找/调整和创建颜色组合的最佳工具。
• 在Dribbble通过颜色搜索：寻找与某颜色搭配的最好方法，实用性比较好。如果你已经决定了使用一种颜色，可以看看世界顶级设计师是如何给那种颜色配色的。

3：增加空白空间

留出一些空间，使UI看起来由设计感。

在法则2中，我提到“黑白优先”的原则能促使设计者先考虑空间和排版，再考虑颜色和美观。现在就来看看空间和排版吧。

如果你编写过HTML，那么你就会对HTML在网页上的默认排版比较熟悉。基本上所有的东西都会堆在屏幕上，字体、行距都很小，在段落之间小的间隔，但不是很多。段首至段尾也就100px或是10000px的距离。

从美学上来讲，这很难看。如果你想设计一个好看的UI，你就

转载本站文章《打造出色 UI 的 7 个法则（上）》,
请注明出处：https://www.zhoulujun.cn/html/design/ui/2015_0706_9.html