美文网首页产品移动端UI
APP设设计规范尺寸、切图详解——IOS和Android

APP设设计规范尺寸、切图详解——IOS和Android

作者: 一只爱阅读的梅子姐姐 | 来源:发表于2019-07-10 21:45 被阅读0次

    IOS的设计规范:

    来自网络

    一、尺寸

    来自网络

    目前主流的是以iPhone 6为主,设计尺寸是750*1334px,4.7寸。


    二、不同分辨率下状态栏、导航栏、标签栏高度的差异:

    来自网络


    三、字体、控件、图标的规范要求

    来自网络

    1、分辨率以iPhone 6 设计为主:750*1334px

    2、(字体 Helvetica/华文细黑,实际中运用黑体简或者Hiti-sc 最接近系统中所带字体)

    3、工具栏height:88px    如搜索、选择、删除、回复等。

    4、顶部标签栏height:60px  位于状态栏或者状态栏下的文字/具有可切换功能的图标

    (一)IOS@2  750*1334px

    1、导航栏

    来自网络

    所有的字号,在750*1334px的设计尺寸下都是偶数,便于程序员操作。

    所有可触发按钮必须≥44*44

    (二)IOS@1  375*6674px

    来自网络

    所有可触发按钮必须≥22*22

    左右内容与边距的间隔大概在20px

    文字的选择状态:

    来自网络 来自网络 来自网络 来自网络

    功能型图标(尺寸根据实际情况来区分)

    来自网络 来自网络

    按钮:

    来自网络 来自网络 来自网络

    强调确定,填充有彩色。

    控件:

    来自网络 来自网络

    图示:

    来自网络

    例如:

    来网络

    模块:

    来自网络 来自网络

    布局:

    来自网络

    交互:

    来自网络 来自网络

    搜索框右边要有一个取消、或者输入了之后有一个“x”

    来自网络 来自网络 来自网络

    (三)切图命名规范:

    来自网络 来自网络 来自网络

    渐变和底纹效果和程序员商讨

    来自网络 来自网络 来自网络

    切图命名的完整部分:

    来自网络

    Android 的设计规范:(安卓规范尺寸较多,在没有特定情况下,设计师只需要做以720*1280px来做,基本的切和命名与IOS相似)

    设计尺寸:720*1280px

    状态栏48px  导航栏96px  内容区1038px   标签栏112px

    切图规范:

    来自网络 来自网络

    相关文章

      网友评论

        本文标题:APP设设计规范尺寸、切图详解——IOS和Android

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