iOS系统设计规范
UI 设计的综合指南
请多多指教
我分享一份iOS系统设计规范指南。本指南涵盖了我们在iOS设计中所需的主要内容；如有错误的地方请大家指正，非常感谢~
一
布局与网格
iPhone 14 Pro的布局区域和规格
1、布局
按钮、控件等 UI 元素需放在未被状态栏和主屏幕指示器覆盖的区域，避免干扰系统交互元素。
移动网格示例
2、网格
使用 8 点网格精确放置元素；
左右边距最小为 16pt；
槽宽常见 16pt，槽宽影响列宽（槽宽越大，列宽越小），列数根据需求定义。
二
Colors颜色
系统颜色
1、系统颜色
系统颜色是由苹果操作系统提供的一组预定义颜色。应用程序使用系统颜色可以快速适配系统外观变化，无需开发者手动为每种模式单独设置颜色
2、语义颜色
Primary Color 主色调
主色传达产品应用风格/品牌特性等，在产品中用于产品背景/主要操作/元素状态等
Secondary 辅助色与强调色
用于选择控件（滑块、开关）、高亮文本、进度条、链接标题、背景色等；
Fill Colors 填充色
同一色值不同透明度，用于不同尺寸元素（如滑块轨道、开关背景、输入框等）；
Background Colors 背景颜色
Primary（整体视图）、Secondary（内容分组）、Tertiary（次级元素内分组）；
Label colors 标签颜色
主标签颜色：用于突出显示需要向用户醒目展示的重要文本或内容。例如，您可以将主色调用于标题和大标题、导航栏中的页面标签、字段标签或表单中的输入控件
次标签颜色：用于显示说明文字或辅助信息。次要标签可用于表单和输入字段，为字段或输入控件提供额外的背景信息或说明，也可用于列表或表格，以显示有关列表或表格项目的次要信息和详情。
第三级标签颜色：用于 显示更不重要的文本或内容，例如补充信息或对用户理解应用非必需的细节。
Separator colors 分隔线颜色
iOS定义了两种分隔线颜色：Separator（带有一定透明度）和Opaque separator （常规分隔线）。
Functional colors 功能色
绿色（成功）、黄 / 橙色（警告）、红色（错误），用于指示元素状态或传递信息。
三
Typography 排版
1、字体选择
苹果内置字体（如 苹果San Francisco、New York），自定义字体需保证可读性，最多使用 2 种字体，且需搭配协调。
2、字体样式与大小
iOS 有预设文本样式（如 Large Title、Title 1 等），含默认尺寸和动态类型（需在代码层面定义，支持用户调整字体大小）。
3、文本布局
字间距和行距（行高）影响可读性；
行高至少为字体大小的 112.5%（Figma 建议），苹果正文（SF Pro 字体）最小 129%，长文本建议 141%；
字间距值需参考苹果表格，避免过高或过低。
四
图标设计
1、资源与定制
iOS 提供 SF Symbols 矢量图标，可定制，需保持风格、尺寸、权重一致。
2、设计要点
对比度需≥3:1（符合 W3C 标准）；
不易识别的图标需加文本标签；
使用 SVG 矢量格式，适配不同分辨率屏幕；
保证易读性和可点击性，标签栏图标至少 25x25pt，导航栏图标可为 20x20 或 30x30pt。
五
Components 组件
1、列表和表格
用于展示项目集合，包括：用不同背景色制造对比、按逻辑分组并加标题、区分标题与行标题的字体样式。
2、标签栏
全局导航控件，需避免无关内容分组（如 “首页” 合并多个不相关功能），设计需符合 iOS 标准。
3、导航栏
避免过多操作导致界面杂乱，确保与内部元素（如过滤器）的对比度。
六
过渡效果
1、设计原则
优先使用 iOS 标准过渡样式，自定义需符合标准；避免复杂 / 花哨、过快 / 过慢的过渡，保持时长一致；代码层面需响应 “减少动态效果” 设置。
2、工具
LottieFiles、ProtoPie 等可无代码创建自定义过渡。
总结
指南涵盖 iOS UI 设计核心维度，遵循苹果设计规范，可结合工具（如 Figma ）提升设计质量与一致性，打造符合用户习惯的高质量 iOS 应用界面。
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
