從用戶體驗(yàn)五要素分析——微信讀書

16 評論 19279 瀏覽 198 收藏 16 分鐘

本文從用戶體驗(yàn)五要素:表現(xiàn)層面、框架層 、戰(zhàn)略層、范圍層、結(jié)構(gòu)層,對微信讀書進(jìn)行了分析。

前言

互聯(lián)網(wǎng)發(fā)展的速度也加速了知識更新的速度,也許今天你還手握焦點(diǎn)技能,明天就可能被遺忘在角落。一應(yīng)俱全的網(wǎng)課、鋪天蓋地的資訊加速了我們這代人的知識焦慮。對于生活在這個時代的我們來說,既是幸運(yùn)也是挑戰(zhàn)。

魯迅先生說過:真的勇士,敢于直面慘淡的人生,敢于正視淋漓的鮮血。更何況,我們只是要直面知識焦慮,系統(tǒng)化的閱讀就能有效緩解這樣的焦慮。但內(nèi)心的OS:刷抖音太上癮了,打游戲太爽了,況且我對閱讀不感興趣呀……

有一款A(yù)PP,“它”能讓你關(guān)閉抖音,戒掉游戲,重拾閱讀興趣!它就是“微信讀書”,一款“讓閱讀不再孤獨(dú)”的APP。

在使用過過掌閱,藏書館等等APP之后,我終于找到了“微信讀書”,開始了每天半小時的閱讀之旅,并且樂在其中。

以下是我以用戶體驗(yàn)5要素為基準(zhǔn),由表現(xiàn)層到戰(zhàn)略層一步步抽絲剝繭的體驗(yàn)分析,不足之處,請多多指教。

體驗(yàn)環(huán)境:

  • 機(jī)型:iPhone 8 Plus
  • 系統(tǒng):iOS 12
  • App版本:4.4.2

一、微信讀書之——表現(xiàn)層

我將從:圖標(biāo)設(shè)計、整體設(shè)計風(fēng)格、配色、排版這4個方面展開分析~

1. 圖標(biāo)

仔細(xì)看,會發(fā)現(xiàn)是一本攤開的書,白色部分為書本攤開的側(cè)面,白色呼應(yīng)了市場上書籍的默認(rèn)顏色白色。再往上看,是大范圍的藍(lán)色,預(yù)示著“知識的海洋”。右下角有微信消息的圖案,清楚的點(diǎn)明了app實(shí)現(xiàn)讀者交流、閱讀式社交的產(chǎn)品亮點(diǎn),與“讓閱讀不再孤單”的slogan遙相呼應(yīng)。

圖標(biāo)-圖1

一個好的設(shè)計,應(yīng)該是如此:每一個布局,每一個元素,都有其價值、有緣由、有邏輯,這幾點(diǎn)微信讀書圖標(biāo)的設(shè)計都滿足,可以說是很完美的設(shè)計了。

不過,做過一些問卷調(diào)查,遺憾的發(fā)現(xiàn)很多用戶沒能察覺到圖標(biāo)是一本書攤開的樣子,因此我認(rèn)為在白色部分再加上一點(diǎn)淺灰色的似有若無的線條,可能會更完美。

2. 設(shè)計風(fēng)格

談到閱讀,我們腦海里會憧憬什么景象呢?一個窗明幾凈的書房,滿是書香的氣息,點(diǎn)上一支檀香。好不愜意,給我一個書房,我能看到地老天荒。

微信讀書采用了扁平化設(shè)計風(fēng)格,去除冗余、厚重和繁雜的裝飾效果,讓“閱讀內(nèi)容”本身重新作為核心被凸顯出來。

3個內(nèi)容頁面都十分明顯的突出了內(nèi)容部分,沒有過多的裝飾效果,讓用戶能夠更加專心的沉浸在閱讀中,不受其他元素的干擾。

微信讀書-圖2

3. 配色

APP的主色為藍(lán)色,從logo的顏色、底部tab切換時的顏色、設(shè)置頁面的開關(guān)色、每日一答等等頁面皆為藍(lán)色,奠定了APP的主色調(diào),配合一些小面積的輔助色。

界面配色符合界面的色彩搭配的比例 6:3:1,是比較舒服的配色,因?yàn)殚喿x需要一個干凈的環(huán)境,用戶才能專心于內(nèi)容的閱讀。

再來說說核心的閱讀頁面,閱讀界面則提供了白色、護(hù)眼綠色、紙皮黃色、黑夜模式的黑色,白/黑模式對應(yīng)白天閱讀和夜晚閱讀,而綠色、黃色則滿足了用戶護(hù)眼的心理需求。閱讀想法的輸入、查看選用了白字灰底的設(shè)計,不會與閱讀頁面形成強(qiáng)大的反差。

整體來說,配色還是非常的清爽、簡潔,使用起來不會有負(fù)擔(dān)感和累贅感。把APP也做一個人來看,眾所周知的穿衣搭配規(guī)則:穿在外面的衣服,不要超過3個顏色,否則就會讓人看上去顯得不清新,顯得累贅。

4. APP排版

1)整體版式

APP整體采用了常見的標(biāo)簽式底部導(dǎo)航模式,符合拇指熱區(qū)操作的一種導(dǎo)航模式。底部的4個標(biāo)簽分別為:發(fā)現(xiàn)、書架、故事、我的。對應(yīng)APP的4個重要模塊,可通過點(diǎn)擊標(biāo)簽進(jìn)行模塊間進(jìn)行快速的切換。

2)頁面版式

頁面版式大概可分為這幾個部分:信息的排布、圖片的使用、顏色的使用、留白的藝術(shù)。

以“發(fā)現(xiàn)”頁面為例,本頁面采用了非常流行的卡片式布局,它能直觀得突出書籍本身,達(dá)到向用戶推薦的目的。在信息的排布上,書籍相關(guān)訊息遵循了人們視覺焦點(diǎn)在頁面上半部分的規(guī)則,并且突出了書名的展示。

留白藝術(shù)在這里使用的非常到位,整個頁面除了書籍本身似乎看不到任何多余的東西,突出了“閱讀”的核心功能,底部好友在讀的設(shè)計再次點(diǎn)明了主題:讓閱讀不在孤單。

最貼心的當(dāng)屬卡片2端的留白,讓使用者很輕松就知道可以左右兩邊切換,很多的APP使用卡片式設(shè)計時就沒有考慮到這樣的細(xì)節(jié)問題。

微信讀書-圖3

二、微信讀書之——框架層

在微信讀書的表現(xiàn)層下,就蘊(yùn)藏著其框架層,我們來看看,微信讀書是怎么通過框架層來優(yōu)化設(shè)計的布局的。

以核心的閱讀頁面為例,閱讀的時候,頁面頂部有章節(jié)信息,讓用戶清楚地知道自己處在哪個章節(jié)的閱讀。底部帶有當(dāng)前頁面的想法數(shù)量,讓用戶感覺到他不是一個人在閱讀,再次點(diǎn)明“讓閱讀不再孤單”的slogan。右下角的前頁面數(shù)/總頁數(shù)的顯示,與紙質(zhì)書的頁碼呼應(yīng),符合用戶閱讀習(xí)慣。

微信讀書-圖4

頁面的其他操作在用戶點(diǎn)擊頁面空白處,此頁面相關(guān)的操作按鈕展示出來,其中較為突出的功能是“聽”以及“想法輸入框”,當(dāng)用戶的手勢操作不再是左滑的時候,說明用戶不是要進(jìn)行下一頁切換的操作,此時出現(xiàn)頁面的操作按鈕比較符合用戶操作習(xí)慣。

當(dāng)點(diǎn)擊劃線的內(nèi)容時,展示此內(nèi)容對應(yīng)的閱讀用戶想法,想法輸入框固定在底部,方便閱讀者隨時點(diǎn)擊輸入內(nèi)容,而想法列表會根據(jù)劃線內(nèi)容在屏幕中的位置來改變,是為了方便用戶在看想法的時候,不遮擋劃線內(nèi)容,從而達(dá)到用戶既可以查看劃線內(nèi)容,同時還能輸入想法。

再來看看書城頁面,一般來說,一個頁面的首屏展示的內(nèi)容就足夠我們看出主要的設(shè)計思想和想要展示的重點(diǎn)信息了。

微信讀書-圖5

頂欄是頁面標(biāo)題和搜索欄,然后是4類文章的導(dǎo)航。除此之外“猜你喜歡”部分成了整個首屏內(nèi)容的視覺焦點(diǎn),也就是用戶一進(jìn)入頁面就會第一眼看到的地方——用戶喜歡的書籍推薦。=

再往下就是不同維度,不同分類的書籍推薦,每種書籍推薦一般為3-6本書,每屏承載1-2種書籍推薦,點(diǎn)擊查看全部跳轉(zhuǎn)到對應(yīng)類別的書籍頁面。

這種頁面設(shè)計方式,讓信息層級劃分比較明顯,主次分明,符合瀏覽習(xí)慣,用戶使用時也不會眼花繚亂。

三、微信讀書之——結(jié)構(gòu)層

結(jié)構(gòu)層我們分2部分來分析:信息架構(gòu)、交互設(shè)計

1. 信息架構(gòu)

APP整體采用了常見的標(biāo)簽式底部導(dǎo)航模式,符合拇指熱區(qū)操作的一種導(dǎo)航模式。底部的4個標(biāo)簽分別為:發(fā)現(xiàn)、書架、故事、我的。對應(yīng)APP的4個重要模塊,可通過點(diǎn)擊標(biāo)簽進(jìn)行模塊間進(jìn)行快速的切換

看書的第一步是找到一本書,所以“發(fā)現(xiàn)”放在底部標(biāo)簽的第一位。打開微信讀書的目的是看書,因此“書架”緊隨“發(fā)現(xiàn)”放在底部標(biāo)簽的第二位。“我的”頁面位置與行業(yè)大部分的APP一樣,在最右邊,“故事”模塊自然而然就緊隨其左了。

整體信息架構(gòu)比較清晰,也符合用戶的操作習(xí)慣。

2. 交互設(shè)計

不知道大家發(fā)現(xiàn)沒有,在閱讀場景下關(guān)閉APP后再打開APP時,會自動幫你把上次閱讀的書籍打開到你最后閱讀的頁面,這交互實(shí)在是很貼心。這相當(dāng)于我們紙質(zhì)閱讀中的書簽,這樣,用戶再次打開書籍的時候,就不會因?yàn)檎也坏缴洗伍喿x的內(nèi)容而苦惱了。

以及閱讀界面,有人劃過線的句子會以虛線形式顯示出來,如果閱讀的人也想標(biāo)記,只需隨意點(diǎn)擊虛線的任何地方就會自動選中虛線部分內(nèi)容,無需用戶手動從文字開頭到結(jié)尾再畫一遍。忙忙書海里,既然能選到同一本書,某種程度上來說,這些用戶也是有一定的共鳴的。因此這個交互也非常實(shí)用。

諸如此類有好的交互還有許多,這里就不一一敘述了。

三、微信讀書之——范圍層

要在移動端滿足用戶閱讀的需求,我們需要什么?想象下在實(shí)際生活中,當(dāng)你需要閱讀的時候,你需要什么?是不是閑的去到圖書館找到一本或者多本你喜歡的書籍?而去圖書館通常需要登記人員的信息通過這些信息來與用戶所借的書籍相關(guān)聯(lián)

基礎(chǔ)需求:用戶個人的賬號信息,用來管理用戶的個人信息以及書籍的借還情況等

而基礎(chǔ)需求之后便是閱讀的核心需求,也就是如何找到用戶喜愛的書籍進(jìn)行閱讀。

第一層需求:快速找到用戶喜歡的書籍進(jìn)行閱讀。找到書籍后,書籍存放在哪里?當(dāng)有不同類別的書籍怎么放置?書籍閱讀環(huán)境是怎么樣的?閱讀過程需要哪些工具?書籍看完了不知道該看什么時怎么辦?等等需求也就隨之而出。

而當(dāng)用戶已經(jīng)確定了要閱讀的書籍后,進(jìn)入閱讀階段,在讀到經(jīng)典段落或篇幅時,會不會情不自禁的抒發(fā)一些感慨,如此第二層需求便也呼之欲出。

第二層需求:做閱讀筆記、讀后感,記錄即刻的閱讀想法。記錄想法一段時間后再重溫書本或者完成閱讀后想要查看自己在閱讀時的想法,也想看看看過這本書的其他好友得想法等等,以此也催生出許多相關(guān)聯(lián)的需求;

以上3層需求緊密相連構(gòu)成了微信閱讀的4個模塊。

四、微信讀書之——戰(zhàn)略層

我們都知道戰(zhàn)略層的2個關(guān)鍵詞:用戶需求、企業(yè)目標(biāo),那就一起來猜想一下,微信閱讀背后的戰(zhàn)略是什么。

1. 用戶需求

微信讀書面向的用戶是誰?

我想大家應(yīng)該都聽過這些話:工作之前都是用的qq,工作后就用微信了;qq都是95后,00后用的……諸如此類的問題產(chǎn)品論壇中比比皆是,這的確說明了一個問題,微信面向的更多是中青年人群也就是職場人群。

我們能為用戶解決什么問題?

對于中國的大多數(shù)青年來說,進(jìn)入職場意味著背井離鄉(xiāng),意味著孤單。其次,職場最缺乏是什么知識?當(dāng)然是技能,技能是職場人生存的核心本領(lǐng)。微信閱讀需要解決的是職場人群2大痛點(diǎn):情感抒發(fā)、自我提升。

2. 企業(yè)目標(biāo)

微信讀書有什么資源?

撇開騰訊強(qiáng)大的資金實(shí)力、牛叉的技術(shù)團(tuán)隊(duì)等雄厚基礎(chǔ)實(shí)力不談,微信讀書光是得益于微信這個龐大的擁有數(shù)10億計用戶的APP,在用戶量上已經(jīng)比其他同類APP捷足先登了不知道多少步,更何況,我們根本也沒辦法撇開其雄厚的資金庫以及牛逼的技術(shù)支撐。

騰訊能從微信讀書的項(xiàng)目中獲得什么?

從近年來騰訊涉足的各個領(lǐng)域來看,騰訊是想通過構(gòu)建一個強(qiáng)大的產(chǎn)品生態(tài)矩陣,來擴(kuò)大自己的平臺影響力和加強(qiáng)自身的優(yōu)勢。微信憑借其海量且忠誠的用戶量無疑是騰訊排兵布陣最好的工具,騰訊想借助微信這個工具涉足更多更廣的領(lǐng)域,同時也在不遺余力的向市場規(guī)范靠攏。

從強(qiáng)求音樂買下海量正版音樂公開叫板網(wǎng)易云音樂、騰訊視頻大肆購買視頻版權(quán)蓄力、倡導(dǎo)通過IP化來實(shí)現(xiàn)游戲版權(quán)進(jìn)入正軌,都預(yù)示著騰訊正在加速通過規(guī)范行業(yè),來讓自己的資金和平臺優(yōu)勢擴(kuò)大。微信讀書也是此戰(zhàn)略下的產(chǎn)物。

 

本文由 @lucky 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 個人感覺從戰(zhàn)略層開始分析比較好,因?yàn)閼?zhàn)略方向一定是最開始得東西

    來自上海 回復(fù)
    1. 如果能一下就看出對方的戰(zhàn)略意圖,那是高手!但是一般很難直接從戰(zhàn)略開始了解,我們最直接看到的是表象,然后透過表象看本質(zhì)

      來自廣東 回復(fù)
  2. 作為設(shè)計師想要提醒一下,主色調(diào)是藍(lán)色,白色不能作為主色

    來自浙江 回復(fù)
    1. 感謝糾正~ 各位設(shè)計同學(xué)們要引起注意

      來自廣東 回復(fù)
  3. 結(jié)構(gòu)層和框架層總覺得分不清

    回復(fù)
    1. 可以這樣來理解,拿房子舉例,結(jié)構(gòu)層是決定房子的客廳、主臥、次臥、衛(wèi)生間、廚房等結(jié)構(gòu)是怎么組合,讓房子更適合人的居住習(xí)慣。而框架層則是決定剛剛列舉的每個空間中,什么東西放什么位置,確定每個空間的內(nèi)容符合空間本身的定義,符合人使用這個空間時的便利性;

      來自廣東 回復(fù)
  4. 很棒,小白表示學(xué)習(xí)到了很多

    回復(fù)
    1. 重要的是方法,內(nèi)容不一定對,哈哈

      來自廣東 回復(fù)
  5. 我是因?yàn)閯澆磺宸秶鷮印⒔Y(jié)構(gòu)層、框架層的區(qū)別看到這篇文章,但是看完還是沒有擰清楚他們的界限和區(qū)別,特別是結(jié)構(gòu)層和框架層,希望再出一篇寫這個得區(qū)別的,嘻嘻

    來自四川 回復(fù)
    1. 有空寫哈

      來自廣東 回復(fù)
    2. 我也是 你是做什么產(chǎn)品的

      回復(fù)
    3. 我做電商的

      來自云南 回復(fù)
  6. 寫得很好??,戰(zhàn)略層把盈利模式寫進(jìn)去就更好了,畢竟產(chǎn)品目標(biāo)和用戶目標(biāo)是以商業(yè)結(jié)果為導(dǎo)向

    回復(fù)
    1. 感謝你的肯定和建議~ get

      回復(fù)
  7. APP的logo看起來除了像一本打開的圖書,也像發(fā)消息時候的泡泡的尖,感覺和有一脈相承的含義

    來自北京 回復(fù)
    1. 你真棒,應(yīng)該是有這個含義的。閱讀的時候,發(fā)表自己的看法,右下角的消息發(fā)送圖標(biāo)即代表和朋友一起交流,也不乏發(fā)表自己看法的含義~

      來自廣東 回復(fù)