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

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

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

 如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里

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

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

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

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

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

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

總覽

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

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

一、有形的界面（Tangible Interfaces）

　　Material Design 設(shè)計原則

“在material design中，app里的每個像素都被呈現(xiàn)在一張紙（a sheet of paper）上。這張紙有單一的背景顏色，并且根據(jù)不同的環(huán)境可以被隨意縮放。一個典型的界面排版，可能由好幾張不同大小的紙張的重疊構(gòu)成?！?/p>

設(shè)計原則在feedly的運用

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

Feedly的導(dǎo)航位于左側(cè)的面板上，面板可以被滑出，蓋在那疊卡片上。Feedly的“發(fā)現(xiàn)”界面也是同樣邏輯，只是位于右側(cè)。

二、讓設(shè)計更像印刷品

Material Design 設(shè)計原則

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

設(shè)計原則在feedly的運用

8點網(wǎng)格

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

顏色和圖像

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

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

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

三、有意義的轉(zhuǎn)場

　　Material Design 設(shè)計原則

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

設(shè)計原則在feedly的運用

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

表面的反饋

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

視覺連續(xù)

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

有形的表面

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

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

根據(jù)相同的方式，我還設(shè)計了在發(fā)現(xiàn)面板中選中某個話題的動效：

四、自適應(yīng)設(shè)計

Material Design 設(shè)計原則

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

設(shè)計原則在feedly的運用

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