iOS设计规范

作者: 美兮_647e | 来源:发表于2021-04-26 16:55 被阅读0次

    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。


    不同意见可在评论中留言!!!

    相关文章

      网友评论

        本文标题:iOS设计规范

        本文链接:https://www.haomeiwen.com/subject/edperltx.html