正文前
從Anroid 4.x開始的Android Design到現(xiàn)在的Material Design（原質(zhì)設(shè)計(jì)），Android的設(shè)計(jì)語言再上升新高度。官方設(shè)計(jì)規(guī)范更細(xì)致，透徹地詮釋如何把設(shè)計(jì)規(guī)范融入品牌App的產(chǎn)品、設(shè)計(jì)、開發(fā)，我們更應(yīng)注重平臺差異化，做出更適合用戶使用的Android App。
正文闡述Feedly（one of most popular feed readers）的設(shè)計(jì)聯(lián)合創(chuàng)始人Arthur Bodolec如何把Material Design融入Feedly的探索和領(lǐng)悟。
開始
Google 前不久正式推出Android Lollipop（5.0）,介紹了其一些重大的變化及一個名為Material Design的全新視覺設(shè)計(jì)語言。隨著這個新的系統(tǒng)，Android正帶來一個包含視覺、動畫效果和交互設(shè)計(jì)，并支持多平臺和設(shè)備的綜合規(guī)范。
在10月7日（2014年），我（Arthur Bodolec）參加了由Google主辦的研討會，Material Design用戶體驗(yàn)團(tuán)隊(duì)分享了這種設(shè)計(jì)語言在Android設(shè)計(jì)的深層次見解，并指點(diǎn)如何運(yùn)用其在第三方App中。
我堅(jiān)信這新的Android App設(shè)計(jì)方式會是一條正確設(shè)計(jì)道路。Material Design 架構(gòu)有著高度一致性和靈活變化性，足以使自身融入任何App的設(shè)計(jì)。這就是我根據(jù)Material Design準(zhǔn)則重新設(shè)計(jì)Feedly的原因。
這次探索之旅主要目標(biāo)是創(chuàng)造一個全新的、融合Material Design而全面提升的Feedly，這會引導(dǎo)著我們團(tuán)隊(duì)未來版本設(shè)計(jì)走向。在接下來數(shù)月中，我們將從Material Design中獲取靈感，并融入在我們新Feedly中。
第二個目標(biāo)是從Feedly社區(qū)獲取用戶反饋。所以你們有任何意見的話，要立刻反饋給我們！
文章中，我不僅分享了這次設(shè)計(jì)的成果，而且還有一些我設(shè)計(jì)過程中的所思所感。
好啦，不再說太多，是時候深入Material Design！
概覽
在這次新設(shè)計(jì)，我負(fù)責(zé)Feedly主要的移動界面。以下是Feedly Android版之前和之后新設(shè)計(jì)的對比展示。
Material Design官方規(guī)范是很值得去細(xì)讀，但在Google的探討會上強(qiáng)調(diào)了4個核心準(zhǔn)則，我將其運(yùn)用在這次新設(shè)計(jì)歷程。
可觸用層面
Material Design準(zhǔn)則
在Material Design里，每一個像素點(diǎn)都是由App在一個頁面上刻畫出來的。頁面有一個平滑背景顏色并可以作用于各種目的。一個典型的布局就是由多層頁面組成的。
準(zhǔn)則融入Feedly
Feedly一致沿用著與整個App架構(gòu)完美結(jié)合的隱喻感。它移動體驗(yàn)的主要元素是一疊承載著文章的卡片。你可以向上滑動每張卡片切換展示文章內(nèi)容。
Feedly采用抽屜式交互（Drawer），在主頁面左側(cè)劃出導(dǎo)航面板，覆蓋在內(nèi)容卡片上面。同樣，從右側(cè)劃出搜索面板，你就可以去發(fā)現(xiàn)新的信息源。
印刷形態(tài)設(shè)計(jì)
Material Design 準(zhǔn)則
新的視覺語言，在基礎(chǔ)元素的處理上，借鑒了傳統(tǒng)的印刷形態(tài)設(shè)計(jì)——排版、網(wǎng)格、空間、比例、配色、圖像運(yùn)用等平面設(shè)計(jì)規(guī)范。在這些設(shè)計(jì)基礎(chǔ)下功夫，不但可以愉悅用戶，而且能夠構(gòu)建出視覺層級、視覺意義以及視覺焦點(diǎn)。
準(zhǔn)則融入Feedly
8dp 網(wǎng)格
Google為設(shè)計(jì)師提供了優(yōu)秀的設(shè)計(jì)資源，幫助他們調(diào)整App主要元素的大小和位置，讓App保持一致性；不過，你最好要理解整個網(wǎng)格架構(gòu)系統(tǒng)。盡管采用8dp平方基準(zhǔn)線網(wǎng)格，但在大多數(shù)時候，Android實(shí)際采用16dp作為邊緣間距。除了我們的邊緣抽屜式交互遵循以上規(guī)范外，我還把我們的雜志式視圖邊緣統(tǒng)一調(diào)整為16dp等一系列一致性設(shè)計(jì)。這些雜志式縮略圖為96px寬（12x8）。
色彩&圖像
Google推薦把你的品牌色作為App第一色彩用在操作欄和狀態(tài)欄上。由于Feedly是一款閱讀式App，如果使用我們明亮的綠色在這兩欄的話，將會十分打擾你們閱讀內(nèi)容。所以我選擇淡灰色去設(shè)計(jì)成一個較少打擾的操作欄。
在左邊的抽屜式交互，我采用了我們品牌色突出每天的熱門話題，這種設(shè)計(jì)方式是很贊的。
圖像是灰?；页Ｖ匾?。在雜志式視圖，我采用了鋪滿全局的圖片樣式，表達(dá)熱門評論的文章，還用在搜索面板的已選擇話題頂部。
有意義的轉(zhuǎn)場動畫
Material Design 準(zhǔn)則
對于普通用戶來說，是關(guān)注一個應(yīng)用本身、還是關(guān)注這個應(yīng)用的元素從A點(diǎn)到B點(diǎn)轉(zhuǎn)變的過程，這種選擇往往有些難。謹(jǐn)慎編排的動畫可以在有多步操作的過程中有效地引導(dǎo)用戶的注意力，同時避免在版面變化或元素重組時造成困惑，及提高用戶體驗(yàn)的整體美感。動畫式設(shè)計(jì)不僅應(yīng)當(dāng)優(yōu)美，更應(yīng)當(dāng)服務(wù)于功能。
準(zhǔn)則融入Feedly
使用Feedly，打開或關(guān)閉一篇文章時會出現(xiàn)最重要的轉(zhuǎn)場動畫—從文章列表進(jìn)入到單個文章整個內(nèi)容的過程。為了幫助創(chuàng)造這個轉(zhuǎn)場動畫，我遵循Material Design規(guī)范推薦的3個主要設(shè)計(jì)準(zhǔn)則。
表層響應(yīng)
當(dāng)用戶觸摸文章預(yù)覽區(qū)時，我使用了觸控漣漪效果（類似于水波紋擴(kuò)散的視覺效果）給他傳達(dá)即時交互反饋。觸控漣漪效果會覆蓋整個文章預(yù)覽區(qū)元素。
同樣，當(dāng)用戶關(guān)閉文章時，觸控漣漪效果也出現(xiàn)在操作欄上（左上角箭頭icon）。
視覺延續(xù)性
當(dāng)你點(diǎn)擊文章預(yù)覽區(qū)進(jìn)入其中一篇文章時，文章的縮略圖片會按比例放大并移動到正文內(nèi)容區(qū)的正確位置展示。這保證了用戶能很好地理解觸摸的元素與最終所展示元素的關(guān)系。但有個難題，在一些情況下，文章的縮略圖片在正文部分段落后才出現(xiàn)。就這樣，當(dāng)你不向下滑動正文時，圖片是不會展示在頁面上的。在這些情況下，當(dāng)進(jìn)入正文時，我們不得不展示正文內(nèi)容，圖片稍微隱藏處理。
可觸用層面
這可能是Material Design最重要的一個方面。在這準(zhǔn)則下，我們想展示內(nèi)容是如何刻印上可觸用層面的。當(dāng)用戶點(diǎn)擊文章預(yù)覽區(qū)時，我們會把點(diǎn)擊區(qū)域板塊升級作為一個層面，然后遵循著視覺延續(xù)性準(zhǔn)則，我們把升起的層面按手機(jī)屏幕比例擴(kuò)大作為整個頁面，文章正文就以淡入的效果展現(xiàn)出來。
把以上準(zhǔn)則結(jié)合起來融入設(shè)計(jì)后，以下為最終動畫效果：
在搜索面板選擇話題的動畫效果也采用同樣的設(shè)計(jì)準(zhǔn)則。
自適應(yīng)設(shè)計(jì)（響應(yīng)式設(shè)計(jì)）
Material Design準(zhǔn)則
Material最終核心概念是創(chuàng)造一個自適應(yīng)設(shè)計(jì)，從手表到大型電視等不同設(shè)備，它可以
根據(jù)大小尺寸和形狀自適應(yīng)設(shè)計(jì)樣式。自適應(yīng)設(shè)計(jì)技術(shù)給我們認(rèn)識到這樣一個憧憬--相同的底層系統(tǒng)架構(gòu)，可以在不同設(shè)備呈現(xiàn)不一樣的視圖樣式。每個視圖樣式和交互都為設(shè)備大小尺寸定制和變化適用，而顏色、圖像、層級以及空間相互關(guān)系仍保持不變。Material Design架構(gòu)提供靈活的組件和模式來幫助你建立一個可衡量的設(shè)計(jì)方式。
準(zhǔn)則融入Feedly
Feedly第一版上線就具備自適應(yīng)設(shè)計(jì)的能力?？ㄆ轿恼抡故臼亲钪饕赃m應(yīng)板塊。而最有挑戰(zhàn)性和趣味性之一是不同大小尺寸的雜志式視圖。如下圖所示，每個屏幕的大小尺寸要考慮到不同的和觸目的排列布局。
