谷歌Material design實例研究總結

谷歌Material design實例研究總結

來自專欄聊聊設計21 人贊了文章

對於廣大的UX、UI設計師來說，Google的material design可以說是必看的經典了。Material design由谷歌獨立的部門來負責運作，在今年的I/O開發大會後material design的內容又有了進一步的更新。近期我花一些時間研究了material design的官網，看完了material studies中舉出的若干案例，對自己很有啟發，因此也作出總結分享給大家。以下是正文。

---

Material studies舉出了7個不同功能和風格的APP，均使用了material design的主題和組件，來探索如何使用material design，探索它的邊界。這7個APP分別是：

Basil—瀏覽菜譜APP，希望傳達出親切的、直接的感覺，傳遞愉悅的驚喜；

Crane—旅行APP，希望傳達為用戶定製的感覺，兼具功能性和信息性；

Fortnightly—新聞APP，注重內容，希望內容易讀；

OWL—教育APP，希望傳達出有活力的、大膽的、有趣的品牌感；

Rally— 個人理財APP，希望傳達優質的品牌感，將大量的數據有序地呈現出來；

Reply—郵件APP，希望傳達清晰的、可讀的、直覺的、容易使用的感覺；

Shrine—時尚購物APP，希望傳達時尚、現代、優雅、精緻的感覺。

在每一個APP中，都對app的框架，布局，色彩，文字，圖標，組件，動效等內容進行分別說明，圖文並貌，非常生動。下面是一些具體的案例。

1. Crane

這個是crane的啟動頁上的動效，動效中強調了緩動和逐漸進入的特點，使其精緻而且高級。

Crane Launch Animation https://www.zhihu.com/video/1025856049814777856

下面兩個動效一個是父子關係，一個是平級關係。父子關係是一層一層拔高，平級關係是左右切換，在兩個動效中，都用到了同樣的緩動效果，保持一致性。

Crane Parent－child Motion https://www.zhihu.com/video/1025856652758695936 Crane Peer Motion https://www.zhihu.com/video/1025856913677967360

這個是crane的計數控制項，展開時可以清晰地看到處在哪一步，每一步是什麼；收縮時可以看到簡明的共幾步及位於第幾步，兩者之間可以輕鬆切換。

Crane Stepper https://www.zhihu.com/video/1025857173401649152

下面這個是crane的網站，交互效果上比國內眾多旅遊網站甩出了幾條街。當選中某個機票項目時，內容展開顯示詳細信息，同時其他信息覆蓋上白色蒙層，視覺焦點可以牢牢關注在被選中的項目上。當然動效也是非常出色的。

Crane Website https://www.zhihu.com/video/1025857357737177088

2. OWL

下面的動畫是OWL的icon動效，啟動頁動畫以及loading動畫，非常生動活潑，很喜歡，風格統一，都採用了圓形元素。

OWL animation https://www.zhihu.com/video/1025857775611568128

下面是OWL底部導航欄切換時的動效，在切換時，頁面元素陸續進入且有彈跳，傳達出活潑、有活力的特徵。

OWL Navigation Transition https://www.zhihu.com/video/1025858042511781888

3. Reply

這個是reply選中某個郵件進行回復的動效。在這個動效中，動效持續時間從常規的300ms縮短為250ms，強調app高效的特徵。

Reply Navigation Transition https://www.zhihu.com/video/1025858774568947712

4. Shrine

下面的這個視頻是用戶將商品加入購物車的動效。添加時商品左上角的購物車icon有動效，同時右下角底部的購物車彈出又收回。這個動效不僅美觀，也對用戶起到了提示和教育的作用。

Shrine Educational Animation https://www.zhihu.com/video/1025859529010950144

Shrine的導航欄方式也很特別。

Shrine Navigation Drawer https://www.zhihu.com/video/1025862066204233728

由於知乎文章中視頻數量限制為10個，因此只挑了一些放上來。感興趣的朋友可以到material design官網看完整版哦。碼字不易，記得點贊哦！

---

未經允許，請勿轉載

推薦閱讀：