QQ 閱讀作為國內(nèi)較大的數(shù)字閱讀平臺，擁有海量的數(shù)字正版圖書資源，隨著產(chǎn)品內(nèi)容不斷豐富，圖書資源已覆蓋網(wǎng)絡(luò)文學(xué)、歷史、教育、社科等各類題材，可滿足多樣化用戶的閱讀需求。這也使得用戶群體的年齡、職業(yè)、教育、收入、地域等各方面較原來都發(fā)生了很大的變化，原有偏重少年群體的設(shè)計(jì)風(fēng)格已經(jīng)很難滿足廣大用戶群體多樣化的審美需求，基于此背景，QQ 閱讀視覺改版正式提上日程，這也正是改版的原始驅(qū)動力。

本文從設(shè)計(jì)方向（前期研究、確定設(shè)計(jì)風(fēng)格）、規(guī)范制定（制定視覺規(guī)范、構(gòu)建視覺組件庫）、方案輸出（視覺界面呈現(xiàn)）、不足與反思等方面對 7.0 的視覺改版工作進(jìn)行了總結(jié)回顧。

前期研究

前期研究的目的主要體現(xiàn)在三個(gè)方面：一是橫向上對閱讀類 App 進(jìn)行視覺設(shè)計(jì)分析，提煉閱讀類 App 的視覺特征。二是縱向上歸納總結(jié)目前視覺設(shè)計(jì)流行趨勢，把握設(shè)計(jì)潮流。三是梳理上一版本存在的視覺設(shè)計(jì)問題，明確改進(jìn)優(yōu)化方向，提升視覺樣式的通用性和更廣的接受度。

1. 閱讀類App研究

在此過程中，主要通過對行業(yè)內(nèi)多個(gè)應(yīng)用程序的色彩、文字、間距等視覺方面進(jìn)行對比分析，總結(jié)提取優(yōu)秀的設(shè)計(jì)表達(dá)方式，規(guī)避設(shè)計(jì)誤區(qū)。

色彩應(yīng)用方面

在 HSB 模式下，對閱讀類 App 的主色、輔色、背景色、灰色系和漸變色等方面進(jìn)行對比分析，主要有以下結(jié)論：

• 色彩選?。憾嘁云放粕鳛橹魃{(diào)，輔助色在不同色相內(nèi)進(jìn)行擴(kuò)展 2-6 種，且顏色明度偏亮（B值都在90以上）。
• 背景色選取：背景色的選取基本都為白色。
• 灰色系選?。憾鄶?shù) App 在使用黑白時(shí)，都帶有色彩傾向，和主色相近。
• 漸變色選取：漸變色多數(shù)使用的是同色系漸變，少部分使用的雙色調(diào)漸變，主要應(yīng)用在 icon 和按鈕上。

文字應(yīng)用方面

在二倍分辨率下，對閱讀類 App 的字體層級、使用場景進(jìn)行字號、字色分析對比，主要有以下結(jié)論：

• 字號：標(biāo)題多用 30pt、36pt、40pt；頂部導(dǎo)航多用 32pt，底部導(dǎo)航多用 20pt；單書書名多用 32pt、多本書并列顯示的書名用 24pt、28pt；內(nèi)容部分多用 28pt；輔助信息多使用 24pt；且字號為偶數(shù)，多以 2 或 4 的倍數(shù)遞增；
• 字體顏色：主要使用灰色系，采用明度變化來區(qū)分，部分灰色系中帶有主色的色彩傾向；提示類字體顏色多在輔助色中選取使用。

間距應(yīng)用方面

在二倍分辨率下，對閱讀類 App 模塊間距進(jìn)行分析對比，主要有以下結(jié)論：

多數(shù) App 都使用偶數(shù)間距，其中起點(diǎn)、書旗使用的外邊距和模塊內(nèi)間距均為 4 倍數(shù)間距規(guī)則，與 QQ 閱讀現(xiàn)狀相同。從信息層級的角度來看，級別越高的內(nèi)容間距越大，且越能吸引用戶更多的注意力。模塊內(nèi)部間距為了清晰區(qū)分，使用的間距相對較小。

2. 流行趨勢研究

主要通過大量收集和整理國內(nèi)外最新設(shè)計(jì)案例，并結(jié)合流行趨勢的分析文章和報(bào)告，在「扁平化設(shè)計(jì)」、「極簡主義風(fēng)格」、「如何進(jìn)行留白設(shè)計(jì)」、「ICON及圖形的設(shè)計(jì)」、「流體漸變的應(yīng)用」、「App中的插畫設(shè)計(jì)」、「合理使用動效」等方面嘗試歸納和提煉，制定出符合 QQ 閱讀可用的風(fēng)格特征，便于我們在后期的視覺設(shè)計(jì)中，結(jié)合業(yè)務(wù)需求、用戶喜好、品牌調(diào)性等方面轉(zhuǎn)化應(yīng)用。例如，在色彩使用方面，我們采用降低飽和度、明度的方法，使整體視覺感受平衡；在內(nèi)容布局上，采用留白來進(jìn)行分割頁面，避免采用過多細(xì)節(jié)的處理，使閱讀內(nèi)容更加流暢。

3. 改進(jìn)優(yōu)化，融入大眾

QQ 閱讀之前版本的產(chǎn)品定位是要做符合少年群體的 App，因此出現(xiàn)很多針對青少年用戶的視覺表現(xiàn)設(shè)計(jì)形式，但隨著用戶群體的不斷擴(kuò)大，視覺設(shè)計(jì)的表達(dá)形式需要滿足更多層次用戶的審美標(biāo)準(zhǔn)和使用習(xí)慣。因此，視覺設(shè)計(jì)方向需要作出適應(yīng)性的調(diào)整或改變。在廣泛的資料搜集和深入的分析研究后，我們從色彩、圖標(biāo)、字體、圖形等方面對上一版本的設(shè)計(jì)進(jìn)行分析，并針對梳理出的問題制定了改進(jìn)措施，提升視覺樣式的通用性和更廣的接受度。

確定設(shè)計(jì)風(fēng)格

1. 提取關(guān)鍵詞

用戶的真實(shí)感受及偏愛喜好即是 QQ 閱讀新視覺設(shè)計(jì)的出發(fā)點(diǎn)，也是落腳點(diǎn)。所以，方案設(shè)計(jì)之初，視覺設(shè)計(jì)團(tuán)隊(duì)就深度參與用戶訪談，整理各版本中用戶的反饋，從中匯總并提取出高頻詞匯作為視覺方案的原生關(guān)鍵詞，這些高頻詞包括：放松、安靜、有文化、書香氣、舒適、令人激動等。在此基礎(chǔ)上，對十余個(gè)原生關(guān)鍵詞按照內(nèi)容相近程度進(jìn)行聚類，結(jié)果可分為三類，一是「舒適、放松、安靜」，二是「書香氣、有文化」，三是「令人激動、興奮」。最后采用內(nèi)部頭腦風(fēng)暴的方式分別對三類原生關(guān)鍵詞進(jìn)行總結(jié)，得出相對具象且有指導(dǎo)意義的衍生關(guān)鍵詞：「舒適、品質(zhì)、年輕化」。

2. 細(xì)化設(shè)計(jì)風(fēng)格

主要采用情緒板設(shè)計(jì)方法進(jìn)行推導(dǎo)，對關(guān)鍵詞「舒適、品質(zhì)、年輕化」相關(guān)資料圖片進(jìn)行收集分析對比，明確了視覺設(shè)計(jì)的調(diào)性。

原生/衍生：舒適、放松、安靜、舒適。

視覺物化映射：柔軟、溫馨、干凈、羽毛、家等。

原生/衍生：書香氣、有文化、品質(zhì)。

視覺物化映射：宋體、精致、簡潔等。

原生/衍生：令人激動、興奮、年輕化。

視覺物化映射：活潑、時(shí)尚、動態(tài)等。

為了讓關(guān)鍵詞與流行趨勢、閱讀類 App 研究，以及改進(jìn)優(yōu)化的內(nèi)容相結(jié)合，體現(xiàn)出符合 QQ 閱讀的視覺特征，并將具體的物化映射應(yīng)用在設(shè)計(jì)中，我們有以下幾點(diǎn)思考：

關(guān)鍵詞「舒適」的視覺表現(xiàn)：

一是在版式設(shè)計(jì)方面，對版式及基礎(chǔ)元素規(guī)則進(jìn)行優(yōu)化，舒緩視覺壓力；二是在色彩應(yīng)用方面，對灰度增加色相，并且豐富色彩的漸變層次，提升平滑的感受；三是在基礎(chǔ)元素方面，通用圖形的圓角，傳遞柔和的舒適感受。

關(guān)鍵詞「品質(zhì)」的視覺表現(xiàn)：

根據(jù)閱讀類 App 的分析及增加留白的設(shè)計(jì)趨勢，一是對基礎(chǔ)元素進(jìn)行 4 倍數(shù)階梯規(guī)則應(yīng)用，增加更多留白，使排版清晰有序聚焦內(nèi)容；二是文字上采用襯線體并強(qiáng)化對比反差，提升版式細(xì)節(jié)品質(zhì)；三是通過對關(guān)鍵元素的細(xì)節(jié)刻畫，傳遞出品質(zhì)的視覺感受。

關(guān)鍵詞「年輕化」的視覺表現(xiàn)：

一是在圖形的應(yīng)用上，采用流行的卡通插畫設(shè)計(jì)；二是采用情緒板提取色彩，體現(xiàn)出年輕的活力，但在應(yīng)用中進(jìn)行優(yōu)化改進(jìn)，避免了大面積的使用；三是根據(jù)流行動效的設(shè)計(jì)趨勢，適當(dāng)在頁面中增加動效設(shè)計(jì)，提升趣味和互動體驗(yàn)。

制定視覺規(guī)范

在輸出主要設(shè)計(jì)頁面的同時(shí)，制定視覺的基礎(chǔ)規(guī)范不僅能提升團(tuán)隊(duì)的協(xié)作效率，也能保證設(shè)計(jì)元素在不同場景中的體驗(yàn)一致。同時(shí)，在整個(gè)視覺改版設(shè)計(jì)過程當(dāng)中，始終嚴(yán)格遵循視覺設(shè)計(jì)規(guī)范，并對規(guī)范進(jìn)行動態(tài)的更新維護(hù)，保持產(chǎn)品風(fēng)格的一致性。

構(gòu)建視覺組件庫

在確定設(shè)計(jì)風(fēng)格后，我們只完成了部分關(guān)鍵頁面的設(shè)計(jì)，QQ 閱讀的改版涉及 300 多個(gè)頁面，功能模塊紛繁復(fù)雜，要將關(guān)鍵頁面的設(shè)計(jì)點(diǎn)延展到所有界面，并且要保證平臺的統(tǒng)一性和各設(shè)計(jì)師協(xié)同工作效率，不僅需要一套簡明的設(shè)計(jì)規(guī)范，還需要在視覺規(guī)范的基礎(chǔ)上建立組件庫，然后批量產(chǎn)出設(shè)計(jì)頁面。

這次改版，大部分工作量集中在視覺的調(diào)整上，涉及所有的導(dǎo)航樣式，書籍樣式，列表樣式等，通過深入分析QQ閱讀App色彩、文字、導(dǎo)航、底欄、書封、頭像、系統(tǒng)控件、視圖等十余類設(shè)計(jì)元素，運(yùn)用原子設(shè)計(jì)原則（Atomic Design）、設(shè)計(jì)模塊化等設(shè)計(jì)體等相關(guān)知識，對 App 里的元素進(jìn)行結(jié)構(gòu)層次劃分，形成了分類合理且體系完整的 QQ 閱讀視覺組件庫。主要包括：基礎(chǔ)樣式類組件（色彩10種、文字風(fēng)格10種），系統(tǒng)類組件（導(dǎo)航欄、底欄、鍵盤、表單、按鈕、菜單、彈框、Toast等8大類），自定義內(nèi)容類組件（視圖、控件、信息條、漫畫獨(dú)立組件、音頻獨(dú)立組件等5大類），ICON（常用圖標(biāo)105個(gè)）。通過組件庫的建設(shè)，有效解決多頁面重復(fù)設(shè)計(jì)、多設(shè)計(jì)師協(xié)作不一致等問題，大幅降低部門溝通成本。與此同時(shí)，推動開發(fā)對組件庫的建立，實(shí)現(xiàn)組件的復(fù)用，促進(jìn)了產(chǎn)品迭代的效率。

視覺界面呈現(xiàn)

根據(jù)上面提到的相關(guān)的研究和分析梳理，我們的視覺開始了全新的設(shè)計(jì)，設(shè)計(jì)方案整體效果如下：

不足與反思

1. 從用戶視角出發(fā)，避免過多的設(shè)計(jì)專業(yè)經(jīng)驗(yàn)做決策

作為設(shè)計(jì)師，我們有些時(shí)候只是單純從視覺的角度，讓用戶接受我們自己的喜好。導(dǎo)致用戶不能快速理解界面的含義，產(chǎn)生了用戶流失的風(fēng)險(xiǎn)。所以，設(shè)計(jì)師不能只以專業(yè)的視覺美感來做經(jīng)驗(yàn)決策。而應(yīng)該從客觀的角度，根據(jù)用戶的需求和使用場景，以用戶的視角為出發(fā)點(diǎn)進(jìn)行設(shè)計(jì)。

2. 對設(shè)計(jì)項(xiàng)目量化評估，使項(xiàng)目進(jìn)程可以預(yù)測并整體可控，掌握全盤情況

在設(shè)計(jì)改版的過程中，設(shè)計(jì)項(xiàng)目常常對工作量的評估處于偏低的狀態(tài)，設(shè)計(jì)實(shí)際進(jìn)程與計(jì)劃進(jìn)程出現(xiàn)了一定的偏差。所以，要解決這個(gè)問題，首先，要對工作量了解充分，避免遺漏導(dǎo)致項(xiàng)目計(jì)劃不合理。其次，設(shè)計(jì)師需要采用科學(xué)有效的工作量評估方法，例如：類比估算、參數(shù)估算、三點(diǎn)估算等方法，對分配的任務(wù)進(jìn)行合理評估，預(yù)留風(fēng)險(xiǎn)時(shí)間。

3. 針對關(guān)鍵頁面制定設(shè)計(jì)目標(biāo)，尋找共識的、可驗(yàn)證的標(biāo)準(zhǔn)

在設(shè)計(jì)流程中，設(shè)計(jì)驗(yàn)證是必不可少的一個(gè)閉環(huán)，我們在完成所有設(shè)計(jì)任務(wù)后，需要進(jìn)行設(shè)計(jì)驗(yàn)證。然而，有些頁面我們無法對設(shè)計(jì)驗(yàn)證的標(biāo)注達(dá)成共識，是因?yàn)樵谠O(shè)計(jì)之初，沒有對頁面制定具體的設(shè)計(jì)目標(biāo)。所以，要解決這個(gè)問題，首先，需要針對具體的頁面或是模塊，制定明確的設(shè)計(jì)目標(biāo)，例如，提高轉(zhuǎn)化率、提高活躍度等。然后，根據(jù)設(shè)計(jì)目標(biāo)進(jìn)行可量化的指標(biāo)拆分，制定出設(shè)計(jì)方案并實(shí)施。最后，在設(shè)計(jì)驗(yàn)證階段，進(jìn)行目標(biāo)驗(yàn)證。

以上是從設(shè)計(jì)目標(biāo)、過程、結(jié)果驗(yàn)證，簡單歸納的幾個(gè)反思點(diǎn)，提煉了部分關(guān)鍵內(nèi)容沉淀，以幫助團(tuán)隊(duì)在后續(xù)的項(xiàng)目中解決相關(guān)問題。

總結(jié)

項(xiàng)目成員經(jīng)過幾個(gè)月的悉心戮力，最終完成了全新的改版設(shè)計(jì)，使產(chǎn)品從視覺表現(xiàn)到交互邏輯，較之前版本都有了體驗(yàn)上的提升。如今 7.0 版本已經(jīng)上線一段時(shí)間了，我們陸續(xù)收到了一些積極正向的用戶反饋。

同時(shí)，我們也關(guān)注到了核心頁面的各種轉(zhuǎn)化數(shù)據(jù)，在視覺進(jìn)行優(yōu)化調(diào)整后，依然保持了數(shù)據(jù)的高轉(zhuǎn)化率，驗(yàn)證了設(shè)計(jì)優(yōu)化的方向是正確的。

此次改版過程雖然布滿荊棘，但也充滿挑戰(zhàn)，既鍛煉了團(tuán)隊(duì)，又提升了能力。當(dāng)然，在細(xì)節(jié)上還可能有一些不盡人意的地方，在后續(xù)的迭代中，我們將持續(xù)優(yōu)化升級。我們視覺設(shè)計(jì)團(tuán)隊(duì)也將始終堅(jiān)持盡善盡美的態(tài)度，不忘初心，在打造精品的道路上繼續(xù)努力奔跑。

歡迎關(guān)注作者的微信公眾號：「閱文體驗(yàn)設(shè)計(jì)YUX」