如何快速做Android MD風格的APP？

前言

Material Design在2014年發布的時候，就引起了互聯網界的一片讚歎。

然而，因為Android手機廠商都深度定製了ROM，而且MUI、Flyme、氫OS等都與谷歌的設計風格相去甚遠，所以似乎並沒有多少APP願意按照Android原生的規範來做。

相關的文檔和參考資料可以參看：Material Design Guideline 中文版

最近突發興趣，下載了Google自家的幾十款APP逐一研究，發現原來Google的親兒子們的設計都還挺統一的，基本按照Material Design的思想走了下來，設計上簡明輕快、清新自然。

那麼，如果有機會，我們該如何快速地打造一款Material風格的APP呢？讀一遍規範基本瞭然於心了，如果懶得讀文檔，可以參考以下六點總結：

一，左側抽屜導航

左側的抽屜導航，是Material Design結構上最鮮明的特點，優點是易擴展，也方便適配到Pad、電腦等大平台上。

但是抽屜違背了「所見即所得」的原則，藏起來的入口使用率會大受影響（幾年前曾在前東家做過設計Test，將一款APP從底部導航樣式改為抽屜導航，結果數據你懂的）。

總之，雖然抽屜結構經典，但選用時應該慎重，常用的功能、高頻操作的入口都盡量不要放入抽屜。

二，簡單點線面，自然分割

Material Design強調有厚度的面，具體可以閱讀設計指南中的《組件》章節，裡面有詳細的卡片、紙片、按鈕就、表格的設計介紹。

給我的感受就是：將界面中本來虛無的元素，附上現實生活中的立體感，用它們之間真實的位置關係來強調層級，而不是用一條條線一分為二。元素間的分割非常自然，避免為了分割而加上線條或顏色。

三，抽離重要操作到button

打開一款Material Design的APP，最顯眼獨特的莫過於Floating action button（懸浮響應按鈕）。

將頁面中最關鍵的操作聚焦在一個亮色的按鈕上，放置於屏幕非對陣的位置，這一控制項與iOS的差異化非常明顯。

似乎有了這個button，感覺一下子就有了呢:）

四，頁面有厚度，元素層級

Material的環境是三維的，所有的元素都有厚度。有一張非常非常關鍵的圖，我將其翻譯為中文如下：

五，觸控漣漪，過渡轉場

設計指南中對動畫的講解也很多，個人認為最重要的兩點：觸控漣漪，過渡轉場。

其實轉場動畫iOS用的也很多，所以還是觸控漣漪更有代表性,哈哈。

Google Meterial觸控漣漪—在線播放—優酷網，視頻高清在線觀看 http://v.youku.com/v_show/id_XMTU2NDE0NTk0OA==.html

六，一致風格的圖標

「Each icon is cut, folded, and lit as paper would be, but represented by simple graphic elements」這是文中原話，「每個圖標都像真實紙張一樣被裁剪、摺疊和點燃，而用一些簡單的圖形元素來表現」。可以從Google家的這些APP的logo中看出來：

Google家的APP中，個人體驗時覺得一些尤為不錯，現列舉出來，有興趣的可以下載體驗。

Inbox：好評的郵箱，不多說

Google日曆：小清新，感覺比iOS設計感好

Art@Culture：藝術欣賞，很美的APP

Primer：精彩視頻推介

Snapseed：美圖，說實話這個APP做的挺酷，但學習成本太高。

Play報亭：最近一直登錄不上去了，碼蛋

Google相冊：類似日曆

——

Best wishes!

Thank you for reading！

推薦閱讀：