(轉(zhuǎn))一款A(yù)PP枢里,從設(shè)計稿到切圖(Android篇)

依舊聲明:這里寫的依舊只是某一種工作方法,而不是一種規(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è)計不是繪畫,解決問題才是目的排宰。希望很多朋友不要犯這種只知道追求視覺卻拋棄最終需求的低級錯誤似芝。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市板甘,隨后出現(xiàn)的幾起案子党瓮,更是在濱河造成了極大的恐慌,老刑警劉巖盐类,帶你破解...
    沈念sama閱讀 221,576評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件寞奸,死亡現(xiàn)場離奇詭異,居然都是意外死亡在跳,警方通過查閱死者的電腦和手機枪萄,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,515評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來猫妙,“玉大人瓷翻,你說我怎么就攤上這事「钭梗” “怎么了齐帚?”我有些...
    開封第一講書人閱讀 168,017評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長彼哼。 經(jīng)常有香客問我对妄,道長,這世上最難降的妖魔是什么敢朱? 我笑而不...
    開封第一講書人閱讀 59,626評論 1 296
  • 正文 為了忘掉前任剪菱,我火速辦了婚禮,結(jié)果婚禮上拴签,老公的妹妹穿的比我還像新娘琅豆。我一直安慰自己,他們只是感情好篓吁,可當我...
    茶點故事閱讀 68,625評論 6 397
  • 文/花漫 我一把揭開白布茫因。 她就那樣靜靜地躺著,像睡著了一般杖剪。 火紅的嫁衣襯著肌膚如雪冻押。 梳的紋絲不亂的頭發(fā)上驰贷,一...
    開封第一講書人閱讀 52,255評論 1 308
  • 那天,我揣著相機與錄音洛巢,去河邊找鬼括袒。 笑死,一個胖子當著我的面吹牛稿茉,可吹牛的內(nèi)容都是我干的锹锰。 我是一名探鬼主播,決...
    沈念sama閱讀 40,825評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼漓库,長吁一口氣:“原來是場噩夢啊……” “哼恃慧!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起渺蒿,我...
    開封第一講書人閱讀 39,729評論 0 276
  • 序言:老撾萬榮一對情侶失蹤痢士,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后茂装,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體怠蹂,經(jīng)...
    沈念sama閱讀 46,271評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,363評論 3 340
  • 正文 我和宋清朗相戀三年少态,在試婚紗的時候發(fā)現(xiàn)自己被綠了城侧。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,498評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡彼妻,死狀恐怖赞庶,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情澳骤,我是刑警寧澤歧强,帶...
    沈念sama閱讀 36,183評論 5 350
  • 正文 年R本政府宣布,位于F島的核電站为肮,受9級特大地震影響摊册,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜颊艳,卻給世界環(huán)境...
    茶點故事閱讀 41,867評論 3 333
  • 文/蒙蒙 一茅特、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧棋枕,春花似錦白修、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,338評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春祖很,著一層夾襖步出監(jiān)牢的瞬間笛丙,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,458評論 1 272
  • 我被黑心中介騙來泰國打工假颇, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留胚鸯,地道東北人。 一個月前我還...
    沈念sama閱讀 48,906評論 3 376
  • 正文 我出身青樓笨鸡,卻偏偏與公主長得像姜钳,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子形耗,可洞房花燭夜當晚...
    茶點故事閱讀 45,507評論 2 359

推薦閱讀更多精彩內(nèi)容