app启动图标设计规范-技术干货：Applewatch APP设计规范

PPI(Pixels per inch):每英寸所拥有的像素数,即像素密度。

DPI(dots per inch):即每英寸上,所能印刷的网点数,一般称为像素密度。ppi计算公式:ppi = 屏幕对角线像素数/屏幕对角线英寸数,通过勾股定理计算屏幕对角线像素数。

Screen Size(屏幕尺寸):手机屏幕尺寸大小,如3英寸、4英寸、4.3英寸、5.7英寸,指的是对角线的长度。

DIP(device independent pixel):即dip/dp,设备独立像素。 1px = 1dp

density(由dpi决定)

Resolution(分辨率):指手机屏幕垂直和水平方向上的像素个数。eg分辨率480

800,指该设备垂直方向有800个像素点,水平方向有480个像素点。

px(Pixel像素):相同像素的ui,在不同分辨率的设备上效果不同。在小分辨率设备上会放大导致失真,大分辨率上被缩小。

Android Design里把主流设备的 dpi 归成了四个档次:

120 dpi、160 dpi、240 dpi、320 dpi

,具体见如下表格。

实际开发当中,我们经常需要对这几个尺寸进行相互转换(比如先在某个分辨率下完成设计,然后缩放到其他尺寸微调后输出),一般按照 dpi 之间的比例即 2:1.5:1:0.75 来给界面中的元素来进行尺寸定义。

也就是说如果以 160 dpi 作为基准的话,只要尺寸的 DP 是 4 的公倍数,XHDPI 下乘以 2,HDPI 下乘以 1.5,LDPI 下乘以 0.75 即可满足所有尺寸下都是整数 pixel 。但假设以 240 dpi 作为标准,那需要 DP 是 3 的公倍数,XHDPI 下乘以 1.333,MDPI 下乘以 0.666 ,LDPI 下除以 2。而以 LDPI 和 XHDPI 为基准就更复杂了。同时第一款Android设备(HTC的T-Mobile G1)是属于160dpi的。鉴于以上各种原因,

标准dpi=160

谷歌官方对dp的解释如下:

A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a density-independent way.

The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline density assumed by the system for a "medium" density screen. At runtime, the system transparently handles any scaling of the dp units, as necessary, based on the actual density of the screen in use. The conversion of dp units to screen pixels is simple:

px = dp * (dpi / 160).

For example, on a 240 dpi screen, 1 dp equals 1.5 physical pixels. You should always use dp units when defining your application's UI, to ensure proper display of your UI on screens with different densities.

简单来说,以160dpi的设备为准,该设备上1dp = 1px;如果屏幕密度大,1dip代表的px就多,比如在320dpi的屏幕上,1dip=2px(即1dp代表2个像素)。在app开发时,最好用dp来做界面的布局,以保证适配不同屏幕密度的手机。

dp和px的换算公式:

我的理解,该公式表示px的数值等于dp的数值*(设备dpi/160)

注意,px、dp是单位,但density没单位。

applyDimension的源码如下,可参考:

android的尺寸众多,建议使用分辨率为

720x1280

的尺寸设计。这个尺寸 720x1280中显示完美,在 1080x1920 中看起来也比较清晰;切图后的图片文件大小也适中,应用的内存消耗也不会过高。

app启动图标为48*48dp,对应各dpi设备,图像资源像素如下:

| mdpi | hdpi | xhdpi | xxhdpi |

| ---:| ---: | ---:| ---:| ---:|

|48

48px|72

72px|94

96px|144px

144px|

操作栏图标为32*32dp,对应各dpi设备,图像资源像素如下:其中图形区域尺寸是24*24dp,可参考平时ui切图会有部分留白。

| mdpi | hdpi | xhdpi | xxhdpi |

| ---:| ---: | ---:| ---:| ---:|

|32

32px|48

48px|64

64px|96px

96px|

通知栏图标为24*24dp,对应各dpi设备,图标像素如下:

| mdpi | hdpi | xhdpi | xxhdpi |

| ---:| ---: | ---:| ---:| ---:|

|24

24px|36

36px|48

48px|72px

72px|

某些场景需要用到小图标,大小应当是16*16dp,其中图形区域尺寸12*12dp。

| mdpi | hdpi | xhdpi | xxhdpi |

| ---:| ---: | ---:| ---:| ---:|

|16

16px|24

24px|32

32px|48px

48px|

一、App屏幕适配通用知识简介

1. 标注时注意事项

一般情况要定位一个Icon只需给出 上/下边距,左/右边距

标注图标距离只需标到可点击范围外

通用型颜色、字体单独标明一份

通用型模块只需单独标明一份,如导航栏

手机可视区域一般为宽度固定,长度超出边界可滑动,所以,标注物体宽度时可按比例说明

如果要标注内容上下居中,左右居中,或等比可不标注

当绘制的是一个列表时且每一条内容一样时,只需标注一条,如果每条内容有少许不同时,只需标明差异              部分

当交付的是一张完整图片时,不需做机型适配,只需给高清图(1920*1080)即可,注意进行压缩

当背景是纯色时只需给出色值(iOS使用RGB色值,Android使用16进制色值)

图标应给出可点击区域

若图标在不同页面重复出现,且尺寸相差不大,直接给出最大一份切图,并在圆形图标明尺寸,程序会根据需求缩放

可点击按钮通常要给出两种状态:普通/点击(选中)

按钮如果只是矩形、圆角矩形、圆形、椭圆形,给出尺寸和色值,可程序设置

渐变效果可通过程序实现,只需给出起始和结束色值跟范围

2. 切图命名规范

背景:bg_

按钮:btn_xxx_

图片:img_

标签:tab_

图标:icon_

照片:pht_

导航:nav_

图示:tip_

菜单:menu_

侧栏:sidebar_

二、iOS应用屏幕适配

1. iOS究竟要是适配多少种机型,以哪款机型分辨率作为设计尺寸最好

2016-3

iOS只需兼容iPhone4,完美兼容iphone5以上机型

如果按矢量图制作设计图按1X尺寸作图,后期放大成2X、3X;如果按传统的px作图应用最大尺寸(3X)作为画布。

以3X作为画布(1242*2208)难记且不能整除,我们可直接以1280(640*2)作为宽度,完美缩放为1X、2X;

2X->3X以1.5来算尺寸和字号可得到较好效果

2. 界面尺寸

设备分辨率状态栏高度导航栏高度标签栏高度

iPhone6 plus1242*2208px60px132px146px

iPhone6750*1334px40px88px98px

iPhone5/5s/5c640*1136px40px88px98px

iPhone4/4s640*960px40px88px98px

iPad3/4/Air/Air2/mini22048*1536px40px88px98px

iPad1/21024*768px20px44px49px

iPad mini1024*768px20px44px49px

导航栏背景图中,如果考虑状态栏背景,则背景图尺寸为导航栏px+状态栏px,如果只改变导航栏颜色则只需要导航栏px

3. 图标尺寸

设备App Store程序应用主屏幕spotlight搜索标签栏工具栏和导航栏

iPhone6 plus1024*1024px180*180px144*144px87*87px75*75px66*66px

iPhone61024*1024px120*120px144*144px58*58px75*75px44*44px

iPhone5/5s/5c1024*1024px120*120px144*144px58*58px75*75px44*44px

iPhone4/4s1024*1024px120*120px144*144px58*58px75*75px44*44px

iPad3/4/Air/Air2/mini21024*1024px180*180px144*144px100*100px50*50px44*44px

iPad1/21024*1024px90*90px72*72px50*50px25*25px22*22px

iPad mini1024*1024px90*90px72*72px50*50px25*25px22*22px

按钮切图建议以等宽高尺寸切图,且像素必须>=88、*88px , 当本身图片宽度或高度不足时,补充空白像素(透明像素).一般情况下,只需要普通状态下按钮切图即可

(适配不建议等比放大)

4. 参考文献

友盟设备指数

APP切图流程和APP切图命名规范详细完整版

APP切图详细规范终极指南

iOS和Android的app界面设计规范

APP界面切图命名和文件整理规范

三、Android应用屏幕适配

1.用px作为基础单位的缺陷

对比上图可以知道,ppi越低图片显示的越大,ppi越高图片显示的越小,造成不同手机上显示图片布局不统一!

使用dp作为单位所有机子显示统一

2. 衡量一个屏幕清晰度单位――――屏幕密度(dpi==ppi)

计算公式:屏幕dpi = √ (屏幕长^2 + 屏幕宽^2) / 屏幕尺寸

名称密度代表分辨率Android单位与像素换算

mdpi120dpi~160dpi320*4801dp=1px

hdpi160dpi~240dpi480*8001dp=1.5px

xhdpi240dpi~320dpi720*12801dp=2px

xxhdpi320dpi~480dpi720*1280/1080*19201dp=3px

xxxhdpi480dpi~640dpi2k~4k1dp=4px

屏幕大小启动图标操作栏图标上下文图标系统通知图标(白色)最细笔画

320*480px48*48px32*32px16*16px24*24px不小于2px

480*800px/480×854px/540×960px72*72px48*48px24*24px36*36px不小于3 px

720*1280px96*96px64*64px32*32px48*48px不小于4 px

1080*1920px144*144px96*96px48*48px72*72px不小于6 px

3.究竟要适配多少种机型

2016-3

得出结论: 只需适配高端的xxhdpi(720*1280/1080*1920),低端的hdpi(480*800)

4. 度量单位与边框

可触摸控件都是以 48dp 为单位的

为什么是 48dp?一般情况下,48dp 在设备上的物理大小是 9mm (会有一些变化)。这刚好在触摸控件推荐的大小范围 (7-10mm) 内,而且这样的大小,用户用手指触摸起来也比较准确、容易。( xxhdpi标准下为144px )

边框 注意留白 界面元素之间的留白应当是 8dp 。

例:

5. 字体排版

Roboto 是Android系统的默认字体集,字体大小单位 sp(可缩放像素数,scaleable pixels)

根据Android设计规范,推荐使用 12 、 14 、 16 、 20 和 34 号 ,字体粗细可调

spHDPIXHDPIXXHDPI

12sp18px24px36px:

14sp21px28px42px

16sp24px32px48px

18sp27px36px54px

20sp30px40px60px

34sp51px68px102px

(注意:字号要为双数,且不可带小数位)

6. 9-patch 图制作

什么是9-patch图

为什么要用9-patch格式制作图

适应各种手机屏幕拉伸图片需求,有效缩减图片体积

什么情况下使用

当发现图片是背景时且可能拉伸被拉伸时,或图片过大时

如何制作patch9 图

图片外层增加一全透明像素,在透明像素区花4条纯黑色边

1. 宽度可拉伸区域

2. 高度可拉伸区域

3. 垂直内容区域

4. 水平内容区域

8. 参考文献

友盟设备指数

Android 设计指南简体中文版4.x

Material Design 中文版

Android设计中的.9.png

一、规范概要

1. 导航形式

层级式,通过当前页面点击跳转到另外页面的形式。适合应用于复杂产品,需要层层递进。

页面式,页面切换,滑动,类似轮播

Apple Watch导航形式任选其一,不得同时存在。

2. 交互方式

轻触:列表、按钮、切换等控件的操作

手势:纵向轻扫,界面滚动;横向轻扫,界面导航之间的查看;从屏幕左侧边缘向右轻扫,返回父级界面。

压力触控:唤出当前页面情景菜单

实体控件(手表旋钮):长页面浏览,避免手指长时间轻扫界面何遮挡界面

3. 色彩

使用黑色作为APP的背景色,或者深色且高斯模糊的图片作为背景

高对比度的颜色使用于文字、图标、界面

4文字

SF和苹方

5. 图标

通知图标、首屏图标和长看图标、短看图标

情景图标(App内功能图标)

6. 布局

并排放置的图标一行不要超过三个

布局优先采用左对齐

二、设计尺寸

1.1屏幕尺寸

38mm(272*340px)

42mm(312*390px)

1.2图标尺寸

通知图标48PX(38mm)55px(42mm)

首屏图标和常看图标80px(38mm)88px(42mm)

短看图标172px(38mm)196px(42mm)

菜单情景图标(App内的功能图标)

图标大小70px,实际图标大小46px。(38mm)

图标大小80px,实际图标大小54px。(42mm)

图标线宽不得小于4px

1.3图标

1.3.1

通知图标,系统通知弹出的图标

1.3.2

首屏图标,如下图所示。首屏图标80px(38mm)88px(42mm)

1.3.3长看图标,如下所示,左上角图标。常看图标80px(38mm)88px(42mm)

1.3.4短看图标,如下图所示。短看图标172px(38mm)196px(42mm)

2.字体和文字

2.1字体

SF和苹方

2.2文字(字号,常见字号单位是PT和PX,PT是开发单位,PX是设计单位,在@2X下换算关系1PT=2PX)

标题headline 18PT

正文标题caption 15PT

正文body 15PT

备注、脚注、辅助文字footnote 12PT、13PT

3. 颜色

高对比度的颜色使用于文字、图标、界面

1.主色,如下图所示

2.辅助色、点睛色(控件、按钮)

按钮控件在设计中通常带有透明度

3.字体颜色和透明度

4. 布局

1状态栏和下方图片和列表布局间距

38mm(30px),42mm(32px)

2状态栏和列表按钮布局间距

38mm(11px),42mm(13px)

3状态栏和下方文本布局间距

38mm(46px),42mm(50px)

4文字边距和分割线按钮列表图片边距

38mm和42mm边距相同

5.图片和按钮到屏幕两边距离

38mm和42mm边距相同

5.控件和列表

1单行控件和列表布局尺寸

38mm

42mm

2.双行控件和列表布局尺寸

2.1正文+备注

38mm

42mm

2.2双行正文

38mm

42mm

3.三行控件和列表布局尺寸

38mm

42mm

4. 多行控件和列表布局尺寸

38mm

42mm

5.控件和列表类型

​