一区二区三区日韩精品-日韩经典一区二区三区-五月激情综合丁香婷婷-欧美精品中文字幕专区

分享

一款A(yù)PP,從設(shè)計稿到切圖(Android篇)

 灰灰熊 2015-12-18

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


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

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


Part 1    基礎(chǔ)概念

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

手機(jī)分辨率:分辨率就是手機(jī)屏幕的像素點數(shù),類似480*800、720*1280、1080*1920這個意思……

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

手機(jī)屏幕密度:dpi或PPI,每英寸的像素點數(shù),數(shù)值越高顯示的越逼真細(xì)膩。下面是屏幕密度的計算方法~

一款A(yù)PP,從設(shè)計稿到切圖(Android篇) - 圖翼網(wǎng)(TUYIYI.COM) - 優(yōu)秀APP設(shè)計師聯(lián)盟

可以嘗試算算自己手機(jī)的屏幕密度~


②Android自身設(shè)定的屏幕密度

安卓尺寸眾多,按每個屏幕去適配肯定不現(xiàn)實;

所以為了解決這個問題,安卓手機(jī)屏幕有自己初始的固定密度,安卓會根據(jù)這些屏幕不同的密度自己進(jìn)行適配。這一點內(nèi)容掌握到能滿足自己設(shè)計工作需要就可以了……

以下是Android的密度劃分以及代表的分辨率,這里你可以發(fā)現(xiàn)已經(jīng)和設(shè)計稿尺寸和切圖輸出開始掛鉤了……


一款A(yù)PP,從設(shè)計稿到切圖(Android篇) - 圖翼網(wǎng)(TUYIYI.COM) - 優(yōu)秀APP設(shè)計師聯(lián)盟

你需要了解IPhone各個版本的手機(jī)屏幕密度:

IPhone 4/4s/5/5s/5c/6 ≈320dpi    

你會發(fā)現(xiàn)單從屏幕密度來說,IPhone可以算是超高密度了。


下面來說說這幾個密度:

LDPI               120dpi      低密度              不考慮這個了,消失了……

MDPI             160dpi      中密度              這個目前少見……

HDPI              240dpi      高密度              常見

xHDPI            320dpi       超高密度          常見

xxHDPI          480dpi       超超高密度       常見

xxxHDPI        640dpi       超超高密度        Android4.3推出了對此密度的支持,也就是平板電視的4K分辨率


你的切圖會根據(jù)這幾個密度來決定輸出多少套~



Part2    標(biāo)注切圖

你需要知道的Android的一些開發(fā)使用的單位:

dp:android開發(fā)使用的單位,其實相當(dāng)于一種比例換算單位,它可以保證控件在不同密度的屏幕上按照這個比例單位換算顯示相同的效果。

sp:android開發(fā)使用的文字單位,和dp差不多,也是為了保證文字在不同密度的屏幕上顯示相同的效果。


①標(biāo)注設(shè)計稿時,使用px還是dp和sp?

答:和安卓工程師溝通,推薦使用dp和sp進(jìn)行標(biāo)注。但目前很多設(shè)計師對dp和sp這個單位并不理解,所以有些設(shè)計師提供設(shè)計稿的時候依舊使用px進(jìn)行標(biāo)注,這一點去和你的搭檔工程師進(jìn)行溝通,如果不影響他開發(fā)以及他能換算清楚的前提下,你可以考慮使用Px,但是我并不推薦。


這里要記住一點(你只需要記住能幫助你工作就可以):

當(dāng)屏幕密度為MDPI(160PPI)時,1dp=1px  

當(dāng)屏幕密度為MDPI(160PPI)時,1sp=1px

像素字號=屏幕密度/160 * sp字號  可以根據(jù)這個去算算設(shè)計稿中的像素字號標(biāo)注為sp是多少,比如xHDPI下,36px的字標(biāo)注為sp就是18sp,以此類推。

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

一款A(yù)PP,從設(shè)計稿到切圖(Android篇) - 圖翼網(wǎng)(TUYIYI.COM) - 優(yōu)秀APP設(shè)計師聯(lián)盟

②使用哪種尺寸做設(shè)計稿?

答:通過上圖你會發(fā)現(xiàn),xHDPI下,倍數(shù)關(guān)系為2,而且xHDPI就目前的市場來看,還算屬于主流機(jī)型;這樣無論是標(biāo)注,還是主流機(jī)型都能兼顧的到,所以

推薦使用720*1280尺寸做設(shè)計稿,這樣即使你標(biāo)注的是px,工程師也可以換算的比較方便。


現(xiàn)在有一種情況比較普遍,公司做了IOS版本的設(shè)計稿,現(xiàn)在要給安卓用,應(yīng)該怎么辦?

IPhone的屏幕密度已經(jīng)達(dá)到xHDPI了,通常用750*1334的IP 6尺寸做設(shè)計稿;

理論上,IP 6的切圖其實可以給xHDPI使用;和我們的安卓工程師溝通,要求是把IP 6的設(shè)計稿更改尺寸到720尺寸下,對各個控件進(jìn)行微調(diào),重新提供標(biāo)注。也就是說,我需要提供兩套標(biāo)注,一套給IOS的標(biāo)注,一套給Android的標(biāo)注。(這是我目前搭檔的要求,實際情況根據(jù)自身環(huán)境決定)


③:你需要提供幾套切圖資源?

答:理論狀態(tài)下,如果你想兼顧到目前還存在的各個機(jī)型,應(yīng)該為不同的密度提供不同尺寸大小的切圖。


但這無疑提升了巨大的工作量,而且還可能浪費(fèi)很大的資源空間,實際上,很多機(jī)型已經(jīng)不占有主流市場了,而且很多奇葩的分辨率也沒必要去考慮適配,所以,具體輸出幾套需要看公司的產(chǎn)品需求而定。

通常我是這么干的:

選取最大尺寸提供一套切片資源,交給工程師處理,適配到各個屏幕密度。

這里要注意,這個“最大尺寸”,指的并不是目前市面上Android手機(jī)出現(xiàn)過的最大尺寸,而是指目前流行的主流機(jī)型中的最大尺寸,這樣可節(jié)省很大的資源控件。關(guān)于最大尺寸選取多少,你需要和你們的安卓工程師溝通,每個安卓工程師對這個問題的結(jié)論并不同。

其實現(xiàn)在Assistor PS這個PS外掛對輸出不同屏幕密度的切片處理的非常方便,其實也沒有想象中那么巨大的工作量。

一款A(yù)PP,從設(shè)計稿到切圖(Android篇) - 圖翼網(wǎng)(TUYIYI.COM) - 優(yōu)秀APP設(shè)計師聯(lián)盟

安卓最小可操作尺寸

48dp:這和IOS的最小點擊區(qū)域性質(zhì)是一樣的,都是考慮到手指點擊的靈敏性的問題,設(shè)計可點擊控件的時候要考慮到這一點,關(guān)于這個設(shè)計文檔里已經(jīng)明確解釋了,更多的內(nèi)容可以去下載設(shè)計文檔查看。


安卓設(shè)計使用的字體:

方正蘭亭黑簡體            其實沒發(fā)現(xiàn)和手機(jī)字體效果完全一樣的字體,如果做設(shè)計稿的話,蘭亭黑比較接近,可以考慮使用。

西文字體:Roboto      Android西文默認(rèn)字體。



Part3  工作的一些方法

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


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

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

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

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

一款A(yù)PP,從設(shè)計稿到切圖(Android篇) - 圖翼網(wǎng)(TUYIYI.COM) - 優(yōu)秀APP設(shè)計師聯(lián)盟

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

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

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


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

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

一款A(yù)PP,從設(shè)計稿到切圖(Android篇) - 圖翼網(wǎng)(TUYIYI.COM) - 優(yōu)秀APP設(shè)計師聯(lián)盟


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

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

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

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


Part4   題外話


很多朋友糾結(jié),自己設(shè)計水平進(jìn)步慢,甚至呆在現(xiàn)在的公司沒進(jìn)步反而因為每天的業(yè)務(wù)需求還退步了!

剛?cè)胄械娜耍欢ㄒ覀€好師傅帶著你,這樣你會少走很多彎路,設(shè)計水平和職業(yè)素養(yǎng)會突飛猛進(jìn)。


那沒有師傅帶怎么辦?

如果是剛參加工作,建議第一年先熟悉工作流程和了解行業(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è)計師工作做的東西不炫也不酷,就認(rèn)為他們的設(shè)計水平很爛,但其實他們可以做出炫彩屌炸天的作品,可是工作不是炫技,設(shè)計不是繪畫,解決問題才是目的。希望很多朋友不要犯這種只知道追求視覺卻拋棄最終需求的低級錯誤。


    本站是提供個人知識管理的網(wǎng)絡(luò)存儲空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點。請注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請點擊一鍵舉報。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多

    日本淫片一区二区三区| 日韩欧美三级中文字幕| 亚洲内射人妻一区二区| 精品欧美日韩一区二区三区| 91午夜少妇极品福利| 九九热视频网在线观看| 狠狠干狠狠操在线播放| 欧美日韩国产二三四区| 韩日黄片在线免费观看| 老司机激情五月天在线不卡| 麻豆视传媒短视频免费观看| 中文字幕av诱惑一区二区| 国产老熟女超碰一区二区三区| 国产欧美日本在线播放| 午夜精品国产一区在线观看| 日韩不卡一区二区在线| 亚洲国产欧美久久精品| 色老汉在线视频免费亚欧| 国产一区二区不卡在线播放| 亚洲最新一区二区三区| 欧美多人疯狂性战派对| 日韩成人高清免费在线| 熟妇久久人妻中文字幕| 国产成人人人97超碰熟女| 久久偷拍视频免费观看| 日本特黄特色大片免费观看 | 国产精品乱子伦一区二区三区| 亚洲国产av在线观看一区| 开心五月激情综合婷婷色| 草草草草在线观看视频| 小黄片大全欧美一区二区| 欧美加勒比一区二区三区| 成人国产一区二区三区精品麻豆| 丁香六月啪啪激情综合区| 日本精品中文字幕人妻| 亚洲中文字幕高清乱码毛片| 欧美日本精品视频在线观看| 丰满熟女少妇一区二区三区| 美日韩一区二区精品系列| 日韩欧美综合中文字幕| 粉嫩一区二区三区粉嫩视频|