藍藍設計( www.tuitetiyu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供有效的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

每一個扁平化界面設計，都是我們的心靈碰撞致力于最棒的 metro ui 設計

來源：優設網

 如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

編者按：上一篇關于 Feedly UI設計實戰的文章，實際上算是Feedly團隊去谷歌總部交流學習的經驗總結，按照Material Design的規范設計了界面，但是并非最終的版本。重返谷歌總部在此交流之后，Feedly 團隊最終作出原型，并完成了整個APP改版，這篇文章就由此而來。

幾周之前，我們在谷歌總部參加了一個Material Design的研討會，在那里我們探索了一下Feedly 如果遵循Material Design的設計規范會是什么樣子，并隨后撰寫了一篇文章《MATERIAL DESIGN實戰！FEEDLY創始人聊聊改版實戰經驗》，做了簡單的經驗分享。

2月10日，我和我的團隊成員Edwin與Sean 再次回到了Google總部，同Material Design團隊更深入地探討了設計技巧。坦率的講，谷歌的藝術總監Rachel Been 真心是我們的良師益友，她同我們詳細講述了Material Design 的幾個核心設計原則。

通過在Google的車庫長達2年的交流，我們為Feedly真正意義上完成了一個可運行可交互的設計原型。通過幾周時間的打磨細化之后，我們最終完成了第一次符合 Material Design 的產品。現在你已經可以在Google Play上下載版的Feedly了。（國內的朋友可以在諸如酷市場這樣的APP軟件商店下載到來自Google Play 的原版應用）

情感化體驗設計

在Google的這兩天，我們專注于重新思考用戶探索體驗的視覺設計。當用戶剛剛使用Feedly的時候，會看到APP的介紹，并且通過逐步引導開始構建適合用戶自己的新聞和信息源，而這個過程就是我們所說的用戶探索體驗。

面對這個環節，Rachel 主要的設計方向是讓這個過程的體驗更富于情感，更加身臨其境，所以她提出了以下倡導：

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

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

我們將這些想法納入到Feedly的發現體驗設計中，這部分的界面由兩屏組成：

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

“搜索結果”
搜索結果界面展示了那些與話題或搜索關鍵詞相匹配的博客與網站。

使用紙模來制作發現體驗環節的原型。

探索

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

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

所以我們決定更大膽的視覺設計和更大的卡片。我們還為每個卡片列出了子話題，確保用戶在選擇卡片的時候，能夠明白他們所探索的站點的類型。舉個例子，我們在“設計”的卡片下面會列出“建筑”、“平面設計”和“UI設計”。為了防止列表太長并難于瀏覽，我們參考最初的6個原則，為這些子話題設計了更小的卡片。

搜索結果

通過選擇話題或者關鍵詞來搜索之后，我們習慣于使用扁平化的列表來呈現結果，但是這一會存在以下缺陷：

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

上面的這些問題最終導致讀者很難決定將哪些網站添加到他們的Feedly源中。

其實我們也很想看看，如果完全遵循Rachel的原則和建議，使用更多策劃和推薦的內容與情感化設計之后，整個應用會是什么樣的。實際上，這些設計原則與我們一直在做的“收藏分享”功能不謀而合。于是，我們在設計過程中，納入了這一功能，使得搜索結果更加有趣了。

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

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

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

當然，我們還對側邊欄、內容列表等部分進行了Material Design式的設計，確保整體體驗一致。

 

關于動效

在我們上一篇文章中，我們提到了許多動效設計的問題。這次，我們同Google的動效設計師 John Schlemmer 共同完成了許多動效設計，當你打開和關閉文章的時候，你們會看到這些炫酷的效果。這些效果許多都是John想出來的，實際效果也非常贊：這些動效響應都非常迅速（300ms以內），并且與文章結合得非常不錯。

當然，還有一些動效還稍微有點棘手，暫時沒有放在的版本中，不過你可以期待它在未來的更新中出現。

結語

當然，這次的文章僅僅介紹了Feedly在進行Material Design設計過程中，主要的兩個功能的改版經驗，希望你能從中獲得幫助。

【加上這三篇，Material design學習資料就夠了！】

Material design到底有哪些過人之處？來這兒學習！
《超全面總結！深聊MATERIAL DESIGN引領的設計趨勢》

同樣來自學霸的自學筆記，干貨滿滿！
《學霸的自學筆記！Material Design設計規范學習心得》

谷歌自家設計師對它的看法與實踐心得：
《超贊！谷歌設計師的Material Design實踐心得》

原文地址：medium
優設譯者：@陳子木

「子木說」

轉眼間Google Reader快“犧牲”兩年了，當你高舉“繼承者”大旗的應用、服務和APP基本也都沒剩下幾個了，這其中依然存活，并且走出自己道路的，Feedly 算是其中一個。現在的Feedly 也不再苑囿于使用Google、Facebook和Twitter帳號，你可以使用微軟的Outlook帳號和Evernote的服務來登錄，考慮到這款應用優秀的設計和完備的服務，如果你是RSS重度用戶，不妨來一發。當然，如果你因為某些眾所周知的原因，網絡訪問不流暢的話，可以試試這個（安卓版）。

本文由優設網原創翻譯，請尊重版權和譯者成果，轉摘請附上優設鏈接，違者必究。謝謝各位編輯同仁配合。