任务1.4 掌握UI设计的规范与规则

1.4.1 任务引入

本任务要求读者首先了解UI设计的设计单位、设计尺寸、适配方案、设计结构、间距规范、文字规范、图标尺寸及图片比例，然后到优设网搜索、阅读与UI设计规范相关的文章，进一步熟悉UI设计的规范与规则。

1.4.2 任务知识

掌握UI设计的基础规范与规则可以让设计师在进行设计时事半功倍。下面主要介绍设计单位、设计尺寸、适配方案、设计结构、间距规范、文字规范、图标尺寸以及图片比例等基础规范与规则。

1 设计单位

（1）PPI和DPI

●PPI：像素密度（Pixels Per Inch）是屏幕分辨率单位，表示的是每英寸的像素数量，通常用于iOS设备。

●DPI：网点密度（Dots Per Inch）是打印分辨率单位，表示每英寸打印的点数，通常用于Android设备。

（2）px、pt、dp、sp

●px：像素（pixels）是物理像素（Physical Pixel）的单位，属于相对单位，会因为屏幕像素密度的变化而变化。px是用Photoshop进行UI设计时使用的单位，使用此单位需要兼容不同分辨率的界面。

●pt：点（points）是逻辑像素（Logic Point）的单位，属于绝对单位，不会因为屏幕像素密度的变化而变化。pt是iOS开发及用Sketch进行UI设计时使用的单位。

●dp：独立密度像素（Density-independent Pixels）是Android设备上的基本单位，属于非文字单位，等同于iOS设备上的pt。

●sp：独立缩放像素（Scale-independent Pixels）是Android设备上的字体单位。用户可以根据自己的需求调整文字尺寸，当文字尺寸是“正常”时，1sp=1dp。

px、pt、dp、sp在不同分辨率下的换算如图1-18所示，图1-19所示为常见的图标尺寸。

2 设计尺寸

iOS设备常见的尺寸如图1-20所示。在进行UI设计时，为了适配大部分设备，推荐以iPhone X/XS/11 Pro的尺寸为基准。如果使用Photoshop，就创建750px×1624px（将375pt×812pt的画布放大2倍，可以更好地在Photoshop中进行适配）的画布；如果使用Sketch，就建立375pt×812pt的画布。

Android设备常见的尺寸如图1-21所示。在进行UI设计时，如果想要同时适配Android设备和iOS设备，就使用Photoshop新建720px×1280px的画布。如果根据Material Design（材料设计语言，是由Google公司推出的设计语言）新规范单独设计Android设备的设计稿，就使用Photoshop新建1080px×1920px的画布。无论要满足哪种需求，使用Sketch只需建立360dp×640dp的画布。

3 适配方案

一套App UI设计通常在80～150页。由于使用Photoshop进行UI设计用的单位是px，因此在适配时还需要额外设计出其他机型的页面。而使用Sketch、XD、Figma等软件进行UI设计用的单位是pt，如图1-22所示，因此在适配时无须额外设计出其他机型的页面。

4 设计结构

在iOS设备中，界面通常由状态栏、导航栏、安全设计区及标签栏（工具栏）组成。自全面屏上市以来，界面较之前还多了虚拟主页键，如图1-23所示。

Android设备和iOS设备的界面布局一样，只是部分的叫法不同，如图1-24所示。在Android设备中，界面通常由状态栏、顶部应用栏、安全设计区、底部应用栏以及虚拟导航栏组成。

5 间距规范

在设计App的间距时，8的倍数和10的倍数的尺寸常被使用，如图1-25所示。例如在iOS设备中，以@2x为基准，常见的边距有20px、24px、30px、32px、40px及50px。而4的倍数的尺寸则可以用于较亲密的元素之间。

6 文字规范

（1）系统字体

●iOS

旧金山字体：旧金山字体是非衬线字体，如图1-26所示，它有SF UI Text（文本模式）和SF UI Display（展示模式）两种尺寸模式。SF UI Text适用于小于等于19pt的文字，SF UI Display适用于大于等于20pt的文字。

纽约字体：纽约字体是衬线字体，如图1-27所示，该字体旨在补充旧金山字体。对于小于20pt的文本使用小号，对于20～35pt的文本使用中号，对于36～53pt的文本使用大号，对于54pt或更大的文本使用特大号。

苹方：在iOS中，中文使用的是苹方字体，该字体共有6个字重，如图1-28所示。

●Android系统

Roboto：在Android系统中，英文使用的是Roboto字体，该字体共有6个字重，如图1-29所示。

思源黑体：在Android系统中，中文使用的是思源黑体字体，该字体又被称为“Source Han Sans”或“Noto”，共有7个字重，如图1-29所示。

（2）字体大小

iOS和Material Design提供的字号参考并不完全适用于中文，因为在相同字号下，中文比西文大。例如iOS官方规范中建议正文字号为17pt，如图1-30所示，但使用中文时14pt和12pt更加合适。为了区分标题和正文，字体大小差异应至少保持在2pt及以上。西文行高通常为1.3～1.5倍，中文行高通常为1.5～2倍。

7 图标尺寸

（1）应用图标

应用图标即产品图标，主要出现在主屏幕上，如图1-31所示。

应用图标的设计尺寸可以采用1024px×1024px，并根据iOS官方模板进行规范，如图1-32所示。正确的图标设计稿应是直角矩形，而不是圆角矩形，iOS会自动应用一个圆角遮罩将图标的4个角遮住。

由于屏幕分辨率的差异和使用场景的不同，iOS官方的图标模板中有非常多的图标尺寸。我们只需要设计1024 px×1024px的图标，然后将这个图标置入Photoshop的智能对象中，或者置入Sketch的Symbol中，就可以一次性生成所有尺寸的图标，如图1-33所示。

（2）功能图标

功能图标即系统图标，是通过简洁、现代的图形表示一些常见功能的图标，如图1-34所示，主要应用于导航栏、工具栏以及标签栏等模块。

创建功能图标时，可以参考Material Design，以24dp×24dp的尺寸为基准。图标应该留出一定的边距，以保证不同面积的图标在应用时有协调一致的视觉效果，如图1-35所示。

不同形状的图标可以根据正方形、圆形、垂直矩形及水平矩形这一套网格系统来进行尺寸规范，如图1-36和图1-37所示。

由于屏幕分辨率的差异和使用场景的不同，图标的尺寸也有所不同。在iOS下，图标尺寸通常是在48px的基础上，进行4倍数的加减变化；而在Android系统下，图标尺寸通常是在48px的基础上，进行8倍数的加减变化，如图1-38所示。具体的设计尺寸将在项目4中进行详细讲解。

8 图片比例

图片通常需要按照固定的比例进行设计，并应用于特定环境，例如1:1的图片通常会作为头像使用。图1-39所示为整理好的图片常用比例及其应用，方便大家进行后续设计。

1.4.3 任务实施

（1）启动浏览器，打开优设网官网首页，如图1-40（a）所示。在搜索框中输入关键词“UI设计规范”，单击右侧的“搜索”按钮或按Enter键，进入搜索结果页面，选择“文章”类别，即可检索到有关UI设计规范的大量文章，如图1-40（b）所示。

（2）单击这些文章，进入详细信息页面，如图1-41所示。阅读这些与UI设计规范相关的文章，掌握UI设计的规范与规则。