藍藍設計( m.0391cbd.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供有效的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

每一個扁平化界面設計，都是我們的心靈碰撞致力于最棒的 metro ui 設計

來源：http://www.zcool.com.cn/article/ZMTQ3MTI0.html#

 如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

【譯者注】作為一個移動界面設計師，如果你已經細細讀過Material Design的設計指引，那么這篇文章是一篇很好的設計案例。如果你還沒有讀過，那這篇文章一定是個最容易最生動的起點，以小窺大得幫助你進入Material Design的世界。

　　大家知道，google最近發布了Android的Lollipop系統，系統的一個重大改動是引入了一種新的視覺語言：Material Design。隨著新系統的發布，安卓也發布了一個跨平臺的視覺、動效、交互設計的全面指引。10月7日，Google的Material Design體驗團隊組織了一個workshop，跟第三方app團隊分享了一些設計見解和小技巧，來指導他們在Android平臺的設計。

　　在我看來，Android的這次改進，是在對的方向上又邁進了實實在在的一步。這個新系統目前已經擁有足夠的一致性和靈活性，足以兼容任何新app的設計。所以呢，我在回來之后也重新回到我feedly的設計稿，嘗試將feedly的界面根據Material Design的設計指引，做一次重新設計的嘗試。

　　這次嘗試，我的主要目的是創造一個完全根據Google的Material Design原則優化的全新版本。這個版本可以指引設計團隊的未來設計。同時，我們還可以選用其中的一些設計點，立即落地并發布在以后的版本中。這次嘗試的第二個目的，是為feedly獲得一些用戶反饋。所以如果你有任何建議，請留下些評論。

　　這篇文章里，不僅有這次重新設計的結果，也講述了過程中的設計思考。

　　好了，進入正題，讓我們馬上開始Material Design的探索。

總覽

　　在這次重新設計中，我著重設計feedly的幾個主要界面。下圖是設計前（上排）和設計后（下排）的對比圖。

　　Material Design的設計指引要是全面描述的話，會太繁雜。所以在這里我提取出四個核心設計要點，這四個核心要點也是我用來重新設計的主要依據。

一、有形的界面（Tangible Interfaces）

　　Material Design 設計原則

“在material design中，app里的每個像素都被呈現在一張紙（a sheet of paper）上。這張紙有單一的背景顏色，并且根據不同的環境可以被隨意縮放。一個典型的界面排版，可能由好幾張不同大小的紙張的重疊構成。”

設計原則在feedly的運用

　　Feedly原有的界面已經在運用類似的紙張隱喻，我們的主要設計元素是一疊疊的卡片，每個卡片上都有文章列表或文章。上滑卡片，下一張卡片就會被顯示出來。這種隱喻正好和Material Design可以完美契合。

Feedly的導航位于左側的面板上，面板可以被滑出，蓋在那疊卡片上。Feedly的“發現”界面也是同樣邏輯，只是位于右側。

二、讓設計更像印刷品

Material Design 設計原則

“印刷品設計的基本元素包括字體排印、網格、間隙、尺寸、顏色和圖像的運用方式。這些元素的意義遠不僅僅是好看而已，他們一起能創造層次、制造意義及帶來視覺焦點。”

設計原則在feedly的運用

8點網格

Google提供了一些很好的資源，來幫助設計師在設計app的時候，能以一種保有一致性的方式來縮放和安排視覺元素。但是你仍然需要了解這背后的總體網格系統。雖然這是一個8點的網格系統，Android常常將邊距設置為16點。除了在各個界面貫徹網格系統，我還將我們的雜志視圖頁面邊距設置成了16點（2×8）寬，將縮略圖設置為96點（12×8）寬。

顏色和圖像

　　Google推薦在工具欄和狀態欄使用app的主色（主色一般是品牌的主色調）。但因為feedly是一個閱讀應用，如果在這些區域運用我們的亮綠色，會對視線造成強烈的干擾，打擾用戶對實際內容的閱讀。因此，我選擇在這些區域運用淺灰色，減少對內容的打擾。

　　在左邊欄中，我設計了一個運用亮綠主色的頂欄，頂欄用來突出顯示當日的熱點話題。這種方式即強調了關鍵信息，又變現了品牌色，我對這種方式還比較滿意。

　　圖像也是設計中非常重要的元素。在雜志視圖中，我用了全出血尺寸的圖像來呈現需要深度閱讀的文章。在發現界面中選中某話題時，也運用了全出血的圖片作為界面頭部。

三、有意義的轉場

　　Material Design 設計原則

“有時候，用戶會搞不清楚需要關注界面的哪部分，或在一個元素從A位置變換到B位置的時候感到迷惑。通過經過精心編排的動效設計，可以在app使用過程中有效地引導用戶的注意力和視覺焦點，避免當布局變化或元素重新排布時引起的迷惑，同時提升整體的體驗美感。動效設計應該滿足功能性的目標，不僅僅是炫技。”

設計原則在feedly的運用

　　打開文章和關閉文章，是feedly中最重要的轉場。在這個過程中，用戶在文章的列表和整篇文章內容中切換。制作這個轉場動效時，我參考了Material Design設計原則中推薦的3個主要設計指引。

表面的反饋

　　當用戶點擊文章預覽時，我運用了點擊波紋效果來提供即時反饋。波紋效果會擴大充滿整個文章預覽元素。同樣，當用戶關閉文章時，點擊波紋效果也會在頂欄中出現。

視覺連續

　　在雜志視圖中的預覽圖片，會在界面轉換到文章視圖的過程中放大，并移動到相應的位置。通過這樣的轉場，用戶能完美感知到他所點擊的元素和最終界面元素之間的關系。但這其中有一個挑戰：有時在預覽視圖中的圖片并不出現在文章的首屏，而是好幾屏之后才會看到。這時，我們不得不在轉場時將文章內容漸顯，而將縮略圖漸隱來過渡。

有形的表面

這很可能是Material Design中最重要的要素。根據設計指引，我們需要將內容處理為像打印在有形表面上一般。當用戶點擊了列表中的文章預覽區域時，這個模塊會向上升起，創造出屬于這篇文章的一個新的平面。同時考慮到視覺的連續，這個新平面會放大，使其成為界面中最主要的一個面。在這個過程中，文章的內容也漸顯出現。

綜合這些設計指引，我們得到的最終動效是：

根據相同的方式，我還設計了在發現面板中選中某個話題的動效：

四、自適應設計

Material Design 設計原則

“Material Design的最后一個核心理念，是創造出一個自適應的設計，他能適用在從小手表到大電視的任何尺寸的平臺上。一個自適應的設計，實際上是在同一個底層結構的體系中，演變出適應于不同尺寸界面的設計。在每一種設計中，尺寸和交互方式用最適合這個尺寸界面的方式展現；但在顏色、圖標語言、層級和空間關系上卻保持不變。Material Design通過提供靈活的元素和樣式，幫助你搭建可自適應的界面。”

設計原則在feedly的運用

　　從第一版開始，feedly就已經是一個可自適應的應用。自適應時，最主要需要考慮的元素就是用來呈現文章的卡片。考慮如何將這些卡片排布在雜志視圖中，是一件很有意思也很有挑戰的事情。正如你在下圖看到的，不同尺寸的屏幕采用了不同的、但都很有趣的布局。