iOS界面设计要点：四大模块解析

UI设计不是艺术设计，这限制了我们从设备和现有技术开始设计。因此，熟悉每个平台的设计规则已经成为每个设计师的第一课，也是每个设计师必要的专业知识。

今天小边给您带来了iOS设计规范，希望帮助您快速熟悉iOS平台设计规范，帮助您提高工作效率，避免设计初期的一些细节错误。

iphone15最新设计规范组件及样机资源合集https://js.design/community?category=detail&type=resource&id=6523d915bcae906e3dbe94a5&source=csdn&plan=btt612

iOS设计规范的存在意义

首先要明白设计规范存在的意义：

所有设计都有规范，规范也是从设计升华而来的，可以理解为我们现实生活中的法律法规或红绿灯。规范限制了产品的视觉呈现和元素定义，使其具有可遵循的标准，保证了产品定位和价值在未来更新迭代中的延续，保持了产品的“初衷”。

其次，我们还需要熟悉不同型号的iOS尺寸，整理如下：

①5/5C/5S：320x480pt 640X1136px

②6/6S/7/7S：375x667pt 640X1136px

③6 Plus/6S Plus/7 Plus/7S Plus：414x736pt 1242X2208px

④X：375x812pt 1125X2436px

其中iPhone X是ios首次使用的OLED屏幕，比较特殊，具体分辨率：1125×2436px；PPI：458ppi；状态栏：88px； home触发区：68Px。因此，计算可以得到iPhoneenee X的设计区域为2280px。

了解以上内容，最后是我们具体的ios设计规范！以下是四个模块——状态栏、导航栏、标签栏和工具栏的详细解释：

iOS设计规范四大模块

1:IOS设计规范状态栏

1.状态栏位于屏幕边缘，始终固定。(即手机顶部的显示时间、功率区域)

2.@1x下尺寸：20pt。

3.不能自定义

4.设计抽屉导航时，应防止滚动内容直接通过状态栏。

5.用户全屏使用时，可隐藏状态栏和界面UI。

Ps：适当隐藏状态栏，可以帮助增加页面停留时间，但要把握好程度。

二: IOS设计规范导航栏导航栏设计规范

1.导航栏位于状态栏下方，中间是页面标题，左右是功能图标区，透明度为70%。

2.@1x下尺寸：44pt（更特殊的iphone） x是88pt）

3.IOS有两种导航栏，数量不超过2，避免内容过多。

三:IOS设计规范标签栏

1.标签栏和导航栏一样透明，是屏幕底部的区域，也是用户最常用的区域。比如QQ的标签栏有四个:消息、联系人、亮点和动态。

2.@1x下尺寸：49pt（更特殊的iphone） x是83pt）

3.标签栏标签的一次性承载上限为5，多余的标签将存储在[更多]中。

4.标签栏图形有正负两种，通常在图标下设置10pt(20px)注释文字，避免用户找不到功能入口。

5.标签栏功能：组织应用层面的整个信息结构。

四:IOS设计规范工具栏

1.工具栏与标签栏、导航栏相同，透明度为70%。

2.@1x下尺寸：44pt（更特殊的iphone） x是83pt）

3.工具栏通常位于二级页面，携带用户的常用指令。

4.图标或文字可用于工具栏，使用图标的最低限制是3个以上项目的数量。

完成iOS设计规范界面设计四个模块后，剩下的字体和颜色需要注意:

一、字体：

1.英文:San Francisco (SF) or NewYork;

2.中文：平方黑体。

二、颜色：

iPhone上显示的色域比RGB色域更宽，因此对于设计来说，颜色选择是非常自由的。

以上是UI设计IOS设计规范相关内容，想要做好设计，除了明确规范，还需要一个有用的设计工具，即时设计作为在线产品设计合作软件，深度设计合作领域7年，功能强大，材料丰富，使用方便，可帮助设计师提高工作效率，简化对接合作问题，减少工作繁琐，已成为许多设计师的“爱”。

即时设计 - 可实时协作的专业 UI 设计工具即时设计是一款支持在线协作的专业级 UI 设计工具，支持 Sketch、Figma、XD 格式导入，海量优质设计资源即拿即用。支持创建交互原型、获取设计标注，为产设研团队提供一站式协同办公体验。https://js.design/?source=csdn&plan=btt612