準備了半個月，思考產品設計、交互設計，見證了公司的產品、UE和開發的撕逼，將自己的思考、感悟，整理成下文，謹代表廣大程序猿，向設計獅、產品X開戰。希望廣大程序猿能夠堅持貫徹Google的Material Design，切實認真負責的執行Android的設計思想，將MD設計帶到產品中去，不做中國特色的App，將Android的開發風氣帶到正軌，樹立正確的開發觀、設計觀。

希望廣大程序猿朋友在博客后面留言、簽名，規范Android設計、樹立Android開發風氣，需要你們的力量——Android need YOU。

[[156936]]

基本元素

移動端的App界面，不論是iOS還是Android，一般由四個元素組成，分別是：狀態欄(status bar)、導航欄(navigation)、主菜單欄(submenu)、內容區域(content)。

• 狀態欄：顯示信號、運營商、電量等顯示手機狀態的區域

• 導航欄：顯示當前界面的名稱，包含相應的功能或者頁面間的跳轉按鈕

• 主菜單欄：類似于頁面的主菜單，提供整個應用的分類內容的快速跳轉

• 內容區域：展示應用提供的相應內容

不同的是，由于Android在4.0之后移除了實體鍵而使用屏幕下方的虛擬鍵，所以，Android將iOS中的主菜單從下方移動到了上方，從而避免誤操作虛擬鍵。

其實很多Android、iOS的UI差異性，都是由于iOS的閉源導致的，由于它的商業化，導致很多設計被申請了專利，Android在很多地方都必須有所不同，說的最多的就是iOS的彈性滾動，其實Android的ScrollView要實現這樣的效果，只需要修改一個參數的值即可，但是由于這個效果iOS申請的專利，所以Android就無法使用了。

布局差異性

導航欄位置與風格

iOS

iOS通常使用經典的Tab頁面來進行頁面的布局，也是最早最經典的布局方式。

Android

Android官方提供了兩種頁面切換方式：Actionbar和可滑動的Tab。Actiobar給用戶提供了導航標題和觸控按鈕，如下：

[[156937]]

或者：

通過滑動的方式來展示Tab頁面。

展示數據

當一個選項具有多種數據可選信息的適合，Android通常使用spinner的方式來展示可選數據項，而iOS則喜歡使用segments：

Back鍵

iOS

從iOS的布局上我們可以發現，由于iOS設備沒有返回鍵，所以頁面不得不在一頁中顯示或者在頁面上提供返回按鈕。

Android

Android的返回操作相比iOS就更加豐富，它不僅可以返回上個頁面，更可以返回上一次的操作，例如打開、收起鍵盤。

另外，從Android 4.0開始，Google也提出了一個“向上”的概念：

就是導航欄標題前面的一個小箭頭，點擊這個箭頭，是回到該頁面的上一個層級，而不是單純的向上一頁返回。

搜索

iOS中的搜索通常以控件的形式展現出來。而Android中的搜索，大多以search widget的形式展現，在點擊后顯示搜索框：

按鈕

iOS中的按鈕基本會帶有明顯的邊框，而在Android MD中，按鈕通常不需要邊框，并帶以漣漪效果來展示邊界。

平臺差異性

交互架構

iOS的標準交互架構是第一層導航在底部，左上角返回，右上角操作，右進左出，默認垂直滾動。不得不說，這套架構運用得到成熟，很徹底，最后在這套架構上和各種進化也很優秀。

Android標準交互架構的混亂很多，但是，不好用的自然會消失，看看G1的實體按鍵還有幾個。search沒了，menu越來越少用了，頂部導航少了。各種移植現象也讓交互越來越iOS化。但是Android的特點在back上。iOS的優秀在于app內部，缺點卻是app外部，app之間的切換非常弱。而android，因為back物理按鈕的存在，應用之間的接口非常靈活。以棧的方式來管理活動，而不是以應用來管理活動，這就讓開發者對全局的把握更加輕松。

widget

兩個系統都包含主屏幕，但iOS的主屏幕只能顯示應用列表，而Android的主屏幕不僅可以顯示應用列表，還可以自定義各種widget，這是很好的入口。不光是主屏幕上，甚至是鎖屏界面上，Android也可以自定義widget，這個功能，是Android相比iOS最閃光的UI元素。

Notification

Notification同樣是Android UI元素中非常重要的一環，適當的使用，會給用戶提供非常便利的應用入口。但是，如果濫用通知，同樣會讓用戶非常反感。

ScreenLock交互界面

與iOS不同，Android的鎖屏界面可以顯示的元素更加豐富。也支持鎖屏控件的自定義，通知的自定義、顯示級別的自定義。

這里的顯示效果與通知的顯示風格基本相同。

#p#

設計建議

很多人把用戶體驗看成是單純的設計或可用性問題，過于狹隘。用戶體驗的組成是多個方面的，產品基礎功能、新技術、內容、交互體驗、UI視覺、性能其實都是體驗的構成。有時候產品的成功不是一兩處就能決定的，甚至犧牲其中一些關鍵環節，如果能保證滿足其它更好的需求，也是值得的。

而對于開發者, 尤其是跨平臺開發者而言, 分別遵循不同平臺的設計規范會為設計帶來更大的壓力 —— 對于大部分應用而言, 需要設計多一套視覺樣式 (對于很多設計師/開發者而言, 還需要重新設計一套交互邏輯 —— 盡管這是毫無必要的), 必然會增加工作量. 但是, 遵循平臺設計規范能夠讓開發者更好的發揮一個平臺的實力 (調用自帶標準控件節省性能, 不需調用外部庫實現模仿 iOS 的視覺/交互效果, 標準布局更容易實現, 等等)。

針對平臺特性去設計同一功能的不同元素

創建一個跨平臺的設計，最需要考慮的方案就是這兩個平臺上展現同一功能的元素是不同的。所以設計應當尊重原生UI的標準，讓用戶保持同一的操作習慣。

最需要遵循的就是不要刻意模仿其他平臺的顯示特性。

最好不要共用一套UI

現在在開發中，大多使用一套UI來設計Android和iOS兩個平臺的主要原因，其實還是因為移動互聯網的版本節奏太快，兩套UI設計與維護的成本過大會導致效率降低，這是采取兩平臺完全一致的最關鍵因素。同一個產品在兩個終端并行，設計資源會嚴重緊缺，兩平臺功能同步設計不同步的情況使得項目進行得相當緩慢。從團隊的效率看這么做確實無可厚非，其實也就是在爭取時間成本。

但是，設計師應該把自己的設計當做自己的兒子，比如喬布斯，他肯定希望自己的兒子像自己，如果長得像愛因斯坦一樣，雖然絕頂聰明，但是卻顯得和父親格格不入，設計也是這樣，保持系統本身的特點，是對系統本身最起碼的尊重。

如果說Android的設計風格不完美，但這肯定不是使用iOS風格的理由，因為iOS風格的Android應用只會讓界面看起來更差勁，不倫不類，Android Design 就算再怎么不完美，總比iOS風格要適合Android。如果說Android Design 不完美，或者是不夠漂亮，那么Android Play上面那么多界面精美的應用都是怎么做出來的呢？

如果說兩個平臺用同一個界面是為了提升效率，節省時間，那為什么Windows Phone 又是另外的界面？為了一個占有率80%的平臺你去“節省時間”，為了一個占有率2%的平臺你去“花費時間“，說得通？Windows Phone 之所以不是iOS風格的，是因為微軟壓根就讓你做不成iOS風格的，要能照搬你會不照搬嗎？所以，大部分的App以2%為理由，拒不支持WP。

#p#

UI可以一樣，但是操作方式絕對不能一樣

即使我們退一步，UI做成一套，這個很多人也還可以接受，但是最無法忍受的是整個操作都是以iOS方式進行、并且Android的優點都全部去掉的設計。舉個例子，很多人認為Android左上角也有返回，但是那只是看起來像返回，實際上是向上，用過Windows資源管理器的人都知道，雖然有時候返回和向上都是回到同一個文件夾，但是很多時候又是不一樣的，那么你在左上角做返回，能不能把功能改成向上？Android 4.1支持富通知，為什么微信來了多條消息還是只能顯示發來XX條消息，而不能直接顯示消息內容？

這也是官方制定規范的意義之一，讓各個開發團隊了解系統生態的初衷和導向，讓用戶在同一個系統生態下能得到盡可能一致的體驗；同時也減少獨立開發者的工作成本。

而現狀是 Android 上經常出現 iOS 式操作，讓人覺得非?；靵y……

不要以用戶的學習成本為借口

說到用戶的學習成本，有多少用戶是兩個平臺都用的？恐怕遠小于只用一個平臺的。一個Android手機用戶，大多數軟件都是Android Design 的，他用習慣了，然后裝了一個微信，突然發現是腎6風格的，這要不要學習成本？有多少用戶是在不同的平臺間來回切換的？請問是一個用慣了Android Design 應用然后安裝了一個腎風格的微信的用戶多，還是用慣了腎機換到Android的用戶多？明顯是前者多，難道騰訊只照顧后者的學習成本，不照顧前者？何況用慣了腎機，反過來用Android，沒了返回就不會用了？用戶都是弱智？返回在上面會用，在下面就不會用了？這種智商，基本也就不會聊天了，還用微信干什么。既然Android用戶轉到腎機，能學會按上面的返回，腎機轉到Android，反而學不會按下面的返回，這是什么道理？歧視腎機用戶智商？

真正好的設計，是兩個平臺看起來差不多，操作基本上一樣，但是又能把不同平臺的特色體現出來，界面布局基本相同，iOS平臺用圓角矩形，Android平臺用直角矩形，既可以觸摸切換標簽，又可以滑動切換標簽，一個人來了消息能顯示，兩個人來了消息也可以顯示，不再是只顯示數量了，把上面的返回改成看似返回實則向上的按鈕，這樣操作起來也差不多，現在微信如果要回到主界面，需要點多次返回，并且配上時間很長的過渡動畫，操作極其繁瑣，把返回按鈕改成向上，不僅符合規范了，操作也大大方便了。

不要以Google放浪形骸為借口

在天朝，各種應用堅持不按照Material Design設計標準的原因，還是在于Google 對于生態環境的放任自流，不想管，也管不了，即使不讓上架Google Play，雖然我們現在也上不了，但是還有那么多play商店，91、豌豆莢、百度、360，所以，Google無法控制App的設計和質量。

而且，對應手機ROM廠商，更是為了自己的利益、讓自己的ROM能夠跟其他ROM有所區分，提出各種所謂的設計主題，什么三星的touchwizard，HTC的Sense，試問有哪個所謂的主題在體驗上比的過原生系統，算了不說了，怒氣值要滿了，大招不能白放。

設計思想

不得不說，有太多的設計師誤把技術當藝術、把漂亮當設計了，真正重要的交互部分反而被忽略，你可以看看，一大批的產品都是近乎靜態的，許多操作詭異至極，諸如你想添加一個條目到列表里，它就生硬的出現在那;你想刪除，它就直接消失。這樣的產品設計，你們到底有沒有考慮過用戶的感受，有沒有考慮過產品的感受。

交互真正革命性的意義在于，它把時間這一魔幻般的屬性帶入靜態的產品之中，通過對動作、速度、顯現等等的定義，讓產品的操作體現出真實感，使得用戶能自然而然的理解每一個動作的含義。

動效、動效、動效

App的動效設計，不管是在iOS還是在Android上，都是系統極力推崇的。特別是在Material Design中，如何利用時間特性來設計合理的動效，是一門非常大的學問。

下面我們看一個動效的設計圖：

這是一個線性的動畫實例，線性的動畫雖然給出了交互，但是卻是非常生硬的交互。

非線性的動畫更加真實的模擬了動畫的運行效果，讓用戶的體驗，更加真實。這就是使用時間特性來改變交互特性的最簡單實例。

下面這個例子也是一樣，我們模擬一個簡單的插入、刪除效果：

[[156944]]

這個例子沒有經過任何動效處理。生硬的展示，粗糙的交互設計。

[[156945]]

[[156946]]

而上面這兩個例子，則使用動效，讓插入、刪除的動畫效果更加逼真，且擬合自然狀態。

one more，我們再來看一個切換的效果：

又是一個非常生硬的切換，僅僅是畫面的過渡。

我們使用Material Design來武裝這個例子：

Android在Material Design中提出的Activity的四種狀態切換方式，正是希望使用這種方式來改變這種生硬的設計。

動效產品實例

Material Design Guide

請所有的設計師、程序猿，一定要每日拜讀Material Design Guide，前面我們只學習了Material Design Guide中的冰山一角——動效設計，就讓整個App完成了逆襲。如果參透了整個Material Design Guide，可想而知，其效果絕不亞于九陰真經、九陽神功、易筋經、葵花寶典，而其最大的好處是每人都能拿到一份copy而不用搶。

很多設計指導，我們就不詳細寫出來了，畢竟我們是代碼攻城獅，以此奠基：

http://developer.android.com/design/index.html

順便貼幾個gif，展示MD設計的強大。

[[156947]]

#p#

設計實例

MD規范

鎮樓

http://www.google.com/design/spec/material-design/introduction.html

Dribbble

不解釋，設計師、程序猿、愛不釋手的地方。

但是，警告設計師，里面不是所有特性都是很好實現的，請不要讓拿個特性就讓程序猿來實現?。?！

https://dribbble.com/

UI中國

還可以吧，國內的一些比較不錯的設計。

http://www.ui.cn/

INSTAGRAM with Material Design

上面的這段視頻是設計師Emmanuel Pacamalan放出的Instagram安卓L版本的概念視頻，這段視頻更清晰地描述出了Material Design的方方面面。Material Design的動畫非常豐富，每一個操作之間都有動畫銜接，簡約而又活潑。而App內各個界面之前的切換，也很好地表達出了“層級”的概念。總的來說，安卓L的App設計規范對比之前安卓4.×時代的Holo進步良多。

WeChat with Material Design

上面是微信with Material Design的設計圖，可以明顯的感覺到Android Material Design的設計風格。相比現在的微信客戶端，差距不言而喻。

下面再來個簡圖：

設計參考教程

跨平臺 UI/UX 設計示例 —— Android & iOS 篇

http://www.phonekr.com/cross-platform-android-ios-1/

http://www.phonekr.com/cross-platform-android-ios-2/

Material Design 研究會

http://www.phonekr.com/

Material Design in Action — 以猿題庫為例

http://www.phonekr.com/yuan-ti-ku-redesign/

Android Design in Action — 以知乎為例

http://www.geekpark.net/topics/186387

Android Design in Action — 以微信為例

http://www.geekpark.net/topics/186657

矛盾的原因

以下內容可能過于偏激，有部分知乎的評論。請謹慎觀看。

Google工程師、理科生思維

Google的純粹邏輯思維設計（某些時候為了簡潔而簡潔，某些時候只看邏輯不看體驗和認知）是工程師式的思維。從邏輯和道理上說都是對的，比如常用APP放桌面，不常用放抽屜，看似很有道理，但是小白理解不了（他們只在一個地方找APP，就是他們第一眼看到的桌面），或許在幾十年之后，智能手機對每一個人類，就像遇到奶嘴就自然地會去吮吸時，Android Design的思路才是對的。找APP這個具體設計點，可以做一個“關于儲物”的類比。人類初始階段的儲物，是在屋子內隨處亂放的，在人類對空間和物品儲存思路足夠熟悉、物品足夠多足夠復雜后，才有儲物柜、分門別類的抽屜的做法。谷歌的設計就是略過了前面階段，直接到了后面（從科學/工程師/純理性/邏輯的角度來說，后面的做法當然是更對更先進的，但用戶就是暫時接受不了）。

前面提到的國外的不同，其實就在于國外的發達國家的人們更利于嘗試、更喜歡嘗鮮，學習/接受速度更快。給第三世界的國家像中國市場一樣足夠大的市場、激烈的競爭環境、較低水平的國民教育程度和理解能力（和公司/企業無關），這些國家的互聯網/移動互聯網產品的設計，也一定會趨于以觸摸、直觀、邏輯層級淺、邏輯維度少的設計風格和標準（也就是iOS設計標準之于Android設計標準）。

或許過幾年/幾十年之后，人類對手機交互天然就會包括“滑動”這個操作（現在人類對手機交互的無前置認知只有觸摸/點擊，這是從幾千年的實物操作中總結來的基因和經驗）。到那時，大量采用滑動操作的設計才能被無前置教育的人快速接受。

而在此之前，更保守、直觀、邏輯層級更淺、邏輯維度更少的iOS設計標準，始終要比邏輯正確、思維超前、追求簡潔大于易理解、追求效率快大于好接受的Android設計標準，要好得多（好的標準是更受主流用戶的接受、使用和喜歡）。

規范來的太晚

Google直到Android L才第一次在設計語言和規范上超越了Apple。Material Design在視覺結構（Layout和Structure）、視覺層次（感謝Google意識到了Shadow的重要并充分運用）、色彩標準（Color Scheme，媽媽再也不用擔心我的配色）、字體排布（Typography和全新Roboto字體）、過渡動畫（Transition和Animation）上完全超越了Apple的HIG。

而M上的Material Design，讓設計不僅僅是一種藝術，而且是一門科學。完全規范的文檔和設計資源，已經可以讓開發者、設計師完全實踐Material Design。

模仿、山寨

曾經有個段子，說喬布斯死之前，投資了幾十個中國ROM廠家，以至于每次中國ROM發布會，都把自己的ROM與iOS進行對比，不知不覺，大家都發現，所有的廠商都他X說iOS是最好的，自己的ROM怎么怎么馬上就跟上它了。iOS真的應該感謝這些中國廠商給你們做的宣傳。

雖然對于大部分國內用戶而言, 他們是不知道也很難意識到 Android 和 iOS 在設計上有什么差別的. 而國內主流的 ROM (我說的是 MIUI，流氓而且山寨的代表) 在 UI 上也模仿了非常多 iOS 特色, 在這樣的大環境下, 用戶很難意識到兩個平臺設計規范的差異。

但是人是會進步的. 而國外優秀應用大部分都遵循著平臺規范, 國內的新晉應用和開發者也漸漸都開始遵循規范, 當用戶用過了更優秀, 符合平臺規范的應用之后, 他們中的一部分會漸漸意識到規范的優越性, 體會到遵循規范的應用具有更高的一致性. 而不同的平臺畢竟是不同的平臺, 一個平臺的應用會漸漸趨于遵循一致的視覺規范 —— 只要這個規范"具有足夠的說服力", 平臺內應用間統一感會不斷增強.

用戶不需要規范，用戶只想使用好的App。用戶角度看一個應用是否用著順手就是一個習慣問題，用戶看到的只是結果；而產品背后的細節需要由設計師和開發者把握好，才能給用戶一個最佳的結果。

所以，如果是資質一般般的團隊或者想走大眾普適路線的團隊還是遵守規范比較好，近期遠期都是有利的；

如果是特別牛比的團隊，那么你可以忽略官方規范自定義一套特別的交互規范，比如 Flipboard、Facebook Paper。但是這些公司現在也在遵循Material Design。

但我目前看到的更多優秀的 APP 都是在遵守規范的基礎上，表現自己的設計理念，比如：Expedia、 Timely，還有國內一些新秀App，例如知乎、網易的各大App，大家可以去看看他們的App，Material Design的設計是不是讓他們的App更加受歡迎。

公司利益

從一個公司的角度來說，從一個 App 是否遵守規范就可以大致判斷出這個產品團隊的工作態度。那些從產品發布初期就遵守規范做出雙平臺產品的團隊，我覺得僅這一點細節的關注上就說明他們不會太水太二，即使他們是個初創團隊他們的產品還有很多不足，因為第一步就為今后產品良好快速的迭代打下了基礎。而且，可以從一個團隊的設計規范上來看出一個公司是業務驅動技術，還是技術驅動業務。

很多時候，產品的借口都是用戶已經熟悉了我們這套UI，如果換成新的設計風格，用戶可能難以接受?？墒?，Apple剛剛提出扁平化設計的時候，網上有多少人在罵，可是后面大家不還是都去用了，以前被罵成X的扁平化竟然成了競相模仿的對象，如何解釋？其實很簡單，優秀的設計，總會被時間所證明。

就推廣而言，一個遵守規范同時又有自身產品亮點的應用，無論是 App Store 還是 Google Play 都是歡迎并推崇的。國外的Google Play是絕對不會feature一個iOS設計風格的App的，App Store也同理。

所以，我認為一個負責任、用心的團隊應該遵守平臺規范，如果可以，再加以自身的風格和理念，就是錦上添花了。

最后

文章很長，也寫了很久，希望設計師看見這篇博客，能夠真的去反思如何從程序猿的角度來設計產品，雖然這可能并沒有什么卵用，但請你一定這樣去做。希望程序猿看見這篇博客，可以真的去思考如何把技術運用到產品，Material Design并不是僅僅給設計師看的，程序猿同樣需要。程序猿的最高境界，就是一個會設計的程序猿，不光是設計程序、架構，更是設計UI、UE。與大家共勉。

最后，希望大家能把這篇文章頂起來，有不足、寫的不對的地方，請指出，撕逼也可以，目的只有一個，讓所有人——程序猿、設計師，都能夠反思，如何做一個好的Android App。