依舊聲明:這里寫的依舊只是某一種工作方法,而不是一種規(guī)范狡赐,你可以參考,但不要照搬钦幔,在具體工作中枕屉,一定要靈活運用。
匯總貼鲤氢,整理了之前零散的關(guān)于Android的文章……這里我把Android的開發(fā)文檔搀擂,字體,以及不同設(shè)計尺寸的文檔圖片上傳了卷玉,喜歡的下載哨颂;切圖的工具在IOS的帖子里,喜歡可以去那下載相种,這里就不上傳了威恼。
如果看了IOS篇,對標注切圖的問題會有更全面的理解,建議去看一下……
IOS篇:一款A(yù)PP從設(shè)計稿到切圖過程全方位揭秘
Part 1 ? ?基礎(chǔ)概念
① 你需要知道的一些鋪墊:
手機分辨率:分辨率就是手機屏幕的像素點數(shù)沃测,類似480*800缭黔、720*1280、1080*1920這個意思……
手機屏幕尺寸:手機對角線的物理尺寸蒂破,單位是英寸馏谨;比如小米4的尺寸就是5英寸,IPhone 6的尺寸就是4.7英寸……
手機屏幕密度:dpi或PPI附迷,每英寸的像素點數(shù)惧互,數(shù)值越高顯示的越逼真細膩。下面是屏幕密度的計算方法~
可以嘗試算算自己手機的屏幕密度~
②Android自身設(shè)定的屏幕密度
安卓尺寸眾多喇伯,按每個屏幕去適配肯定不現(xiàn)實喊儡;
所以為了解決這個問題,安卓手機屏幕有自己初始的固定密度稻据,安卓會根據(jù)這些屏幕不同的密度自己進行適配艾猜。這一點內(nèi)容掌握到能滿足自己設(shè)計工作需要就可以了……
以下是Android的密度劃分以及代表的分辨率,這里你可以發(fā)現(xiàn)已經(jīng)和設(shè)計稿尺寸和切圖輸出開始掛鉤了……
你需要了解IPhone各個版本的手機屏幕密度:
IPhone 4/4s/5/5s/5c/6 ≈320dpi
你會發(fā)現(xiàn)單從屏幕密度來說捻悯,IPhone可以算是超高密度了匆赃。
下面來說說這幾個密度:
LDPI120dpi ? ? ?低密度 ? ? ? ? ? ? ?不考慮這個了,消失了……
MDPI160dpi ? ? ?中密度 ? ? ? ? ? ? ?這個目前少見……
HDPI240dpi ? ? ?高密度 ? ? ? ? ? ? ?常見
xHDPI320dpi ? ? ? 超高密度 ? ? ? ? ?常見
xxHDPI480dpi ? ? ? 超超高密度 ? ? ? 常見
xxxHDPI640dpi ? ? ? 超超高密度 ? ? ? ?Android4.3推出了對此密度的支持今缚,也就是平板電視的4K分辨率
你的切圖會根據(jù)這幾個密度來決定輸出多少套~
Part2 ? ?標注切圖
你需要知道的Android的一些開發(fā)使用的單位:
dp:android開發(fā)使用的單位算柳,其實相當于一種比例換算單位,它可以保證控件在不同密度的屏幕上按照這個比例單位換算顯示相同的效果姓言。
sp:android開發(fā)使用的文字單位瞬项,和dp差不多,也是為了保證文字在不同密度的屏幕上顯示相同的效果何荚。
①標注設(shè)計稿時囱淋,使用px還是dp和sp?
答:和安卓工程師溝通餐塘,推薦使用dp和sp進行標注妥衣。但目前很多設(shè)計師對dp和sp這個單位并不理解,所以有些設(shè)計師提供設(shè)計稿的時候依舊使用px進行標注唠倦,這一點去和你的搭檔工程師進行溝通,如果不影響他開發(fā)以及他能換算清楚的前提下涮较,你可以考慮使用Px稠鼻,但是我并不推薦。
這里要記住一點(你只需要記住能幫助你工作就可以):
當屏幕密度為MDPI(160PPI)時狂票,1dp=1px
當屏幕密度為MDPI(160PPI)時候齿,1sp=1px
像素字號=屏幕密度/160 * sp字號 ?可以根據(jù)這個去算算設(shè)計稿中的像素字號標注為sp是多少,比如xHDPI下,36px的字標注為sp就是18sp,以此類推慌盯。
按照不同的屏幕密度換算周霉,也就是下圖所示的意思:
②使用哪種尺寸做設(shè)計稿?
答:通過上圖你會發(fā)現(xiàn)亚皂,xHDPI下俱箱,倍數(shù)關(guān)系為2,而且xHDPI就目前的市場來看灭必,還算屬于主流機型狞谱;這樣無論是標注,還是主流機型都能兼顧的到禁漓,所以
推薦使用720*1280尺寸做設(shè)計稿跟衅,這樣即使你標注的是px,工程師也可以換算的比較方便播歼。
現(xiàn)在有一種情況比較普遍伶跷,公司做了IOS版本的設(shè)計稿,現(xiàn)在要給安卓用秘狞,應(yīng)該怎么辦叭莫?
IPhone的屏幕密度已經(jīng)達到xHDPI了,通常用750*1334的IP 6尺寸做設(shè)計稿谒撼;
理論上食寡,IP 6的切圖其實可以給xHDPI使用;和我們的安卓工程師溝通廓潜,要求是把IP 6的設(shè)計稿更改尺寸到720尺寸下抵皱,對各個控件進行微調(diào),重新提供標注辩蛋。也就是說呻畸,我需要提供兩套標注,一套給IOS的標注悼院,一套給Android的標注伤为。(這是我目前搭檔的要求,實際情況根據(jù)自身環(huán)境決定)
③:你需要提供幾套切圖資源据途?
答:理論狀態(tài)下绞愚,如果你想兼顧到目前還存在的各個機型,應(yīng)該為不同的密度提供不同尺寸大小的切圖颖医。
但這無疑提升了巨大的工作量位衩,而且還可能浪費很大的資源空間,實際上熔萧,很多機型已經(jīng)不占有主流市場了糖驴,而且很多奇葩的分辨率也沒必要去考慮適配僚祷,所以,具體輸出幾套需要看公司的產(chǎn)品需求而定贮缕。
通常我是這么干的:
選取最大尺寸提供一套切片資源辙谜,交給工程師處理,適配到各個屏幕密度感昼。
這里要注意装哆,這個“最大尺寸”,指的并不是目前市面上Android手機出現(xiàn)過的最大尺寸抑诸,而是指目前流行的主流機型中的最大尺寸烂琴,這樣可節(jié)省很大的資源控件。關(guān)于最大尺寸選取多少蜕乡,你需要和你們的安卓工程師溝通奸绷,每個安卓工程師對這個問題的結(jié)論并不同。
其實現(xiàn)在Assistor PS這個PS外掛對輸出不同屏幕密度的切片處理的非常方便层玲,其實也沒有想象中那么巨大的工作量号醉。
安卓最小可操作尺寸
48dp:這和IOS的最小點擊區(qū)域性質(zhì)是一樣的,都是考慮到手指點擊的靈敏性的問題辛块,設(shè)計可點擊控件的時候要考慮到這一點畔派,關(guān)于這個設(shè)計文檔里已經(jīng)明確解釋了,更多的內(nèi)容可以去下載設(shè)計文檔查看润绵。
安卓設(shè)計使用的字體:
方正蘭亭黑簡體沒發(fā)現(xiàn)和手機字體效果完全一樣的字體线椰,如果做設(shè)計稿的話,蘭亭黑比較接近尘盼,可以考慮使用憨愉。
西文字體:RobotoAndroid西文默認字體。
這里感謝 @bigyang 提供的字體:
在Android 5.0之后卿捎,使用的是思源黑體配紫,字體文件有2個名稱,“source han sans”和“noto sans CJK”午阵。
思源黑體是Adobe和Google領(lǐng)導(dǎo)開發(fā)的開源字體躺孝,支持繁簡日韓,有7種字體粗細
可以自己去下載底桂,我這里就不上傳了植袍,畢竟LZ行事作風(fēng)比較粗狂,設(shè)計稿也不是十分在乎和手機效果一模一樣~
Part3 ?工作的一些方法
這部分不僅僅局限在Android平臺籽懦,說的是一種工作方式
Q1:IOS的切片怎么提供給工程師于个?
答:在前面,我們知道了怎么切片猫十,但是一款A(yù)PP览濒,少說也有幾十個界面,難道你要把所有界面的切片資源放到一起給工程師嗎拖云?
關(guān)于這一點贷笛,我和IOS工程師進行了溝通,其實我現(xiàn)在是把所有的圖放到一個文件夾給他的宙项,因為我們的產(chǎn)品需要的切片并不多乏苦,而且我們搭檔很久了,我的命名習(xí)慣和分類習(xí)慣他都已經(jīng)熟悉了尤筐,很容易就找到汇荐;
理論上,最好的方式是每一個頁面的切片資源單獨放在一個文件夾里面盆繁,文件夾命好名掀淘,這樣工程師可以直接套頁面使用了,如下圖:
大致是這個意思油昂,最后的文件夾我就不一一翻譯了革娄,你懂就行;因為我以前也寫過一點程序冕碟,所以不習(xí)慣用中文命名文件夾和文件了拦惋。然后你的@2x,@3x的切片資源放到對應(yīng)的文件夾內(nèi)就可以了安寺。
這個是我個人的工作習(xí)慣厕妖,不過你可以考慮要不要這么做;如果你和工程師關(guān)系不錯挑庶,并且是一對好基友言秸,那其實沒必要搞這么多文件夾。
但是如果你做的產(chǎn)品切片資源很多挠羔,而且公司有需要比較正規(guī)的工作流程井仰,建議你可以考慮這種方式。不過可能會增加你的工作量破加,自己取舍吧俱恶。
Q2:Android的切片怎么提供給工程師?
答:IOS的切片有@2x范舀,@3x之分合是,那么Android的切片根據(jù)dpi的不同,其實和IOS的類似锭环,只不過是按照dpi來進行資源文件夾的命名聪全,如下圖:
根據(jù)不同的分辨率進行切片歸類,但是你看到了辅辩,如果切片特別多难礼,提供三套甚至更多套豈不是要累死了娃圆?
目前我使用的辦法就是只提供最大分辨率的切片,交給安卓工程師自己去縮放適配其他分辨率吧蛾茉,所以和你的搭檔溝通一下讼呢。
其實現(xiàn)在絕大多數(shù)公司限于人力物力的限制,沒有這么嚴格的工作方式谦炬,基本上就是一個文件夾悦屏,命名好了就提供給工程師了。
這里還是提醒各位键思,沒有固定的工作方式和方法础爬,任何方式都是為了提升工作效率而進行的。
Part4 ? 題外話
很多朋友糾結(jié)吼鳞,自己設(shè)計水平進步慢看蚜,甚至呆在現(xiàn)在的公司沒進步反而因為每天的業(yè)務(wù)需求還退步了!
剛?cè)胄械娜伺庾溃欢ㄒ覀€好師傅帶著你失乾,這樣你會少走很多彎路,設(shè)計水平和職業(yè)素養(yǎng)會突飛猛進纬乍。
那沒有師傅帶怎么辦碱茁?
如果是剛參加工作,建議第一年先熟悉工作流程和了解行業(yè)信息動態(tài)仿贬,積累了個人作品纽竣,之后跳槽吧……
關(guān)于設(shè)計水平的提高問題,其實真正考驗設(shè)計水平的茧泪,還是平面設(shè)計蜓氨,這一點我之前不相信,因為我沒接觸過平面設(shè)計队伟,大學(xué)專業(yè)就是游戲美術(shù)穴吹,根本涉及不到平面;但是接觸工作之后嗜侮,發(fā)現(xiàn)平面設(shè)計水平高的人港令,如果把思維轉(zhuǎn)換一下,在網(wǎng)頁和UI設(shè)計上都不會差锈颗,所以我個人推薦有空研究研究平面設(shè)計顷霹,對設(shè)計水平的提高很有幫助,建議是研究日本的平面設(shè)計击吱,其一是設(shè)計水平高淋淀,其二是更符合亞洲設(shè)計的習(xí)慣。
什么是設(shè)計覆醇?
設(shè)計就是解決問題朵纷,所以不要一味的追求視覺效果炭臭,設(shè)計不是搞藝術(shù)。很多人會發(fā)現(xiàn)工作好多年的設(shè)計師工作做的東西不炫也不酷袍辞,就認為他們的設(shè)計水平很爛徽缚,但其實他們可以做出炫彩屌炸天的作品,可是工作不是炫技革屠,設(shè)計不是繪畫,解決問題才是目的排宰。希望很多朋友不要犯這種只知道追求視覺卻拋棄最終需求的低級錯誤似芝。