如何提高用戶體驗(yàn)？來(lái)看QQ閱讀的設(shè)計(jì)師怎么做！

本文本人將為大家分享設(shè)計(jì)團(tuán)隊(duì)如何結(jié)合公司策略調(diào)整，挖掘更多提升體驗(yàn)的可能性。

背景現(xiàn)狀

2020 年，伴隨著互聯(lián)網(wǎng)日新月異的發(fā)展，QQ 閱讀制定了全新的商業(yè)目標(biāo)。一直以來(lái)，我們的用戶主要集中在九五后的年輕群體，而這次策略的調(diào)整會(huì)覆蓋到更大跨度的用戶群體；同時(shí)，用戶的休閑時(shí)間越來(lái)越多的被短視頻、游戲等娛樂(lè)產(chǎn)品所占據(jù)，閱讀類產(chǎn)品如何搶占用戶的休閑時(shí)間？下面為大家分享設(shè)計(jì)團(tuán)隊(duì)結(jié)合公司策略的調(diào)整如何去挖掘更多可能性。

設(shè)計(jì)推進(jìn)

這次調(diào)整設(shè)計(jì)團(tuán)隊(duì)面臨很多挑戰(zhàn)，除了關(guān)注設(shè)計(jì)本身，還要更多橫向去考慮公司策略的變化，通過(guò)設(shè)計(jì)手段來(lái)進(jìn)行策略賦能。這次改版設(shè)計(jì)主要聚焦在 3Part。

• Part.1 重新定義 QQ 閱讀設(shè)計(jì)風(fēng)格。什么樣的設(shè)計(jì)風(fēng)格能兼容不同跨度的用戶群體？
• Part.2 拆解關(guān)鍵路徑。新老用戶體驗(yàn)路徑關(guān)鍵節(jié)點(diǎn)如何優(yōu)化，幫助用戶快速?zèng)Q策找到自己喜歡的書(shū)？
• Part.3 圖標(biāo)及其它嘗試。圖標(biāo)設(shè)計(jì)（icon 設(shè)計(jì)）在界面設(shè)計(jì)中占據(jù)很重要的位置，它不僅能更好的傳達(dá)信息，更可以直觀傳遞產(chǎn)品氣質(zhì)。

1. 重新定義 QQ 閱讀設(shè)計(jì)風(fēng)格

前期分析

產(chǎn)品屬性：任何設(shè)計(jì)風(fēng)格的探索，都需要考慮產(chǎn)品屬性。QQ 閱讀作為網(wǎng)絡(luò)文學(xué)平臺(tái)，不同于短視頻和游戲給用戶帶來(lái)的強(qiáng)感官刺激，文字是安靜的，大家可以設(shè)想一下，我們?cè)谧x書(shū)時(shí)是否會(huì)找一個(gè)比較適宜的環(huán)境，同時(shí)不希望被中斷打擾？

用戶洞察：策略的調(diào)整會(huì)覆蓋到更多年齡、職業(yè)跨度的用戶群體，年齡的差異導(dǎo)致審美喜好截然不同。

競(jìng)品分析：我們搜集相關(guān)競(jìng)品，從其功能架構(gòu)及界面等設(shè)計(jì)緯度進(jìn)行分析，提取出閱讀 APP 的共性及差異點(diǎn)。

結(jié)合 QQ 閱讀本身的產(chǎn)品屬性和更多元的用戶群體，本次改版設(shè)計(jì)需要采用一些更為中性、通用的設(shè)計(jì)策略，為我們的用戶提供“舒適”的閱讀體驗(yàn)，“舒適”的閱讀體驗(yàn)既可體現(xiàn)閱讀產(chǎn)品的氣質(zhì)，人群普適性也更高。

建立情緒版

如何打造“舒適”的閱讀體驗(yàn)，我們結(jié)合業(yè)務(wù)目標(biāo)及前期分析聚焦出四個(gè)基礎(chǔ)關(guān)鍵詞，慢節(jié)奏、貼心、品質(zhì)、無(wú)壓力，并發(fā)散出衍生關(guān)鍵詞，通過(guò)圖片收集，從中提煉出更為具象的色彩、排版、字體等設(shè)計(jì)方向。

基礎(chǔ)規(guī)范搭建

基于前期分析提煉出體現(xiàn)“舒適”的設(shè)計(jì)語(yǔ)言，同時(shí)我們結(jié)合 QQ 閱讀現(xiàn)有的內(nèi)容框架建立了初步的文字、色彩、卡片組件的規(guī)范（Material Design-components 中有關(guān)于卡片設(shè)計(jì)的原則和用法），其中卡片作為容器承載內(nèi)容可以更好的區(qū)分和整合信息；設(shè)計(jì)初期建立的規(guī)范后續(xù)避免不了調(diào)整，這里要說(shuō)一下 figma 的好處，通過(guò) figma 搭建設(shè)計(jì)組件，調(diào)整會(huì)及時(shí)同步到應(yīng)用組件的場(chǎng)景。

設(shè)計(jì)語(yǔ)言：

去掉襯線體 - 思源宋

調(diào)整色相和透明度使色彩更沉穩(wěn)，在基礎(chǔ)色板上增加10檔衍生色，基本可以滿足后續(xù)設(shè)計(jì)對(duì)顏色的要求

卡片：

2. 拆解關(guān)鍵路徑

搶占用戶時(shí)間換言之留住用戶，而留住用戶的關(guān)鍵是快速篩選出用戶喜歡的書(shū)，書(shū)城、書(shū)庫(kù)和詳情是用戶找書(shū)的主要場(chǎng)景，也是用戶從產(chǎn)生興趣（書(shū)城、排行榜）到?jīng)Q定是否看書(shū)（書(shū)籍詳情頁(yè)）的關(guān)鍵行為路徑，而原有的書(shū)城、排行榜、詳情頁(yè)內(nèi)容的展示層級(jí)等存在些許問(wèn)題，這在一定程度上給快速篩選書(shū)造成一定阻礙。

關(guān)鍵路徑一：書(shū)城頁(yè)

現(xiàn)狀：原有的書(shū)城頁(yè)欄目種類較多、元素之間的間距比較小略顯擁擠，除此之外，書(shū)籍基礎(chǔ)信息展示層級(jí)過(guò)多，導(dǎo)致用戶無(wú)法快速獲取關(guān)鍵信息，這給用戶快速找書(shū)帶來(lái)一定阻礙。針對(duì)這幾個(gè)問(wèn)題，我們做了以下調(diào)整。

優(yōu)化：

1. 優(yōu)化欄目樣式

梳理簡(jiǎn)化欄目種類，降低用戶理解成本；同時(shí)用卡片作為欄目容器，不同欄目的視覺(jué)樣式體驗(yàn)更一致；增加書(shū)名及基礎(chǔ)信息（簡(jiǎn)介作者）的對(duì)比度。

2. 增加首屏效率

首屏是我們向用戶傳達(dá)書(shū)籍信息的重要位置，其內(nèi)容能否引起興趣直接關(guān)系到用戶是否愿意多停留一秒，在這里，我們通過(guò)增加首屏內(nèi)容展示率的方法來(lái)提高用戶的命中率。

3. 排版布局輕量化

頁(yè)面元素的排版布局決定了用戶體驗(yàn)如何，本次我們?cè)黾恿嗽亻g的留白，以達(dá)到舒適的瀏覽節(jié)奏。

4. 信息層級(jí)優(yōu)化

重新梳理書(shū)籍基礎(chǔ)信息的層級(jí)，加強(qiáng)信息對(duì)比度，讓用戶更獲取書(shū)籍重要信息。

關(guān)鍵路徑二：書(shū)庫(kù)頁(yè)

現(xiàn)狀：TAB 和導(dǎo)航欄及內(nèi)容堆在同一層級(jí)，區(qū)分較弱；標(biāo)簽頁(yè)全是文字，獲取信息壓力較大。

優(yōu)化：

1. 結(jié)合業(yè)務(wù)調(diào)整，優(yōu)化信息層級(jí)

因?yàn)閮?nèi)容增加了免費(fèi)區(qū)，書(shū)庫(kù)也對(duì)應(yīng)的做了調(diào)整。頂部 Tab 均放在背景層，導(dǎo)航欄跟內(nèi)容放在前層并通過(guò)分割線區(qū)分兩者。這樣做的好處是更聚焦內(nèi)容。

2. 增加圖形

相信大家對(duì)全部是文字同時(shí)需要你做篩選的頁(yè)面多半會(huì)感覺(jué)壓力大，所以我們?cè)黾恿藰?biāo)簽圖形設(shè)計(jì)。

關(guān)鍵路徑三：書(shū)籍詳情頁(yè)

現(xiàn)狀：書(shū)籍詳情頁(yè)決定著用戶是否閱讀這本書(shū)，包含了書(shū)籍基礎(chǔ)信息和關(guān)鍵決策信息，原有的詳情頁(yè)基礎(chǔ)信息等視覺(jué)元素展示雜亂，導(dǎo)致無(wú)法快速獲得有效信息。

優(yōu)化：

1. 信息降噪

將書(shū)籍基礎(chǔ)信息統(tǒng)一放在背景層，包括書(shū)封、書(shū)名、作者名、分類、評(píng)分等信息，另外，背景色改為固定顏色，避免高斯模糊書(shū)封作為背景造成的視覺(jué)較亂效果。

2. 書(shū)評(píng)橫滑

用戶可以通過(guò)書(shū)評(píng)快速了解書(shū)籍相關(guān)信息，本次將書(shū)評(píng)改為橫滑，這樣可以為下面的外露首章節(jié)省空間。

3. 外露首章

第一章內(nèi)容是非常重要的關(guān)鍵決策信息，通過(guò)簡(jiǎn)介+第一章內(nèi)容外露為用戶提供了更好的判斷依據(jù)。

3. 圖形及其他嘗試

圖標(biāo)設(shè)計(jì)

結(jié)合新的設(shè)計(jì)語(yǔ)言我們重塑了整套圖標(biāo)體系，在統(tǒng)一設(shè)計(jì)風(fēng)格的基礎(chǔ)上精簡(jiǎn)原有圖形，使整體造型更加精簡(jiǎn)、柔和，同時(shí)我們遵循 icon 網(wǎng)格設(shè)計(jì)規(guī)范，得以最大保證 icon 體量感的一致。

系統(tǒng)圖標(biāo)：

標(biāo)簽欄圖標(biāo)：

標(biāo)簽欄設(shè)計(jì)很大一部分決定了 APP 的風(fēng)格，隨著體驗(yàn)設(shè)計(jì)進(jìn)入細(xì)耕時(shí)代，各大主流 APP 相繼增加 Tab 切換時(shí)的 motion，而流暢的反饋動(dòng)效可以大大提升用戶操作的體驗(yàn)感。好的 motion 不會(huì)喧賓奪主，設(shè)計(jì)師對(duì)時(shí)間長(zhǎng)短和動(dòng)作幅度的拿捏都會(huì)比較克制，本次升級(jí)設(shè)計(jì)我們將標(biāo)簽欄 motion 時(shí)間控制在 350ms 以內(nèi)，圖標(biāo)位移控制在 2dp 以內(nèi)，在保證趣味性的同時(shí)不過(guò)分干擾操作。

其他圖形設(shè)計(jì)

除了圖標(biāo)設(shè)計(jì)，我們也正在進(jìn)行的品牌相關(guān)圖形的設(shè)計(jì)嘗試，包括 QQ 閱讀應(yīng)用圖標(biāo) / 品牌 IP 形象及其成長(zhǎng)環(huán)境。產(chǎn)品 IP 形象，可以更具親和力的與用戶溝通、傳達(dá)品牌理念，促進(jìn)品牌深度傳播，所以這也是設(shè)計(jì)團(tuán)隊(duì)重點(diǎn)發(fā)力的部分，關(guān)于品牌 IP 的探索仍在繼續(xù)，如何將品牌、產(chǎn)品界面以及交互體驗(yàn)更好地結(jié)合在一起，一直是設(shè)計(jì)師研究的課題。

沉淀總結(jié)

QQ 閱讀改版升級(jí)通過(guò)在設(shè)計(jì)風(fēng)格探索、關(guān)鍵路徑拆解、圖形設(shè)計(jì)上反復(fù)打磨，希望最后呈現(xiàn)給用戶最舒適的閱讀體驗(yàn)。經(jīng)過(guò)這次改版，我們也發(fā)現(xiàn)設(shè)計(jì)團(tuán)隊(duì)用自己的專業(yè)幫用戶構(gòu)建好的體驗(yàn)之余，更需要整體思維，從產(chǎn)品視角通過(guò)設(shè)計(jì)助力商業(yè)價(jià)值，擴(kuò)大專業(yè)邊界。接下來(lái)我們會(huì)繼續(xù)完善 QQ 閱讀的整體設(shè)計(jì)語(yǔ)言系統(tǒng)，探索更多可能性，為用戶帶來(lái)更多好的體驗(yàn)和更多價(jià)值。同時(shí)感謝一直支持我們的產(chǎn)品團(tuán)隊(duì)、技術(shù)團(tuán)隊(duì)全方位的配合。