iOS 设计规范是苹果公司提供的一套全面的设计指南,旨在帮助设计师和开发者创建符合 iOS 平台标准的应用程序。以下是详细的 iOS 设计规范,包括尺寸、字体、颜色和交互设计等方面。
尺寸设计规范
屏幕尺寸和分辨率
- 640 x 1136 px(iPhone SE):
- 状态栏:40 px
- 导航栏:88 px
- 标签栏:98 px
- 750 x 1334 px(iPhone 6s/7/8):
- 状态栏:40 px
- 导航栏:88 px
- 标签栏:98 px
- 1242 x 2208 px(iPhone 6s/7/8 Plus):
- 状态栏:60 px
- 导航栏:132 px
- 标签栏:147 px
- 1125 x 2436 px(iPhone X @3x):
- 状态栏:132 px
- 导航栏:132 px
- 标签栏:147 px
- 750 x 1624 px(iPhone X @2x):
- 状态栏:88 px
- 导航栏:88 px
- 标签栏:98 px
全局边距和卡片间距
- 全局边距:32 px、30 px、24 px、20 px(建议最小 20 px,选择偶数)
- 卡片间距:20 px、24 px、30 px、40 px(上下间距最小不低于 16 px,过小的间距会造成用户的紧张情绪)
内容布局设计规范
列表式布局
- 信息页面:通常采用列表式布局。舒适体验的最小高度是 80 px,最大高度视内容而定。
- 示例高度:
- 微信:136 px
- QQ:132 px
- 自如:110 px
- 唯品会:106 px
卡片式布局
- 独立互不干扰:每张卡片的内容和形式都是独立的。
- 颜色:卡片一般是白色,间距颜色一般是浅色,不同产品风格颜色可能不同。
- 双栏卡片布局:常见于图片信息为主导的页面,每屏显示至少 4 张卡片。
图片比例设计规范
常见图片尺寸比例:
- 16:9
- 4:3
- 1:1
- 1:0.618(黄金比例)
组件布局设计规范
- 对齐:保持元素对齐
- 对称:保持页面对称
- 分组:合理分组,提高可读性
文字设计规范
文字是 APP 中最核心的元素,是产品传达给用户的主要内容。iOS 中常用的字体大小和应用场景包括:
- 36 px:用于少数标题,如导航标题、分类名称等。
- 32 px:用于少数标题,如店铺标题等。
- 30 px:用于较为重要的文字或操作按钮,如列表性标题、分类名称等。
- 28 px:用于段落文字,如列表性商品标题等。
- 26 px:用于段落文字,如小标题、模块描述等。
- 24 px:用于辅助性文字,如次要的标语等。
- 22 px:用于辅助性文字,如次要的备注信息等。
通过遵循以上 iOS 设计规范,你可以打造出高效、美观且一致的 iOS 应用界面。无论是尺寸、字体、颜色还是交互设计,这些规范都能帮助你在设计过程中保持一致性和专业性,提升用户的整体体验。更多设计规范,可以前往腾讯 CoDesign (opens new window) 内查看详细设计资源。