iOS原名iPhoneOS，是由苹果公司为其移动设备开发的移动操作系统，支持设备包括iPhone、iPad、iPod touch，今天数艺君就给大家介绍一下iPhone界面设计规范。

“界面尺寸” 

目前使用iOS的iPhone常用手机型号的外观尺寸及屏幕尺寸对比如图所示。

苹果手机在iPhoneX诞生之后正式进入全面屏移动时代，在UI的尺寸与规范上也有了较大变化，其中iPhone6/7/8/SE的分辨率（1334px×750px）通常作为基准尺寸，可向上或向下适配。

“栏高度” 

除了界面尺寸与显示规格，iOS的界面中对状态栏、导航栏、标签栏也有严格的尺寸要求，遵循相关的设计规范可有效提高最终界面设计的适配度。

状态栏、导航栏、标签栏在界面中的位置如图所示。

（1）状态栏（Status Bars）。

状态栏位于界面最上方，主要用于显示当前时间、网络状态、电池电量、SIM运营商。不同型号设备的状态栏高度不同，例如iPhone12、iPhone11、iPhoneX等全面屏型号的手机界面状态栏高度通常为88px或132px，全面屏屏幕设备的外观设计的高度会高于非全面屏设备的，iPhone6/7/8等非全面屏设备的状态栏高度通常为40px或60px，如图所示。

状态栏为iOS固定版式，可在系统设置中调节深色、浅色两种模式，如图所示。

（2）导航栏（Navigation Bars）。

导航栏位于状态栏之下，主要用于显示当前页面标题。目前iOS的导航栏主要包括88px和132px两种高度。除当前页标题外，导航栏也会用于放置功能图标。

左侧通常是后退跳转按钮，点击左箭头则跳转回上页。

右侧通常包括针对当前内容的操作，例如设置、搜索、扫一扫、个人主页等，全屏浏览界面下导航栏会自动隐藏，如图所示。

（3）标签栏（Tab Bars）。

标签栏通常位于界面底部，也有少部分标签栏位于状态栏之下、导航栏之上。标签栏主要包括App的几大主要板块，通常由3~5个图标及注释文字组成，例如微信标签栏内容为“微信”“通讯录”“发现”“我”4个板块，如图所示。

标签栏用于全局导航，通常会保持显示状态不隐藏。不同类别的软件根据其自身功能的不同，标签栏内容也会有相应的变化，但基本都包含首页、个人主页、搜索与发现这3类主要功能板块，如图所示。

了解与掌握iOS的栏高度，有利于在界面图标设计的实际应用中更精确、有效地实现设计方案。

“边距和间距” 

在平面设计领域中，不论是海报设计、版式设计，还是界面设计，只要涉及整体页面与内部图标，页面的边距、元素之间的间距就都是设计要点。

边距与间距设计得是否合理， 会影响用户的使用体

验。如果间距过于大，会导致用户阅读不流畅，文字板块失去连贯的视觉引导，用户识别内容的效率降低；相反，如果间距过于小，页面整体内容会显得过于拥挤，难以体现清晰的功能分类，影响用户使用感。

因此在界面设计中，边距与间距的合理性设置非常重要。以下是对相关内容的解读与分析，帮助读者快速掌握iOS界面中常用的间距与边距规范。

（1）全局边距。

全局边距是指页面板块内容到页面边缘之间的间距。例如图所示的iOS的设置页面和备忘录页面的全局边距均为30px，这也是iOS的通用边距。

全局边距的作用及设计要点主要包括以下几点。

视觉统一性。全局边距可以使整体页面的图片与文字更加和谐，不会出现图片过大、过于突出的情况，如果一个App设定了全局边距，那么除特殊情况外，App的所有页面也应统一使用此边距进行规范，由此达到视觉的统一。

阅读引导性。引导用户从上到下的视觉流线，并且将用户的注意力集中于页面。

设计美观性。合理的全局边距设定使整体页面看起来更加简洁美观，适合长时间阅读。

根据界面设计的版式风格与图标数量等内容的差异，不同App中的全局边距设定也会有区别，如图所示，爱彼迎的全局边距为30px，微博的全局边距为25px，淘宝的全局边距为20px。以iPhone 6/7/8/SE（1334px×750px）屏幕尺寸为基准，常用的全局边距有20px、24px、30px、32px。全局边距通常是偶数，并且在倍率为@2x时常用24px，倍率为@3x时常用32px。

（2）卡片边距。

在界面设计中，卡片式设计是一种较为常用的形式，其特点是用色块背景将信息分组、分类，从而清晰地区分不同组别的内容，使页面空间得到更好的利用。

页面中的卡片边距根据承载信息内容的多少来界定，通常不小于16px。

边距过小或过大都会降低信息传达的效率，当信息量较少时，边距可适当放大，例如iOS设置页面卡片边距为70px。

同样，以iPhone 6/7/8/SE（1334px×750px）屏幕尺寸为基准，常用的边距为20px、24px、30px、40px。例如，App Store卡片边距为60px，微信订阅号卡片边距为40px，如图所示。

（3）内容间距。

在界面设计中主要使用格式塔原理确定界面中的内容分布及内容之间的间距。

根据接近法则，物体之间的相对距离会影响我们感知它们是如何组织在一起的，相距越近的物体越容易被视为一组。

例如，图所示内容中，每个图标所对应的图形与名称文字之间的间距明显小于其与另一个图标之间的间距，图标之间自然分组。

“界面布局” 

根据App 的定位及每个页面信息内容的复杂程度不同，界面设计的版式及布局方式也会有所区别，UI设计中常用的布局方式主要包括无框式布局、卡片式布局、列表式布局3类。

（1）无框式布局。

无框式布局是一种新兴且流行的布局形式，能呈现出简约、清新、干净的视觉效果，使用此布局方式的App大多包含以下3个特点。

以图片为主体。以图片为主体的App主要强调图片内容，通常图片尺寸较大且形状规整，借图片的块面自然地对版式进行划分，起到了规范画面结构的作用。

下图所示的下厨房和古田路九号的首页界面，都以展示图片为主，但两相比较，古田路九号比下厨房界面更为整洁，因为它对图片尺寸要求更严格，界面版式显得更加有序。

功能简洁。功能简洁的App的界面中需要呈现元素相对较少，元素之间的距离可以进行充分的变化和协调，无框式布局很适合于此类App。

例如，百度网盘的文件界面以图标名、注释文字为主，元素较少且重复性较高，使用无框式布局可保持画面的简洁性，减少干扰因素；LogoScopic Studio软件界面以图片为主，说明性文字需点击图片才会显示，使用无框式布局可以实现极简的画面效果，如图所示。

内容规律。当App整体界面中所呈现的几类元素层级重复、类别统一、内容规律时，也非常适合使用无框式布局。

图所示的爱彼迎与找我婚礼App界面，其中的内容并不少，但使用了无框式布局避免了产生信息混乱的情况。

因为这类App的每组元素重复性较高，所以充分运用字体字号的变化及外框图形，遵循格式塔原理，使每组元素自然分组，无须增加分割线，就可以形成简洁的无框式布局。

（2）卡片式布局。卡片式布局也是我们经常使用的布局形式，它可以帮助设计师清晰地对整体界面进行分割，对图片及信息进行明确分类，使卡片之间各自独立，互不干扰。卡片色彩通常有两种应用形式，如图所示。

第一种是纯色模式，卡片颜色较浅，背景颜色较深，而卡片与背景之间有深色的投影，由此形成更加立体的视觉效果。当然也有相反的情况，例如卡片比背景颜色更深，或是根据整体色调卡片呈彩色。

第二种常见于iOS，卡片为半透明样式，呈现部分背景颜色，这种样式可以在保证用户有效识别内容的同时，增强卡片与背景的融合性，使卡片不会填满屏幕显得过于生硬，也不会完全脱离背景显得突兀，整体界面有明亮、通透的视觉效果。

常用的卡片式布局可分为两类，分别是单栏卡片布局与双栏卡片布局。 

单栏卡片布局。单栏卡片布局主要用于信息类别较多的情况，将繁杂的信息进行有效分类，利用卡片对其进行分组，使其在阅读上不会相互干扰。当图片、图标、文字层次较多时，使用卡片布局可以对所有信息进行非常清晰的分类，如图所示。

当然，这类布局形式如果使用不恰当，反而会浪费空间，造成设计累赘。 

双栏卡片布局。需要在同一页面中呈现多张图片时，常用双栏卡片布局。此布局形式能更有效地提高界面空间使用率，呈现更多的信息。

花瓣App和线上购物淘宝App都以图片展示为主，使用了双栏卡片布局，便于在同一界面中更多地呈现商品图片，也便于用户对图片进行对比，如图所示。

（3）列表式布局。列表式布局常见于短信息较多的情况，可有效利用页面空间，将信息更多地展示于页面中并做好清晰的分类。常见的社交类 App，例如微信、QQ，还有手机中自带的通讯录、通话记录、短信等页面都经常使用此类布局。

根据内容数量的不同，列表高度也会有不同，内嵌式列表高度会相对较低，出血式列表高度会相对较高，如图所示。

“图片比例” 

UI设计中常用的图片尺寸和版式设置并不是任意的，而是建立在人体工程学基础之上的，按照统一的图片尺寸进行排版和设计，不仅会让整体界面中功能的实现有序规范，而且便于后期精准调整。

根据App的定位与风格，图片可以横置或竖置，不同的图片尺寸也可以同时使用，以增强画面的丰富性，常用的图片尺寸比例为1∶1、3∶4、2∶3、16∶9、16∶10等，如图所示。

“图标规范” 

每个应用程序都需要一套系统图标，例如iOS的UI主图标可以在App Store中引起用户的注意，并在主屏幕中脱颖而出，加深用户对应用程序的印象，体现了对应软件的设计定位与界面风格。

图展示了iOS中的设置图标、电话图标、邮件图标、照片图标、地图图标、时钟图标。

（1）设计原则。 

根据iOS图标功能，我们可以分析出其UI图标设计需要遵循以下几点设计原则。 

简洁性。第一是主图形保持简洁，以简单、独特的图形表达图标含义，谨慎添加细节。如果图标内容或形状过于复杂，在较小尺寸的情况下可能难以分辨细节。第二是背景保持简洁，确保识别效率，避免层次混乱。 

焦点性。第一是图标含义的焦点性，选择的图标元素要能有效概括和体现应用程序的功能属性，使用户能通过图标快速获悉软件的定位。第二是图标图形的焦点性，尽量使用带中心点的图标，可在圆角矩形外 廓基础上更规范地展示出抽象图标。 

图形性。尽量使用简洁的图形来设计图标，不要使用照片或屏幕截图。由于图标展示尺寸较小，因此细节太多的设计通常无法准确辅助传达应用程序的用途，甚至会有误导性和视觉杂乱感。 

统一性。应用程序中的所有图标在细节部分，如光学重量、笔画粗细、位置和透视方面都应保持一致。以潮牌资讯App图标设计为例，同一套图标，其风格必须保持一致，如图所示。

风格一致主要体现在图标细节的统一，例如线条粗细、填充颜色、圆角弧度、图形间距等细节设计需全部保持一致，形成统一规范的风格，给予用户精准的视觉体验。从图我们也能对比出，实心图标往往比轮廓图标更清晰，如果图标必须包含线条，则需要与其他图标和应用程序的版式协调好权重。

（2）iOS 图标属性。

格式：PNG

色彩：P3（广色域）、sRGB（彩色）、Gray Gamma 2.1（灰度） 

风格：扁平化、不透明 

形状：圆角矩形

（3）iOS 图标尺寸。

安装应用程序后，每个应用程序都会在主屏幕和整个系统中显示其图标。

“版式规范” 

在界面设计中，版式是贯穿和组织所有元素的设计要点，最终呈现的界面需保证各种大小的文字都清晰易读，图标形态精确清晰，装饰巧妙恰当。

界面设计的核心是对功能的高度关注，因此所有的页面空间、颜色、字体、图形和界面元素都要合理，并且保证重要信息传达的高效性、准确性与交互性。

界面版式设计原则主要可以归纳为3类，分别是对齐、对称、归组，如图所示。

对齐。同层级的信息保持对齐，整体界面边距保持对齐。整齐的版式可以有效传递规范的视觉效果，给用户流畅的阅读体验。 

对称。手机界面尺寸较小，若使用复杂的版式会使整体版面显得混乱，而使用对称的版式能快速呈现一种规范整体、有条理的视觉效果。不仅是版式，图标的设计也大多采用中心对称的形式，这可以让用户视觉体验上的舒适度更高。 

归组。当信息较为繁杂时，设计师需要对信息进行筛选与划分，根据格式塔原理中的接近法则，把关联的信息排列得更紧密，进行归组，为用户提供结构清晰的浏览界面，提高文本可读性。

“文字规范” 

iOS中英文字体使用的是San Francisco（SF）和 New York（NY），中文字体使用的是Ping Fang SC苹方黑体。

San Francisco（SF）是一个无衬线类型的字体，与用户界面的视觉清晰度相匹配，使用此字体的文字信息清晰易懂；

New York（NY）是一种衬线字体，旨在补充 SF 字体，各自效果如图所示。

在 iOS 中用户可自行选择文本大小，从而提高文本的灵活性。下图主要汇总了默认字体字号。

“设计适配” 

手机的型号不同，其屏幕分辨率也会有所区别，在进行UI设计时，设计师需要一项基准尺寸来适配其他多种分辨率，目前通常以667px×375px@1x（1334px×750px@2x）尺寸为基准，如图所示（@1x 表示1倍图，@2x表示2倍图，依此类推）。

Powered by Froala Editor