此篇内容是个人收集的教程与经验总结，是原创也非原创，只是想自己有个整理的地方，也想拿出来和大家分享，如果涉及到未经允许不可转载告诉我，删掉就好。

做一全套的APP设计，无非就是

1. 界面设计：设计iOS界面，设计Android界面；
2. 切图：切iOS的2倍图和3倍图，切Android的hdpi,xhdpi,xxhdpi这三个尺寸的图；
3. 标注：以px为单位标注iOS界面的尺寸，以dp,sp为单位标Android的尺寸。

开篇基础知识及设计指南系列（看不懂可以先掌握后面内容，再回头反复咀嚼以下内容会更有效）

基础知识学起来！为设计师量身打造的DPI指南

通俗易懂！超全面的移动端尺寸基础知识科普指南

移动应用设计入门

iPhone/iPad/Android/WEB APP设计尺寸

iOS9人机界面指南（官方英文文档）

iOS9人机界面指南：UI设计基础（腾讯翻译）

Android Material Design 设计指南（官方英文文档）

Android Material Design 设计指南（极客学院提供）

iOS/Android

（一）屏幕尺寸

指实际的物理尺寸，为屏幕对角线的测量。

手机尺寸计算方式=对角线尺寸/2.54

目前，iPhone实际屏幕有3.5英寸/4英寸/4.7英寸/5.5英寸的屏幕大小，而为了简单起见，Android把实际屏幕尺寸分为五个广义的大小。

（二）分辨率与像素密度，倍率与逻辑像素

PPI（Pixels Per Inch）：像素密度，指屏幕上显示的像素个数，单位尺寸内像素点越多，显示的图像就越清楚。Retina屏比普通屏清晰很多，就是因为它的像素密度翻了一倍。它不是一个测量物理大小的单位，这项指标是连接数字世界与物理世界的桥梁。可以有一个2560*1440的屏幕可以跟墙一样大，也可以跟脑袋一样小。就像iPhone 3gs的屏幕像素是320×480，iPhone 4s的屏幕像素是640×960。刚好两倍，然而两款手机都是3.5英寸的。

DPI（Dots Per Inch）：指每英寸有多少个显示点

市场上iOS分辨率有： 640×960、640×1136、750×1334、1242×2208

目前iOS采用750×1334的分辨率来设计。（iPhone 6/6s）

市场上Android主流分辨率有：480×800、 720×1280、 1080×1920（其他的早该淘汰了，忽略不计）。

目前，Android把像素密度分为了五个广义的大小：

ldpi（low低密度）[0.75倍]                   ~120dpi → 1dp=0.75px

mdpi（medium标准密度）[1倍]          ~160dpi → 1x → 1dp=1px=1pt → @1x（iPhone 3gs）

hdpi（high高密度）[1.5倍]                  ~240dpi（480*800） → 1dp=1.5px

（这里240dpi并不一定是480*800的分辨率，同样的屏幕密度可以得到无数种分辨率，只需要改变屏幕尺寸就可以了。相同密度下不同分辨率只是在这个范围内共用一套资源切图而已。设计效果图时不用考虑这些，可以把480*800的分辨率“当成”是在240dpi下的设计。）

xhdpi（extra-high超高密度）[2倍] ~320dpi（720*1280） → 2x →  1dp=2px=1pt → @2x（iPhone 4/4s/5/5c/5s/6/6s ~326ppi）

目前Android采用720×1280的分辨率来设计。（目前为止720*1280的市场占有率还是比较高。但是由于技术水平的不断提升，今后一定会采用1080*1920的来设计）

（在5种输出的分辨率MDPI，HDPI，XHDPI，XXHDPI，XXXHDPI中按中间值XHDPI设计，让开发进行适配。即以720px*1280px为标准，72像素＼英寸）

xxhdpi（extra-extra-high超清密度）[3倍] ~480dpi（1080*1920）→ 3x → 1dp=3px=1pt → @3x（iPhone 6/6s plus ~401ppi）

（于设计来说，选取一个合适的尺寸作为正常大小和中等屏幕密度，然后向下和向上 做小、大、特大和低、高、超高的尺寸与密度。）

（三）单位

PX：像素= DP × （ DPI / 160 )

例如，在一个240dpi的屏幕里，1DP等于1.5PX。

PT：指点，PT用在iOS上，DP用在Android上，本质相同。简而言之，它们能定义独立于设备的像素比的大小，这会包含在不同角色（如设计师与工程师）之间的讨论规则中。

DP（Dip）：指独立于设备的像素点。android开发中用于描述尺寸和间距。相当于一种比例换算单位，它可以保证控件在不同密度的屏幕上按照这个比例单位换算显示相同的效果。

SP：和DP、PT用途上来讲不同，工作方式相同，SP表示与比例无关的像素，只是用于描述字号和行距。同时也是为了保证文字在不同密度的屏幕上显示相同的效果。

单位决定了我们的思考方式。在设计和开发过程中，应该尽量使用逻辑像素尺寸来思考界面。设计Android应用时，有的设计师喜欢把画布设为1080×1920，有的喜欢设成720×1280。给出的界面元素尺寸就不统一了。Android的最小点击区域尺寸是48x48dp，这就意味着在xhdpi的设备上，按钮尺寸至少是96x96px。而在xxhdpi设备上，则是144x144px。

无论画布设成多大，我们设计的是基准倍率的界面样式，而且开发人员需要的单位都是逻辑像素。所以为了保证准确高效的沟通，双方都需要以逻辑像素尺寸来描述和理解界面，无论是在标注图还是在日常沟通中。不要再说“底部标签栏的高度是96像素，我是按照xhdpi做的”这样的话了。

（四）切图

iOS的切图需要切二倍图（@2x），三倍图（@3x），命名需要注意，如btn_xxx_xxx@2x，btn_xxx_xxx@3x

（尽量用下划线，命名规则遵照图片类型 _ 分类 _ 用途 _ 状态.png，比如：btn _ share _ facebook _ normal.png）

Android的切图需要切三个尺寸的：hdpi, xhdpi, xxhdpi，但是说起来只需要提供一套切图即可。

（Android 切图只吃 _ ，iOS 切图则是是 - 和 _ 都吃，（Web 没差）。如果你常遇到切一次图要给多个平台使用，那就用 _ 底线吧）

720*1280下的切图资源基本可以适配其他机型，有些特殊的切图需要单独适配的，比如icon等。

适配480*800机型=720*1280下的切图大小*0.75

适配1080*1920机型=720*1280下的切图大小*1.5

（适配1080*1920的时候，不要单独硬生生的将图标放大1.5倍。这就要求在720*1280下画图的时候，尽量采用矢量图形来画图。比如在720*1280下图图标是48px*48px的时候，适配1080*1920时候，48px*1.5=72px。把矢量图形调整为72px即可。把切图资源给开发，开发会把切图单独放到xxhdpi的文件目录下，就会自动适配1080*1920的了。同样要是适配480*800的，48px*0.75=32px，把切图给开发，开发会把切图资源单独放到hdpi的目录下，就会自动适配的。720*1280下的切图资源，开发是放到xhdpi的目录下的。）

注意：大家在设计图片的时候尽量采用偶数来设计。开发可以直接写出来的就尽量不要切图。

iOS&Android设计标准规范

一套效果图适配全尺寸和标注规范（修订版）

App 切圖檔案命名方式

（五）标注

只需要提供一套标注即可。 

原则上需要为不同分辨单独进行标注，但由于开发成本等各种考虑。如果资源真的有限的情况下，可以以iOS标准设计效果图，大部分可以直接适配Android。和安卓工程师沟通，要求是把iPhone6/6s的750×1334设计稿更改尺寸到720×1280尺寸下，对各个控件进行微调，是否需要重新提供标注。

状态栏（Status Bar）、导航栏（Navigation）、主菜单栏/标签栏（Submenu/Tabbar）、内容区域（Content）

750*1334px（iPhone 6/6s）：状态栏40px，导航栏88px，标签栏98px，实体键最小可操作尺寸88px。文字最大34px，最小18px，常用28px。

720*1280px（Android常用）：状态栏25dp, 导航栏48dp，标签栏48dp，工具栏48dp，实体键最小可操作尺寸48dp。文字最大18sp，常用14sp。

（在安卓中这些控件的高度都能用程序自定义，所以并没有严格的尺寸数值）

（ 选取320dpi下，分辨率为：720*1280进行设计，此分辨率下1dp=2px。  设计师要建立相对单位概念，可以直接使用dp标注尺寸、sp标注文字大小）

（六）文字

iOS中文字体：iOS9开始系统中文字体换成了苹方黑体，之前一直为黑体-简。

iOS英文字体：iOS9之后系统英文字体换成了旧金山字体，之前为Helvetica Neue。

Android中文字体：默认为Droid Sans Fallback，也有人说Android 5.0之前是谷歌的思源字体，所以网盘里字体文件我都加进去了，设计时还可采用微软雅黑和方正兰亭细黑。

Android英文字体：Android4.x及以上采用Roboto，Android2.x和android3.x采用 Droid Sans。

建议尽量采用系统默认字体。

Android规范建议，字号采用12sp、14sp、18sp、22sp等四个级别来设计。（实际设计时可以按实际情况调整）都是4的倍数，方便后期不同密度尺寸上的换算。

44px（22sp）

40px（20sp）

36px（18sp）

32px（16sp）

28px（14px）

24px（12sp）

iOS和Android中英文字体百度网盘下载：https://pan.baidu.com/s/1pKWko91 密码: 276j

资源们

这里提一下，如果作为新手以上内容需慢慢理解，工作过程又需要你快速出稿，最有效的方法就是使用现成的GUI源文件进行修改或者选择常用的APP截图作为背景，图标大小，界面模块尺寸，字体大小都可以参照。

一些个人收集的iOS和Android的GUI.Sketch资源网盘下载：https://pan.baidu.com/s/1eR6Klwu 密码: 9tpy

iOS 9 GUI for Sketch（如果下载不了，我网盘里也上传了一份，在UI.iOS里）

iOS 7免费设计资源汇总

以上内容总结出自下列经验分享：

酷友观点/经验：Android和iOS的视觉设计规范(原创文章)

酷友观点/经验：APP－IOS与Android界面设计与切图(原创文章)

Android分辨率适配 ”葵花宝典“

iPhone/iPad/Android/WEB APP设计规范

一款APP，从设计稿到切图 （iOS篇）

一款APP，从设计稿到切图(Android篇)