一款APP，從設計稿到切圖(Android篇)

07-20

依舊聲明：這裡寫的依舊只是某一種工作方法，而不是一種規範，你可以參考，但不要照搬，在具體工作中，一定要靈活運用。

匯總貼，整理了之前三篇零散的關於Android的文章……這裡我把Android的開發文檔，字體，以及不同設計尺寸的文檔圖片上傳了，喜歡的下載；切圖的工具在IOS的帖子里，喜歡可以去那下載，這裡就不上傳了。

如果看了IOS篇，對標註切圖的問題會有更全面的理解，建議去看一下……

Part 1 基礎概念

① 你需要知道的一些鋪墊：

手機解析度：解析度就是手機屏幕的像素點數，類似480*800、720*1280、1080*1920這個意思……

手機屏幕尺寸：手機對角線的物理尺寸，單位是英寸；比如小米4的尺寸就是5英寸，IPhone 6的尺寸就是4.7英寸……

手機屏幕密度：dpi或PPI，每英寸的像素點數，數值越高顯示的越逼真細膩。下面是屏幕密度的計算方法~

可以嘗試算算自己手機的屏幕密度~

②Android自身設定的屏幕密度

安卓尺寸眾多，按每個屏幕去適配肯定不現實；

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

以下是Android的密度劃分以及代表的解析度，這裡你可以發現已經和設計稿尺寸和切圖輸出開始掛鉤了……

你需要了解IPhone各個版本的手機屏幕密度：

IPhone 4/4s/5/5s/5c/6 ≈320dpi

你會發現單從屏幕密度來說，IPhone可以算是超高密度了。

下面來說說這幾個密度：

LDPI 120dpi 低密度不考慮這個了，消失了……

MDPI 160dpi 中密度這個目前少見……

HDPI 240dpi 高密度常見

xHDPI 320dpi 超高密度常見

xxHDPI 480dpi 超超高密度常見

xxxHDPI 640dpi 超超高密度 Android4.3推出了對此密度的支持，也就是平板電視的4K解析度

你的切圖會根據這幾個密度來決定輸出多少套~

Part2 標註切圖

你需要知道的Android的一些開發使用的單位：

dp：android開發使用的單位，其實相當於一種比例換算單位，它可以保證控制項在不同密度的屏幕上按照這個比例單位換算顯示相同的效果。

sp：android開發使用的文字單位，和dp差不多，也是為了保證文字在不同密度的屏幕上顯示相同的效果。

①標註設計稿時，使用px還是dp和sp？

答：和安卓工程師溝通，推薦使用dp和sp進行標註。但目前很多設計師對dp和sp這個單位並不理解，所以有些設計師提供設計稿的時候依舊使用px進行標註，這一點去和你的搭檔工程師進行溝通，如果不影響他開發以及他能換算清楚的前提下，你可以考慮使用Px，但是我並不推薦。

這裡要記住一點(你只需要記住能幫助你工作就可以)：

當屏幕密度為MDPI（160PPI）時，1dp=1px

當屏幕密度為MDPI（160PPI）時，1sp=1px

像素字型大小=屏幕密度/160 * sp字型大小可以根據這個去算算設計稿中的像素字型大小標註為sp是多少，比如xHDPI下,36px的字標註為sp就是18sp，以此類推。

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

②使用哪種尺寸做設計稿？

答：通過上圖你會發現，xHDPI下，倍數關係為2，而且xHDPI就目前的市場來看，還算屬於主流機型；這樣無論是標註，還是主流機型都能兼顧的到，所以

推薦使用720*1280尺寸做設計稿，這樣即使你標註的是px，工程師也可以換算的比較方便。

現在有一種情況比較普遍，公司做了IOS版本的設計稿，現在要給安卓用，應該怎麼辦？

IPhone的屏幕密度已經達到xHDPI了，通常用750*1334的IP 6尺寸做設計稿；

理論上，IP 6的切圖其實可以給xHDPI使用；和我們的安卓工程師溝通，要求是把IP 6的設計稿更改尺寸到720尺寸下，對各個控制項進行微調，重新提供標註。也就是說，我需要提供兩套標註，一套給IOS的標註，一套給Android的標註。(這是我目前搭檔的要求，實際情況根據自身環境決定)

③：你需要提供幾套切圖資源？

答：理論狀態下，如果你想兼顧到目前還存在的各個機型，應該為不同的密度提供不同尺寸大小的切圖。

但這無疑提升了巨大的工作量，而且還可能浪費很大的資源空間，實際上，很多機型已經不佔有主流市場了，而且很多奇葩的解析度也沒必要去考慮適配，所以，具體輸出幾套需要看公司的產品需求而定。

通常我是這麼乾的：

選取最大尺寸提供一套切片資源，交給工程師處理，適配到各個屏幕密度。

這裡要注意，這個「最大尺寸」，指的並不是目前市面上Android手機出現過的最大尺寸，而是指目前流行的主流機型中的最大尺寸，這樣可節省很大的資源控制項。關於最大尺寸選取多少，你需要和你們的安卓工程師溝通，每個安卓工程師對這個問題的結論並不同。

其實現在Assistor PS這個PS外掛對輸出不同屏幕密度的切片處理的非常方便，其實也沒有想像中那麼巨大的工作量。

安卓最小可操作尺寸

48dp：這和IOS的最小點擊區域性質是一樣的，都是考慮到手指點擊的靈敏性的問題，設計可點擊控制項的時候要考慮到這一點，關於這個設計文檔里已經明確解釋了，更多的內容可以去下載設計文檔查看。

安卓設計使用的字體：

方正蘭亭黑簡體其實沒發現和手機字體效果完全一樣的字體，如果做設計稿的話，蘭亭黑比較接近，可以考慮使用。

西文字體：Roboto Android西文默認字體。

Part3 工作的一些方法

這部分不僅僅局限在Android平台，說的是一種工作方式

Q1：IOS的切片怎麼提供給工程師？

答：在前面，我們知道了怎麼切片，但是一款APP，少說也有幾十個界面，難道你要把所有界面的切片資源放到一起給工程師嗎？

關於這一點，我和IOS工程師進行了溝通，其實我現在是把所有的圖放到一個文件夾給他的，因為我們的產品需要的切片並不多，而且我們搭檔很久了，我的命名習慣和分類習慣他都已經熟悉了，很容易就找到；

理論上，最好的方式是每一個頁面的切片資源單獨放在一個文件夾裡面，文件夾命好名，這樣工程師可以直接套頁面使用了，如下圖：

大致是這個意思，最後的文件夾我就不一一翻譯了，你懂就行；因為我以前也寫過一點程序，所以不習慣用中文命名文件夾和文件了。然後你的@2x，@3x的切片資源放到對應的文件夾內就可以了。

這個是我個人的工作習慣，不過你可以考慮要不要這麼做；如果你和工程師關係不錯，並且是一對好基友，那其實沒必要搞這麼多文件夾。

但是如果你做的產品切片資源很多，而且公司有需要比較正規的工作流程，建議你可以考慮這種方式。不過可能會增加你的工作量，自己取捨吧。

Q2：Android的切片怎麼提供給工程師？

答：IOS的切片有@2x，@3x之分，那麼Android的切片根據dpi的不同，其實和IOS的類似，只不過是按照dpi來進行資源文件夾的命名，如下圖：

根據不同的解析度進行切片歸類，但是你看到了，如果切片特別多，提供三套甚至更多套豈不是要累死了？

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

其實現在絕大多數公司限於人力物力的限制，沒有這麼嚴格的工作方式，基本上就是一個文件夾，命名好了就提供給工程師了。

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

Part4 題外話

很多朋友糾結，自己設計水平進步慢，甚至呆在現在的公司沒進步反而因為每天的業務需求還退步了！

剛入行的人，一定要找個好師傅帶著你，這樣你會少走很多彎路，設計水平和職業素養會突飛猛進。

那沒有師傅帶怎麼辦？

如果是剛參加工作，建議第一年先熟悉工作流程和了解行業信息動態，積累了個人作品，之後跳槽吧……

關於設計水平的提高問題，其實真正考驗設計水平的，還是平面設計，這一點我之前不相信，因為我沒接觸過平面設計，大學專業就是遊戲美術，根本涉及不到平面；但是接觸工作之後，發現平面設計水平高的人，如果把思維轉換一下，在網頁和UI設計上都不會差，所以我個人推薦有空研究研究平面設計，對設計水平的提高很有幫助，建議是研究日本的平面設計，其一是設計水平高，其二是更符合亞洲設計的習慣。

什麼是設計？

設計就是解決問題，所以不要一味的追求視覺效果，設計不是搞藝術。很多人會發現工作好多年的設計師工作做的東西不炫也不酷，就認為他們的設計水平很爛，但其實他們可以做出炫彩屌炸天的作品，可是工作不是炫技，設計不是繪畫，解決問題才是目的。希望很多朋友不要犯這種只知道追求視覺卻拋棄最終需求的低級錯誤。