640 x 1136px(iphone SE)
状态栏:40px 导航栏:88px 标签栏:98px
750 x 1334px(iphone6s/7/8)
状态栏:40px 导航栏:88px 标签栏:98px
1242 x 2208px(iphone6s/7/8Plus)
状态栏:60px 导航栏:132px 标签栏:147px
1125 x 2436px(iphone X (@3x))
状态栏:132px 导航栏:132px 标签栏:147px
750 x 1624px(iphone X (@2x))
状态栏:88px 导航栏:88px 标签栏:98px
全局边距: 32px、30px、24px、20px(建议最小20px,边距数字选择偶数)
卡片间距: 20px、24px、30px、40px(通常上下间距最小不低于16px,过小的间距会造成用户的紧张情绪)
一、内容布局
最常用的两种布局方式,列表式和卡片式
(1)列表式布局
「信息」页面通常采用列表式布局。注:列表舒适体验的最小高度是80px,最大高度视内容而定。
例: 微信高度:136px QQ高度:132px 自如高度110px 唯品会高度:106px。
(2)卡片式布局
每张卡片的内容和形式都是相互独立的互不干扰。
卡片本身一般是白色,而卡片之间的间距颜色一般是浅色,不同产品风格颜色可能不同。
双栏卡片布局形式,常见于图片信息为主导,每一屏显示至少4张卡片。
二、界面图片设计比例
常见图片尺寸比例:16:9、4:3、1:1、1:0.618(黄金比例)等
三、APP版式设计规范
对齐、对称、分组
四、文字设计规范
文字是APP中最核心的元素,是产品传达给用户的主要内容。
在APP中字号范围一般在20-36之间(@2x)。iOS 11中出现了大标题的设计,字号还是要根据产品属性酌情设定。
36px: 用在少数标题。例:导航标题、分类名称等。
32px: 用在少数标题。例:店铺标题等。
30px: 用在较为重要的文字或操作按钮。例:列表性标题分类名称等。
28px: 用于段落文字。例:列表性商品标题等。
26px: 用于段落文字。例:小标题模块描述等。
24px: 用于辅助性文字。例:次要的标语等。
22px: 用于辅助性文字。例:次要的备注信息等。
五、文字设计规范
iOS 主流设备的分辨率分别是:
640x1136px:【(@2x)iPhone SE 】
750 x1134px:【(@2x)iPhone6s/7/8 】
1242x2208px:【(@3x)iPhone 6s/7/8 Plus 】
1125x2436px:【(@3x)iPhone X 】
750x1624px:【(@2x)iPhone X 】
注: 基准设计尺寸:750px x 1334px。