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

添加粗细对比时：

添加色彩比时：

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

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

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

以下案例中，同一个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始终是一门以实践为核心的课程，并且我们在阅读理论的同时应该结合实战。以理论作为我们设计的依据，以实践验证我们的理论，相互相成，良性循环。

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

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