從6個方面，全面解構「百度閱讀Pro」的視覺設計！

前言：小編是個重度的閱讀產(chǎn)品使用者（做編輯這行不讀書怎么行），幾乎用遍了網(wǎng)上的各種閱讀產(chǎn)品，最近在網(wǎng)上發(fā)現(xiàn)了一款非常低調(diào)的產(chǎn)品上線了，一查竟然是百度出品的，因為經(jīng)常接觸百度系產(chǎn)品，這個產(chǎn)品的設計體驗和以往的都不同，然后就在網(wǎng)上搜索資料，查到了一位資深設計師對這個產(chǎn)品的評價，寫的非常誠懇（小編可以偷懶了），照搬過來如下：

從「形色字構質(zhì)動」來評價「百度閱讀Pro」的視覺設計

By李天真（視覺設計師）：注：本次測評采用的手機為iPhone8，軟件版本為V1.0.1

△ 「百度閱讀Pro」app首頁

寫在前面

「形色字構質(zhì)」是組成一個app視覺語言最基本的五個維度，而動效設計是UI設計的新趨勢，所以筆者將從形、色、字、構、質(zhì)、動六個維度對「百度閱讀pro」的視覺設計進行分析和評價。

在此之前，我們需要對這六個維度進行簡單的介紹，明確「百度閱讀pro」app的產(chǎn)品定位與目標用戶。

由《你的閱讀專屬手冊》可知，「百度閱讀pro」的產(chǎn)品定位是「在百度閱讀app上提煉出來的以全場免費讀為主線，提供舒適的沉浸式閱讀體驗，為用戶推薦最為合適的書籍、找到所求，建立自己的私人圖書館」的app。

由「百度閱讀」app在2016年發(fā)布的「用戶畫像數(shù)據(jù)報告」推測，「百度閱讀pro」的用戶年齡集中分布在25-30歲區(qū)間，多為學生和白領。

△ 《你的閱讀專屬手冊》

一、形

「百度閱讀pro」有線型和MBE兩種風格的icon。其中TabBar中的四個導航icon采用了MBE風格，豐富了界面細節(jié)的同時也與其他icon有效地區(qū)分開來，簡約而不簡單，符合目標用戶的主流審美傾向。剩余的icon均采用了線型風格，比起存在感較強的面型風格icon，對用戶的干擾較小，更有利于沉浸式閱讀體驗的打造。

icon的一致性做得很好，描邊控制在兩種尺寸，對描邊的端口、轉(zhuǎn)折都進行了圓角處理，同一區(qū)域各個icon的視覺尺寸統(tǒng)一和諧。這體現(xiàn)了「百度閱讀pro」的專業(yè)性，傳達了品牌形象。

二、色

「百度閱讀pro」的色彩運用十分克制、有序。醒目的品牌藍色作為點睛色突出重點信息，其余信息根據(jù)優(yōu)先級分別采用不同飽和度的黑灰色。這一色彩體系提高了信息的傳遞效率，符合「提供舒適的沉浸式閱讀體驗」的產(chǎn)品目標。過于豐富的色彩體系會分散用戶的注意力，而該app避開了這一陷阱。并且，用戶的閱讀場景既可能是安靜的室內(nèi)，也可能是喧囂的地鐵，所以簡潔的配色能夠幫助用戶在不確定的閱讀環(huán)境下提高閱讀效率。

此外，這個app還有一個貼心的小細節(jié)。眾所周知，長時間用手機閱讀會引起眼睛不適，為了減輕用戶的壓力，「百度閱讀pro」在閱讀界面采用了色值為#f8f8f8的背景色，避免文字與背景對比過于強烈，更適于長時間閱讀。

該app的字體顏色不是常見的#333333、#666666、#999999搭配，而是帶有藍色的黑灰色，把品牌DNA融入界面設計中，在不干擾用戶的前提下提高品牌認知度。

三、字

「百度閱讀pro」采用了蘋方字體、方正中粗雅宋簡體、方正細雅宋簡體、Source Serif Pro Semibold四種字體。其中標題使用方正中粗雅宋簡體，閱讀界面正文用方正細雅宋簡體、重要數(shù)字用Source Serif Pro Semibold，其余文字用蘋方字體。

△ 「百度閱讀pro」所用字體

宋體和襯線體為其增添了人文氣息，讓人聯(lián)想起傳統(tǒng)的紙質(zhì)閱讀，為用戶營造一種閱讀氛圍，而且也提高了「百度閱讀pro」的品質(zhì)感。當然，對于手機屏幕里長篇的正文采用黑體更好還是宋體更好，目前還沒有定論，但同樣是閱讀類app，「微信讀書」、「網(wǎng)易蝸牛讀書」、「輕芒」、「豆瓣閱讀」、「QQ閱讀」、「網(wǎng)易云閱讀」用的都是黑體，而我個人的體驗也是在屏幕上黑體更適于長時間閱讀。

界面里不同層級的信息字號對比也比較清晰明確，用戶能夠快速獲取自己想要的信息。

四、構

「百度閱讀pro」采用了大面積留白、去灰底、去分割線的布局方式，利用舒適的間距劃分信息，去掉一切不必要的元素，使用戶瀏覽盡可能的流暢無阻。這種布局方式比較新穎獨特，給人留下深刻印象，貼合目標用戶的審美趨勢。并且欄目內(nèi)容排版也比較簡潔大氣，內(nèi)容層次分明，瀏覽節(jié)奏舒適。與「QQ閱讀」密集多變的布局風格相比，「百度閱讀pro」顯然更有呼吸感、通透感，而沒有壓迫感。

五、質(zhì)

「百度閱讀pro」在扁平風格的基礎上加入了微投影。和「豆瓣閱讀」的投影比起來，「百度閱讀pro」的投影自然舒適，過渡流暢，突出重要內(nèi)容、增強空間感的同時，又避免過于搶眼。并且微投影僅用于突出書籍封面，使用原則明確，易于掌握。除此之外并無更多材質(zhì)，圖標、組件都是干凈清爽的扁平風格。這樣能最大限度地減少界面元素對用戶的干擾，讓其注意力集中在內(nèi)容本身，體現(xiàn)了「提供舒適的沉浸式閱讀體驗」的初心。

當然，像「微信讀書」一樣再特色頁面添加一點微材質(zhì)，可以給用戶更多驚喜。

六、動

動效設計應該是「百度閱讀pro」最明顯的視覺瑕疵。平心而論，設計師在動效上花費的心思也不少，在過渡、加載等方面都設計了動效，但是還是有讓人遺憾的地方。

比如，首頁書籍切換時有明顯的卡頓現(xiàn)象，個人認為是因為被切換的書籍是在最后一刻突然轉(zhuǎn)換狀態(tài)，而不是逐漸改變不透明度；又比如，TabBar的圖標點擊動效只是簡單的縮放，實際上可以像QQ一樣增加一點趣味性；還有，閱讀界面的時間動效非常搶眼，對我的閱讀和操作造成了干擾。

當然，還是有不錯的動效，比如進入閱讀界面時的翻書加載動效。可見設計師還是非常注重細節(jié)的，剛剛提到的瑕疵可能是技術、時間、產(chǎn)品需求的原因。相信在以后的版本里會逐步完善。

結論

綜上所述，「百度閱讀pro」實現(xiàn)了「提供舒適的沉浸式閱讀體驗」這一產(chǎn)品目標，也符合目標用戶的審美情趣，是一款在視覺設計上非常出色的app。對于普通用戶，可以去暢游書海，對于設計師，可以去欣賞和學習其視覺細節(jié)。總而言之非常推薦！

當然以上就是小編照搬而來的，以上版權歸原作者所有哈，這款產(chǎn)品上線一個多月，在Apple Store上成功的被蘋果大大推薦了，蘋果大大推薦的都是設計非常優(yōu)美的產(chǎn)品，這款產(chǎn)品也收到的非常多的好評。

小編比較好奇的是什么樣的一個UX團隊做的這個產(chǎn)品，小編作為設計圈的小達人，進行了多方打聽，最后找到了這個團隊的負責人：狄濤（兼任百度EBG UC主席）。

經(jīng)過狄濤老師介紹，原來這個是一個非常低調(diào)的團隊，團隊名稱：百度教育UE團隊，簡稱：EDUX。

團隊是在2017年才成立不久的，規(guī)模有50人左右，是百度非常專業(yè)的UX團隊之一，旗下?lián)碛卸嗫顑?yōu)秀的產(chǎn)品（如百度文庫、百度閱讀、百度智慧課堂等），常年在Apple Store教育類，圖書類排名前幾，每日服務的用戶也多達4千萬級別，狄濤老師說：「我們做的設計是一個體系，有靈魂的設計（產(chǎn)品思維），有感官溫度的設計（體驗為先），注重細節(jié)的設計（設計本質(zhì)），這些是我們團隊設計體系的基礎構成，然后加以用戶精準人群分析，需求場景再現(xiàn)，數(shù)據(jù)論證驗證，延伸觸達共鳴，來不斷的完善這個體系，打造成功的產(chǎn)品。」

百度EDUX團隊的作品視頻：

△ 點擊查看完整視頻

作品的展示視頻很震撼，后續(xù)小編也會繼續(xù)關注這個專業(yè)的設計團隊哦，歡迎大家繼續(xù)關注。