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

前言：

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

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

目录

UI设计中的四大原则

UI设计中的控件

UI设计中的四大原则

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

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

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

（图片来源网络）

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

边缘对齐

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

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

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

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

中心对齐

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

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

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

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

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

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

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

 

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

 

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

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

 

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

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

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

 

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

 

图二是侧重时效性：

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

没有对比时：

添加粗细对比时：

添加色彩比时：

以上就是用时对比的一些小技巧，虽然简单，但是在实际中的应用也许得到意外的结果；

重复原则：可以更能提现一致性，使得页面更统一；

之前有提到过对比，但是过多的对比会对用户的视觉混乱造成干扰，而合理的采用对比并使用重复原则便会使得页面干净整洁统一，给予用户良好的视觉体验。

 

以下案例中，同一个App，但会给人一种不同应用的错觉。使用不同的配色，给用户的视觉体验带来了很大的挑战。

而重复原则则是为了避免以上情况的发生，尽可能重复的使用相同配色和控件来给予用户良好的视觉体验和降低用户的认知成本。所以，当我们在设计一款产品前期，我们应该具备组件化思维，即设定好合理的设计规范，常用的设计规范有以下这些：

可以看到以下app中两个页面的标题、圆角、正文等的属性都有重复应用到，而之后的页面相信也会进行类似的设计，这样做的目的不仅可以提高用户对产品的认知度，往往还会大大提高设计和开发人员的效率，更重要的是它可以帮助我们在设计大量的页面时可以保持风格的统一和协调。

四大设计原则就此告一段落，如果我们以此作为我们设计的依据，相信会给我们的作品带来不一样的效果。

UI设计中的控件：

控件：是界面中的基础组层的要素之一。下面我将控件的类型和常用的设计尺寸给大家简单介绍。

按钮

按钮则是大家最熟悉的控件之一了，最原始的是拟物化的按钮，但经过十几年互联网对用户的培养，已经走向了扁平时代。普遍的按钮都是有一个长方形矩形和文字组层，而我们只需要关注按钮的高度即可，长度是有设备尺寸来自适应。

按钮尺寸

我们都知道移动端UI都有一个不成文的法则——44pt法则，但这里的44pt指的是不可见的热点区域，而不是元素的实际尺寸，但是并不是说我们所有的按钮尺寸高度都设定为44pt，只是安放在按钮权重较高的页面上而已。如登录和注册按钮上：

根据长期的实践经验，当按钮权重较低时可以设计成小于44pt的高度；而20pt是按钮可以使用的最小高度尺寸，原因不仅在于视觉上的大小，还在于我们的操作上，我们常用的标签就按照了20pt的尺寸进行设计的，比如某宝上的标签：

此外按钮的左右间距以及上下间距我们都应该按要求去留白，如：4pt、8pt、12pt等；所以当我们设计尺寸的宽度时，应该根据内容的多少再加上左右的留白再确定宽度。

上下留白：

输入框

输入框是我们向系统输入文字的窗口，常见的类型有搜索框、账号、密码等多种形式；

输入框尺寸

 

单行输入框的高度其实和按钮的高度很相似，都可以用44pt作为他们的高度标准，不同的是，一个应用所包含的输入框类型通常只有两种。所以我们只需要将一种输入框设置成大于或等于某个高度，而另一种输入框的高度设置为小于这个高度即可。

宽度不会有具体的限制，通常会根据实际排版的需求来设置。

步进器

步进器其实跟输入框很相似，相当于输入框的另一种样式，所以它的大体跟输入框很接近只是增加了增减的按钮而已。

步进器尺寸

 

所以步进器的高度尺寸可以设计的跟输入框一样，同样适用于44pt的法则。而增减按钮既然是按钮，就都可以使用按钮的最小高度，即20pt。

开关按钮

开关按钮是由一个背景框和圆组成，主要功能是为控制某个功能的启动和关闭。

 

开关尺寸

其开关的高度尺寸应该不小于20pt，并且宽度不是由设备自适应的，很多新手需要注意的细节就是宽度太大或太小都会影响操作的流畅性以及美观度。其实宽度是可以按照比例来设定的，建议宽度的范围为高度的1.5~2倍之间；如图所示：

滑块

滑块的应用十分广泛，常见于音乐、视频、阅读等等的进度条，此外还可以用于音量、时长和亮度的调节。

滑块尺寸

 

滑块控件是有一条纤细的线和一个圆组成的。通常线的高度可以设置为1~4pt，长度这要根据情况而定。而圆的大小这有较大的落差，可以设置为4~24pt，和按钮类似，大小也跟权重有关。

工具栏

工具栏是苹果官方提供的控件之一，它通常出现在页面的头部，例如iOS系统的电话拨打页面；

 

 

工具栏尺寸

 

工具栏可以看成是一个按钮被拆分成几个部分，我们可以先前设定好工具栏的长度和高度，再根据选项的数量进行等分，例如一个300pt宽度的工具栏被分成了3个选项，那每个选项的长度则为100pt；

分页控件

分页控件最早是由Android2.0系统提出来的，目前已被广泛应用，它的使用场景类似于iOS底部导航栏的导航工具，跟工具栏十分相似，区别在于，工具栏通常只有三个选择，而分页控件可以做多个切换，例如今日头条的tab切换；

分页控件尺寸

 

分页控件的尺寸高度通常取决于权重的高低，取值范围为20~44pt，宽度则根据包含的选项数量决定。而且分页控件分为两种，一种是屏幕范围内显示，这种选择的宽度通常会根据数量等分；另一种则是超出了屏幕范围，而这种的宽度则会选择固定宽度。

列表控件

UI中的列表控件多数出现于社交软件页面以及设置页面，例如：微信、QQ的好友列表。

列表控件尺寸

 

通常一个列表的高度也可以采用44pt作为标准。除非有特殊需求，否则不能小于这个高度，不仅仅是因为美观，还关系到操作的流畅性以及过于紧凑不好阅读；

页面指示器

页面指示器多数用于界面的banner，可以确切告知用户可实行左右切换，并能告知用户当前banner所在的位置顺序。

页面指示器尺寸

 

最常见的指示器是由圆形组成，几乎是页面内最小尺寸的元素。通常指示器的尺寸为6pt、8pt、10pt。此外，常见的信息提示小红点可以使用跟指示器一样的尺寸。

提示浮标

这是一个用来提示未读和未处理的控件，也是一个让用户“又爱又恨”的设计（有强迫症的必须每个都要点开，有种想要消除它的冲动）。

提示浮标尺寸

 

提示浮标跟小红点不一样，提示浮标是要承载未处理或未读信息的数量的数字；而展现形式主要是以圆或者圆角矩形。普遍的圆形直径尺寸在于24~32 pt范围内。当然，如果提示浮标里面的数字为两位或者三位时，这个时候浮标就会由圆形转换成圆角矩形，而圆角矩形的长度会是多少呢？

我们以24pt的单数字浮标尺寸为例，假如提示浮标的单个数字宽度为8pt，而两位数时的提示浮标就会变成24+8=32pt。而如果是三位数时，圆角矩形的长度就会变成24+8+8=40pt；如图所示：

总结：

书中干货不少，但我只选取两个易于上手的部分来总结。此外，我们更应该注重实战，毕竟UI始终是一门以实践为核心的课程，并且我们在阅读理论的同时应该结合实战。以理论作为我们设计的依据，以实践验证我们的理论，相互相成，良性循环。

本文针对这两个方面进行了粗略的总结，还有很多不足的地方，希望看到这篇文章的大佬能给予补充。