之前U妹給大家分享了《一款A(yù)PP設(shè)計(jì)的從0到1之：iOS精華篇》，今天U妹給大家?guī)淼氖茿ndroid的設(shè)計(jì)規(guī)范篇。

Android的設(shè)計(jì)規(guī)范不同于iOS，Android是一個(gè)開源的系統(tǒng)，國內(nèi)外有很多的手機(jī)廠商，這就導(dǎo)致了有非常多的Android機(jī)型，如小米、華為、魅族、三星等，每一家都有自己的操作系統(tǒng)，都有一套自己的UI設(shè)計(jì)規(guī)范。

U妹列了一個(gè)小小的目錄：

一、基礎(chǔ)概念

二、Android界面設(shè)計(jì)規(guī)范

三、Android切圖標(biāo)注

四、安卓開發(fā)單位換算

五、總結(jié)

一、基礎(chǔ)概念

1、什么是DPI？

DPI（Dots Per Inch）：每英寸點(diǎn)數(shù)，表示指屏幕密度。是測量空間點(diǎn)密度的單位，最初應(yīng)用于打印技術(shù)中，它表示每英寸能打印上的墨滴數(shù)量。較小的DPI會(huì)產(chǎn)生不清晰的圖片。

后來DPI的概念也被應(yīng)用到了計(jì)算機(jī)屏幕上，計(jì)算機(jī)屏幕一般采用PPI（Pixels Per Inch）來表示一英寸屏幕上顯示的像素點(diǎn)的數(shù)量，現(xiàn)在DPI也被引入。

安裝Windows操作系統(tǒng)的電腦屏幕PPI的初始值是96，Mac的初始值是72，雖然這個(gè)值從80年代起就不是很準(zhǔn)確了。 一般來說，非retina桌面（包括Mac）的PPI的取值區(qū)間在72-120之間，因?yàn)檫@個(gè)取值區(qū)間能夠確保你的作品在任何地方都能保持大致相同的比例。

這里有一個(gè)應(yīng)用實(shí)例： 27寸Mac影院顯示屏的PPI是109，這表示在每英寸的屏幕上顯示了109個(gè)像素點(diǎn)。斜角長是25.7英寸（65cm），實(shí)際屏幕的寬度大概是23.5英寸，23.5109約等于2560，因此原始屏幕分辨率就是2560x1440px。

屏幕密度計(jì)算公式：

1080x1920px屏幕密度：

2、什么是PPI？

PPI(Pixels Per Inch)：圖像分辨率；是每英寸圖像內(nèi)有多少個(gè)像素點(diǎn)，分辨率的單位為ppi，通常叫做像素每英寸。圖像分辨率一般被用于ps中，用來改變圖像的清晰度。

二、Android界面設(shè)計(jì)規(guī)范

1、Android各設(shè)備屏幕密度

安卓尺寸眾多，按每個(gè)屏幕去適配肯定是不現(xiàn)實(shí)的。

所以為了解決這個(gè)問題，安卓手機(jī)屏幕有自己初始的固定密度，安卓會(huì)根據(jù)這些屏幕不同的密度自己進(jìn)行適配。這一點(diǎn)內(nèi)容掌握到能滿足自己設(shè)計(jì)工作需要就可以了……

以下是Android的密度劃分以及代表的分辨率，這里你可以發(fā)現(xiàn)已經(jīng)和設(shè)計(jì)稿尺寸和切圖輸出開始掛鉤了。

安卓各屏幕密度

U妹來帶大家了解一下iPhone各設(shè)備的手機(jī)屏幕密度：

iphone 4/4S/5/5S/SE/6/7≈320DPI

2、Android開發(fā)單位DP和SP

DP：安卓專用長度單位。以160 DPI屏幕為標(biāo)注，則1DP=1PX

計(jì)算公式：dp x dpi/160=px

例：以720x1280px （320dpi）為例計(jì)算 1dp x 320 dpi/=2px

SP：安卓專用字體單位。以160 DPI屏幕為標(biāo)注，則1SP=1PX

計(jì)算公式：sp x dpi/160=px

例：以720x1280px （320dpi）為例計(jì)算 1sp x 320 dpi/=2px

3、設(shè)計(jì)稿尺寸

從目前市場主流設(shè)備尺寸來看，我們要用1080 x 1920 PX?來做安卓設(shè)計(jì)稿尺寸。

以1080x1920px作為設(shè)計(jì)稿標(biāo)準(zhǔn)尺寸的原由：

1. 從中間尺寸向上和向下適配的時(shí)候界面調(diào)整的幅度最小，最方便適配。
2. 大屏幕時(shí)代依然以小尺寸作為設(shè)計(jì)尺寸，會(huì)限制設(shè)計(jì)師的設(shè)計(jì)視角。
3. 用主流尺寸來做設(shè)計(jì)稿尺寸，極大的提高了視覺還原和其他機(jī)型適配。

所以做安卓設(shè)計(jì)稿時(shí)請以1080x1920px來做設(shè)計(jì)稿

（sketch用戶以540 x 960來做設(shè)計(jì)稿）

界面設(shè)計(jì)控件尺寸：

4、安卓圖標(biāo)尺寸

安卓的圖標(biāo)相對iOS來說較少，我們只需提供一下幾個(gè)尺寸就可以了，但是需要提高2套，圓角和直角各一套，因?yàn)橛械牡胤蕉紩?huì)用到。

512x512px

192x192px

144x144px

96x96px

72x72px

48x48px

因?yàn)榘沧坑泻芏嗟臋C(jī)型，不同屏幕密度的手機(jī)對應(yīng)的icon大小也是不同的，所以U妹這里沒法給你給出相應(yīng)的icon所被應(yīng)用的位置。

5、安卓設(shè)計(jì)字體

英文字體為?Roboto字體

中文字體為?思源黑體。在在Android 5.0之后，使用的是思源黑體，字體文件有2個(gè)名稱，“source han sans”和“noto sans CJK”。

思源黑體是Adobe和Google領(lǐng)導(dǎo)開發(fā)的開源字體，支持繁簡日韓，有7種字體粗細(xì)。

6、常見主流手機(jī)尺寸和分辨率

三、Android切圖標(biāo)注

1、標(biāo)注設(shè)計(jì)稿時(shí)，使用px還是dp或sp？

答：這個(gè)問題需要和安卓工程師溝通，推薦使用dp和sp進(jìn)行標(biāo)注（這里指的是在安卓設(shè)計(jì)稿的前提下）。但目前很多設(shè)計(jì)師對dp和sp這個(gè)單位并不理解，所以有些設(shè)計(jì)師提供安卓設(shè)計(jì)稿的時(shí)候依舊使用px進(jìn)行標(biāo)注，這一點(diǎn)去和你的搭檔工程師進(jìn)行溝通，如果不影響他開發(fā)以及他能換算清楚的前提下，你可以考慮使用Px，但是我并不推薦。

這里要記住一點(diǎn)（你只需要記住能幫助你工作就可以）：

當(dāng)屏幕密度為MDPI（160DPI）時(shí)，1dp=1px ?

當(dāng)屏幕密度為MDPI（160DPI）時(shí)，1sp=1px

像素字號=屏幕密度/160 * sp字號??可以根據(jù)這個(gè)去算算設(shè)計(jì)稿中的像素字號標(biāo)注為sp是多少，比如xHDPI下,36px的字標(biāo)注為sp就是18sp，以此類推。

按照不同的屏幕密度換算，也就是下圖所示的意思：

2. 你需要提供幾套切圖資源？

答：理論狀態(tài)下，如果你想兼顧到目前還存在的各個(gè)機(jī)型，應(yīng)該為不同的密度提供不同尺寸大小的切圖。

但這無疑提升了巨大的工作量，而且還可能浪費(fèi)很大的資源空間，實(shí)際上，很多機(jī)型已經(jīng)不占有主流市場了，而且很多奇葩的分辨率也沒必要去考慮適配，所以，具體輸出幾套需要看公司的產(chǎn)品需求而定。

通常我是這么干的：

選取最大尺寸提供一套切圖資源，交給開發(fā)工程師處理，適配到各個(gè)屏幕密度。

這里要注意，這個(gè)“最大尺寸”，指的并不是目前市面上Android手機(jī)出現(xiàn)過的最大尺寸，而是指目前流行的主流機(jī)型中的最大尺寸，這樣可節(jié)省很大的資源空間。關(guān)于最大尺寸選取多少，你需要和你們的安卓工程師溝通，每個(gè)安卓工程師對這個(gè)問題的結(jié)論并不同。（我的安卓搭檔，讓我提供XXHDPI的切圖資源就好，我用的切圖工具是Cutterman，切圖一鍵搞定）

3. Android的切圖資源提供哪個(gè)尺寸給開發(fā)哥哥？

答：iOS的切圖有@2x，@3x之分，那么Android的切圖根據(jù)dpi的不同，其實(shí)和iOS的類似，只不過是按照dpi來進(jìn)行資源文件夾的命名，如下圖：

根據(jù)不同的分辨率進(jìn)行切圖歸類，但是你看到了，如果切片特別多，提供5套切圖豈不是要累死了？

一般情況下，我們只需要提供3套切圖資源就可以滿足安卓工程師的適配，分別是HDPI、XHDPI、 XXHDPI?3套切圖資源。

目前我使用的辦法就是只提供最大尺寸的切圖，交給安卓工程師自己去縮放適配其他分辨率吧，所以和你的搭檔溝通一下。

其實(shí)現(xiàn)在絕大多數(shù)公司限于人力物力的限制，沒有這么嚴(yán)格的工作方式，基本上就是一個(gè)文件夾，命名好了就提供給工程師了。

這里還是提醒各位，沒有固定的工作方式和方法，任何方式都是為了提升工作效率而進(jìn)行的。

4. 在做設(shè)計(jì)稿時(shí)我們遇到的最多問題

（1）用哪種尺寸做設(shè)計(jì)稿？

iOS：用750x1334px來做設(shè)計(jì)稿。

安卓：就目前的市場來看，XXHDPI屬于主流機(jī)型；這樣無論是標(biāo)注，還是主流機(jī)型都能兼顧的到，所以推薦使用1080x1920px來做設(shè)計(jì)稿尺寸，這樣即使你標(biāo)注的是px，工程師也可以很方便的進(jìn)行換算。

（2）如何用iOS的設(shè)計(jì)稿去適配安卓（劃重點(diǎn)啦）

現(xiàn)在有一種情況現(xiàn)在非常普遍，那就是一稿兩用；設(shè)計(jì)師都是做IOS版本的設(shè)計(jì)稿，來適配安卓，現(xiàn)在要給安卓用，應(yīng)該怎么辦？

iPhone的屏幕密度已經(jīng)達(dá)到xHDPI了，用750x1334px的尺寸做設(shè)計(jì)稿；

實(shí)際上，750×1334的@3x的切圖資源正好是安卓XXhdpi（1080x1920px）的切圖資源；安卓開發(fā)用iOS的設(shè)計(jì)稿自己進(jìn)行換算就可以了，前提是你必須和安卓工程師溝通。

另一種情況：你可以把750×1334的設(shè)計(jì)稿等比例調(diào)整尺寸到安卓1080×1920尺寸下，對各個(gè)控件進(jìn)行微調(diào)，重新提供標(biāo)注（用dp標(biāo)注）。也就是說，你需要提供兩套標(biāo)注，一套給iOS的標(biāo)注，一套給Android的標(biāo)注。

（3）大家可能還有一個(gè)問題，那就是我用cutterman切安卓圖片輸出的有drawable和mipmap 2個(gè)文件夾，到底將哪個(gè)給開發(fā)工程師呢？

答：以前用的開發(fā)工具，是只有drawable， 沒有mipmap的，后來新的開發(fā)工具里面才有mipmap這個(gè)文件夾，專門用來放png格式的圖片的，不過drawable里面還是可以放png圖片。

所以現(xiàn)在我們給安卓工程師的切圖輸出文件只需給mipmap-前綴開頭的就好。

四、Android開發(fā)單位換算

1、安卓機(jī)型各種尺寸下的PX與DP、SP的對應(yīng)關(guān)系

2、字體單位SP與PX的對應(yīng)關(guān)系

3、距離單位DP與PX的對應(yīng)關(guān)系

五、總結(jié)

關(guān)于《一款A(yù)PP設(shè)計(jì)的從0到1之：安卓設(shè)計(jì)規(guī)范篇》就全部講完了，希望可以給你有很大的幫助；U妹這里說的只是一種工作方法，好的工作方法才能自己事半功倍，在具體工作中也要靈活應(yīng)用，一定要多和開發(fā)溝通交流，良好的溝通才是解決問題的唯一方法，有疑問題也可給U妹留言，我們下期再見！

相關(guān)閱讀

iOS設(shè)計(jì)規(guī)范回顧：《一款A(yù)PP設(shè)計(jì)的從0到1之：iOS精華篇》

#專欄作家#

UI妹兒，微信公眾號：UI妹兒（ID：UIfaner），人人都是產(chǎn)品經(jīng)理專欄作家。高級UI設(shè)計(jì)師，擅長UI和交互設(shè)計(jì)，有良好的審美能力和較強(qiáng)的創(chuàng)新能力，對色彩及構(gòu)圖和設(shè)計(jì)風(fēng)格有深刻的把握能力，具備手繪和動(dòng)效功底。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于 CC0 協(xié)議