身為行動介面設計師，若你已研讀過Material Design設計指南，這篇文章將是絕佳的實戰案例；若尚未閱讀，更是最生動易懂的入門引領，帶你以小見大、窺探Material Design的奧義。

Google近期推出Android Lollipop系統，最大變革在於引入全新視覺語言——Material Design。隨著新系統發布，Android也同步發布跨平台的視覺、動效、交互設計全方位指引。2014年10月7日，Google Material Design體驗團隊舉辦工作坊，與第三方App團隊分享設計見解與技巧，指導他們在Android平台上的設計實踐。

依我之見，Android此次改進邁出了關鍵的一步。新系統具備足夠的一致性與彈性，足以兼容任何新App的設計需求。因此我回頭重新審視Feedly的設計稿，嘗試依循Material Design原則進行全面重設計。

此次嘗試主要有兩大目的：一是打造完全遵循Google Material Design原則優化的全新版本，指引設計團隊未來方向，並可從中挑選設計亮點立即落地發布；二是為Feedly蒐集用戶回饋，歡迎各位留言建議。本文不僅呈現重設計成果，更記錄設計思考過程。現在，讓我們正式開啟Material Design的探索之旅。

總覽：重設計前後對比

此次重設計聚焦Feedly幾個核心介面。下圖為設計前（上排）與設計後（下排）的對比：

Material Design指南內容龐雜，此處提煉四大核心設計要點作為重設計主軸：

一、有形的介面

設計原則

「在Material Design中，App裡的每個像素都呈現在一張紙上。這張紙擁有單一背景色，可隨環境縮放。典型介面排版由多張不同大小的紙張重疊構成。」

Feedly實踐

Feedly原有介面已運用類似卡片隱喻，主體設計元素為堆疊卡片，承載文章列表或內容，上滑切換卡片。此隱喻與Material Design完美契合。導航面板位於左側可滑出蓋住卡片堆，「發現」介面邏輯相同但位於右側。

二、讓設計更像印刷品

設計原則

「印刷品設計基本元素包括字體排印、網格、間隙、尺寸、顏色與圖像運用。這些元素不僅為美觀，更能創造層次、建立意義、引導視覺焦點。」

Feedly實踐

8點網格系統

Google提供資源協助設計師以一致方式縮放安排視覺元素，仍需掌握整體網格系統。雖為8點網格，Android常設邊距為16點。除貫徹各介面網格，我將雜誌視圖頁面邊距設為16點（2×8）、縮略圖寬度設為96點（12×8）。

顏色與圖像

Google建議工具列與狀態列使用App主色（通常為品牌色）。但Feedly屬閱讀類應用，若在這些區域使用亮綠品牌色會干擾閱讀，故改用淺灰色降低干擾。左側欄設計亮綠主色頂欄突顯當日熱門話題，兼顧品牌識別與關鍵資訊。雜誌視圖採用全出血圖像呈現深度閱讀文章，「發現」介面選中話題時亦用全出血圖片作頁首。

三、有意義的轉場

設計原則

「用戶有時搞不清關注焦點，或在元素位移時感到困惑。經精心編排的動效能有效引導注意力，避免佈局變化造成迷惑，提升體驗美感。動效應滿足功能性目標，而非炫技。」

Feedly實踐

打開/關閉文章是Feedly最重要的轉場。參考Material Design三大指引：

表面回饋

點擊文章預覽時運用點擊波紋效果提供即時回饋，波紋擴大填滿整個預覽元素；關閉文章時頂欄同樣出現波紋。

視覺連續

雜誌視圖預覽圖片在轉場至文章視圖過程中放大移動至對應位置，用戶能感知點擊元素與最終介面關係。挑戰在於預覽圖片有時不在文章首屏，需以文章內容漸顯、縮略圖漸隱過渡。

有形表面

或許是Material Design最關鍵要素。點擊列表文章預覽區域時，模組向上昇起創造文章專屬新平面，並放大成為主要介面，文章內容同步漸顯。綜合上述指引得到最終動效：

同理設計發現面板選中話題動效：

四、自適應設計

設計原則

「Material Design最後核心理念是創造自適應設計，適用從手錶到大電視的任何尺寸。實際上是在同一底層結構體系中演變出適應不同尺寸的設計，尺寸與交互方式採最適合該尺寸的呈現，但顏色、圖標語言、層級與空間關係保持不變。」

Feedly實踐

Feedly從第一版即為自適應應用。核心在於文章卡片排布。不同尺寸螢幕採用不同但同樣精彩的佈局：