獨立 Android 開發者如何零基礎學習 UI 設計，並設計出符合 Android Design 的作品？

01-19

這裡假設 Android 開發者沒經過任何美術訓練，不會使用任何 UI 設計工具，具有一般水平的審美能力，對 Android Design 有初步的理解。

Design | Android Developers

熟讀即可.

可輔以國內外優秀 Android 應用共同食用: Android 應用推薦.

我是來潑冷水的。說句實話……Android的Coder做這些其實沒什麼太大意義。如果你自己做獨立開發者，那Android的收費環境不如IOS，如果你進公司，UI設計師們會幫你包辦。

我還是建議你去深入理解安卓的UI控制項源碼，以及硬體加速、OpenGL之類的UI相關技術，投入產出比會比較高一些。至於你要獨立開發程序只需要花錢找個合夥的設計師就行了。獨立開發者最容易犯的錯誤就是什麼都想自己包辦……

請對UI設計師懷揣敬畏

如果一個沒有任何美術訓練、還要花大量時間在寫代碼上的程序猿都能夠干設計師的活的話……那了少俠你很有天分，干程序猿是真苦了你了。

我來留個大坑……後天做完分享以後上來回答。

—————————————————————————————————————本來是想拿到錄音或者視頻後再來的，不過等了好久也沒拿到，那就直接來回答吧……

這個答案基本沒有採用我講稿里的內容，純手打。下面從Pages

—————————————————————————————————————

最初看到這個問題，我是覺得這個問題和我上周末分享的內容契合度比較高，所以一直等到周末分享結束來寫這個答案，本來是想直接把PPT和講稿複製粘貼啪啪啪，但是後來想想，覺得這樣還是不太合適，我還是提煉一下答案吧。

首先，我不能贊同Van Bruce的答案的前半部分，但是贊同他最後說的「請對UI設計師懷揣敬畏。」

因為題主已經提到了問題的前提

具有一般水平的審美能力，對 Android Design 有初步的理解。

具有一般的審美能力，這樣已經足夠了。

不要強求大師級的UI設計或者讓人眼前一亮的UI。作為一個在擁有3K+軟體工程學生的學院讀了三年的偽·程序猿，我認為一般的審美能力已經足夠做出普普通通不會亮瞎人眼的UI了。題主的情況恐怕是沒有專業的設計師甚至沒有具有一定美術基礎的隊友，只能一切靠自己，這種情況下，學習AndroidDesign就是最好的選擇。理解了AndroidDesign的核心元素，至少能夠讓你的應用達到普通的水平，這樣目前來說真的足夠了。

然後進入正題，我在這裡說說我理解的AndroidDesign。

如果打開AndroidDesign的官方網，一頁頁的看下去，快的小半天，慢的話看上一兩天也該看完了，看完以後，大概心裡有個印象，知道AndroidDesign有那些東西，並且對原生控制項的樣式有個大概的印象。這時候，就可以從AndroidDesign裡面一些具有標誌性的東西下手了。我在這裡放上幾頁我分享時的PPT。

我這裡提到了四個關鍵字，實際上在我的初稿裡面有七個。

除去Holo，ActionBar，Drawer，NavigationBar以外，在初稿里我還提到了DP，UpBack已經Fragment。

這裡Fragment與代碼實現關係最近，我略去不談，UpBack則是學習成本高，使用場景雖多但是大多數場景沒有讓人感到困擾，二者在很多情況下沒有太大區別。所以也不談UpBack。

首先很有必要談談Holo：

這一頁PPT裡面，我放上了三張圖。Holo Dark，Holo Light以及我個人命名為HoloStyle的風格。Holo Dark以深色為背景，明亮色用來作為文字和圖標的主色，而Holo Light與之相反，使用淺色作為背景，深色作為文字和圖標的主色。且不說這兩者風格是否漂亮美觀，一個設計能力一般的人如果能合理的在應用中使用這兩種簡單的風格，世界上就不會有那麼多值得詬病的UI設計了。

在正在開發的過程中，我建議盡量少的使用Holo Dark風格，這種黑色的背景其實並不夠友好。之前我看到 @NovaDNG在Android Design in Action — 以知乎為例中提到將背景色從白色換為#eeeeee（一種淡灰色），然後我嘗試了很多次以#eeeeee為背景做不同的應用，這個真是個百搭色，視覺衝擊小，看起來也柔和，建議新手在設計UI中多使用類似的顏色。而Holo Light常常被我使用在設置界面，建議使用#eeeeee，不要使用純白色背景，太過刺眼。

我再PPT里還提到了Holo Style，在我看來這是當下符合AndroidDesign應用的主流。他在核心概念上遵循Holo Light和Holo Dark，但是引入了更多的色彩來提升應用的美感與設計感，這張圖的UI整體和諧，沒有亮瞎人眼的配色與融入背景的文字，如果對AndroidDesign的理解達到普通水平，應該是可以獨立的構建出類似的UI的。

然後來說說關鍵字2的ActionBar，對於Android應用來說，ActionBar幾乎就是一種標誌性的元素。這裡我也做一些簡單的科普：

這張圖中的1便是所謂的ActionBar，應用的很多操作都位於這一操作欄上。圖中的2名為TabHost，也是Android應用中常見元素，用於切換多個Tab。一般來說是在同一個Activity中切換不同的Fragment時被用到。圖中的3名為SplitActionBar，可以理解為把頂部ActionBar上的按鈕轉移到下方，在我看來優點是便於單手操作，缺點是雙層底部操作欄會犧牲美感，但是SplitActionBar在Google系應用里曇花一現，對此我一直很費解，Google是為了美感雪藏了SplitActionBar么？

右邊的圖是所謂的ContextualActionBar，即與內容相關的ActionBar。當我們在應用中選擇了某一段文字或者改變了CheckBox的狀態，如果有針對這些文字或CheckBox的操作，那麼這些操作就應該從隱藏狀態出現在ActionBar上，所以稱其為ContextualActionBar。

然後，是ActionBar具體的模樣。

我覺得題主要學習AndroidDesign並做出符合AndroidDesign的應用，那麼請一定不要試圖去掉ActionBar，就算是仿iOS的風格，也至少留下一個不標準的ActionBar。去掉了ActionBar的應用，失去了Logo與標題，無論如何都給人一種極大地違和感，更何況ActionBar的配色應該是能夠體現應用內涵或者契合應用主題的顏色，就如同微信的綠色，知乎的藍色，飯本的紅色。這也是為什麼現在iOS7上的應用整體水平變得平庸的原因（如果你也覺得iOS應用的白色被濫用了）。

繼續說ActionBar，上面兩張圖都是我從AndroidDesign官網扒下來的，上圖左側三條線，就是官方建議的DrawerToggle的樣式，用於打開和關閉抽屜。下面ActionBar中的1號圖標表示的意思是Up，請不要用於打開關閉抽屜。2號圖標表示Spinner，即點擊後出現一個可選擇的列表，個人感覺不夠美觀，拉入黑名單棄之不用，建議有類似需求的可以考慮TabHost或Drawer。3號圖標是兩個ActionBar Items，Google提供了142個圖標用來用於不同的場景，但是在實際開發過程中，你會發現兩個問題：1.有些圖標太丑 2.圖標根本不夠用。當你遇到這種尷尬的情況時，我的建議是要麼自己畫（找人畫），要麼放棄整個AndroidDesign的圖標，採用很多優秀設計師為iOS或Android設計的一整套圖標。

最後一個Overflow，當你的ActionBar不足以存放那麼多item的時候，Overflow就會出現。我個人建議操作小於等於五個的時候，都放到Overflow裡面，用戶在使用的過程中，就會在需要各式操作的時候去右上角尋找。這樣可以培養用戶的使用習慣，對整個Android應用的生態圈都是有益的。當一個節目存在太多的操作需要放到右上角的時候，我只能說，極大可能是在交互設計時出現了重大問題，建議回爐重做。=_=

第三個關鍵字，是Navigation Drawer，我們可以稱之為Drawer，中文的話就是抽屜。在我看來，Navigation Drawer是移動開發歷史上的一個創舉。畢竟手機永遠是手機，怎麼都不能大到一隻手握不住。如何在界面上提供更多的信息就是一個非常值得探討的問題。事實上我們可以把很多操作項和導航入口直觀的排列在屏幕上，但是這對於當前進行的操作，真是一種災難性的體驗，所以能夠隱藏出現的Drawer大行其道就不是什麼令人奇怪的問題了。在我看來，Drawer中應該存放的是相互獨立的最高級的導航層級,在下文中我會以QQ為例做相關的論述。

在這裡，我順便提到了48DP的概念。

我這裡引用另外一位設計師在一個問題中的回答：

系統只認px，不認識厘米，設定160dp的長度，相當於告訴手機在160dpi屏幕上顯示160px，在240dpi屏幕上顯示240px 。如果根據屏幕密度換算像素讓系統去用，你這台手機是方便了，"在Xdpi下繪製Xpx長度，實際的物理距離都是1英寸" 屏幕升級了呢？代碼重寫一遍再調一次UI？

也就是說，實際上，同樣的DP在不同的手機上，物理長度都是一樣的。

關於48DP有人講的很好了，我就不贅述了。這裡我說一下個人的一點經驗。一個界面有多個文本項目需要一一列出來的時候，請不要使用48DP，是視覺上太窄了，非常不舒服，建議使用64DP。另外，無論出於什麼原因，一個存放有操作事件的Layout的高度不要低於48DP（其中的ImageButton可以小於48DP，我個人比較喜歡36DP的ImageButton）。

我在這張PPT的第三張圖，其實就是為了提到飯本的SplitActionBar。這條SplitActionBar高度是48DP，而且完全符合AndroidDesign，但是事實上，這並不是原生的SplitActionBar，而是作者自製的。這樣的作法給我們提供一個新的思路：設計標準與實現標準的分離。無論是SplitActionBar還是DrawerLayout甚至ActionBar，我們都可以使用這樣的思路。隨之而來的是更靈活的實現方法和更便捷的開發，唯一需要考慮的問題大概就是需要忍受SmartBar的雙層低欄。

這張PPT，我當時主要講的便是NavigationBar，然後身為一個魅族用戶，我順便夾雜了些私貨，說了一下SmartBar。我想如果基本理解了AndroidDesign的話，應該是會認同SmartBar在兼容狀態下確實讓用戶體驗和UI變得更好。前提是在兼容狀態。

然後回顧一下，其實AndroidDesign的標誌性元素就是這些。遠遠沒有題主想的那麼複雜。

但是知道這些，想設計出符合AndroidDesign的應用，還是要親自動手，真正嘗試的時候往往才會發現很多時候，設計是為產品服務的，不能僅僅堅持設計而忽略了產品的設計的思路。

我這裡來舉個栗子，拋磚引玉。

這裡的標題是對NovaDNG的致敬，他為AndroidDesign的推廣做出的貢獻大家有目共睹。

此外，個人水平有限，本人並非設計師亦無美術功底，大三在讀生，會一些Android開發，不想寫代碼準備找份產品的實習，順便求各種內推。其實說這些，目的就是三個字：求輕噴。

事實上，我選擇QQ作為分享時的例子，導致自己進入了一個非常糾結的狀態。在我看來，雖然QQ for Android使用了iOS7的設計，但是在設計美感上，並沒有太多值得詬病的地方，整體水平比中規中矩還要強上一些。而遵循AndroidDesign出產的絕大多數APP，在UI上都只能達到中規中矩的水平，這就是我的糾結之處。

首先是登陸界面，我將EditText的樣式改為了標準的Android原生控制項，按鈕使用的是無邊框按鈕，配色選擇了比較平順的淺黑色，整體乏善可陳。

然後，當我們試圖改造QQ的時候，首先需要腦海里有一個大致的改造方案，在我看來，第一步就是要確定導航層級。

兩張圖放在一起看。QQ沒有抽屜，所以最高級的導航放在底部的TabHost上。分別是消息、聯繫人、動態、設置。消息顧名思義，就是最近聯繫人與消息記錄，聯繫人這裡只有好友分組，群與討論組在上方提供了單獨的入口，生活服務類似於公告號，通訊錄屬於歷史遺物，而且更契合「發現」的概念，被我從聯繫人這一塊去掉了。

在我看來，QQ的核心業務始終是通訊，所以我選擇強化聯繫人與消息之間的關聯，並且優化群討論組的導航方式，將其整體整合為「消息」。

動態裡面，囊括了QQ空間、遊戲、會員、閱讀等等的入口，但是在我看來，類似於遊戲、會員、閱讀等等都應該是針對用戶的一種服務。至於附近的人，掃一掃等等的操作性較強的功能，則是用於獲取信息交換信息，所以應該屬於發現類。最後一個Tab是設置，除去個人資料我認為需要被剝離外，其他保持現狀。這樣一來，整體思路就比較清晰了。在新的設計裡面，我們使用Drawer作為導航方式，將個人相關納入Drawer中，而Drawer中的item分別是「消息」、「服務」、「發現」、「設置」。

確認了抽屜中的內容，然後別忘了ActionBar的Logo。我本意是做一個純色的QQ圖標（類似微信）放在左上角，但是由於個人渣美工，完全無能……所以就只好用一隻彩色的企鵝作為Logo了。於是抽屜就應該是這樣的：