起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識不一樣的百度閱讀Pro——百度EDUX
本篇文章從形、色、字、構(gòu)、質(zhì)、動(dòng)六個(gè)維度分別進(jìn)行解讀，為大家展示了一款不一樣的閱讀產(chǎn)品，其設(shè)計(jì)來自百度教育UE團(tuán)隊(duì)（EDUX），感興趣的小伙伴可以前去體驗(yàn)一番。
前言：小編是個(gè)重度的閱讀產(chǎn)品使用者（做編輯這行不讀書怎么行），幾乎用遍了網(wǎng)上的各種閱讀產(chǎn)品，最近在網(wǎng)上發(fā)現(xiàn)了一款非常低調(diào)的產(chǎn)品上線了，一查竟然是百度出品的，因?yàn)榻?jīng)常接觸百度系產(chǎn)品，這個(gè)產(chǎn)品的設(shè)計(jì)體驗(yàn)和以往的都不同，然后就在網(wǎng)上搜索資料，查到了一位資深設(shè)計(jì)師對這個(gè)產(chǎn)品的評價(jià)，寫的非常誠懇（小編可以偷懶了），照搬過來如下：
從“形色字構(gòu)質(zhì)動(dòng)”來評價(jià)“百度閱讀Pro”的視覺設(shè)計(jì)By李天真（視覺設(shè)計(jì)師）：注：本次測評采用的手機(jī)為iPhone8，軟件版本為V1.0.1。
“百度閱讀Pro”App首頁
寫在前面
“形色字構(gòu)質(zhì)”是組成一個(gè)App視覺語言最基本的五個(gè)維度，而動(dòng)效設(shè)計(jì)是UI設(shè)計(jì)的新趨勢，所以筆者將從形、色、字、構(gòu)、質(zhì)、動(dòng)六個(gè)維度對“百度閱讀Pro”的視覺設(shè)計(jì)進(jìn)行分析和評價(jià)。
在此之前，我們需要對這六個(gè)維度進(jìn)行簡單的介紹，明確“百度閱讀Pro”App的產(chǎn)品定位與目標(biāo)用戶。
由《你的閱讀專屬手冊》可知，“百度閱讀Pro”的產(chǎn)品定位是“在百度閱讀App上提煉出來的以全場免費(fèi)讀為主線，提供舒適的沉浸式閱讀體驗(yàn)，為用戶推薦最為合適的書籍、找到所求，建立自己的私人圖書館”的app。
由“百度閱讀”App在2016年發(fā)布的“用戶畫像數(shù)據(jù)報(bào)告”推測，“百度閱讀pro”的用戶年齡集中分布在25-30歲區(qū)間，多為學(xué)生和白領(lǐng)。
《你的閱讀專屬手冊》
一、形
“百度閱讀Pro”有線型和MBE兩種風(fēng)格的icon。其中TabBar中的四個(gè)導(dǎo)航icon采用了MBE風(fēng)格，豐富了界面細(xì)節(jié)的同時(shí)也與其他icon有效地區(qū)分開來，簡約而不簡單，符合目標(biāo)用戶的主流審美傾向。
剩余的icon均采用了線型風(fēng)格，比起存在感較強(qiáng)的面型風(fēng)格icon，對用戶的干擾較小，更有利于沉浸式閱讀體驗(yàn)的打造。
icon的一致性做得很好，描邊控制在兩種尺寸，對描邊的端口、轉(zhuǎn)折都進(jìn)行了圓角處理，同一區(qū)域各個(gè)icon的視覺尺寸統(tǒng)一和諧。這體現(xiàn)了“百度閱讀Pro”的專業(yè)性，傳達(dá)了品牌形象。
二、色
“百度閱讀Pro”的色彩運(yùn)用十分克制、有序。醒目的品牌藍(lán)色作為點(diǎn)睛色突出重點(diǎn)信息，其余信息根據(jù)優(yōu)先級分別采用不同飽和度的黑灰色。這一色彩體系提高了信息的傳遞效率，符合“提供舒適的沉浸式閱讀體驗(yàn)”的產(chǎn)品目標(biāo)。
過于豐富的色彩體系會(huì)分散用戶的注意力，而該App避開了這一陷阱。并且，用戶的閱讀場景既可能是安靜的室內(nèi)，也可能是喧囂的地鐵，所以簡潔的配色能夠幫助用戶在不確定的閱讀環(huán)境下提高閱讀效率。
此外，這個(gè)App還有一個(gè)貼心的小細(xì)節(jié)。眾所周知，長時(shí)間用手機(jī)閱讀會(huì)引起眼睛不適，為了減輕用戶的壓力，“百度閱讀pro”在閱讀界面采用了色值為#f8f8f8的背景色，避免文字與背景對比過于強(qiáng)烈，更適于長時(shí)間閱讀。
該App的字體顏色不是常見的#333333、#666666、#999999搭配，而是帶有藍(lán)色的黑灰色，把品牌DNA融入界面設(shè)計(jì)中，在不干擾用戶的前提下提高品牌認(rèn)知度。
三、字
“百度閱讀Pro”采用了蘋方字體、方正中粗雅宋簡體、方正細(xì)雅宋簡體、Source Serif Pro Semibold四種字體。
其中標(biāo)題使用方正中粗雅宋簡體，閱讀界面正文用方正細(xì)雅宋簡體、重要數(shù)字用Source Serif Pro Semibold，其余文字用蘋方字體。
“百度閱讀pro”所用字體
宋體和襯線體為其增添了人文氣息，讓人聯(lián)想起傳統(tǒng)的紙質(zhì)閱讀，為用戶營造一種閱讀氛圍，而且也提高了“百度閱讀pro”的品質(zhì)感。
當(dāng)然，對于手機(jī)屏幕里長篇的正文采用黑體更好還是宋體更好，目前還沒有定論，但同樣是閱讀類app，“微信讀書”、“網(wǎng)易蝸牛讀書”、“輕芒”、“豆瓣閱讀”、“QQ閱讀”、“網(wǎng)易云閱讀”用的都是黑體，而我個(gè)人的體驗(yàn)也是在屏幕上黑體更適于長時(shí)間閱讀。
界面里不同層級的信息字號對比也比較清晰明確，用戶能夠快速獲取自己想要的信息。
四、構(gòu)
“百度閱讀Pro”采用了大面積留白、去灰底、去分割線的布局方式，利用舒適的間距劃分信息，去掉一切不必要的元素，使用戶瀏覽盡可能的流暢無阻。
這種布局方式比較新穎獨(dú)特，給人留下深刻印象，貼合目標(biāo)用戶的審美趨勢。并且欄目內(nèi)容排版也比較簡潔大氣，內(nèi)容層次分明，瀏覽節(jié)奏舒適。與“QQ閱讀”密集多變的布局風(fēng)格相比，“百度閱讀Pro”顯然更有呼吸感、通透感，而沒有壓迫感。
五、質(zhì)
“百度閱讀Pro”在扁平風(fēng)格的基礎(chǔ)上加入了微投影。和“豆瓣閱讀”的投影比起來，“百度閱讀Pro”的投影自然舒適，過渡流暢，突出重要內(nèi)容、增強(qiáng)空間感的同時(shí)，又避免過于搶眼。并且微投影僅用于突出書籍封面，使用原則明確，易于掌握。
除此之外并無更多材質(zhì)，圖標(biāo)、組件都是干凈清爽的扁平風(fēng)格。這樣能最大限度地減少界面元素對用戶的干擾，讓其注意力集中在內(nèi)容本身，體現(xiàn)了“提供舒適的沉浸式閱讀體驗(yàn)”的初心。
當(dāng)然然，像“微信讀書”一樣再特色頁面添加一點(diǎn)微材質(zhì)，可以給用戶更多驚喜。
六、動(dòng)
動(dòng)效設(shè)計(jì)應(yīng)該是“百度閱讀Pro”最明顯的視覺瑕疵。平心而論，設(shè)計(jì)師在動(dòng)效上花費(fèi)的心思也不少，在過渡、加載等方面都設(shè)計(jì)了動(dòng)效，但是還是有讓人遺憾的地方。
比如，首頁書籍切換時(shí)有明顯的卡頓現(xiàn)象，個(gè)人認(rèn)為是因?yàn)楸磺袚Q的書籍是在最后一刻突然轉(zhuǎn)換狀態(tài)，而不是逐漸改變不透明度；又比如，TabBar的圖標(biāo)點(diǎn)擊動(dòng)效只是簡單的縮放，實(shí)際上可以像QQ一樣增加一點(diǎn)趣味性；還有，閱讀界面的時(shí)間動(dòng)效非常搶眼，對我的閱讀和操作造成了干擾。
當(dāng)然，還是有不錯(cuò)的動(dòng)效，比如進(jìn)入閱讀界面時(shí)的翻書加載動(dòng)效。可見設(shè)計(jì)師還是非常注重細(xì)節(jié)的，剛剛提到的瑕疵可能是技術(shù)、時(shí)間、產(chǎn)品需求的原因。相信在以后的版本里會(huì)逐步完善。
結(jié)論
綜上所述，“百度閱讀Pro”實(shí)現(xiàn)了“提供舒適的沉浸式閱讀體驗(yàn)”這一產(chǎn)品目標(biāo)，也符合目標(biāo)用戶的審美情趣，是一款在視覺設(shè)計(jì)上非常出色的App。對于普通用戶，可以去暢游書海，對于設(shè)計(jì)師，可以去欣賞和學(xué)習(xí)其視覺細(xì)節(jié)?？偠灾?strong>非常推薦！
當(dāng)然以上就是小編照搬而來的，以上版權(quán)歸原作者所有哈，這款產(chǎn)品上線一個(gè)多月，在Apple Store上成功的被蘋果大大推薦了，蘋果大大推薦的都是設(shè)計(jì)非常優(yōu)美的產(chǎn)品，這款產(chǎn)品也收到的非常多的好評。
小編比較好奇的是什么樣的一個(gè)UX團(tuán)隊(duì)做的這個(gè)產(chǎn)品，小編作為設(shè)計(jì)圈的小達(dá)人，進(jìn)行了多方打聽，最后找到了這個(gè)團(tuán)隊(duì)的負(fù)責(zé)人：狄濤老師。經(jīng)過狄濤老師介紹，原來這個(gè)是一個(gè)非常低調(diào)的團(tuán)隊(duì)，團(tuán)隊(duì)名稱：百度教育UE團(tuán)隊(duì)，簡稱：EDUX。
團(tuán)隊(duì)是在2017年才成立不久的，是百度非常專業(yè)的UX團(tuán)隊(duì)之一，旗下?lián)碛卸嗫顑?yōu)秀的產(chǎn)品，常年在Apple Store教育類，圖書類排名前幾，每日服務(wù)的用戶也多達(dá)千萬級別。
狄濤老師說：“我們做的設(shè)計(jì)是一個(gè)體系，有靈魂的設(shè)計(jì)（產(chǎn)品思維），有感官溫度的設(shè)計(jì)（體驗(yàn)為先），注重細(xì)節(jié)的設(shè)計(jì)（設(shè)計(jì)本質(zhì)），這些是我們團(tuán)隊(duì)設(shè)計(jì)體系的基礎(chǔ)構(gòu)成，然后加以用戶精準(zhǔn)人群分析，需求場景再現(xiàn)，數(shù)據(jù)論證驗(yàn)證，延伸觸達(dá)共鳴，來不斷的完善這個(gè)體系，打造成功的產(chǎn)品。”
有興趣的小伙伴可以去看一下作品視頻，作品視頻的展示很震撼，后續(xù)小編也會(huì)繼續(xù)關(guān)注這個(gè)低調(diào)的設(shè)計(jì)團(tuán)隊(duì)哦，歡迎大家繼續(xù)關(guān)注。
本文由 @vudn2013 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自Unsplash，基于CC0協(xié)議
- 目前還沒評論，等你發(fā)揮！
