正文前
從Anroid 4.x開(kāi)始的Android Design到現(xiàn)在的Material Design（原質(zhì)設(shè)計(jì)）漫蛔，Android的設(shè)計(jì)語(yǔ)言再上升新高度狸驳。官方設(shè)計(jì)規(guī)范更細(xì)致献联，透徹地詮釋如何把設(shè)計(jì)規(guī)范融入品牌App的產(chǎn)品汁尺、設(shè)計(jì)卒废、開(kāi)發(fā)吨灭，我們更應(yīng)注重平臺(tái)差異化刚照，做出更適合用戶使用的Android App。
正文闡述Feedly（one of most popular feed readers）的設(shè)計(jì)聯(lián)合創(chuàng)始人Arthur Bodolec如何把Material Design融入Feedly的探索和領(lǐng)悟沃于。
開(kāi)始
Google 前不久正式推出Android Lollipop（5.0）,介紹了其一些重大的變化及一個(gè)名為Material Design的全新視覺(jué)設(shè)計(jì)語(yǔ)言涩咖。隨著這個(gè)新的系統(tǒng)海诲，Android正帶來(lái)一個(gè)包含視覺(jué)、動(dòng)畫效果和交互設(shè)計(jì)檩互，并支持多平臺(tái)和設(shè)備的綜合規(guī)范特幔。
在10月7日（2014年），我（Arthur Bodolec）參加了由Google主辦的研討會(huì)闸昨，Material Design用戶體驗(yàn)團(tuán)隊(duì)分享了這種設(shè)計(jì)語(yǔ)言在Android設(shè)計(jì)的深層次見(jiàn)解蚯斯，并指點(diǎn)如何運(yùn)用其在第三方App中。
我堅(jiān)信這新的Android App設(shè)計(jì)方式會(huì)是一條正確設(shè)計(jì)道路饵较。Material Design 架構(gòu)有著高度一致性和靈活變化性担猛，足以使自身融入任何App的設(shè)計(jì)。這就是我根據(jù)Material Design準(zhǔn)則重新設(shè)計(jì)Feedly的原因抢野。
這次探索之旅主要目標(biāo)是創(chuàng)造一個(gè)全新的懂酱、融合Material Design而全面提升的Feedly，這會(huì)引導(dǎo)著我們團(tuán)隊(duì)未來(lái)版本設(shè)計(jì)走向茄猫。在接下來(lái)數(shù)月中狈蚤，我們將從Material Design中獲取靈感，并融入在我們新Feedly中划纽。
第二個(gè)目標(biāo)是從Feedly社區(qū)獲取用戶反饋脆侮。所以你們有任何意見(jiàn)的話，要立刻反饋給我們勇劣！
文章中靖避，我不僅分享了這次設(shè)計(jì)的成果，而且還有一些我設(shè)計(jì)過(guò)程中的所思所感比默。
好啦幻捏，不再說(shuō)太多，是時(shí)候深入Material Design退敦！
概覽
在這次新設(shè)計(jì)粘咖，我負(fù)責(zé)Feedly主要的移動(dòng)界面。以下是Feedly Android版之前和之后新設(shè)計(jì)的對(duì)比展示侈百。
Material Design官方規(guī)范是很值得去細(xì)讀瓮下，但在Google的探討會(huì)上強(qiáng)調(diào)了4個(gè)核心準(zhǔn)則，我將其運(yùn)用在這次新設(shè)計(jì)歷程钝域。
可觸用層面
Material Design準(zhǔn)則
在Material Design里讽坏，每一個(gè)像素點(diǎn)都是由App在一個(gè)頁(yè)面上刻畫出來(lái)的。頁(yè)面有一個(gè)平滑背景顏色并可以作用于各種目的例证。一個(gè)典型的布局就是由多層頁(yè)面組成的路呜。
準(zhǔn)則融入Feedly
Feedly一致沿用著與整個(gè)App架構(gòu)完美結(jié)合的隱喻感。它移動(dòng)體驗(yàn)的主要元素是一疊承載著文章的卡片。你可以向上滑動(dòng)每張卡片切換展示文章內(nèi)容胀葱。
Feedly采用抽屜式交互（Drawer）漠秋，在主頁(yè)面左側(cè)劃出導(dǎo)航面板，覆蓋在內(nèi)容卡片上面抵屿。同樣庆锦，從右側(cè)劃出搜索面板，你就可以去發(fā)現(xiàn)新的信息源轧葛。
印刷形態(tài)設(shè)計(jì)
Material Design 準(zhǔn)則
新的視覺(jué)語(yǔ)言搂抒，在基礎(chǔ)元素的處理上，借鑒了傳統(tǒng)的印刷形態(tài)設(shè)計(jì)——排版尿扯、網(wǎng)格求晶、空間、比例衷笋、配色芳杏、圖像運(yùn)用等平面設(shè)計(jì)規(guī)范。在這些設(shè)計(jì)基礎(chǔ)下功夫右莱，不但可以愉悅用戶蚜锨，而且能夠構(gòu)建出視覺(jué)層級(jí)、視覺(jué)意義以及視覺(jué)焦點(diǎn)慢蜓。
準(zhǔn)則融入Feedly
8dp 網(wǎng)格
Google為設(shè)計(jì)師提供了優(yōu)秀的設(shè)計(jì)資源，幫助他們調(diào)整App主要元素的大小和位置郭膛，讓App保持一致性晨抡；不過(guò)，你最好要理解整個(gè)網(wǎng)格架構(gòu)系統(tǒng)则剃。盡管采用8dp平方基準(zhǔn)線網(wǎng)格耘柱，但在大多數(shù)時(shí)候，Android實(shí)際采用16dp作為邊緣間距棍现。除了我們的邊緣抽屜式交互遵循以上規(guī)范外调煎，我還把我們的雜志式視圖邊緣統(tǒng)一調(diào)整為16dp等一系列一致性設(shè)計(jì)。這些雜志式縮略圖為96px寬（12x8）己肮。
色彩&圖像
Google推薦把你的品牌色作為App第一色彩用在操作欄和狀態(tài)欄上士袄。由于Feedly是一款閱讀式App，如果使用我們明亮的綠色在這兩欄的話谎僻，將會(huì)十分打擾你們閱讀內(nèi)容娄柳。所以我選擇淡灰色去設(shè)計(jì)成一個(gè)較少打擾的操作欄。
在左邊的抽屜式交互艘绍，我采用了我們品牌色突出每天的熱門話題赤拒，這種設(shè)計(jì)方式是很贊的。
圖像是灰常灰常之重要挎挖。在雜志式視圖这敬，我采用了鋪滿全局的圖片樣式，表達(dá)熱門評(píng)論的文章蕉朵，還用在搜索面板的已選擇話題頂部鹅颊。
有意義的轉(zhuǎn)場(chǎng)動(dòng)畫
Material Design 準(zhǔn)則
對(duì)于普通用戶來(lái)說(shuō)，是關(guān)注一個(gè)應(yīng)用本身墓造、還是關(guān)注這個(gè)應(yīng)用的元素從A點(diǎn)到B點(diǎn)轉(zhuǎn)變的過(guò)程堪伍，這種選擇往往有些難。謹(jǐn)慎編排的動(dòng)畫可以在有多步操作的過(guò)程中有效地引導(dǎo)用戶的注意力觅闽，同時(shí)避免在版面變化或元素重組時(shí)造成困惑帝雇，及提高用戶體驗(yàn)的整體美感。動(dòng)畫式設(shè)計(jì)不僅應(yīng)當(dāng)優(yōu)美蛉拙，更應(yīng)當(dāng)服務(wù)于功能尸闸。
準(zhǔn)則融入Feedly
使用Feedly，打開(kāi)或關(guān)閉一篇文章時(shí)會(huì)出現(xiàn)最重要的轉(zhuǎn)場(chǎng)動(dòng)畫—從文章列表進(jìn)入到單個(gè)文章整個(gè)內(nèi)容的過(guò)程孕锄。為了幫助創(chuàng)造這個(gè)轉(zhuǎn)場(chǎng)動(dòng)畫吮廉，我遵循Material Design規(guī)范推薦的3個(gè)主要設(shè)計(jì)準(zhǔn)則。
表層響應(yīng)
當(dāng)用戶觸摸文章預(yù)覽區(qū)時(shí)畸肆，我使用了觸控漣漪效果（類似于水波紋擴(kuò)散的視覺(jué)效果）給他傳達(dá)即時(shí)交互反饋宦芦。觸控漣漪效果會(huì)覆蓋整個(gè)文章預(yù)覽區(qū)元素。
同樣轴脐，當(dāng)用戶關(guān)閉文章時(shí)调卑，觸控漣漪效果也出現(xiàn)在操作欄上（左上角箭頭icon）。
視覺(jué)延續(xù)性
當(dāng)你點(diǎn)擊文章預(yù)覽區(qū)進(jìn)入其中一篇文章時(shí)大咱，文章的縮略圖片會(huì)按比例放大并移動(dòng)到正文內(nèi)容區(qū)的正確位置展示恬涧。這保證了用戶能很好地理解觸摸的元素與最終所展示元素的關(guān)系。但有個(gè)難題碴巾，在一些情況下溯捆，文章的縮略圖片在正文部分段落后才出現(xiàn)。就這樣厦瓢，當(dāng)你不向下滑動(dòng)正文時(shí)提揍，圖片是不會(huì)展示在頁(yè)面上的。在這些情況下旷痕，當(dāng)進(jìn)入正文時(shí)碳锈，我們不得不展示正文內(nèi)容，圖片稍微隱藏處理欺抗。
可觸用層面
這可能是Material Design最重要的一個(gè)方面售碳。在這準(zhǔn)則下，我們想展示內(nèi)容是如何刻印上可觸用層面的。當(dāng)用戶點(diǎn)擊文章預(yù)覽區(qū)時(shí)贸人，我們會(huì)把點(diǎn)擊區(qū)域板塊升級(jí)作為一個(gè)層面间景，然后遵循著視覺(jué)延續(xù)性準(zhǔn)則，我們把升起的層面按手機(jī)屏幕比例擴(kuò)大作為整個(gè)頁(yè)面艺智，文章正文就以淡入的效果展現(xiàn)出來(lái)倘要。
把以上準(zhǔn)則結(jié)合起來(lái)融入設(shè)計(jì)后，以下為最終動(dòng)畫效果：
在搜索面板選擇話題的動(dòng)畫效果也采用同樣的設(shè)計(jì)準(zhǔn)則十拣。
自適應(yīng)設(shè)計(jì)（響應(yīng)式設(shè)計(jì)）
Material Design準(zhǔn)則
Material最終核心概念是創(chuàng)造一個(gè)自適應(yīng)設(shè)計(jì)封拧，從手表到大型電視等不同設(shè)備，它可以
根據(jù)大小尺寸和形狀自適應(yīng)設(shè)計(jì)樣式夭问。自適應(yīng)設(shè)計(jì)技術(shù)給我們認(rèn)識(shí)到這樣一個(gè)憧憬--相同的底層系統(tǒng)架構(gòu)泽西，可以在不同設(shè)備呈現(xiàn)不一樣的視圖樣式。每個(gè)視圖樣式和交互都為設(shè)備大小尺寸定制和變化適用缰趋，而顏色捧杉、圖像、層級(jí)以及空間相互關(guān)系仍保持不變秘血。Material Design架構(gòu)提供靈活的組件和模式來(lái)幫助你建立一個(gè)可衡量的設(shè)計(jì)方式味抖。
準(zhǔn)則融入Feedly
Feedly第一版上線就具備自適應(yīng)設(shè)計(jì)的能力』伊福卡片式文章展示是最主要自適應(yīng)板塊仔涩。而最有挑戰(zhàn)性和趣味性之一是不同大小尺寸的雜志式視圖。如下圖所示谋竖，每個(gè)屏幕的大小尺寸要考慮到不同的和觸目的排列布局红柱。
