從用戶體驗五要素分析——微信讀書
本文從用戶體驗五要素:表現層面、框架層 、戰略層、范圍層、結構層,對微信讀書進行了分析。
前言
互聯網發展的速度也加速了知識更新的速度,也許今天你還手握焦點技能,明天就可能被遺忘在角落。一應俱全的網課、鋪天蓋地的資訊加速了我們這代人的知識焦慮。對于生活在這個時代的我們來說,既是幸運也是挑戰。
魯迅先生說過:真的勇士,敢于直面慘淡的人生,敢于正視淋漓的鮮血。更何況,我們只是要直面知識焦慮,系統化的閱讀就能有效緩解這樣的焦慮。但內心的OS:刷抖音太上癮了,打游戲太爽了,況且我對閱讀不感興趣呀……
有一款APP,“它”能讓你關閉抖音,戒掉游戲,重拾閱讀興趣!它就是“微信讀書”,一款“讓閱讀不再孤獨”的APP。
在使用過過掌閱,藏書館等等APP之后,我終于找到了“微信讀書”,開始了每天半小時的閱讀之旅,并且樂在其中。
以下是我以用戶體驗5要素為基準,由表現層到戰略層一步步抽絲剝繭的體驗分析,不足之處,請多多指教。
體驗環境:
- 機型:iPhone 8 Plus
- 系統:iOS 12
- App版本:4.4.2
一、微信讀書之——表現層
我將從:圖標設計、整體設計風格、配色、排版這4個方面展開分析~
1. 圖標
仔細看,會發現是一本攤開的書,白色部分為書本攤開的側面,白色呼應了市場上書籍的默認顏色白色。再往上看,是大范圍的藍色,預示著“知識的海洋”。右下角有微信消息的圖案,清楚的點明了app實現讀者交流、閱讀式社交的產品亮點,與“讓閱讀不再孤單”的slogan遙相呼應。
一個好的設計,應該是如此:每一個布局,每一個元素,都有其價值、有緣由、有邏輯,這幾點微信讀書圖標的設計都滿足,可以說是很完美的設計了。
不過,做過一些問卷調查,遺憾的發現很多用戶沒能察覺到圖標是一本書攤開的樣子,因此我認為在白色部分再加上一點淺灰色的似有若無的線條,可能會更完美。
2. 設計風格
談到閱讀,我們腦海里會憧憬什么景象呢?一個窗明幾凈的書房,滿是書香的氣息,點上一支檀香。好不愜意,給我一個書房,我能看到地老天荒。
微信讀書采用了扁平化設計風格,去除冗余、厚重和繁雜的裝飾效果,讓“閱讀內容”本身重新作為核心被凸顯出來。
3個內容頁面都十分明顯的突出了內容部分,沒有過多的裝飾效果,讓用戶能夠更加專心的沉浸在閱讀中,不受其他元素的干擾。
3. 配色
APP的主色為藍色,從logo的顏色、底部tab切換時的顏色、設置頁面的開關色、每日一答等等頁面皆為藍色,奠定了APP的主色調,配合一些小面積的輔助色。
界面配色符合界面的色彩搭配的比例 6:3:1,是比較舒服的配色,因為閱讀需要一個干凈的環境,用戶才能專心于內容的閱讀。
再來說說核心的閱讀頁面,閱讀界面則提供了白色、護眼綠色、紙皮黃色、黑夜模式的黑色,白/黑模式對應白天閱讀和夜晚閱讀,而綠色、黃色則滿足了用戶護眼的心理需求。閱讀想法的輸入、查看選用了白字灰底的設計,不會與閱讀頁面形成強大的反差。
整體來說,配色還是非常的清爽、簡潔,使用起來不會有負擔感和累贅感。把APP也做一個人來看,眾所周知的穿衣搭配規則:穿在外面的衣服,不要超過3個顏色,否則就會讓人看上去顯得不清新,顯得累贅。
4. APP排版
1)整體版式
APP整體采用了常見的標簽式底部導航模式,符合拇指熱區操作的一種導航模式。底部的4個標簽分別為:發現、書架、故事、我的。對應APP的4個重要模塊,可通過點擊標簽進行模塊間進行快速的切換。
2)頁面版式
頁面版式大概可分為這幾個部分:信息的排布、圖片的使用、顏色的使用、留白的藝術。
以“發現”頁面為例,本頁面采用了非常流行的卡片式布局,它能直觀得突出書籍本身,達到向用戶推薦的目的。在信息的排布上,書籍相關訊息遵循了人們視覺焦點在頁面上半部分的規則,并且突出了書名的展示。
留白藝術在這里使用的非常到位,整個頁面除了書籍本身似乎看不到任何多余的東西,突出了“閱讀”的核心功能,底部好友在讀的設計再次點明了主題:讓閱讀不在孤單。
最貼心的當屬卡片2端的留白,讓使用者很輕松就知道可以左右兩邊切換,很多的APP使用卡片式設計時就沒有考慮到這樣的細節問題。
二、微信讀書之——框架層
在微信讀書的表現層下,就蘊藏著其框架層,我們來看看,微信讀書是怎么通過框架層來優化設計的布局的。
以核心的閱讀頁面為例,閱讀的時候,頁面頂部有章節信息,讓用戶清楚地知道自己處在哪個章節的閱讀。底部帶有當前頁面的想法數量,讓用戶感覺到他不是一個人在閱讀,再次點明“讓閱讀不再孤單”的slogan。右下角的前頁面數/總頁數的顯示,與紙質書的頁碼呼應,符合用戶閱讀習慣。
頁面的其他操作在用戶點擊頁面空白處,此頁面相關的操作按鈕展示出來,其中較為突出的功能是“聽”以及“想法輸入框”,當用戶的手勢操作不再是左滑的時候,說明用戶不是要進行下一頁切換的操作,此時出現頁面的操作按鈕比較符合用戶操作習慣。
當點擊劃線的內容時,展示此內容對應的閱讀用戶想法,想法輸入框固定在底部,方便閱讀者隨時點擊輸入內容,而想法列表會根據劃線內容在屏幕中的位置來改變,是為了方便用戶在看想法的時候,不遮擋劃線內容,從而達到用戶既可以查看劃線內容,同時還能輸入想法。
再來看看書城頁面,一般來說,一個頁面的首屏展示的內容就足夠我們看出主要的設計思想和想要展示的重點信息了。
微信讀書-圖5
頂欄是頁面標題和搜索欄,然后是4類文章的導航。除此之外“猜你喜歡”部分成了整個首屏內容的視覺焦點,也就是用戶一進入頁面就會第一眼看到的地方——用戶喜歡的書籍推薦。=
再往下就是不同維度,不同分類的書籍推薦,每種書籍推薦一般為3-6本書,每屏承載1-2種書籍推薦,點擊查看全部跳轉到對應類別的書籍頁面。
這種頁面設計方式,讓信息層級劃分比較明顯,主次分明,符合瀏覽習慣,用戶使用時也不會眼花繚亂。
三、微信讀書之——結構層
結構層我們分2部分來分析:信息架構、交互設計
1. 信息架構
APP整體采用了常見的標簽式底部導航模式,符合拇指熱區操作的一種導航模式。底部的4個標簽分別為:發現、書架、故事、我的。對應APP的4個重要模塊,可通過點擊標簽進行模塊間進行快速的切換
看書的第一步是找到一本書,所以“發現”放在底部標簽的第一位。打開微信讀書的目的是看書,因此“書架”緊隨“發現”放在底部標簽的第二位?!拔业摹表撁嫖恢门c行業大部分的APP一樣,在最右邊,“故事”模塊自然而然就緊隨其左了。
整體信息架構比較清晰,也符合用戶的操作習慣。
2. 交互設計
不知道大家發現沒有,在閱讀場景下關閉APP后再打開APP時,會自動幫你把上次閱讀的書籍打開到你最后閱讀的頁面,這交互實在是很貼心。這相當于我們紙質閱讀中的書簽,這樣,用戶再次打開書籍的時候,就不會因為找不到上次閱讀的內容而苦惱了。
以及閱讀界面,有人劃過線的句子會以虛線形式顯示出來,如果閱讀的人也想標記,只需隨意點擊虛線的任何地方就會自動選中虛線部分內容,無需用戶手動從文字開頭到結尾再畫一遍。忙忙書海里,既然能選到同一本書,某種程度上來說,這些用戶也是有一定的共鳴的。因此這個交互也非常實用。
諸如此類有好的交互還有許多,這里就不一一敘述了。
三、微信讀書之——范圍層
要在移動端滿足用戶閱讀的需求,我們需要什么?想象下在實際生活中,當你需要閱讀的時候,你需要什么?是不是閑的去到圖書館找到一本或者多本你喜歡的書籍?而去圖書館通常需要登記人員的信息通過這些信息來與用戶所借的書籍相關聯
基礎需求:用戶個人的賬號信息,用來管理用戶的個人信息以及書籍的借還情況等
而基礎需求之后便是閱讀的核心需求,也就是如何找到用戶喜愛的書籍進行閱讀。
第一層需求:快速找到用戶喜歡的書籍進行閱讀。找到書籍后,書籍存放在哪里?當有不同類別的書籍怎么放置?書籍閱讀環境是怎么樣的?閱讀過程需要哪些工具?書籍看完了不知道該看什么時怎么辦?等等需求也就隨之而出。
而當用戶已經確定了要閱讀的書籍后,進入閱讀階段,在讀到經典段落或篇幅時,會不會情不自禁的抒發一些感慨,如此第二層需求便也呼之欲出。
第二層需求:做閱讀筆記、讀后感,記錄即刻的閱讀想法。記錄想法一段時間后再重溫書本或者完成閱讀后想要查看自己在閱讀時的想法,也想看看看過這本書的其他好友得想法等等,以此也催生出許多相關聯的需求;
以上3層需求緊密相連構成了微信閱讀的4個模塊。
四、微信讀書之——戰略層
我們都知道戰略層的2個關鍵詞:用戶需求、企業目標,那就一起來猜想一下,微信閱讀背后的戰略是什么。
1. 用戶需求
微信讀書面向的用戶是誰?
我想大家應該都聽過這些話:工作之前都是用的qq,工作后就用微信了;qq都是95后,00后用的……諸如此類的問題產品論壇中比比皆是,這的確說明了一個問題,微信面向的更多是中青年人群也就是職場人群。
我們能為用戶解決什么問題?
對于中國的大多數青年來說,進入職場意味著背井離鄉,意味著孤單。其次,職場最缺乏是什么知識?當然是技能,技能是職場人生存的核心本領。微信閱讀需要解決的是職場人群2大痛點:情感抒發、自我提升。
2. 企業目標
微信讀書有什么資源?
撇開騰訊強大的資金實力、牛叉的技術團隊等雄厚基礎實力不談,微信讀書光是得益于微信這個龐大的擁有數10億計用戶的APP,在用戶量上已經比其他同類APP捷足先登了不知道多少步,更何況,我們根本也沒辦法撇開其雄厚的資金庫以及牛逼的技術支撐。
騰訊能從微信讀書的項目中獲得什么?
從近年來騰訊涉足的各個領域來看,騰訊是想通過構建一個強大的產品生態矩陣,來擴大自己的平臺影響力和加強自身的優勢。微信憑借其海量且忠誠的用戶量無疑是騰訊排兵布陣最好的工具,騰訊想借助微信這個工具涉足更多更廣的領域,同時也在不遺余力的向市場規范靠攏。
從強求音樂買下海量正版音樂公開叫板網易云音樂、騰訊視頻大肆購買視頻版權蓄力、倡導通過IP化來實現游戲版權進入正軌,都預示著騰訊正在加速通過規范行業,來讓自己的資金和平臺優勢擴大。微信讀書也是此戰略下的產物。
本文由 @lucky 原創發布于人人都是產品經理。未經許可,禁止轉載
題圖來自Unsplash,基于CC0協議
個人感覺從戰略層開始分析比較好,因為戰略方向一定是最開始得東西
如果能一下就看出對方的戰略意圖,那是高手!但是一般很難直接從戰略開始了解,我們最直接看到的是表象,然后透過表象看本質
作為設計師想要提醒一下,主色調是藍色,白色不能作為主色
感謝糾正~ 各位設計同學們要引起注意
結構層和框架層總覺得分不清
可以這樣來理解,拿房子舉例,結構層是決定房子的客廳、主臥、次臥、衛生間、廚房等結構是怎么組合,讓房子更適合人的居住習慣。而框架層則是決定剛剛列舉的每個空間中,什么東西放什么位置,確定每個空間的內容符合空間本身的定義,符合人使用這個空間時的便利性;
很棒,小白表示學習到了很多
重要的是方法,內容不一定對,哈哈
我是因為劃不清范圍層、結構層、框架層的區別看到這篇文章,但是看完還是沒有擰清楚他們的界限和區別,特別是結構層和框架層,希望再出一篇寫這個得區別的,嘻嘻
有空寫哈
我也是 你是做什么產品的
我做電商的
寫得很好??,戰略層把盈利模式寫進去就更好了,畢竟產品目標和用戶目標是以商業結果為導向
感謝你的肯定和建議~ get
APP的logo看起來除了像一本打開的圖書,也像發消息時候的泡泡的尖,感覺和有一脈相承的含義
你真棒,應該是有這個含義的。閱讀的時候,發表自己的看法,右下角的消息發送圖標即代表和朋友一起交流,也不乏發表自己看法的含義~