依舊聲明:這里寫的依舊只是某一種工作方法,而不是一種規(guī)范,你可以參考,但不要照搬,在具體工作中,一定要靈活運(yùn)用。
匯總貼,整理了之前三篇零散的關(guān)于Android的文章……這里我把Android的開發(fā)文檔,字體,以及不同設(shè)計(jì)尺寸的文檔圖片上傳了,喜歡的下載;切圖的工具在IOS的帖子里,喜歡可以去那下載,這里就不上傳了。
如果看了IOS篇,對標(biāo)注切圖的問題會(huì)有更全面的理解,建議去看一下……
Part 1 基礎(chǔ)概念
① 你需要知道的一些鋪墊:
手機(jī)分辨率:分辨率就是手機(jī)屏幕的像素點(diǎn)數(shù),類似480*800、720*1280、1080*1920這個(gè)意思……
手機(jī)屏幕尺寸:手機(jī)對角線的物理尺寸,單位是英寸;比如小米4的尺寸就是5英寸,IPhone 6的尺寸就是4.7英寸……
手機(jī)屏幕密度:dpi或PPI,每英寸的像素點(diǎn)數(shù),數(shù)值越高顯示的越逼真細(xì)膩。下面是屏幕密度的計(jì)算方法~
可以嘗試算算自己手機(jī)的屏幕密度~
②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ì)稿尺寸和切圖輸出開始掛鉤了……
你需要了解IPhone各個(gè)版本的手機(jī)屏幕密度:
IPhone 4/4s/5/5s/5c/6 ≈320dpi
你會(huì)發(fā)現(xiàn)單從屏幕密度來說,IPhone可以算是超高密度了。
下面來說說這幾個(gè)密度:
LDPI 120dpi 低密度 不考慮這個(gè)了,消失了……
MDPI 160dpi 中密度 這個(gè)目前少見……
HDPI 240dpi 高密度 常見
xHDPI 320dpi 超高密度 常見
xxHDPI 480dpi 超超高密度 常見
xxxHDPI 640dpi 超超高密度 Android4.3推出了對此密度的支持,也就是平板電視的4K分辨率
你的切圖會(huì)根據(jù)這幾個(gè)密度來決定輸出多少套~
Part2 標(biāo)注切圖
你需要知道的Android的一些開發(fā)使用的單位:
dp:android開發(fā)使用的單位,其實(shí)相當(dāng)于一種比例換算單位,它可以保證控件在不同密度的屏幕上按照這個(gè)比例單位換算顯示相同的效果。
sp:android開發(fā)使用的文字單位,和dp差不多,也是為了保證文字在不同密度的屏幕上顯示相同的效果。
①標(biāo)注設(shè)計(jì)稿時(shí),使用px還是dp和sp?
答:和安卓工程師溝通,推薦使用dp和sp進(jìn)行標(biāo)注。但目前很多設(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(160PPI)時(shí),1dp=1px
當(dāng)屏幕密度為MDPI(160PPI)時(shí),1sp=1px
像素字號=屏幕密度/160 * sp字號 可以根據(jù)這個(gè)去算算設(shè)計(jì)稿中的像素字號標(biāo)注為sp是多少,比如xHDPI下,36px的字標(biāo)注為sp就是18sp,以此類推。
按照不同的屏幕密度換算,也就是下圖所示的意思:
②使用哪種尺寸做設(shè)計(jì)稿?
答:通過上圖你會(huì)發(fā)現(xiàn),xHDPI下,倍數(shù)關(guān)系為2,而且xHDPI就目前的市場來看,還算屬于主流機(jī)型;這樣無論是標(biāo)注,還是主流機(jī)型都能兼顧的到,所以
推薦使用720*1280尺寸做設(shè)計(jì)稿,這樣即使你標(biāo)注的是px,工程師也可以換算的比較方便。
現(xiàn)在有一種情況比較普遍,公司做了IOS版本的設(shè)計(jì)稿,現(xiàn)在要給安卓用,應(yīng)該怎么辦?
IPhone的屏幕密度已經(jīng)達(dá)到xHDPI了,通常用750*1334的IP 6尺寸做設(shè)計(jì)稿;
理論上,IP 6的切圖其實(shí)可以給xHDPI使用;和我們的安卓工程師溝通,要求是把IP 6的設(shè)計(jì)稿更改尺寸到720尺寸下,對各個(gè)控件進(jìn)行微調(diào),重新提供標(biāo)注。也就是說,我需要提供兩套標(biāo)注,一套給IOS的標(biāo)注,一套給Android的標(biāo)注。(這是我目前搭檔的要求,實(shí)際情況根據(jù)自身環(huán)境決定)
③:你需要提供幾套切圖資源?
答:理論狀態(tài)下,如果你想兼顧到目前還存在的各個(gè)機(jī)型,應(yīng)該為不同的密度提供不同尺寸大小的切圖。
但這無疑提升了巨大的工作量,而且還可能浪費(fèi)很大的資源空間,實(shí)際上,很多機(jī)型已經(jīng)不占有主流市場了,而且很多奇葩的分辨率也沒必要去考慮適配,所以,具體輸出幾套需要看公司的產(chǎn)品需求而定。
通常我是這么干的:
選取最大尺寸提供一套切片資源,交給工程師處理,適配到各個(gè)屏幕密度。
這里要注意,這個(gè)“最大尺寸”,指的并不是目前市面上Android手機(jī)出現(xiàn)過的最大尺寸,而是指目前流行的主流機(jī)型中的最大尺寸,這樣可節(jié)省很大的資源控件。關(guān)于最大尺寸選取多少,你需要和你們的安卓工程師溝通,每個(gè)安卓工程師對這個(gè)問題的結(jié)論并不同。
其實(shí)現(xiàn)在Assistor PS這個(gè)PS外掛對輸出不同屏幕密度的切片處理的非常方便,其實(shí)也沒有想象中那么巨大的工作量。
安卓最小可操作尺寸
48dp:這和IOS的最小點(diǎn)擊區(qū)域性質(zhì)是一樣的,都是考慮到手指點(diǎn)擊的靈敏性的問題,設(shè)計(jì)可點(diǎn)擊控件的時(shí)候要考慮到這一點(diǎn),關(guān)于這個(gè)設(shè)計(jì)文檔里已經(jīng)明確解釋了,更多的內(nèi)容可以去下載設(shè)計(jì)文檔查看。
安卓設(shè)計(jì)使用的字體:
方正蘭亭黑簡體 其實(shí)沒發(fā)現(xiàn)和手機(jī)字體效果完全一樣的字體,如果做設(shè)計(jì)稿的話,蘭亭黑比較接近,可以考慮使用。
西文字體:Roboto Android西文默認(rèn)字體。
Part3 工作的一些方法
這部分不僅僅局限在Android平臺(tái),說的是一種工作方式
Q1:IOS的切片怎么提供給工程師?
答:在前面,我們知道了怎么切片,但是一款A(yù)PP,少說也有幾十個(gè)界面,難道你要把所有界面的切片資源放到一起給工程師嗎?
關(guān)于這一點(diǎn),我和IOS工程師進(jìn)行了溝通,其實(shí)我現(xiàn)在是把所有的圖放到一個(gè)文件夾給他的,因?yàn)槲覀兊漠a(chǎn)品需要的切片并不多,而且我們搭檔很久了,我的命名習(xí)慣和分類習(xí)慣他都已經(jīng)熟悉了,很容易就找到;
理論上,最好的方式是每一個(gè)頁面的切片資源單獨(dú)放在一個(gè)文件夾里面,文件夾命好名,這樣工程師可以直接套頁面使用了,如下圖:
大致是這個(gè)意思,最后的文件夾我就不一一翻譯了,你懂就行;因?yàn)槲乙郧耙矊戇^一點(diǎn)程序,所以不習(xí)慣用中文命名文件夾和文件了。然后你的@2x,@3x的切片資源放到對應(yīng)的文件夾內(nèi)就可以了。
這個(gè)是我個(gè)人的工作習(xí)慣,不過你可以考慮要不要這么做;如果你和工程師關(guān)系不錯(cuò),并且是一對好基友,那其實(shí)沒必要搞這么多文件夾。
但是如果你做的產(chǎn)品切片資源很多,而且公司有需要比較正規(guī)的工作流程,建議你可以考慮這種方式。不過可能會(huì)增加你的工作量,自己取舍吧。
Q2:Android的切片怎么提供給工程師?
答:IOS的切片有@2x,@3x之分,那么Android的切片根據(jù)dpi的不同,其實(shí)和IOS的類似,只不過是按照dpi來進(jìn)行資源文件夾的命名,如下圖:
根據(jù)不同的分辨率進(jìn)行切片歸類,但是你看到了,如果切片特別多,提供三套甚至更多套豈不是要累死了?
目前我使用的辦法就是只提供最大分辨率的切片,交給安卓工程師自己去縮放適配其他分辨率吧,所以和你的搭檔溝通一下。
其實(shí)現(xiàn)在絕大多數(shù)公司限于人力物力的限制,沒有這么嚴(yán)格的工作方式,基本上就是一個(gè)文件夾,命名好了就提供給工程師了。
這里還是提醒各位,沒有固定的工作方式和方法,任何方式都是為了提升工作效率而進(jìn)行的。
Part4 題外話
很多朋友糾結(jié),自己設(shè)計(jì)水平進(jìn)步慢,甚至呆在現(xiàn)在的公司沒進(jìn)步反而因?yàn)槊刻斓臉I(yè)務(wù)需求還退步了!
剛?cè)胄械娜?,一定要找個(gè)好師傅帶著你,這樣你會(huì)少走很多彎路,設(shè)計(jì)水平和職業(yè)素養(yǎng)會(huì)突飛猛進(jìn)。
那沒有師傅帶怎么辦?
如果是剛參加工作,建議第一年先熟悉工作流程和了解行業(yè)信息動(dòng)態(tài),積累了個(gè)人作品,之后跳槽吧……
關(guān)于設(shè)計(jì)水平的提高問題,其實(shí)真正考驗(yàn)設(shè)計(jì)水平的,還是平面設(shè)計(jì),這一點(diǎn)我之前不相信,因?yàn)槲覜]接觸過平面設(shè)計(jì),大學(xué)專業(yè)就是游戲美術(shù),根本涉及不到平面;但是接觸工作之后,發(fā)現(xiàn)平面設(shè)計(jì)水平高的人,如果把思維轉(zhuǎn)換一下,在網(wǎng)頁和UI設(shè)計(jì)上都不會(huì)差,所以我個(gè)人推薦有空研究研究平面設(shè)計(jì),對設(shè)計(jì)水平的提高很有幫助,建議是研究日本的平面設(shè)計(jì),其一是設(shè)計(jì)水平高,其二是更符合亞洲設(shè)計(jì)的習(xí)慣。
什么是設(shè)計(jì)?
設(shè)計(jì)就是解決問題,所以不要一味的追求視覺效果,設(shè)計(jì)不是搞藝術(shù)。很多人會(huì)發(fā)現(xiàn)工作好多年的設(shè)計(jì)師工作做的東西不炫也不酷,就認(rèn)為他們的設(shè)計(jì)水平很爛,但其實(shí)他們可以做出炫彩屌炸天的作品,可是工作不是炫技,設(shè)計(jì)不是繪畫,解決問題才是目的。希望很多朋友不要犯這種只知道追求視覺卻拋棄最終需求的低級錯(cuò)誤。