产品移动端UI

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

2019-07-10  本文已影响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

切图规范:

来自网络 来自网络
上一篇下一篇

猜你喜欢

热点阅读