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

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

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

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

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

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

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

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

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

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

總覽

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

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

一、有形的界面（Tangible Interfaces）

　　Material Design 設(shè)計(jì)原則

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

設(shè)計(jì)原則在feedly的運(yùn)用

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

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

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

Material Design 設(shè)計(jì)原則

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

設(shè)計(jì)原則在feedly的運(yùn)用

8點(diǎn)網(wǎng)格

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

顏色和圖像

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

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

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

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

　　Material Design 設(shè)計(jì)原則

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

設(shè)計(jì)原則在feedly的運(yùn)用

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

表面的反饋

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

視覺連續(xù)

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

有形的表面

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

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

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

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

Material Design 設(shè)計(jì)原則

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

設(shè)計(jì)原則在feedly的運(yùn)用

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