(PS:前面兩節(jié)的內(nèi)容錯(cuò)別字太多，如果你發(fā)現(xiàn)了我的錯(cuò)別字，請指出，我會給你32個(gè)“贊”的。如果有問題，請留言或者加入我的設(shè)計(jì)群，我會給你32個(gè)“贊”的。) (PPS:成都地區(qū)，若有andorid，ios端app界面設(shè)計(jì)的私單請聯(lián)系我。) (PPTV:之前有一些設(shè)計(jì)網(wǎng)站在沒有得到我允許的情況下私自轉(zhuǎn)載我的文章，再這樣做，我就喊我的好基友暴你菊花，若要轉(zhuǎn)載，請通過QQ或者郵件的方式聯(lián)系我。) 前面兩節(jié)，我們講解了學(xué)習(xí)UI的方法，識別手機(jī)分辨率的方法，安卓設(shè)計(jì)中的主題和風(fēng)格問題，holo風(fēng)格到底是什么？如何做holo風(fēng)格？ 今天我們討論下安卓設(shè)計(jì)的入手方法和畫圖方法。 一．什么是適配： 1.如果給你兩張不同尺寸的畫布,如圖C*D>A*B，要求你在上面畫同樣的內(nèi)容,作為設(shè)計(jì)師的你，條件反射應(yīng)該是比例的問題，這個(gè)時(shí)候，你的參照物就是這個(gè)畫布，在為了得到“好看”的效果?,你一定會在比較大的畫布上將內(nèi)容畫得更大一些,在小的畫布上將內(nèi)容盡量畫小一些。 那么，現(xiàn)在要求你將大畫布上面的內(nèi)容放到小畫布上去： 你只有將內(nèi)容縮小能置于小畫布上去，當(dāng)然為了“好看”，你會“等比縮小”再放置小畫布上去。 現(xiàn)在又要求你將小畫布上面的內(nèi)容放到大畫布上去： 建議你將畫得小的內(nèi)容放大再置于大畫布上去，當(dāng)然為了“好看”，你會“等比放大”再置于大畫布上去。   2.當(dāng)你在一畫布上做設(shè)計(jì)，如果你對于畫布的布局是三份，如下圖：其中①，②份是打算固定高度的，只有第③份的高度是隨著內(nèi)容的增多而增高。當(dāng)這塊畫布被拉長的之后(寬度保持不變)，你為了達(dá)到“好看”的效果，并不是將①，②，③份一起拉長，而只需要做的是保持①，②的高度不便，而僅僅是將中間③份拉長即可。通俗的說，放在下面的元素，就“更下面點(diǎn)”而已。 在iphone4S和?iPhone5S，打開同一款app，你就明了了。 如果這個(gè)畫布高度保持不變，寬度上有所增加(這種增加程度是很小的)，你會不會為了增加的這一點(diǎn)點(diǎn)比例而去增加各個(gè)區(qū)域的大??？   給你的建議是，與前面一個(gè)問題一樣的思考方式，寬度增加的情況下，左右的元素就“更加左右”了一些，元素之間的距離就大了一些而已。 以上兩個(gè)方面談到的為了達(dá)到“好看”的效果而做的工作就是適配。 事物處于A環(huán)境中，運(yùn)用某種手段將事物能適應(yīng)B環(huán)境，而以上談的兩方面問題中的畫布尺寸大小的改變，也就是環(huán)境的變化。 在前面兩節(jié)中，我們了解到安卓的分辨率是有很多種的，如果你是一個(gè)XX座，你可能會對每一種分辨率都單獨(dú)做一套尺寸界面，這完全沒有問題。 但是，這樣做帶來的問題是時(shí)間的耗費(fèi)，我們常常在實(shí)際的生產(chǎn)流程中不這么做。所以我們才談到了“適配”，在A環(huán)境下制作事物，然后運(yùn)用一些手段將此事物能適應(yīng)B環(huán)境，C環(huán)境，EFG……環(huán)境。 接下來，作為設(shè)計(jì)師的你用幾秒鐘的時(shí)間回憶一下什么是位圖，位圖的缺點(diǎn)。然后我們再回過頭去看第一個(gè)問題中談到的縮放。 在這里，如果你在畫布上設(shè)計(jì)的內(nèi)容變成了一張張的位圖。 如果要你選擇，你會選擇將大內(nèi)容縮小置于小畫布上，還是選擇將小內(nèi)容放大置于大畫布上呢？ 如果將位圖直接放大，是必然會出現(xiàn)模糊的，這是位圖的基因帶來的后果，不可避免，所以我們建議選擇將大尺寸的內(nèi)容縮小置于小畫布， 這里必須說明一點(diǎn)的是，將大尺寸的內(nèi)容縮小也有可能會產(chǎn)生模糊。 產(chǎn)生的原因可能有： a沒有用向量檔 b即使用了向量檔，沒有對齊像素 c在設(shè)計(jì)的過程中尺寸上出現(xiàn)了小數(shù)(這種情況在手動縮放形狀后經(jīng)常產(chǎn)生) d旋轉(zhuǎn)過圖形 6其他 這里推薦大家一個(gè)學(xué)習(xí)資料《完美像素》，網(wǎng)路上有相應(yīng)的詳解資料，如果你沒有找到，可以留下你的郵箱，我(只有英文版)發(fā)給你。 站酷上的酷友已經(jīng)有比較詳細(xì)的中文翻譯 http://www.zcool.com.cn/article/ZMTg2NTY=.html 以上這些問題的解決辦法在網(wǎng)路上還有很多，在這里就不一一解釋了。   二．入手方法 我們再看看在官方提到的安卓的幾種分辨率 由上面談到的“適配”問題可知，建議盡量選擇大分辨率入手。 ? ? ? (你完全可以選擇從小分辨率入手，比如baseline的mdpi入手，如果你要這樣做。那么建議你在設(shè)計(jì)的過程中保證每個(gè)元素都是形狀圖層(PS中），或是矢量圖層(AI中)，因?yàn)橹挥羞@樣，才能保證在后期切圖過程中的每一個(gè)資源都可以任意縮放) 建議在PS(AI)設(shè)置你選擇的入手分辨率的相同數(shù)值的畫布(畫布單位直接設(shè)置為“像素”)，因?yàn)樵诘谝还?jié)我們說到了。在設(shè)計(jì)完效果圖后，應(yīng)該放在手機(jī)里查看效果，如果你建立的畫布與選擇的分辨率不統(tǒng)一，那么在手機(jī)里查看效果就不會客觀。 盡量選擇大分辨率入手，那到底選擇多大的分辨率入手為好呢？ 雖然官方提到的分辨率中最大的分辨率為xxxhdpi，大約為1440*2560的分辨率(有關(guān)計(jì)算方法見第一章節(jié))。是不是我們就應(yīng)該在PS(或AI)里建立一個(gè)1440像素*2560像素的畫布呢？ 以下以PS為例   圖像大小已經(jīng)高達(dá)10.5M。想象一下，后續(xù)過程中，你還會在這個(gè)畫布上添加內(nèi)容，建立越來越多的圖層，這個(gè)源文件的質(zhì)量會變得越來越大，如果計(jì)算機(jī)的性能不達(dá)標(biāo)，可能在設(shè)計(jì)過程中就很苦惱。 另外一個(gè)方面： 友盟統(tǒng)計(jì)的4月份的安卓分辨率分布情況表 從圖中可以看到，1920*1280(xxdhpi)分辨率的機(jī)型占據(jù)所有機(jī)型的比例為5.6%、而1440*2560(xxxdhpi)分辨率的機(jī)型更是沒有提及。 感興趣的同學(xué)可以再看一下友盟短語安卓設(shè)備的統(tǒng)計(jì)情況 http://www.umindex.com/#android_device 據(jù)我所知，1920*1280(xxdhpi)分辨率的機(jī)型代表是HTC-one，1440*2560(xxxdhpi)分辨率的機(jī)型代表是oppo find7(如果酷友們有其他的機(jī)型，可以提出)，分量是很少很少的。 以上的討論內(nèi)容中，建議入手的分辨率以720*1280(xhdpi)為佳。 按照前面關(guān)于“適配”的討論中的內(nèi)容，足以適配比xhdpi更低分辨率的機(jī)型。 并不是說我們不考慮后面兩種分辨率的設(shè)備的適配情況。而是我們在工作中講究的是一個(gè)“趨勢”，我們的目標(biāo)是盡可能的適配各種分辨率的機(jī)型，但是考慮到現(xiàn)在各種機(jī)型的使用比例，考慮到工作流程中的效率問題，我們選擇一個(gè)適中的分辨率入手。 在考慮范圍內(nèi)，各種分辨率機(jī)型在橫向上的分辨率如下圖： 從xhdpi入手，那么在設(shè)計(jì)后續(xù)過程中，只用將資源縮小相應(yīng)的百分比即可得到其他分辨率所合適的資源 有酷友在上一節(jié)的文章后提到，如何只做一套界面就能適配android和ios。 理論上來說，android和ios的交互大大不同，不可能用完全相同的一個(gè)界面，當(dāng)然，也存在只出一套原型圖的PM或UE，然后安排GUI設(shè)計(jì)一套界面用于兩個(gè)平臺。對于這類PM或者UE.我只想說“Bi~Bi~”。 如果非要這么做，那么我們看下圖： 由這張圖可以知道，iPhone的分辨率存在320和640兩種(尼瑪，為什么安卓要那么多種？？) 與前面安卓的分辨率圖對比可知，從iPhone4開始及后續(xù)機(jī)型的分辨率其實(shí)就可以看作安卓分辨率中的xhdpi分辨率。 所以，綜合起來，你只用設(shè)計(jì)以xhdpi入手的一套界面。就可以滿足mdpi，hdpi，xhdpi，iPhone3G，iPhone4以及以上各種機(jī)型。 從這一方面，也再一次說明了，我們從xhdpi入手的好處。 這里值得一提的是，iPhone6即將和大家見面，網(wǎng)路上關(guān)于其分辨率的說法有各種猜測：iPhone6兩個(gè)版本，一個(gè)版本采用不大于5.5寸（小也小不了多少）的屏幕，分辨率1920*1080，另一個(gè)版本采用不大于4.8寸（小也小不了多少）的屏幕，分辨率1620*1080，如果蘋果將分辨率提升到這個(gè)檔次，那么可以明確的斷定，未來的設(shè)計(jì)入手分辨率以1920*1080(xxdhpi)為佳。 三．設(shè)計(jì)準(zhǔn)備 在進(jìn)入正式設(shè)計(jì)之前,我們必須對距離,尺寸方面的規(guī)范建議有一個(gè)基礎(chǔ)的認(rèn)知,作為一個(gè)設(shè)計(jì)師,建議你能熟記于心。我們回到谷歌關(guān)于安卓設(shè)計(jì)建議的官網(wǎng) 1.度量單位和網(wǎng)格 其中，我們需要記住的是， a.可觸摸控件以48dp為基礎(chǔ)單位，具體的原因在其中有解釋，必要說明的是，在前面的章節(jié)里說過這里的規(guī)范我們可以看作一個(gè)“設(shè)計(jì)建議”，所以，如果你要以40dp，30dp等等為基礎(chǔ)單位也沒有任何問題。 b.界面中的按鈕高度建議為40dp，但是按鈕的上下外邊距建議為各自4dp。 c.界面元素之間的留白建議為8dp。 再看官網(wǎng)上的舉例   a在一個(gè)界面中，內(nèi)容部分距離設(shè)備的兩邊建議留出各自16dp的空白，這里留出16dp空白，是告訴用戶不可點(diǎn)擊(不易點(diǎn)擊)到的區(qū)域，比如一個(gè)只有6dp*6dp的元素緊緊的帖著屏幕右邊，你要去點(diǎn)擊它，應(yīng)該是很困難的,當(dāng)然也就建議你不要將內(nèi)容設(shè)計(jì)為僅僅貼著兩邊的情況。 b通常情況下，頂部的ActionsBar，底部的NavBar只會放置一行內(nèi)容，那我們將其看作一個(gè)單位的觸摸區(qū)域，所以它的高度建議為48dp c將一個(gè)列表項(xiàng)看作一個(gè)單位的觸摸區(qū)域，其高度建議為48dp d對于頂部的ActionsBar，底部的NavBar，還有列表項(xiàng)，這里的是48dp的高度建議是考慮到觸摸效果，以及一屏中能盡可能多的顯示內(nèi)容而決定的。根據(jù)你的項(xiàng)目情況，你可以不必設(shè)定為48dp，比如，我需要做一個(gè)老人使用的app，那我在其界面設(shè)計(jì)中遇到以上三類，我會將其高度設(shè)定為一個(gè)比48dp大一些的值，因?yàn)閷τ诶先藖碚f，48dp高度的區(qū)域依舊是很難觸摸到的(設(shè)計(jì)一定要從用戶出發(fā))。 2圖標(biāo) 在討論之前我們必須搞清楚兩個(gè)概念：圖片大小，圖形大小 在上圖中，圖片的大小為200px*200px，其中的圖形大小卻為113px*134px，也就是說圖形大小<=圖片大小，個(gè)人的工作經(jīng)驗(yàn)來說，建議對于圖標(biāo)的設(shè)計(jì)，盡量保證圖片背景為透明，以適用于各種背景環(huán)境。 在官網(wǎng)上將圖標(biāo)分為四類 (1)??啟動圖標(biāo) 特別說明的是“在play商店中顯示的啟動圖標(biāo)大小必須是512*512像素” (2)操作欄圖標(biāo) 在操作欄圖標(biāo)中，建議圖形區(qū)域?yàn)?4*24，圖片大小為32*32，不是說你非得這么做。如果你的圖標(biāo)的圖形和圖片大小都是32*32，也完全沒有問題。當(dāng)然，你可以把這看作一個(gè)下限，比如，我設(shè)計(jì)的產(chǎn)品是針對老人用戶，那我一定會將圖標(biāo)的圖形大小設(shè)計(jì)為大于這個(gè)值，甚至大很多。因?yàn)?4*24的圖形大小對于老人來說，依舊是很難看清楚的。(再一次說明設(shè)計(jì)一定要從用戶出發(fā))   (3)上下文圖標(biāo) ? (4)通知欄圖標(biāo) 應(yīng)當(dāng)注意的是通知欄圖標(biāo)必須是白色的，這樣系統(tǒng)可以縮放和加深你的圖標(biāo)，從這一點(diǎn)上來看，我想，大部分產(chǎn)品都沒有注意到這一點(diǎn)，包括我們平常每天都會使用的某些社交聊天軟件，當(dāng)然，整體來看這個(gè)“設(shè)計(jì)建議”，僅僅是建議，所以，你沒有照著這樣做，也完全沒有任何問題。 3字體 關(guān)于字體的大小，官方的建議是使用12sp 14sp 18sp 22sp等字體大小，個(gè)人工作經(jīng)驗(yàn)而言，盡量不要出現(xiàn)奇數(shù)大小。 好了，現(xiàn)在我要告訴你，以上的所有設(shè)計(jì)準(zhǔn)備方面的規(guī)范建議，都是針對mdpi而言的， 那么。你必須清楚兩件事 1.?? ?針對mdpi而言的規(guī)范建議，那么所有的尺寸，距離大小等等可以直接與“像素”畫上等號，在mdpi情況下，可以看作dp=px，也就是說前面提到的最小觸摸區(qū)域建議是48dp，你可以看作48px；左右留白16dp，你可以看作左右留白16px；按鈕高度建議40dp，你可以看作40px；操作欄圖片建議圖形區(qū)域24dp*24dp，圖片區(qū)域32dp*32dp，你可以看作圖形區(qū)域24px*24px，圖片區(qū)域32px*32px，字體的大小是12/14/18/22sp，你可以看作12/14/18/22點(diǎn)(如果ps里字體大小設(shè)置為“點(diǎn)”單位) 2.?? ?既然針對mdpi而言，那么我們?nèi)胧值姆直媛适莤hdpi，回到前面對于各種分辨率的討論，其中mdpi*2=xhdpi，所以，我們從xhdpi入手，對于上面的尺寸，大小等等都得做2倍的大小。如果你要從其他分辨率入手，以此類推。   ? ?四．畫圖方法 我們開始設(shè)計(jì)效果圖，GUI設(shè)計(jì)師從UX(E)那里獲得項(xiàng)目需求文檔和原型圖，在此基礎(chǔ)上設(shè)計(jì)相應(yīng)的效果圖，以下的原型圖從網(wǎng)路獲取，有做細(xì)微修改，作為舉例，進(jìn)行GUI設(shè)計(jì)的演示。 登錄頁面 在ps里建議與入手分辨率相同值(單位換成像素)大小的畫布。 有不少酷友問我，以下這個(gè)東西是多高，怎么得來，算在整個(gè)設(shè)計(jì)高度里嗎？ 在安卓里，我們將其成為“狀態(tài)欄”(styleBar)，它的高度為25dp(還是同理，這里的描述依然是針對mdpi而言)，它一定是算在整個(gè)設(shè)計(jì)高度里的，它的獲得很簡單，你可以自己畫，也可以從上一節(jié)我們講到的安卓GUI源文件 Android_Design_Stencils_Sources.psd中獲得   這里必須注意的是 對于這個(gè)源文件，官方的解釋是：所有的元素都是基于mdpi設(shè)計(jì)的，所以你得再一次考慮，你入手的分辨率與mdpi這個(gè)分辨率的倍數(shù)關(guān)系，當(dāng)你要使用這個(gè)源文件里的內(nèi)容時(shí)，記得乘以相應(yīng)的倍數(shù)。 所以，我將Android_Design_Stencils_Sources.psd中的狀態(tài)欄直接提取出來，擴(kuò)大2倍，置于我的xhdpi畫布中，在xhdpi里，styleBar的高度即為50px。
當(dāng)然，為了以后設(shè)計(jì)的效率，你可以將這個(gè)源文件存儲為模板。 還有人問我，以下這個(gè)東西，從哪兒來，高度多少，算不算在整個(gè)設(shè)計(jì)高度里。   獲取和高度參考狀態(tài)欄；你如果算在設(shè)計(jì)高度里。那你一屏顯示的內(nèi)容就少一點(diǎn)而已，作為設(shè)計(jì)師的你，其實(shí)不必太考慮豎直方向上的分辨率，個(gè)人工作經(jīng)驗(yàn)而言，我不會將其算在設(shè)計(jì)高度里。 找一臺和你入手分辨率一樣的機(jī)器，現(xiàn)在鏈接上你的PS play，開始設(shè)計(jì)吧。 由前面得到的原型圖，根據(jù)以上所有知識，我們可以獲得這樣一種效果圖：   再看看你手機(jī)PS play里的效果 ? 哎喲，不錯(cuò)喲~~這里僅僅是一個(gè)舉例，風(fēng)格主題，字體顏色，背景，模塊顏色完全可以自己選擇 根據(jù)前面的所有知識，我對這個(gè)效果圖做了如下說明 在后面的章節(jié)里，我們還會回過頭來講解一下對于這個(gè)頁面變換holo風(fēng)格，觸摸控件的狀態(tài)處理，細(xì)節(jié)處理等問題，還會舉更多的例子給大家講解畫圖方法。 到現(xiàn)在為止，我們回顧一下這一節(jié)的內(nèi)容   適配： 由于我們能獲得資源圖片一定是位圖，位圖的基因決定了它放大會模糊，而且是不可避免的模糊，所以我們選擇大位圖縮小去適應(yīng)小畫布的方法來解決適配問題   入手方法： 作為設(shè)計(jì)師的你，在進(jìn)行手機(jī)界面設(shè)計(jì)的時(shí)候，對于分辨率，應(yīng)該多考慮橫向分辨率，對于各種分辨率的劃分要熟悉，各自分辨率的倍數(shù)關(guān)系1.5mdpi=hdpi 2mdpi=xhdpi…… 我們選擇從大分辨率收入，各方面條件平衡一下，以xhdpi(720*1280)為佳，因?yàn)榇蠓直媛噬系膬?nèi)容會大，將這些大內(nèi)容縮小去適應(yīng)小分辨率，能解決適配問題 從xhdpi入手，也剛好能解決一套界面適配android和iOS兩種平臺，因?yàn)榈浆F(xiàn)在位置iPhone4及其以上的分辨率都剛好可以看作xhdpi分辨率，而iPhone4以下的機(jī)型分辨率剛好是二分之一而已   規(guī)范： 這里的規(guī)范僅僅看作“建議”，建議你最小觸摸區(qū)域?yàn)?8，建議你按鈕高度為40，建議你內(nèi)容距離屏幕左右兩邊有16的留白，建議你元素與元素之間的留白為8。圖標(biāo)方面，建議啟動圖標(biāo)為48*48，建議操作欄圖標(biāo)為32*32(圖形區(qū)域?yàn)?4*24)等等，字體方面，建議用12/14/18/22幾種大小字體   畫圖： 我們是從xhdpi入手的，而規(guī)范建議上的內(nèi)容都是針對mdpi而言的，2mdpi=xhdpi，所以，我們在設(shè)計(jì)的時(shí)候，所有的規(guī)范建議都乘以2再置于畫布上去。如果你從其他分辨率入手，以此類推。 在畫圖的過程中注意 使用安卓原生模板Android_Design_Stencils_Sources.psd，在上面去找設(shè)計(jì)的理論依據(jù)，在今后的講解中，我們還會發(fā)現(xiàn)這個(gè)源文件給我們帶來的很多設(shè)計(jì)依據(jù)。 下期內(nèi)容：一個(gè)app中常見頁面在遵循規(guī)范下，做holo風(fēng)格的設(shè)計(jì)以及設(shè)計(jì)要點(diǎn)，標(biāo)注圖的制作，切圖方法和后續(xù)工作介紹。 我們下期見。  

---

原文作者：chan奕迅
原文地址：http://www.zcool.com.cn/article/ZODMxMjQ=.html 轉(zhuǎn)載請注明：靈智飛揚(yáng) » 安卓UI設(shè)計(jì)系列知識(三)（設(shè)計(jì)經(jīng)驗(yàn)談） 登錄收藏

學(xué)UI就上靈智飛揚(yáng)！越努力，越幸運(yùn)！

“靈智飛揚(yáng)www.lingzhifeiyang.com?”最值得關(guān)注的UI學(xué)習(xí)平臺！ 每天發(fā)布高質(zhì)量的設(shè)計(jì)教程和分享設(shè)計(jì)經(jīng)驗(yàn)，服務(wù)于20萬UI設(shè)計(jì)師,幫助初學(xué)者快速轉(zhuǎn)型。 ，給大家提供更多免費(fèi)學(xué)習(xí)的機(jī)會。想成為設(shè)計(jì)師的你快來關(guān)注吧！ 【特色推薦】 “APP截圖站www.lingzhifeiyang.com”??海量APP截圖，讓你靈感爆發(fā)！國內(nèi)最好的APP截圖站。 “國內(nèi)最棒的UI設(shè)計(jì)導(dǎo)航站” 專為UI設(shè)計(jì)學(xué)習(xí)者打造的資源＋學(xué)習(xí)，雙用途的網(wǎng)址導(dǎo)航站。親愛的，你收藏了嗎？ 【靈智飛揚(yáng) 原創(chuàng)文章 ，也可以找各個(gè)群的管理】  給靈智飛揚(yáng)打氣，加油 ?猛點(diǎn)這里?>>