正文前

從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)注重平臺(tái)差異化，做出更適合用戶使用的Android App。

正文闡述Feedly（one of most popular feed readers）的設(shè)計(jì)聯(lián)合創(chuàng)始人Arthur Bodolec如何把Material Design融入Feedly的探索和領(lǐng)悟。

Arthur Bodolec

開始

Google 前不久正式推出Android Lollipop（5.0）,介紹了其一些重大的變化及一個(gè)名為Material Design的全新視覺設(shè)計(jì)語言。隨著這個(gè)新的系統(tǒng)，Android正帶來一個(gè)包含視覺、動(dòng)畫效果和交互設(shè)計(jì)，并支持多平臺(tái)和設(shè)備的綜合規(guī)范。

在10月7日（2014年），我（Arthur Bodolec）參加了由Google主辦的研討會(huì)，Material Design用戶體驗(yàn)團(tuán)隊(duì)分享了這種設(shè)計(jì)語言在Android設(shè)計(jì)的深層次見解，并指點(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ì)未來版本設(shè)計(jì)走向。在接下來數(shù)月中，我們將從Material Design中獲取靈感，并融入在我們新Feedly中。

第二個(gè)目標(biāo)是從Feedly社區(qū)獲取用戶反饋。所以你們有任何意見的話，要立刻反饋給我們！

文章中，我不僅分享了這次設(shè)計(jì)的成果，而且還有一些我設(shè)計(jì)過程中的所思所感。

好啦，不再說太多，是時(shí)候深入Material Design！

概覽

在這次新設(shè)計(jì)，我負(fù)責(zé)Feedly主要的移動(dòng)界面。以下是Feedly Android版之前和之后新設(shè)計(jì)的對比展示。

Material Design化

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è)頁面上刻畫出來的。頁面有一個(gè)平滑背景顏色并可以作用于各種目的。一個(gè)典型的布局就是由多層頁面組成的。

準(zhǔn)則融入Feedly

Feedly一致沿用著與整個(gè)App架構(gòu)完美結(jié)合的隱喻感。它移動(dòng)體驗(yàn)的主要元素是一疊承載著文章的卡片。你可以向上滑動(dòng)每張卡片切換展示文章內(nèi)容。

Feedly采用抽屜式交互（Drawer），在主頁面左側(cè)劃出導(dǎo)航面板，覆蓋在內(nèi)容卡片上面。同樣，從右側(cè)劃出搜索面板，你就可以去發(fā)現(xiàn)新的信息源。

多層級元素

左右側(cè)滑面板

印刷形態(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保持一致性；不過，你最好要理解整個(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寬（12×8）。

網(wǎng)格基準(zhǔn)線規(guī)范

色彩&圖像

Google推薦把你的品牌色作為App第一色彩用在操作欄和狀態(tài)欄上。由于Feedly是一款閱讀式App，如果使用我們明亮的綠色在這兩欄的話，將會(huì)十分打擾你們閱讀內(nèi)容。所以我選擇淡灰色去設(shè)計(jì)成一個(gè)較少打擾的操作欄。

在左邊的抽屜式交互，我采用了我們品牌色突出每天的熱門話題，這種設(shè)計(jì)方式是很贊的。

圖像是灰常灰常之重要。在雜志式視圖，我采用了鋪滿全局的圖片樣式，表達(dá)熱門評論的文章，還用在搜索面板的已選擇話題頂部。

品牌色運(yùn)營 & 圖像化展示

有意義的轉(zhuǎn)場動(dòng)畫

Material Design 準(zhǔn)則

對于普通用戶來說，是關(guān)注一個(gè)應(yīng)用本身、還是關(guān)注這個(gè)應(yīng)用的元素從A點(diǎn)到B點(diǎn)轉(zhuǎn)變的過程，這種選擇往往有些難。謹(jǐn)慎編排的動(dòng)畫可以在有多步操作的過程中有效地引導(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，打開或關(guān)閉一篇文章時(shí)會(huì)出現(xiàn)最重要的轉(zhuǎn)場動(dòng)畫—從文章列表進(jìn)入到單個(gè)文章整個(gè)內(nèi)容的過程。為了幫助創(chuàng)造這個(gè)轉(zhuǎn)場動(dòng)畫，我遵循Material Design規(guī)范推薦的3個(gè)主要設(shè)計(jì)準(zhǔn)則。

表層響應(yīng)

當(dāng)用戶觸摸文章預(yù)覽區(qū)時(shí)，我使用了觸控漣漪效果（類似于水波紋擴(kuò)散的視覺效果）給他傳達(dá)即時(shí)交互反饋。觸控漣漪效果會(huì)覆蓋整個(gè)文章預(yù)覽區(qū)元素。

同樣，當(dāng)用戶關(guān)閉文章時(shí)，觸控漣漪效果也出現(xiàn)在操作欄上（左上角箭頭icon）。

視覺延續(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ì)展示在頁面上的。在這些情況下，當(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ū)域板塊升級作為一個(gè)層面，然后遵循著視覺延續(xù)性準(zhǔn)則，我們把升起的層面按手機(jī)屏幕比例擴(kuò)大作為整個(gè)頁面，文章正文就以淡入的效果展現(xiàn)出來。

把以上準(zhǔn)則結(jié)合起來融入設(shè)計(jì)后，以下為最終動(dòng)畫效果：

原文的動(dòng)畫（有少量的過渡不流暢）

來自Google 動(dòng)畫設(shè)計(jì)師John Schlemmer再優(yōu)化效果

在搜索面板選擇話題的動(dòng)畫效果也采用同樣的設(shè)計(jì)準(zhǔn)則。

選擇話題動(dòng)畫（感覺還差點(diǎn)小細(xì)節(jié)）

自適應(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)識到這樣一個(gè)憧憬–相同的底層系統(tǒng)架構(gòu)，可以在不同設(shè)備呈現(xiàn)不一樣的視圖樣式。每個(gè)視圖樣式和交互都為設(shè)備大小尺寸定制和變化適用，而顏色、圖像、層級以及空間相互關(guān)系仍保持不變。Material Design架構(gòu)提供靈活的組件和模式來幫助你建立一個(gè)可衡量的設(shè)計(jì)方式。

準(zhǔn)則融入Feedly

Feedly第一版上線就具備自適應(yīng)設(shè)計(jì)的能力?？ㄆ轿恼抡故臼亲钪饕赃m應(yīng)板塊。而最有挑戰(zhàn)性和趣味性之一是不同大小尺寸的雜志式視圖。如下圖所示，每個(gè)屏幕的大小尺寸要考慮到不同的和觸目的排列布局。

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

譯者：孤獨(dú)的老米；譯文地址：簡書