從6個方面，全面解構「百度閱讀Pro」的視覺設計！
前言：小編是個重度的閱讀產品使用者（做編輯這行不讀書怎麼行），幾乎用遍了網上的各種閱讀產品，最近在網上發現了一款非常低調的產品上線了，一查竟然是百度出品的，因為經常接觸百度系產品，這個產品的設計體驗和以往的都不同，然後就在網上搜索資料，查到了一位資深設計師對這個產品的評價，寫的非常誠懇（小編可以偷懶了），照搬過來如下：
從「形色字構質動」來評價「百度閱讀Pro」的視覺設計
By李天真（視覺設計師）：注：本次測評採用的手機為iPhone8，軟體版本為V1.0.1
△ 「百度閱讀Pro」app首頁
寫在前面
「形色字構質」是組成一個app視覺語言最基本的五個維度，而動效設計是UI設計的新趨勢，所以筆者將從形、色、字、構、質、動六個維度對「百度閱讀pro」的視覺設計進行分析和評價。
在此之前，我們需要對這六個維度進行簡單的介紹，明確「百度閱讀pro」app的產品定位與目標使用者。
由《你的閱讀專屬手冊》可知，「百度閱讀pro」的產品定位是「在百度閱讀app上提煉出來的以全場免費讀為主線，提供舒適的沉浸式閱讀體驗，為使用者推薦最為合適的書籍、找到所求，建立自己的私人圖書館」的app。
由「百度閱讀」app在2016年釋出的「使用者畫像資料報告」推測，「百度閱讀pro」的使用者年齡集中分佈在25-30歲區間，多為學生和白領。
△ 《你的閱讀專屬手冊》
一、形
「百度閱讀pro」有線型和MBE兩種風格的icon。其中TabBar中的四個導航icon採用了MBE風格，豐富了介面細節的同時也與其他icon有效地區分開來，簡約而不簡單，符合目標使用者的主流審美傾向。剩餘的icon均採用了線型風格，比起存在感較強的面型風格icon，對使用者的干擾較小，更有利於沉浸式閱讀體驗的打造。
icon的一致性做得很好，描邊控制在兩種尺寸，對描邊的埠、轉折都進行了圓角處理，同一區域各個icon的視覺尺寸統一和諧。這體現了「百度閱讀pro」的專業性，傳達了品牌形象。
二、色
「百度閱讀pro」的色彩運用十分克制、有序。醒目的品牌藍色作為點睛色突出重點資訊，其餘資訊根據優先順序分別採用不同飽和度的黑灰色。這一色彩體系提高了資訊的傳遞效率，符合「提供舒適的沉浸式閱讀體驗」的產品目標。過於豐富的色彩體系會分散使用者的注意力，而該app避開了這一陷阱。並且，使用者的閱讀場景既可能是安靜的室內，也可能是喧囂的地鐵，所以簡潔的配色能夠幫助使用者在不確定的閱讀環境下提高閱讀效率。
此外，這個app還有一個貼心的小細節。眾所周知，長時間用手機閱讀會引起眼睛不適，為了減輕使用者的壓力，「百度閱讀pro」在閱讀介面採用了色值為#f8f8f8的背景色，避免文字與背景對比過於強烈，更適於長時間閱讀。
該app的字型顏色不是常見的#333333、#666666、#999999搭配，而是帶有藍色的黑灰色，把品牌DNA融入介面設計中，在不干擾使用者的前提下提高品牌認知度。
三、字
「百度閱讀pro」採用了蘋方字型、方正中粗雅宋簡體、方正細雅宋簡體、Source Serif Pro Semibold四種字型。其中標題使用方正中粗雅宋簡體，閱讀介面正文用方正細雅宋簡體、重要數字用Source Serif Pro Semibold，其餘文字用蘋方字型。
△ 「百度閱讀pro」所用字型
宋體和襯線體為其增添了人文氣息，讓人聯想起傳統的紙質閱讀，為使用者營造一種閱讀氛圍，而且也提高了「百度閱讀pro」的品質感。當然，對於手機螢幕里長篇的正文采用黑體更好還是宋體更好，目前還沒有定論，但同樣是閱讀類app，「微信讀書」、「網易蝸牛讀書」、「輕芒」、「豆瓣閱讀」、「QQ閱讀」、「網易雲閱讀」用的都是黑體，而我個人的體驗也是在螢幕上黑體更適於長時間閱讀。
介面裡不同層級的資訊字號對比也比較清晰明確，使用者能夠快速獲取自己想要的資訊。
四、構
「百度閱讀pro」採用了大面積留白、去灰底、去分割線的佈局方式，利用舒適的間距劃分資訊，去掉一切不必要的元素，使使用者瀏覽儘可能的流暢無阻。這種佈局方式比較新穎獨特，給人留下深刻印象，貼合目標使用者的審美趨勢。並且欄目內容排版也比較簡潔大氣，內容層次分明，瀏覽節奏舒適。與「QQ閱讀」密集多變的佈局風格相比，「百度閱讀pro」顯然更有呼吸感、通透感，而沒有壓迫感。
五、質
「百度閱讀pro」在扁平風格的基礎上加入了微投影。和「豆瓣閱讀」的投影比起來，「百度閱讀pro」的投影自然舒適，過渡流暢，突出重要內容、增強空間感的同時，又避免過於搶眼。並且微投影僅用於突出書籍封面，使用原則明確，易於掌握。除此之外並無更多材質，圖示、元件都是乾淨清爽的扁平風格。這樣能最大限度地減少介面元素對使用者的干擾，讓其注意力集中在內容本身，體現了「提供舒適的沉浸式閱讀體驗」的初心。
當然然，像「微信讀書」一樣再特色頁面新增一點微材質，可以給使用者更多驚喜。
六、動
動效設計應該是「百度閱讀pro」最明顯的視覺瑕疵。平心而論，設計師在動效上花費的心思也不少，在過渡、載入等方面都設計了動效，但是還是有讓人遺憾的地方。
比如，首頁書籍切換時有明顯的卡頓現象，個人認為是因為被切換的書籍是在最後一刻突然轉換狀態，而不是逐漸改變不透明度；又比如，TabBar的圖示點選動效只是簡單的縮放，實際上可以像QQ一樣增加一點趣味性；還有，閱讀介面的時間動效非常搶眼，對我的閱讀和操作造成了干擾。
當然，還是有不錯的動效，比如進入閱讀介面時的翻書載入動效。可見設計師還是非常注重細節的，剛剛提到的瑕疵可能是技術、時間、產品需求的原因。相信在以後的版本里會逐步完善。
結論
綜上所述，「百度閱讀pro」實現了「提供舒適的沉浸式閱讀體驗」這一產品目標，也符合目標使用者的審美情趣，是一款在視覺設計上非常出色的app。對於普通使用者，可以去暢遊書海，對於設計師，可以去欣賞和學習其視覺細節。總而言之非常推薦！
當然以上就是小編照搬而來的，以上版權歸原作者所有哈，這款產品上線一個多月，在Apple Store上成功的被蘋果大大推薦了，蘋果大大推薦的都是設計非常優美的產品，這款產品也收到的非常多的好評。
小編比較好奇的是什麼樣的一個UX團隊做的這個產品，小編作為設計圈的小達人，進行了多方打聽，最後找到了這個團隊的負責人：狄濤（兼任百度EBG UC主席）。
經過狄濤老師介紹，原來這個是一個非常低調的團隊，團隊名稱：百度教育UE團隊，簡稱：EDUX。
團隊是在2017年才成立不久的，規模有50人左右，是百度非常專業的UX團隊之一，旗下擁有多款優秀的產品（如百度文庫、百度閱讀、百度智慧課堂等），常年在Apple Store教育類，圖書類排名前幾，每日服務的使用者也多達4千萬級別，狄濤老師說：「我們做的設計是一個體系，有靈魂的設計（產品思維），有感官溫度的設計（體驗為先），注重細節的設計（設計本質），這些是我們團隊設計體系的基礎構成，然後加以使用者精準人群分析，需求場景再現，資料論證驗證，延伸觸達共鳴，來不斷的完善這個體系，打造成功的產品。」
百度EDUX團隊的作品視訊：
△ OA==.html?spm=a2h3j.8428770.3416059.1" rel="nofollow,noindex" target="_blank">點選 檢視完整視訊
作品的展示視訊很震撼，後續小編也會繼續關注這個專業的設計團隊哦，歡迎大家繼續關注。
