2.2　iOS系统的组件尺寸

iOS系统的组件由状态栏、导航栏和标签栏等部分组成，如图2-10所示。iOS系统对组件的高度有严格的规定，设计师必须遵守。

2.2.1　组件尺寸

由于不同设备的界面尺寸不同，因此界面组件的尺寸也不相同。不同设备的状态栏、导航栏和标签栏的高度如表2-2所示。

2.2.2　边距和间距

在移动端界面设计中，规范界面中元素的边距和间距非常重要。界面是否美观、简洁、通透，都与边距和间距的设计规范有直接关系。根据边距和间距的不同位置，可以分为全局边距、卡片间距和内容间距。

● 全局边距

全局边距是指界面内容到屏幕边缘的距离，整个应用的界面都应该以此来进行规范，以达到界面整体在视觉效果上的统一。全局边距的设置可以更好地引导用户垂直向下浏览。淘宝App全局边距如图2-11所示。

在实际应用中应该根据产品的不同风格设置不同的全局边距，让边距成为界面设计的一种语言。在iOS系统中，常用的全局边距有32px、30px、24px、20px等。如图2-12所示，iOS系统边距为30px，微信边距为35px，工商银行边距为30px。

边距的大小并没有一个固定的数值，但是通常会将边距设置为偶数。还有一种情况是将界面中的图片通栏显示，不留边界，如图2-13所示。

● 卡片间距

卡片式布局是移动端界面设计中非常常见的布局方式，图2-14所示为卡片式布局中的一种。

通常卡片和卡片之间的距离是根据界面的风格及卡片承载信息的多少来确定的，由于过小的间距会增加浏览者的紧张情绪，因此卡片间距通常不小于16px，常见的间距有20px、24px、30px和40px，当然间距也不宜过大，过大的间距会使界面变得松散。iOS系统“设置”界面卡片间距如图2-15所示。

提示

为了便于浏览者区分不同卡片，间距颜色的设置可以与界面分割线的设置一致，也可以更浅一些。通常会采用较低纯度的灰色。

卡片间距的设置是灵活多变的，一定要根据产品的风格和实际需求去设置。读者应通过截图比较各类App的卡片间距数值，并融会贯通，应用到自己的设计工作中。

● 内容间距

一款App产品除了组件（状态栏、导航栏、标签栏）和控件，就是内容了。内容的布局形式多种多样，此处只讨论内容的间距设置问题。

单个元素之间的相对距离会影响浏览者感知它们是否组织在一起，互相靠近的元素看起来属于一组，而距离较远的则自动划分到组外。如图2-16所示，左边的圆在水平方向的距离比垂直方向的距离近，可以看成4行圆点，而右边的则会看成4列圆点。

在设计界面内容布局时，一定要重视临近性原则的运用。在图2-17所示的App的主界面中，每一个应用名称都远离其他图标，而与其对应的图标距离较近，这让浏览者的浏览变得更直观。如图2-18所示，当应用名称与上下图标的距离相同时，就分不出它属于上面还是下面，会产生错乱的视觉体验。

提示

临近性原则指的是彼此接近的事物、元素，人们认为它们是相关的。所以，当面对数据时，浏览者会自动将数据和不同的对象分组。

实战练习02　创建辅助线绘制iOS组件

视　频：资源包\视频\第2章\2-2-2.mp4　　源文件：资源包\源文件\第2章\2-2-2.psd

● 案例分析

iOS系统中的状态栏、导航栏和标签栏都有固定的尺寸和位置。而且为了方便浏览，左右两侧会有20～30px的边界。本案例中首先使用辅助线定位iOS组件和边界的位置，然后再使用形状工具绘制iPhone 6的状态栏、导航栏和标签栏，如图2-19所示。

● 操作步骤

01　执行“窗口＞标尺”命令，将标尺显示出来，如图2-20所示。执行“视图＞新建参考线”命令，设置“新建参考线”对话框中的参数，如图2-21所示。

02　单击“确定”按钮，完成状态栏辅助线定位，如图2-22所示。继续执行“视图＞新建参考线”命令，设置“新建参考线”对话框中的参数，如图2-23所示。

03　选择工具箱中的“矩形工具”，在画板中单击，在弹出的“创建矩形”对话框中设置参数，如图2-24所示。单击“确定”按钮，创建一个矩形，如图2-25所示。

提示

形状工具有“形状”、“路径”和“像素”三种绘制模式。在绘制UI时，应选择绘制“形状”模式，避免选择其他两种模式。

04　修改“属性”面板中的矩形坐标，如图2-26所示。执行“视图＞通过形状新建参考线”命令，创建辅助线，如图2-27所示。

05　使用“矩形工具”在画板中绘制矩形，完成状态栏和导航栏的绘制，如图2-28所示。使用相同的方法继续创建左右边距的辅助线，完成效果如图2-29所示。