iOS本名iPhoneOS，是由苹果公司公司为其终端电子设备合作开发的终端操作系统，全力支持电子设备主要包括iPhone、iPad、iPod touch，那时数艺君就给大家介绍呵呵iPhone介面结构设计规范。

“介面体积”

现阶段采用iOS的iPhone常用智能手机机型的外形体积及萤幕体积对照总的来看。

苹果公司智能手机在iPhoneX问世后正式宣布步入全面性屏终端黄金时代，在UI的体积与规范上也有了非常大变动，当中iPhone6/7/8/SE的解析度（1334px×750px）一般来说做为计算方法体积，可向下或向下互联网连接。

“栏度”

除介面体积与表明技术标准，iOS的介面中对输入框、导航系统栏、条码栏也有严苛的体积明确要求，遵从有关的结构设计规范可有效率提高最后介面结构设计的适配度。

输入框、导航系统栏、条码栏在介面中的位置总的来看。

（1）输入框（Status Bars）。

输入框坐落于介面最下方，主要就用作表明现阶段时间、互联网状况、ABP8604G32SB、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倍图，依此类推）。