藍(lán)藍(lán)設(shè)計(jì)( www.li-bodun.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ì)

來(lái)源：優(yōu)設(shè)網(wǎng)

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

編者按：上一篇關(guān)于 Feedly UI設(shè)計(jì)實(shí)戰(zhàn)的文章，實(shí)際上算是Feedly團(tuán)隊(duì)去谷歌總部交流學(xué)習(xí)的經(jīng)驗(yàn)總結(jié)，按照Material Design的規(guī)范設(shè)計(jì)了界面，但是并非最終的版本。重返谷歌總部在此交流之后，F(xiàn)eedly 團(tuán)隊(duì)最終作出原型，并完成了整個(gè)APP改版，這篇文章就由此而來(lái)。

幾周之前，我們?cè)诠雀杩偛繀⒓恿艘粋€(gè)Material Design的研討會(huì)，在那里我們探索了一下Feedly 如果遵循Material Design的設(shè)計(jì)規(guī)范會(huì)是什么樣子，并隨后撰寫了一篇文章《MATERIAL DESIGN實(shí)戰(zhàn)！FEEDLY創(chuàng)始人聊聊改版實(shí)戰(zhàn)經(jīng)驗(yàn)》，做了簡(jiǎn)單的經(jīng)驗(yàn)分享。

2月10日，我和我的團(tuán)隊(duì)成員Edwin與Sean 再次回到了Google總部，同Material Design團(tuán)隊(duì)更深入地探討了設(shè)計(jì)技巧。坦率的講，谷歌的藝術(shù)總監(jiān)Rachel Been 真心是我們的良師益友，她同我們?cè)敿?xì)講述了Material Design 的幾個(gè)核心設(shè)計(jì)原則。

通過(guò)在Google的車庫(kù)長(zhǎng)達(dá)2年的交流，我們?yōu)镕eedly真正意義上完成了一個(gè)可運(yùn)行可交互的設(shè)計(jì)原型。通過(guò)幾周時(shí)間的打磨細(xì)化之后，我們最終完成了第一次符合 Material Design 的產(chǎn)品。現(xiàn)在你已經(jīng)可以在Google Play上下載版的Feedly了。（國(guó)內(nèi)的朋友可以在諸如酷市場(chǎng)這樣的APP軟件商店下載到來(lái)自Google Play 的原版應(yīng)用）

情感化體驗(yàn)設(shè)計(jì)

在Google的這兩天，我們專注于重新思考用戶探索體驗(yàn)的視覺(jué)設(shè)計(jì)。當(dāng)用戶剛剛使用Feedly的時(shí)候，會(huì)看到APP的介紹，并且通過(guò)逐步引導(dǎo)開始構(gòu)建適合用戶自己的新聞和信息源，而這個(gè)過(guò)程就是我們所說(shuō)的用戶探索體驗(yàn)。

面對(duì)這個(gè)環(huán)節(jié)，Rachel 主要的設(shè)計(jì)方向是讓這個(gè)過(guò)程的體驗(yàn)更富于情感，更加身臨其境，所以她提出了以下倡導(dǎo)：

• 視覺(jué)設(shè)計(jì)高于文本：如何用圖像替代單純的文本標(biāo)簽更好地呈現(xiàn)每個(gè)元素？
• 策劃優(yōu)于算法：我們能否基于人的策劃和想法來(lái)提供搜索結(jié)果，而非使用單一的算法來(lái)推薦最優(yōu)結(jié)果？
• 精選而非扁平的列表：讓搜索結(jié)果以不同層級(jí)呈現(xiàn)，顯示推薦的元素或內(nèi)容，而不是單純的列表，讓用戶能獲取最優(yōu)的內(nèi)容。
• 文章排版優(yōu)于圖片堆疊：使用動(dòng)態(tài)的視覺(jué)設(shè)計(jì)而非簡(jiǎn)單的靜態(tài)堆疊。這樣的設(shè)計(jì)尤其適用于“話題卡片”。
• 推薦優(yōu)于基本的搜索：如何在構(gòu)建核心用戶體驗(yàn)的時(shí)候，向用戶推薦相關(guān)內(nèi)容，而不是讓用戶專門去搜索特定內(nèi)容。

我們寫將這些原則寫在白板上，并且將其納入到原型設(shè)計(jì)中。我們并非要將所有原則一一實(shí)現(xiàn)，而是要借助它們獲取靈感。

我們將這些想法納入到Feedly的發(fā)現(xiàn)體驗(yàn)設(shè)計(jì)中，這部分的界面由兩屏組成：

“探索”
在這個(gè)地方，用戶可以搜索他們感興趣的內(nèi)容，也可以搜索他們向關(guān)注的特定站點(diǎn)。另外我們也為他們推薦了一些話題，幫助他們獲取靈感，找到他們想要的內(nèi)容。

“搜索結(jié)果”
搜索結(jié)果界面展示了那些與話題或搜索關(guān)鍵詞相匹配的博客與網(wǎng)站。

使用紙模來(lái)制作發(fā)現(xiàn)體驗(yàn)環(huán)節(jié)的原型。

探索

在“探索”這一屏，我們使用了柵格和圖片來(lái)代表一系列話題，我們將這一部分成為“Starter Kit（新手工具箱）”。但是設(shè)計(jì)這一界面有一些里痛點(diǎn)：

• 并列的三個(gè)卡片擠在一起讓它們難于被瀏覽
• 話題的可讀性較差
• 整個(gè)體驗(yàn)算不上身臨其境

所以我們決定更大膽的視覺(jué)設(shè)計(jì)和更大的卡片。我們還為每個(gè)卡片列出了子話題，確保用戶在選擇卡片的時(shí)候，能夠明白他們所探索的站點(diǎn)的類型。舉個(gè)例子，我們?cè)凇霸O(shè)計(jì)”的卡片下面會(huì)列出“建筑”、“平面設(shè)計(jì)”和“UI設(shè)計(jì)”。為了防止列表太長(zhǎng)并難于瀏覽，我們參考最初的6個(gè)原則，為這些子話題設(shè)計(jì)了更小的卡片。

搜索結(jié)果

通過(guò)選擇話題或者關(guān)鍵詞來(lái)搜索之后，我們習(xí)慣于使用扁平化的列表來(lái)呈現(xiàn)結(jié)果，但是這一會(huì)存在以下缺陷：

• 這個(gè)列表并不會(huì)讓用戶有參與感，更不會(huì)身臨其境
• 用戶很難知道搜索出來(lái)的網(wǎng)站和源到底是干什么的
• 我們很難向某些小眾讀者推薦那些真正炫酷的網(wǎng)站

上面的這些問(wèn)題最終導(dǎo)致讀者很難決定將哪些網(wǎng)站添加到他們的Feedly源中。

其實(shí)我們也很想看看，如果完全遵循Rachel的原則和建議，使用更多策劃和推薦的內(nèi)容與情感化設(shè)計(jì)之后，整個(gè)應(yīng)用會(huì)是什么樣的。實(shí)際上，這些設(shè)計(jì)原則與我們一直在做的“收藏分享”功能不謀而合。于是，我們?cè)谠O(shè)計(jì)過(guò)程中，納入了這一功能，使得搜索結(jié)果更加有趣了。

舉個(gè)例子，如果你選擇了“食物”話題，那么你將看到一個(gè)一組常見(jiàn)食物網(wǎng)站的合集，后面會(huì)跟著一組精心挑選的子話題：素食、健康、烘焙、雞尾酒，等等等等。所有的這些子話題都是由業(yè)界的意見(jiàn)領(lǐng)袖來(lái)策劃并創(chuàng)建的，比如來(lái)自 Smitten Kitchen 的 Deb Perelman，來(lái)自Food 52 的Amanda Hesser ,以及來(lái)自Love & Lemons 的 Jeanine Donofrio ，等等等等。這些專業(yè)和業(yè)界名人的策劃會(huì)使得推薦更加人性化，優(yōu)質(zhì)內(nèi)容更容易被發(fā)現(xiàn)。

最后，你可以使用“Add All”按鈕一鍵添加所有推薦內(nèi)容，幫你加快個(gè)性化閱讀列表的構(gòu)建。

策劃這些話題和內(nèi)容需要投入大量的工作，但是在我們看來(lái)，這些專業(yè)的推薦能夠迎合用戶探索的需求，最終會(huì)使得整個(gè)服務(wù)和之前截然不同。目前，這種運(yùn)作模式我們僅僅在食品這個(gè)分類中推行了，不過(guò)今后你會(huì)在更多的分類中看到這一的內(nèi)容推薦！

當(dāng)然，我們還對(duì)側(cè)邊欄、內(nèi)容列表等部分進(jìn)行了Material Design式的設(shè)計(jì)，確保整體體驗(yàn)一致。

 

關(guān)于動(dòng)效

在我們上一篇文章中，我們提到了許多動(dòng)效設(shè)計(jì)的問(wèn)題。這次，我們同Google的動(dòng)效設(shè)計(jì)師 John Schlemmer 共同完成了許多動(dòng)效設(shè)計(jì)，當(dāng)你打開和關(guān)閉文章的時(shí)候，你們會(huì)看到這些炫酷的效果。這些效果許多都是John想出來(lái)的，實(shí)際效果也非常贊：這些動(dòng)效響應(yīng)都非常迅速（300ms以內(nèi)），并且與文章結(jié)合得非常不錯(cuò)。

當(dāng)然，還有一些動(dòng)效還稍微有點(diǎn)棘手，暫時(shí)沒(méi)有放在的版本中，不過(guò)你可以期待它在未來(lái)的更新中出現(xiàn)。

結(jié)語(yǔ)

當(dāng)然，這次的文章僅僅介紹了Feedly在進(jìn)行Material Design設(shè)計(jì)過(guò)程中，主要的兩個(gè)功能的改版經(jīng)驗(yàn)，希望你能從中獲得幫助。

【加上這三篇，Material design學(xué)習(xí)資料就夠了！】

Material design到底有哪些過(guò)人之處？來(lái)這兒學(xué)習(xí)！
《超全面總結(jié)！深聊MATERIAL DESIGN引領(lǐng)的設(shè)計(jì)趨勢(shì)》

同樣來(lái)自學(xué)霸的自學(xué)筆記，干貨滿滿！
《學(xué)霸的自學(xué)筆記！Material Design設(shè)計(jì)規(guī)范學(xué)習(xí)心得》

谷歌自家設(shè)計(jì)師對(duì)它的看法與實(shí)踐心得：
《超贊！谷歌設(shè)計(jì)師的Material Design實(shí)踐心得》

原文地址：medium
優(yōu)設(shè)譯者：@陳子木

「子木說(shuō)」

轉(zhuǎn)眼間Google Reader快“犧牲”兩年了，當(dāng)你高舉“繼承者”大旗的應(yīng)用、服務(wù)和APP基本也都沒(méi)剩下幾個(gè)了，這其中依然存活，并且走出自己道路的，F(xiàn)eedly 算是其中一個(gè)?，F(xiàn)在的Feedly 也不再苑囿于使用Google、Facebook和Twitter帳號(hào)，你可以使用微軟的Outlook帳號(hào)和Evernote的服務(wù)來(lái)登錄，考慮到這款應(yīng)用優(yōu)秀的設(shè)計(jì)和完備的服務(wù)，如果你是RSS重度用戶，不妨來(lái)一發(fā)。當(dāng)然，如果你因?yàn)槟承┍娝苤脑?，網(wǎng)絡(luò)訪問(wèn)不流暢的話，可以試試這個(gè)（安卓版）。

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請(qǐng)尊重版權(quán)和譯者成果，轉(zhuǎn)摘請(qǐng)附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。