状态栏:40px 导航栏:88px 标签栏:98px
状态栏:40px 导航栏:88px 标签栏:98px
状态栏:60px 导航栏:132px 标签栏:147px
状态栏:132px 导航栏:132px 标签栏:147px
状态栏:88px 导航栏:88px 标签栏:98px
全局边距: 32px、30px、24px、20px(建议最小20px,边距数字选择偶数)
卡片间距: 20px、24px、30px、40px(通常上下间距最小不低于16px,过小的间距会造成用户的紧张情绪)
最常用的两种布局方式,列表式和卡片式
「信息」页面通常采用列表式布局。注:列表舒适体验的最小高度是80px,最大高度视内容而定。
例: 微信高度:136px QQ高度:132px 自如高度110px 唯品会高度:106px。
每张卡片的内容和形式都是相互独立的互不干扰。
卡片本身一般是白色,而卡片之间的间距颜色一般是浅色,不同产品风格颜色可能不同。
双栏卡片布局形式,常见于图片信息为主导,每一屏显示至少4张卡片。
常见图片尺寸比例:16:9、4:3、1:1、1:0.618(黄金比例)等
对齐、对称、分组
文字是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。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。