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

本文從設計方向（前期研究、確定設計風格）、規范制定（制定視覺規范、構建視覺組件庫）、方案輸出（視覺界面呈現）、不足與反思等方面對 7.0 的視覺改版工作進行了總結回顧。

前期研究

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

1. 閱讀類App研究

在此過程中，主要通過對行業內多個應用程序的色彩、文字、間距等視覺方面進行對比分析，總結提取優秀的設計表達方式，規避設計誤區。

色彩應用方面

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

• 色彩選取：多以品牌色作為主色調，輔助色在不同色相內進行擴展 2-6 種，且顏色明度偏亮（B值都在90以上）。
• 背景色選取：背景色的選取基本都為白色。
• 灰色系選取：多數 App 在使用黑白時，都帶有色彩傾向，和主色相近。
• 漸變色選取：漸變色多數使用的是同色系漸變，少部分使用的雙色調漸變，主要應用在 icon 和按鈕上。

文字應用方面

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

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

間距應用方面

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

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

2. 流行趨勢研究

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

3. 改進優化，融入大眾

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

確定設計風格

1. 提取關鍵詞

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

2. 細化設計風格

主要采用情緒板設計方法進行推導，對關鍵詞「舒適、品質、年輕化」相關資料圖片進行收集分析對比，明確了視覺設計的調性。

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

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

原生/衍生：書香氣、有文化、品質。

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

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

視覺物化映射：活潑、時尚、動態等。

為了讓關鍵詞與流行趨勢、閱讀類 App 研究，以及改進優化的內容相結合，體現出符合 QQ 閱讀的視覺特征，并將具體的物化映射應用在設計中，我們有以下幾點思考：

關鍵詞「舒適」的視覺表現：

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

關鍵詞「品質」的視覺表現：

根據閱讀類 App 的分析及增加留白的設計趨勢，一是對基礎元素進行 4 倍數階梯規則應用，增加更多留白，使排版清晰有序聚焦內容；二是文字上采用襯線體并強化對比反差，提升版式細節品質；三是通過對關鍵元素的細節刻畫，傳遞出品質的視覺感受。

關鍵詞「年輕化」的視覺表現：

一是在圖形的應用上，采用流行的卡通插畫設計；二是采用情緒板提取色彩，體現出年輕的活力，但在應用中進行優化改進，避免了大面積的使用；三是根據流行動效的設計趨勢，適當在頁面中增加動效設計，提升趣味和互動體驗。

制定視覺規范

在輸出主要設計頁面的同時，制定視覺的基礎規范不僅能提升團隊的協作效率，也能保證設計元素在不同場景中的體驗一致。同時，在整個視覺改版設計過程當中，始終嚴格遵循視覺設計規范，并對規范進行動態的更新維護，保持產品風格的一致性。

構建視覺組件庫

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

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

視覺界面呈現

根據上面提到的相關的研究和分析梳理，我們的視覺開始了全新的設計，設計方案整體效果如下：

不足與反思

1. 從用戶視角出發，避免過多的設計專業經驗做決策

作為設計師，我們有些時候只是單純從視覺的角度，讓用戶接受我們自己的喜好。導致用戶不能快速理解界面的含義，產生了用戶流失的風險。所以，設計師不能只以專業的視覺美感來做經驗決策。而應該從客觀的角度，根據用戶的需求和使用場景，以用戶的視角為出發點進行設計。

2. 對設計項目量化評估，使項目進程可以預測并整體可控，掌握全盤情況

在設計改版的過程中，設計項目常常對工作量的評估處于偏低的狀態，設計實際進程與計劃進程出現了一定的偏差。所以，要解決這個問題，首先，要對工作量了解充分，避免遺漏導致項目計劃不合理。其次，設計師需要采用科學有效的工作量評估方法，例如：類比估算、參數估算、三點估算等方法，對分配的任務進行合理評估，預留風險時間。

3. 針對關鍵頁面制定設計目標，尋找共識的、可驗證的標準

在設計流程中，設計驗證是必不可少的一個閉環，我們在完成所有設計任務后，需要進行設計驗證。然而，有些頁面我們無法對設計驗證的標注達成共識，是因為在設計之初，沒有對頁面制定具體的設計目標。所以，要解決這個問題，首先，需要針對具體的頁面或是模塊，制定明確的設計目標，例如，提高轉化率、提高活躍度等。然后，根據設計目標進行可量化的指標拆分，制定出設計方案并實施。最后，在設計驗證階段，進行目標驗證。

以上是從設計目標、過程、結果驗證，簡單歸納的幾個反思點，提煉了部分關鍵內容沉淀，以幫助團隊在后續的項目中解決相關問題。

總結

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

同時，我們也關注到了核心頁面的各種轉化數據，在視覺進行優化調整后，依然保持了數據的高轉化率，驗證了設計優化的方向是正確的。

此次改版過程雖然布滿荊棘，但也充滿挑戰，既鍛煉了團隊，又提升了能力。當然，在細節上還可能有一些不盡人意的地方，在后續的迭代中，我們將持續優化升級。我們視覺設計團隊也將始終堅持盡善盡美的態度，不忘初心，在打造精品的道路上繼續努力奔跑。

歡迎關注作者的微信公眾號：「閱文體驗設計YUX」