iOS 设计规范

2021-11-24 10:27:02 浏览数 (1)

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。

0 人点赞