下载掌阅APP，畅读海量书库
立即打开
除了对UI中各栏的尺寸有一定要求外，iOS系统对UI的文字、颜色和图标大小等也有一定要求。所以，我们还需要对相关的设计规范进行全面了解，如此才能设计出带给用户最佳使用体验的UI。
文字是App中最核心的元素，是产品传达给用户的主要内容。在进行App的UI设计时，需要考虑文字的字体、字号和字体样式等多个方面，使UI既能体现App自身的特点，又能很好地完成信息的传递工作。
对于用户来说，最重要的就是文字必须清晰易读。如果用户根本看不清App中的文字，那么字体设计得再漂亮也是徒劳。iOS系统默认的英文字体为Helvetica Neue，该字体现代感十足，非常紧凑利落，辨识度、清晰度和一致性较高，如下左图所示。iOS系统默认的中文字体为苹果苹方字体，其英文为San Francisco（SF）。苹方字体包含简体及繁体中文，共有6种字重，可以很好地满足日常设计和阅读的需求，如下右图所示。
iOS系统默认的英文Helvetica Neue字体和中文苹方字体无论是小号还是大号的设计都具有高度的可辨识性和灵活性，允许用户选择其偏好的字号。但是，在一款App中，每个内容的重要性都是不一样的，所以在UI上，可以使用突出的字重、字号和颜色来表示最重要的信息。如下图所示的两个UI设计中，标题、副标题和详细信息分别应用了不同字号、字重和颜色等的文字进行处理，使得整个UI主次分明。
iOS系统对于App中文字的字号没有严格的要求。在一款App中，字号范围一般为20～36 px，可以根据产品的属性和内容的重要性来酌情设定字号。需要注意的一点就是所有的字号数值都必须为偶数，上下级内容的字号相差2～4 px。不同字号的适用场景见下表。
iOS系统虽然支持自定义字体，但自定义字体通常可阅读性不高，所以，除非有特殊需要，如品牌需求或打造沉浸式的游戏体验等，最好还是使用系统字体。如果在UI中要使用自定义字体，一定要确保其在不同字号下的可读性，并且在一款App中最好只使用一种字体。多种字体混搭容易给用户留下杂乱无章的印象，如下图所示。
如果在UI设计中只应用了一种字体，通过调整该字体的字重或大小可以丰富视觉效果，让信息的层次变得更清晰。在iOS系统内置的App中，大多数UI设计都只使用了一种字体。
颜色可以表现活力、提供视觉一致性，是为用户操作提供反馈和视觉化数据的一种非常好的方式。iOS系统内置的App使用的颜色包括红色、橙色、黄色、绿色、凫蓝色、蓝色、紫色、玫红色等，如下图所示。
iOS系统应用了鲜艳且纯度较高的颜色体系，使得它们无论是单独还是整体的效果都非常棒，并且还包含亮色和暗色两种背景。下图所示为玫红色在亮色和暗色背景中的显示效果，可以看到无论在哪种背景下，关键信息都能通过颜色的对比得到强调。因此，在为iOS系统的App设计UI时，可以参考这样的颜色处理方式，使UI中的关键信息在亮色和暗色两种背景下都能有较好的表现。
除了鲜明、对比反差较大的纯色，iOS系统还根据标准颜色衍生出一系列的渐变色，如下左图所示。渐变色的应用使单一的纯色色块变得丰富起来。大多数iOS系统内置App的图标均采用了渐变色的设计，如下右图所示。
除此之外，渐变色也被广泛应用到一些内置App的UI中。在UI中适当使用渐变色，将其与主题色区分开来，不但可以增加内容的可读性，还能让UI显得更漂亮。在如下图所示的健康App和时钟App的UI中，就可以看到渐变色的应用。在为iOS系统的App设计UI时，也可以遵循这些颜色特征，规范设计效果。
虽然iOS系统提供了许多纯度较高的颜色，但App的UI设计往往是从中选择一个颜色作为主题色。主题色的应用会给用户以强烈的交互性视觉指示。在备忘录App中，主题色为黄色，如下左图所示；在日历App中，主题色则是红色，如下右图所示。
为iOS系统的App设计UI时，为了避免配色凌乱，也可以参考上述方式。根据App的特点和想要表现的整体风格为UI定义一个主题色，然后在保证颜色不冲突的情况下，使用其他颜色与主题色进行搭配，从而得到更协调、美观的设计效果。下图所示为iOS系统中的途家App的UI展示，可以看到此App的UI设计完全遵循iOS系统的用色规范，使用鲜艳的橙色渐变作为主题色表现重点区域，整个UI非常简洁、美观。
在UI设计中应用主题色时，还应当注意避免UI中的可交互元素和不可交互元素使用相同的颜色。因为，如果两者颜色相同，用户就会很难分辨哪里是能点击的，哪里是不能点击的。以iOS系统内置的通讯录App为例，能点击的区域为蓝色，不能点击的区域则为灰色，如下图所示。
在移动UI设计中，图标不是单独存在的，而是由许多不同的图标构成一个系列，它们贯穿于整个App的所有页面并向用户传递信息。一个App的一套图标应该具有相同的风格，包括造型规则、圆角大小和线框粗细等。iOS系统中的图标多采用扁平化的设计风格，主要包含App图标、搜索图标、设置图标和通知图标等，下面就来介绍这些图标的设计规范。
每个App都需要一个美观且易于记忆的图标，这个图标即为App图标。对于用户而言，App图标就是他对该App的第一印象，并且用户通过这个图标就能认识到这是一个什么样的App，而无须查看App名称。下图所示为iOS系统部分内置App的图标。
设计App图标时，需要注意几个要点。首先，App图标的设计应当做到简洁明了。通过提炼出App中的要素并将其表达在一个简洁、独特的形状之中，切记不能盲目添加各种细节。如果App图标过于复杂，其细节很有可能难以辨认。设计简洁的图标往往更容易吸引眼球，让用户第一时间就能辨认出它代表的是哪个App。下左图中的App图标设计很简洁，用户可以比较轻松地识别出图标的含义；而下右图中的App图标对细节进行了过度美化，反而显得杂乱。
其次，由于App图标通常尺寸较小，所以需要细致地设计一个美观且具有代表性的App图标，让用户不需要花时间思考，一眼就能明白其含义。例如，iOS系统内置的邮件App就直接使用了一个信封作为图标，用户看到该图标时就会自动将它与邮件联系起来，如下左图所示；而相机App则使用了一个简化后的相机图形作为图标，使用户一眼就能准确地判断其用途，如下右图所示。
除此之外，在Home界面中，App名称一般会显示在每个App图标的下方，所以在设计App图标时，不要在其中添加非必要的、重复性的App名称来告诉用户这是哪个App。如果图标中一定要包含文字，那么就需要与App的内容相关联。
每个App都应该提供用于安装完成后的Home界面的图标及用于App Store展示的大图标。iOS系统的设计规范中对于App图标大小的要求见下表，设计时需要严格遵守。
除了应用在Home界面和App Store的图标，每个App都应该提供小图标以供iOS系统在搜索中使用。带有设置的App还应提供一个小图标在系统设置中使用，如下左图所示；支持通知的App还应为通知准备一个小图标，如下右图所示。
无论是搜索图标、设置图标还是通知图标，都应当让用户能辨认出图标所代表的App。理想情况下，这些图标仅在尺寸上不同。若没有提供这些图标，iOS系统可能会将App图标直接压缩显示在所需位置。搜索图标、设置图标和通知图标在不同设备上的尺寸要求见下表。
iOS系统会自动为所有设置图标添加1 px的描边，以确保它们在设置的白色背景中具有良好的视觉表现，因此，在制作设置图标时，不需要再为图标添加蒙版或边框。并且，如果App会创建自定义的文件格式，则不需要为其制作文件格式图标，因为iOS系统会自动用App图标来为这些格式添加图标。
除了以上几类图标，任何一个App都会用到自定义图标。设计自定义图标时，可以将图标设置为Glyph。Glyph常被称为模板图片，是一种带有透明度、抗锯齿且无阴影的单色图标，其使用遮罩来定义自身的形状。Glyph可以根据环境和用户交互自动应用合适的外观，如颜色、亮度和饱和度等。如下图所示分别为App图标、Glyph和Glyph（Color applied）的效果。大多数标准UI元素都支持Glyph，包括导航栏、标签栏、工具栏和Home界面快速操作。
在iOS系统中，图标的应用需要保持高度的一致性。无论是仅使用自定义图标还是将自定义图标与系统图标混合使用，一个App中的所有图标都应该在细节水平、视觉重量、描边粗细、位置和透视角度等方面保持一致的观感，如下图所示。
图标的设计一定要保证图标易于辨认。通常情况下，实心图标比轮廓图标更容易辨认。如果App中的图标必须包含线条，就要使该线条的权重与其他图标和App的版面设计相协调。最好不要用实心和空心来表现一个事物的两种状态，而是尽量用不同的颜色来表现。下左图所示的图标设计分别使用蓝色和灰色来表现按钮的不同状态，图标的辨识度较高；而下右图所示的图标设计则分别使用空心和实心来表现按钮的不同状态，削弱了图标的辨识度，容易误导用户。
前面讲过，图标设计的一致性不仅要保证整体风格的一致，还要保证将图标集合展示时，其视觉尺寸的一致。如果图标的观感重量不一致，则可以通过微调图标的尺寸，使所有图标看起来一样大，如下图所示。
iOS系统允许用户为不同的应用场景设计自定义图标，不同应用场景下的图标大小要求也各不相同。
为自定义的导航栏和工具栏设计图标时，可以参照下表中的尺寸。在具体设计过程中，可以在目标尺寸和最大尺寸之间适当调整图标的大小，但不可超过最大尺寸，否则iOS系统可能会对图标进行裁剪，导致图标显示不完整。
标签栏中也经常用到各种矩形图标。标签栏图标分为竖屏和横屏两种情况。在竖屏状态下，标签栏图标位于标签标题之上；在横屏状态下，标签栏图标则与标签标题并排显示。根据不同的设备和屏幕朝向，iOS系统会显示常规或紧凑的标签栏，因此，设计的标签栏图标也应当具有两种尺寸，见下表。
在移动UI设计中，页面元素的边距和间距的设计规范是非常重要的。一个页面是否美观、简洁、通透，与边距和间距的设置紧密相关。
全局边距是指页面内容到屏幕边缘的距离，整个App的UI都应该以此来进行规范，以达到页面整体视觉效果的统一。全局边距的设置可以更好地引导用户竖向向下阅读。在实际应用中应该根据不同的产品气质采用不同的边距。常用的全局边距有20 px、24 px、30 px、32 px等，其特点是数值全为偶数。iOS系统中的“设置”和“通用”页面使用的是30 px的边距，如下图所示。
当然，除了这些常用的边距外，还有更大或更小的边距，在设计时可以根据实际需求适当调整。通常情况下，页面的左右边距最小为20 px，这样的边距可以展示更多内容，不建议比20 px还小，否则会使内容过于拥挤，给用户的浏览带来视觉负担。
在iOS系统中，卡片式布局是非常常见的布局方式。卡片的间距可以根据UI的风格及卡片需要承载的信息量来调整。通常情况下，卡片间距不能小于16 px，使用最多的间距是20 px、24 px、30 px、40 px。间距过小会造成用户的紧张情绪，间距过大则会使页面变得松散。另外，间距的颜色设置可以与分隔线一致，也可以更浅一些。
如下图一所示的iOS系统的设置页面，因为无需承载太多信息，所以采用了较大的70 px作为卡片间距，这样更有助于减轻用户的阅读负担；而如下图二所示的通知中心承载了大量信息，过大的间距会让浏览变得不连贯且UI视觉松散，因此其采用了较小的16 px作为卡片间距。
卡片间距的设置是灵活多变的，在进行移动UI设计时，应根据产品的特点和实际需求去设置。移动UI设计新手在平时可以多截图测量各类App卡片间距的具体数值，看得多了并融会贯通，设置卡片间距时就会更加得心应手。
任何一款App的UI中，除了各种栏和控件以外就是内容了。内容的布局形式多种多样，在设计UI时就需要注意这些内容的间距。设置内容间距时要考虑邻近性原则。该原则认为单个元素的间距会影响我们感知它们是否是组织在一起的，以及组织的方式，互相靠近的元素看起来属于一组，而距离较远的元素则自动划分到组外，简单来说，就是距离越近，关系就显得越紧密。
下一图中的圆形在水平方向的间距比垂直方向的间距小，就容易被看成4行圆点；而下二图中的圆形在垂直方向的间距比水平方向的间距小，则容易被看成4列圆点。
在UI设计中进行内容布局时，一定要重视邻近性原则的运用，为联系更紧密的内容设置较小的间距，而为联系不大或没有联系的内容设置较大的间距。下一图的UI中，文字与上方图片距离较近，与下方图片距离较远，用户能很轻松地判定文字是对上方图片的说明；而下二图的UI中，文字被放在中间，用户就很难分辨出它是对上方图片的说明还是对下方图片的说明。
