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

文章分類:設計前沿 發布時間2015-11-24 原文鏈接:UI中國 閱讀(184)


~匯集了之前的三篇Android帖子的精髓~

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

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

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


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西文默認字體。



Part3  工作的一些方法

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


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

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

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

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

Image title

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

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

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


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

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

Image title


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

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

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

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


Part4   題外話


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

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


那沒有師傅帶怎么辦?

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



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


什么是設計?

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


原文來自:UI中國
欧美日韩亚洲第一区在线_中文字幕在线亚洲日韩6页_欧美日韩av中文日本av三区