《写给大家看的UI设计书》说了什么？

前言：

这本书的名字叫《写给大家看的UI设计师书》，作者是柯皓；这是一本结合理论和实战为一体的书籍，帮助读者设计出符合规范、正确的、美观的界面。但书中却没有对理论进行长篇大论，更多的是侧向实战。无论是对刚入行的小白还是初级的设计师都十分受用。如果你觉得自己缺乏设计的思维或者设计的规范，那么这本书是非常适合你的。我会尽可能的根据自己对书中的理解给大家介绍知识点，如果大家看了会有那么一丢丢收获，那我的总结和读后感都是值得的！这本书到底讲了什么？我只讲重点，关于什么是UI，行业如何，UI 设计的软件等等这些过于官方的内容不过多的阐述！

第一次写文章，如果有逻辑不通或者表达不清晰的地方请见谅；文章不胜完美，权当抛砖引玉，欢迎大家指点；

目录

UI设计中的四大原则

UI设计中的控件

UI设计中的四大原则

对齐原则：在设计中使用频率最高；

在学生时代，我们作为值日生时，都会要求将桌子和椅子摆放整齐，而这种整齐的依据，就是通过对课桌前后左右的边距进行对齐得来的。相比于没有秩序，没有规则的教室，整齐、规则的教室就更让我们觉到舒适和和谐，会给视觉带来更好的效果。而对齐在ui中是如何应用的呢？

 没有参照物的元素是没法进行对齐的。而当我们把素材拖到画布中时就可以对齐了，这是因为我们可以以画布作为参照物，例如画布的上下左右边缘以及中心都可以作为我们的参照物，当我们把素材进行对齐时就会显得更整齐、舒适。

（图片来源网络）

FEVTE编注：更多UI设计教程，和UI设计理论知识请访问飞特网UI设计教程栏目：https://www.fevte.com/plan/UIdesign/

常用的对齐方式有：边缘对齐和中心对齐；

边缘对齐

即通过元素的边缘进行对齐，包含上对齐、下对齐、左对齐和右对齐；

但是对于新手来说，元素的边缘对齐便是可视区域的最边缘，这里有一个误区，UI设计中，元素的实际尺寸不一定等于视觉尺寸。例如：一个icon会放置在包含具体宽度和高度的矩形框中。如图所示：

除了icon以外，文字的边缘也是如此，无论是PS、XD还是Sketch，当输入一行文本时，都会有一个默认的行高，而该行高才是文本区域的实际高度，并会大于文字的实际高度，如图所示：

所以，当文字与其他元素对齐时，我们会根据内容区域的边缘进行对齐，而不是根据元素自身的边缘，如图所示：

中心对齐

中心对齐，即根据元素之间的中心点对齐，有垂直对齐和水平方向的对齐方式。

但是对于多数新手来说，当文本和其他元素进行中心对齐时，文本自身的对齐方式并未采用中心对齐方式，这是很多新手非常容易忽略的细节之一。

下图左图中的案例就是我们新手常犯的错误，只是将所有元素中心对齐，而并未将文字本身的对齐属性改为中心对齐，这会让我们看起来很违和，很不和谐，而右侧是改过来的效果。

亲密原则：为了主观意识而设计；

我们在设计设置页面时如果只按照对齐的原则来做的话，看上去可以很整齐，但是阅读起来会增加读者的难度和视觉压力。如图：

下图是做了一些简单的调整。

与第一个案例相比，后者显得阅读起来更简单，而他们的区别只在于间距不同；这里涉及到格式塔原理中的接近性原理：元素之间的相对距离会影响到我们视觉感知，通常我们认为互相靠近的元素属于同一组，而那些距离较远的则不属于；

亲密原则的应用是为了更易于用户查看和阅读页面的内容。而我们工作中无论是上司的"奇思妙想"，还是复杂的业务形态，都会要求设计师在有限的空间内填写海量的信息。那么如何处理这庞大的信息呢，层级划分和信息归纳整理就非常重要了。

我们应该根据需求划分好层级结构关系，"分而治之"。合理的将信息分组，归纳为不同的模块，再应用亲密性原则布局。下面我们将分析一下以下例子：

以上案例中，一共有头像、收藏、评论、点赞、视频内容、标题和关注模块；我们把收藏、评论、点赞放为一组，视频内容为一组，头像和标题为一组，并根据组之间设定间距，使得查看起来更为容易。

对比原则：用来体现元素的权重；

通过对齐和亲密的原则，我们可以设计出易于阅读和美观的作品，但是优秀的UI设计远远不止这些，我们还应该通过使用对比来突出元素的存在感，为业务提供更好的支持。

例如，在上面购物App中，购买按钮以及主图都是非常希望用户去看并点击的。所以设计的过程中，他们的权重是最大的，我们应该特殊处理，从而达到业务的目的。

常用的对比手法有：大小对比、粗细对比、长短对比、色彩对比、远近对比，虚实对比等等。例如一个信息流卡片中的设计中包含图片、标题、简介、评论以及时间5个元素。在设计中我们首先划分层级关系和权重。图片和标题必然是权重和层级最高的，紧接着是简介，再下来是评论和时间，关于评论和时间哪个权重更高，这要涉及到公司的业务形态，是更侧重时效性还是更侧重评论，希望用评论的数量来刺激读者点击；如图一是侧重评论：

图二是侧重时效性：

当然，需要我们注意的是，每个设计中的元素所占的权重都是不一样的，如果他们每个都一样重要，那就相当于每个都不重要，毕竟不对比不设计。并且一个设计里不会只单纯到只运用一个对比而已，有时候可能同时出现，大小对比、色彩对比、虚实对比等等多种对比方式。

没有对比时：