Android 應用設計開發有沒有更好的 UI 適配方法？

01-30

本人從事安卓UI設計已經一年多了，一直感覺之前公司的UI適配方式不夠科學與規範。
查閱很多相關的資料（包括知乎），也沒有得到滿意的答案。
希望有UI方面的大神出來指點下（特別是產品相對規範的BAT公司的設計師）。
請分享一下您的工作經驗和方式。
希望回答者分享以下問題：

1.一般情況下，輸出幾套，各為多少解析度不同的質量的切圖？
2.一般情況下，輸出幾套解析度不同的標註圖（如常說的主流四套解析度,1080*1920,720*1280,480*800.240*320)，標註單位為px還是自己計算的dp（這個單位您一般是自己計算還是交給程序，如果自己計算的話比較好的方法），創建畫布時第一版從多少解析度的畫布開始設計。
3.是否考慮帶有虛擬按鍵的適配不同方法？
4.遇到與主流解析度相近但長寬比不同的解析度時的適配方式。
5.字型大小的適配方式，字型大小單位。
6.與程序適配溝通時需要注意的要點。
7.其它我未提及或者沒考慮到的但您覺得非常重要的問題。
在下絕對不是伸手黨，詢問過周圍很多設計師但是沒有得到一個相對滿意的答案才會求助於知乎。
自己雖然也有一套適配方法但是一直感覺不完善也不夠高效，本著能夠完成更好設計和產品的想法。
望大神解答，跪謝！

我知道的簡要回答一下~

1.一般只輸出主流尺寸的切圖，如480*800 1280*720

2.開發寫標準尺寸是按照320P來的，得按照你自己的設計稿來標註，不過得算好比例：比如你出了480*800的設計稿，你所有的標註的所有尺寸都得除以1.5；要是出了720*1280的設計稿，你所有的標註的所有尺寸都得除以2，以此類推

3.無需考慮，系統自適應

4.只要寬度解析度一樣，適配一樣

5.字型大小跟第2點一樣道理

6.程序員對UI實現都不嚴謹（因為他們覺得UI不重要），要時時刻刻盯著

一些膚淺的經驗，不一定完全正確。。。。

我也從事UI一年多，小公司。

針對題主的問題談下我自己的做法。

效果圖1套，切圖2套（480與720），部分切圖會考慮小屏幕。
標註單位px，創建畫布時480*800開始。其實，後期的時候我都不標註，因為跟研發非常熟了，而且他們都知道大概的規範。
不考慮
也不考慮
研發那邊單位為sp。自己用ps的字型大小一般17/19/21/23。顏色一般#333333#666666#999999

我的心得：

多看android官方規範，靈活使用8dp（一般間距）與48dp（一般可觸摸區域）。
靈活使用點九切圖。圖標與按鈕分開切，字全讓研發自己輸入。千萬不要切死圖。
早期的時候跟研發約好時間。比如某個半天，你弄個筆記本，跟研發坐一起，嚴格的把你的規範執行下去，後期大家合作起來就方便了。
圖一定要像素級別（包括720的圖標），所有錨點都優化好。
還是研發吧，沒事多往那邊跑，帶點乾果花生什麼的一邊吃一邊改。他是怎麼實現的，你一定要問清楚，你想怎麼實現，你也得跟他講清楚。
仍然還是研發，他們不怕麻煩，只是怕做好後又改。所以不要老讓他們嘗試，自己多做效果圖，嚴謹一點，多用axure把效果圖轉手機里看看。
做一個UI套件（dribbble上搜索UI kit看下別人怎麼做的），後期你也會方便很多，重要的是交接工作會很好。
多看知乎，有些關於ps的技巧，作圖技巧還蠻實用的。

應該還有些經驗，想到後再寫吧。

都是自己土經驗，歡迎拍磚吐槽！

Design | Android Developers

R(ead) T(he) F(**king) G(uideline).

自己整理的一些小規範。希望對題主有用。

1.效果圖一套（720p），切圖也是 720p （有時候要求1080p，看公司要求高不高）。

2.個人會計算好dp標註好交給程序。用馬克鰻，可以標註dp。

3.no。

4.不需要考慮。

5.參考圖片。

6.沒什麼要點。

7.記得多喝水。

苦逼的准程序猿說下自己的看法：

1.公司里以720*1280的比例出圖，我們一般會直接使用，但是假若在其他解析度里出現不適的情況我們會針對別的設備出特定的圖，同時一些低解析度的設備會出現oom問題我們也會使用低分辨的圖片。

2.720*1280解析度下的像素除以各自的比例，假若還是不適配的話也可以根據不適配的機型來設定特別的值。

3.大部分情況下不需要考慮，但是有些時候會出現需要顯示的地方被虛擬鍵盤佔用的情況，因此我們一般會針對出現的情況設置稍微小一些的值。

4.我們在寫界面的時候一般會在裡面放一些空白的view來佔位置來適配這種比例不同的情況。

5.android裡面字的大小確實我到現在還弄的不是特別清楚，一般我都是想一個差不多的值來試試看這樣，然後andro里的字體單位sp會根據解析度來自行放大縮小所以不需要太考慮適配問題，希望其他大牛可以補充。

6.一般情況下只要把控制項大小標清楚即可，然後在程序猿做出效果之後放在現在比較多的4種解析度上看效果然後進行調整即可。

總的來說程序里是可以控制不同解析度下使用不同解析度的圖片、不同的長寬，另外善用9.png。

就我目前手上的項目給一些參考——

1.一般情況下，輸出幾套，各為多少解析度不同的質量的切圖？

我的設計稿是一整套高清的（1920*1080），但設計過程中也是要出一些低解析度的圖放到手機上看看效果。(這時候推薦使用"skala preview")

2.一般情況下，輸出幾套解析度不同的標註圖（如常說的主流四套解析度,1080*1920,720*1280,480*800.240*320)，標註單位為px還是自己計算的dp（這個單位您一般是自己計算還是交給程序，如果自己計算的話比較好的方法），創建畫布時第一版從多少解析度的畫布開始設計。

上面說了我目前手上的項目創建畫布解析度是1920*1080，給程序同學的guide圖標註的時候我一般用「markman」，但這個軟體標註出來的單位是px，所以在這時候用不著了，就只能通過手動（用ps在設計稿上標註）以dp為單位進行標註，這其中單位換算 @朱斌在上面已經提到了，已經說得很清楚了，我補充下：320P即 320*480的解析度，在這個解析度下，1px=1dp。其他解析度請自行換算。

3.是否考慮帶有虛擬按鍵的適配不同方法？

虛擬鍵的適配我沒有考慮過。

4.遇到與主流解析度相近但長寬比不同的解析度時的適配方式。

這也是困惑我的一個問題， @朱斌說的是對的。

5.字型大小的適配方式，字型大小單位。

設計稿上字型大小的單位px，需要轉化成dp，換算詳見問題2。

6.與程序適配溝通時需要注意的要點。

溝通的方式多種多樣，有語言上的，有眼神上的，有身體上的...其實就是把guide圖標註清楚，然後詢問他這樣標註理解起來是否有問題。好的guide圖會省去他們很多工作。

7.其它我未提及或者沒考慮到的但您覺得非常重要的問題。

請用正確的姿勢使用「點9圖」

我來大概說說吧,作為一個Andriod碼農,在屏幕適配上自覺有一套理論.緣由是我不搞沒人搞丫!

針對題主的幾個問題:

①要幾套圖?

一套即可.完全不需要多套.只要切圖合適,安卓會自動把對應的圖片放大/縮小到對應的尺寸.

所以樓上有人說用盡量小的圖片,避免小的手機OOM也是不對的,在小解析度/密度下的手機並不是原圖載入.

說到這裡說下多套圖的好處:多套圖其實用來做不同的屏幕長寬比更適合,也就是說,拿目前最主流的解析度720 * 1280 ,它的長寬比是720 :1280 ,然後有一款手機,他們的解析度是:360 * 1000 ,這樣它們的比例就是完全不對等,同樣的圖片在360 * 1000的被縮放後比例就會失調.

多套圖還有一個好處就是:如果你切了多套圖,會比系統自動的縮放的圖片要稍微精細一點點.然而這並沒有多大用,經過多次的測試發現.失真並不明顯,肉眼幾乎看不清.

所以,如果不是有特別的要求,其實只要一套圖就可.那些奇葩的長寬比,即長寬比和大眾主流的解析度比嚴重失調的,基本上是少之又少.平板這個領域,一般都會有一個對應的xxxHD版,就是對應給平板用的.

2.一般情況下，輸出幾套解析度不同的標註圖

一套就夠了.說起來,為什麼我沒有這麼好的UI,每次都要我自己換算.

(由於各種原因,其他的設計圖不變公開,上傳一個通用點的設計圖)

這個是一個蘋果的640標註.不要問我為什麼是蘋果的,不要問我為什麼是640,更不要問我為什麼是蘋果的!!!

創建畫布的時候,不管是640 ,還是720 ,或者是1080關係都不是很大.關鍵是比率要對

UI輸入的是640 * 1136的圖,標註也是.如何適配720 * 1280呢,其實720/640 :與 1280/1136 的比率基本是一致的.大概是1.125.也就是說,按照比例縮放是不會有比例失調的情況.

所以圖中標註的50,我們程序員寫UI的時候,就寫50 * 1.125 px.

所以只要長寬比例是正確的,創建你們要的那套圖的解析度的畫布大小是最合適的.

3.一定要考慮虛擬鍵,做UI的時候高度不能滿屏,可滾動,但是不能剛好滿屏,即一頁頁的效果.

4.前面已經說過了,只要你們長寬比例是合適的,不要搞出一個720 * 2000,就絕對沒有問題.

具體的比率在後面會有說明

5.字型大小其實和普通的UI一樣的,像素px轉換為dp, 像素px轉換為sp是一樣的,那麼sp到底有什麼不同呢?

SP在手機系統設置中如果設置了:大號字體,那麼這個字會變大,如果把字體大小寫成dp,那就不會放大.(什麼是sp,dp請百度....)

6.7.

前面埋了幾個問題,就是2中,我們程序員寫UI的時候,不能直接寫像素的,那樣怎麼看標註呢,這個和你的問題是一樣的,如何和程序員溝通

解析度密度比率 1440 * 2560 xxxhdpi(640) 4 1080 * 1920 xxhdpi(480) 3 720 * 1280 xhdpi(320) 2 480 * 800 hdpi(240) 1.5 320 * 480 mdpi(160) 1 240 * 400 ldpi(120) 0.75

--------------------

上面的表格是以不同的解析度下的密度和轉換比率

720對應的是2比率,所以640下50px的dp是:

50 * 1.125 / 2 = 28.13dp 然後在控制項里寫:28.13dp即可.

為了程序員的方便,最好不要輸入640的標註,如何能按照這個公式直接標註成28.13dp

那就再適合不過了.

PS:字體有個坑,就是你標註的字體大小其實是字體的高度,但是你是手動量取高度的話,即量取字體上下的高度,是不準確的.因為在安卓下,話字體是按照五線譜的方式畫的,字體的上下會有一個的留白.這個時候有兩個解決方案:一個是用ps自動量,ps自動量會計算留白部分的的大小.手動量,需要讓程序員在TextView中加這麼一句話:

includeFontPadding="false"

虛擬鍵的很重要，就是沒人說

我們一般只出一套圖，如果產品只有安卓版，一般就用720*1280做效果圖，如果產品包括ios和安卓兩個版本，就以640*1136來做，之前切圖也只切一套，我也不知道程序是怎麼做的，反正比例對了出來的效果還是好的，但是最近我們開始使用字體圖標，把一些圖標和按鈕做成字體給程序，這就省去了很多切圖，圖標的狀態通過字體屬性來控制了

我是UI設計，之前工作程序GG都是只要一套設計稿標註和切圖，目前工作的項目程序要求至少三套界面，我把這個帖子發給他看，他堅持要求做至少三套，不過720以外的可以遲一點做，經驗上感覺沒必要，到底該按我的想法來還是他的要求來？安卓的尺寸太多了，按照他的感覺沒完沒了了~

該適配方法為百分比適配法：

以1920*1080的手機為例

寬度為：1080 取值為x1~x1080

高度為：1920 取值為y1~y1920

我們可以看到 1920*1080的每一個像素點都是一一對應的

X10=10.0px;

y10=10.0px;

而我們現在又來看我們需要適配的機型，假設是800*480

我們將會看到800*480的它們的像素點不再是一一對應了

而是

X1=480/基準=480/1080=0.44

其他的解析度也是類似的。。。。

現在我們已經知道適配的原理了，也能夠算出適配的比例，

但一個屏幕有這麼多像素點構成。難道我們要一個一個的去計算？？

答案是 NO ~NO ~NO

作為程序員的我們，這麼多計算量肯定是交給電腦完成澀。。。

在群里我已經上傳了一個名叫：GenerateValueFiles.java的文件

裡面已經有大神寫好了計算的方法，我們只需要用就行了

現在我就教你們怎麼使用它……..

1、我們要將下載的這個文件，隨意放在電腦盤符的根目錄里。

之所以放在根目錄，是為了方便後面操作

把這個文件打開後

將會看到密密麻麻的一串串代碼。。。。我們不必要全部理解它代碼

只需要理解兩個地方就可以隨心所欲的用了

第一處：

箭頭表示那處，代表著是你想要適配的機型，如果這個字元串裡面沒有，你可以加進去

當然，你加的話，要按照他那個格式加進去哈。

第二處

這裡代表著是。你當前測試機的手機解析度。。。。。如果你測試機解析度不是這個，那麼你就要修改這裡

現在我們分析了這兩處有用的地方，那麼我們就緊接著開始使用了……..

我們用DOS命令直接運行它

剛剛我是把這個文件放在C盤根目錄的，那麼DOS命令是

確認輸入正確後，按回車。。。用javac讓它編譯成class文件

現在 C盤根目錄就會多一個對應的class文件

而DOS命令也將會顯示

現在我們需要編譯 class文件輸入命令符為：

猛擊回車鍵 DOS頁面就會出現：

當dos頁面出現這種情況，你也就成功了一半了，現在我們再次查看C盤的根目錄

就會發現多了一個res文件夾，打開文件夾就會發現，裡面全是已經計算好的適配比例

現在我們可以把DOS命令頁面關掉了，把這些生成的適配比例放在自己項目裡面

現在就到了最關鍵的一步了，以前我們寫界面的時候大多數用的，

math 、fill 、wrap。

Math和fill雖然有差別，但實際效果都差不多的。不同解析度手機上顯示的效果是一樣的

Wrap雖然它是自適應，但在不同的解析度上，適應的有點不靠譜

假設我現在需要在屏幕中心有個按鈕，寬度和高度為我們屏幕寬度的1/2，我可以怎麼編寫布局文件呢？

因為我的測試機解析度是 1080*1920 寬度的一半則為 540，代碼則為

& android:layout_gravity="center"

android:gravity="center"

android:text="@string/hello_world"

android:layout_w="@dimen/x540"

android:layout_h="@dimen/x540"/&>

不同解析度手機顯示的效果為：

能看出它的寬高始終都為屏幕寬度的一半

據我測試在1080*1920的測試機

1dp=x3

1dip=x3

1sp=x3

其他測試機，你們自己去測試

這個適配能適配控制項的大小、控制項之間的間隔、控制項字體的大小。。

適配的時候，就不要用什麼wrap了。。。直接替換成X……..

只要在你的測試機看到是什麼樣，那麼其他機型（java文件裡面有的）也會是這樣的

註：其中，需要用到的生成res的java文件下載地址為：http://ds.devstore.cn/dev_store/class_product/special_para_iamge/1465806274185/GenerateValueFiles(1).rar

尺寸太多，特別是國內各種小廠的山寨機之類的，幾套都不夠....

目前項目已經出現華為機型把下面菜單欄吞吃的問題了

720*1280的一套app界面怎麼切圖來適配iOS640*960，750*1334的，望大神賜教，剛進軍這個行業，要用這個怎麼切成ios的

很好都是高手

建議參考官方規範，Android Developers官網的Design項

解析度建議出一套720P的就夠了