(以下內容是個人心得，若有表達不準確的地方，望同行賜教)

剛剛涉足andoridUI的朋友們總在詢問關于andoridUI的規范一類的資料，其實最有效的規范資料應該是安卓官網提供的規范http://www.apkbus.com/design/index.html，打開這個網站，一看，內容相當多，再加上一些專業術語，大部分人就沒有耐心往下讀了，從某種意義上來說，設計本是視覺的游戲，只關心“好看不好看”，但是畢竟UI設計是處于移動互聯網這一“理性”行業，再加上GUI的前身是工業設計專業，多多少少還是得熟悉一些數據，邏輯上的知識。當然，我們不能被規范束縛，我一直認為，這里的規范可以看作為一個“設計建議”。

和每個andoridUI設計師一樣，我也是從這個網站開始學習的，在上一章節中，我們分享了如何學習andoridUI設計，搭配著這個網站上關于“設備和顯示”的這一章節，講解了如何劃分一臺設備是屬于哪一種分辨率，以及關注了一下最近一段時間市面上各種機型的比例。

這一章節，我們還是再一次回歸安卓官網提供的規范網站，帶著大家一起研究一下官方提供的這些知識，分享一下安卓設計中的風格和主題問題，Holo風格到底是什么？如何做Holo風格？

在官網的“風格-主題”一欄中，官網簡單的描述了兩個內容：淺色的holo主題，深色的holo主題。我們還看到了一些對于設計師來說有效的關鍵字：“統一”“個性化”。其他的內容呢，說實話，真的讓設計師一頭霧水，有效的信息獲取量的確很少，那到底什么是淺色/深色holo主題呢，怎樣做才是“達標”的呢？要搞清楚這個問題，我們得討論一下什么是“風格/主題”。

其實這兩個詞對于我們設計師來說是相當熟悉的，設計風格/主題的把握這個階段應該是一個非常重要的階段，因為這個階段的步驟是合理的，優秀的，必然會造成其結果是“好看”的。那么我們又如何看待官方對于andoridUI設計中的風格和主題的解釋呢？

我們瀏覽規范網站，看到“風格-自我標識”這一欄。

配色：風格/主題表現中的一個重要步驟，在規范里說到了三點:

1.默認使用藍色。

為什么要默認使用藍色的？沒有為什么，“默認”的東西都沒有為什么，好比要用“√”來代表“正確”。

說到這里，我們必須下載一個安卓提供的開放資源Android_Design_Stencils_Sources。

下載地址http://developer.android.com/downloads/design/Android_Design_Stencils_Sources_20131106.zip

它是一個psd格式的文件(用ai設計的小伙伴們可以在網路上搜索AI格式的)，如下圖：

看起來，這個psd的源文件(14.5M)貌似很有用。是的，它的確很有用，以后的章節里，我們會經常拿出它來說明問題。在這一章的知識里，我們要關心的是以下幾點：

a.我們看到在這個Android_Design_Stencils_Sources.psd的源文件里，所有的控件都用上了統一的藍色，是的，沒錯，如果你覺得好看，我們也可以用這種藍色，比如一個科技行業的APP,那藍色一定是不錯的選擇，藍色色值請參考下圖：

b.如果你覺得藍色不合適，你可以選擇其他的顏色，比如紫色，綠色，黃色，紅色，各個顏色的色值都在上圖中有描述。如果你已經愛上這些顏色，你可以將他們調色板下載下來直接使用，下載地址http://developer.android.com/design/downloads/index.html

c．藍色是 Android 調色板中的標準顏色。每一種顏色都有相應的深色版本以供使用。工作經驗而言，我們常常這樣使用它們：

如果你也想走走現在流行的“扁平化路線”，再來點“陰影”，那么以上這樣的表現方式是不錯的選擇。將標準色用于按鈕背景顏色，將深色版用于按鈕的投影顏色。(PS,如果這個按鈕按下去，背景怎樣表現是最好的呢？)

d．當然，我們知道，官網上的規范，我們都可以將其看作一個“設計建議”，以上的這些顏色都是官方給我們的推薦顏色，如果你真的不能接受，完全沒有問題，你可以挑選其他顏色。但一定要記住，無論你是挑選推薦顏色，還是自己去選擇其他顏色，無論是選擇一種，還是多種，你都必須從設計對象出發考慮顏色的選擇。比如，如果你要做一個幼兒教育方面的應用，你如果選擇黑色的風格，那么是萬萬不合適的。

2. 適時使用高對比度的配色來表示強調。

用于操作欄或主要按鈕的背景色。避免濫用，不是所有操作都同樣重要，只在最重要的一到兩個操作上使用這樣的配色。

Google Play Music 應用使用一種橙色主題來強調操作欄、當前標簽頁選項卡、滾動指示和超鏈接。

當然，你如果覺得藍色色系更適合這款音樂播放APP，你完全可以將圖中的橙色更換為推薦顏色中的藍色，或者你自己挑選別的顏色，但仍然要注意風格的統一。

3．定制配色時，別忘了通過視覺上微小變動給予 觸摸反饋 。

一定要讓用戶知道他“點到”了，這種就是觸摸反饋。作為設計師的你，一定要從視覺上給與微小的變化，讓他們知道他們“做到了！”

Android KitKat 之前的版本中，默認觸摸反饋是一種充滿活力的藍色。而且所有的觸摸反饋都有明顯的色彩對比，所以有可能和你的標識色相沖突。Android KitKat 開始，觸摸反饋變得比較微妙，觸摸僅僅帶來控件背景色的微小變化。這樣做有兩個好處: (1) 符合 設計原則 - 給予鼓勵 的原則(將復雜的任務分割成簡單的步驟，這樣更容易完成。對操作要給予反饋，哪怕僅僅是個微小的光暈。)；(2) 更加容易突出你品牌的形象，不會與系統的設計風格混淆。如圖：

就工作經驗而言，我也贊同官方所描述的“微小的變動”來表達觸摸反饋。比如上圖中，就用一個更深的橙色作為“搜索icon”點下去時候的背景顏色，這樣的變動就是微小的。如果你要這樣做：

變動太大，的確不怎么好看。

談到“觸摸反饋”我們不得了解“控件的幾種狀態”，在我們下載的Android_Design_Stencils_Sources.psd中可以看到：

對于一個控件，andoridUI規范了有5中狀態，從上往下通俗的說：常規狀態，按下狀態，獲得焦點狀態，不可用狀態，不可用狀態下獲取焦點狀態。其中說明了：“不可用”狀態即為“常規”狀態的30%不透明度；“不可用狀態下獲取焦點”狀態即為“獲得焦點”狀態的30%不透明度。對于一個嚴格的項目來說，這5中狀態都是得設計的，有一種狀態是大家不太熟悉的，即focused狀態(獲得焦點狀態)，這種狀態針對一種比較古老的設備，如下圖:

在這種設備中，會有一個控制方向的滑輪，像我們學生時代用的滾輪鼠標一樣，手指控制這個小球，滑動到需要控制的控件上，但不按下。那么這個時候，控件就有一個focused狀態(獲得焦點狀態)

Logo：andoridUI的一個細小的獨特的風格

圖中的g+和Howz都是應用的logo，將它們放在操作欄的左邊，就是一個非常好的展示場所。

值得一提的是在這種情況下的觸摸反饋，通俗的說就是將操作圖標連同logo看作一個整體，進行觸摸反饋的表達，如下圖：

當然，你不一定非得像上面這樣做，如果你不打算放上你的APP logo，你還可以用以下的方式表達：

將 標題 直接置于 返回圖標 后面，在這一點上，ios的表達方式大多數是將 標題文字 放在操作欄的中間。這種情況下的觸摸反饋應該是：

這兩種方式是andoridUI的一種很特別有的表達方式，算是一種“個性”，大家參考視情況使用吧。

圖標

如圖中所描述的。圖標的使用也要做到風格的統一，你可以直接使用安卓自帶的圖標，下載地址：http://developer.android.com/design/downloads/index.html

當然。你會發現，有可能你需要的圖標，并不在這些御用圖標里，或者說你覺得這些圖標真的太丑，比如它們：

真心覺得這是要吃人的節奏嗎？

那么，你自己有自己畫啦~~

字體問題

在官網的“字體”一欄，是針對英文版本下的UI設計所用字體的說明。個人的看法是：你在設計稿中的字體并不會使用在程序里，你做的僅僅是“效果圖”，所以你用什么字體完全沒有限制。我們設計的效果圖是應該和最終的程序在效果上高度相同的，所以我們建議選擇一些類似于安卓系統字體的字體作為一個替代，你甚至可以用“黑體”“微軟雅黑”，當然，還是專業點兒吧，我才開始使用“文泉驛微米黑”，后來一直用DroidSansFallback.ttf，下載地址：http://www.zcool.com.cn/gfx/ZMjk0MjUy.html

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

我們一起閱讀并理解了官網上對于andoridUI風格一模塊的描述，也分享了我的一些工作經驗給大家。我們常常聽到或者被自己的領導要求“這個界面要做成Holo風格”。Holo風格是什么呢，到底怎樣做holo風格呢？在解開這個問題之前，我們先看幾個優秀的App，它們的界面設計。

上周非常幸運得搶到了紅米手機一臺，撒花并得瑟一下~~作為一名UI設計師，如果你還沒有玩過MIUI，那你是時候去了解一下了。以下是我截取的界面并在圖片上做了適當的描述：

第一：我們是不是可以在我們的設計中參考MIUI的表達方式，將操作欄設計為圓角，這樣一來，比起用直角，會更加親切一些，柔和一些。

第二：如果一個保守的交互設計師，或者說一個保守的GUI設計師，他會老老實實的保留操作欄，并在操作欄上描述這一個頁面的名字叫做“設置”，然后將這個頁面中的內容分類，分出的類別在正文中用tab切換顯示，從交互上來說，用戶是通過“設置”圖標進入這一個頁面的，那么這里的所有操作都與設置相關，用不著再在操作欄上總述一下當前頁面的名字，從視覺上來說，將操作欄直接用于tab切換，在高度上也節省了不少，以至于一頁上能顯示下面更多的列表項。

正文的背景，我們往往使用純色，而MIUI則將正文背景用漸變色處理，這樣一來更加有層次感，不是嗎？所以，如果你覺得不錯，也可以在你的設計中參考著這樣做。

操作欄還可以直接用于輸入文本哦~

操作欄中甚至可以直接放置一個輸入框，輸入框里甚至可以放置一些按鈕，或者標簽~~

操作欄還可以放置超鏈接哦~

這些都是值得我們學習的地方。

類似這些從交互和視覺都很優秀的地方還有很多，就不一一舉例了，總得來說，MIUI的確是一款好看的UI界面。

我們再來看一款UI界面，

這些輸入的文本框似乎有點不好看，但是又好像在哪兒見到過。

好了。如果你要將以上兩款UI做個比較，相信大部分人都覺得MIUI要好看得多。事實上MIUI并不是Holo風格的UI。

什么是Holo？

Holo Theme 是 Android Design 的最基礎的呈現方式。因為是最為基礎的 Android Design 呈現形式，每一臺 Android 4.X 的手機系統內部都有集成 Holo Theme 需要的控件，即開發者不需要自己設計控件，而是直接從系統里調用相應的控件。如果完全使用 Holo Theme，那么做出來的效果大致是上面舉的第二款UI界面那樣的。

也就是說，作為設計師的你，可以直接將Android_Design_Stencils_Sources.psd中的控件用于你的設計界面中，比如你需要一個多選按鈕，或者單選按鈕，或者是需要一個控制音量的控件，你都可以直接在Android_Design_Stencils_Sources.psd上取得。

如果有必要，你甚至可以直接使用官方建議的色板，或者直接拿用前面下載下來的安卓自帶的圖標。比如我們在上面舉的第二款UI例子中看到的那些單選按鈕或是輸入文本框，它門都是直接拿用這個源文件上的控件或者設計為一樣的效果，這些應用在 UI 方面沒有任何的亮點，但是如果你這樣做，就非常“安卓”，就好比你看到它：

大面積的色塊加上簡潔的文字表達，你就一定知道“嗯，這是win8風格”，或者“沒錯，它是metro風格”。

不過，調用系統控件在天朝是風險十足的行為，因為 MIUI 和很多國產ROM 私自替換了 ROM 中 Google 原本規定保留的 Holo 控件，這樣直接導致了一個原本在原生系統上運行時是 Holo Theme 的應用在 MIUI 之流上運行時變成不倫不類的樣子。

原本完全符合 Android Design 但因為 MIUI 而變得不倫不類的兩個應用：Dropbox 和 Press在這里我必須再埋汰一下 MIUI，這喪心病狂的東西不但篡改系統自帶的 Holo 控件，還擅自更改開發者嵌入應用的 Holo 風格控件，簡直罪大惡極。不過，三星和 HTC 也對一些系統的 Holo 控件做了修改(當然沒有像 MIUI 這么喪心病狂)。在這方面做得最好的反而是魅族，魅族修改的控件都依然符合 Android Design。而 Holo Theme 最大的特點是什么?簡單，質樸。Google 提供的 Holo 控件是不可能違背 Android Design 的，而這些控件的樣式和配色也非常保守，不會影響用戶的操作或者分散用戶的注意力，Holo Theme 的布局也是最為普通的列表。而 Android 系統對這些默認元素的優化已經很到位了，所以就算是默認的 Holo 主題也能帶來不錯的閱讀/操作體驗。但是，就如同在 Windows Phone 上的 Metro UI 引起的一個問題一樣，如果開發者全盤在照搬Holo Theme，那么最后的結果就是做出來的應用除了圖標之外都長得一個樣。這個時候，開發者就需要跳出 Holo Theme 這個框架，進入更高

的境界了。

總結起來說，如果你打算做一款Holo風格的UI。那么有幾點是你可以參考使用的：

1．出色的光影效果清晰的層次關系。這種層次關系一方面提現在視覺上，非常重要的一點同樣也要求做交互的人員這么做。所以，Holo不是視覺的Holo，還應該包括交互的“Holo”。

2．像上面介紹的第二款UI這些應用大多數都使用了自制控件和自定義布局。自制控件的好處有很多，其中之一就是可以保證在大多數機器上看起來都是一個樣子(當然遇上 MIUI 這樣的惡棍就沒辦法了，道高一尺魔高一丈)。

3．可以使用建議的色板，或者自己選擇更加豐富的顏色，雖然配色的使用變得豐富，這些配色依然都是低飽和度，不是很鮮艷，搭配起來比較容易的中性色。比如你常常會看到正文的背景用了淺灰底色配上白色卡片。

4．參考Android_Design_Stencils_Sources.psd上的布局方式，當然。如果你有更好的，也可以不用被規范束縛。

下期預告：andoridUI的入手方法和畫圖方法。

我們下期見。