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

發表於2015-12-03

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

 

彙總貼,整理了之前零散的關於Android的文章……這裡我把Android的開發文件,字型,以及不同設計尺寸的文件圖片上傳了,喜歡的下載;切圖的工具在IOS的帖子裡,喜歡可以去那下載,這裡就不上傳了。

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

IOS篇:一款APP從設計稿到切圖過程全方位揭祕

 

Part 1    基礎概念

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

手機解析度:解析度就是手機螢幕的畫素點數,類似480*800、720*1280、1080*1920這個意思……

手機螢幕尺寸:手機對角線的物理尺寸,單位是英寸;比如小米4的尺寸就是5英寸,IPhone 6的尺寸就是4.7英寸……

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

Image title

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

 

②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,以此類推。

按照不同的螢幕密度換算,也就是下圖所示的意思:

Image title

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

答:通過上圖你會發現,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外掛對輸出不同螢幕密度的切片處理的非常方便,其實也沒有想象中那麼巨大的工作量。

Image title

安卓最小可操作尺寸

48dp:這和IOS的最小點選區域性質是一樣的,都是考慮到手指點選的靈敏性的問題,設計可點選控制元件的時候要考慮到這一點,關於這個設計文件裡已經明確解釋了,更多的內容可以去下載設計文件檢視。

 

安卓設計使用的字型:

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

西文字型:Roboto      Android西文預設字型。

 

這裡感謝 @bigyang 提供的字型:

在Android 5.0之後,使用的是思源黑體,字型檔案有2個名稱,“source han sans”和“noto sans CJK”。

思源黑體是Adobe和Google領導開發的開源字型,支援繁簡日韓,有7種字型粗細

 

可以自己去下載,我這裡就不上傳了,畢竟LZ行事作風比較粗狂,設計稿也不是十分在乎和手機效果一模一樣~

 

Part3  工作的一些方法

這部分不僅僅侷限在Android平臺,說的是一種工作方式

 

Q1:IOS的切片怎麼提供給工程師?

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

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

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

Image title

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

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

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

 

Q2:Android的切片怎麼提供給工程師?

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

Image title

 

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

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

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

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

 

Part4   題外話

 

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

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

 

那沒有師傅帶怎麼辦?

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

 

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

 

什麼是設計?

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

相關文章