本文本人將為大家分享設計團隊如何結合公司策略調整，挖掘更多提升體驗的可能性。

背景現(xiàn)狀

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

設計推進

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

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

1. 重新定義 QQ 閱讀設計風格

前期分析

產品屬性：任何設計風格的探索，都需要考慮產品屬性。QQ 閱讀作為網絡文學平臺，不同于短視頻和游戲給用戶帶來的強感官刺激，文字是安靜的，大家可以設想一下，我們在讀書時是否會找一個比較適宜的環(huán)境，同時不希望被中斷打擾？

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

競品分析：我們搜集相關競品，從其功能架構及界面等設計緯度進行分析，提取出閱讀 APP 的共性及差異點。

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

建立情緒版

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

基礎規(guī)范搭建

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

設計語言：

去掉襯線體 - 思源宋

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

卡片：

2. 拆解關鍵路徑

搶占用戶時間換言之留住用戶，而留住用戶的關鍵是快速篩選出用戶喜歡的書，書城、書庫和詳情是用戶找書的主要場景，也是用戶從產生興趣（書城、排行榜）到決定是否看書（書籍詳情頁）的關鍵行為路徑，而原有的書城、排行榜、詳情頁內容的展示層級等存在些許問題，這在一定程度上給快速篩選書造成一定阻礙。

關鍵路徑一：書城頁

現(xiàn)狀：原有的書城頁欄目種類較多、元素之間的間距比較小略顯擁擠，除此之外，書籍基礎信息展示層級過多，導致用戶無法快速獲取關鍵信息，這給用戶快速找書帶來一定阻礙。針對這幾個問題，我們做了以下調整。

優(yōu)化：

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

梳理簡化欄目種類，降低用戶理解成本；同時用卡片作為欄目容器，不同欄目的視覺樣式體驗更一致；增加書名及基礎信息（簡介作者）的對比度。

2. 增加首屏效率

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

3. 排版布局輕量化

頁面元素的排版布局決定了用戶體驗如何，本次我們增加了元素間的留白，以達到舒適的瀏覽節(jié)奏。

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

重新梳理書籍基礎信息的層級，加強信息對比度，讓用戶更獲取書籍重要信息。

關鍵路徑二：書庫頁

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

優(yōu)化：

1. 結合業(yè)務調整，優(yōu)化信息層級

因為內容增加了免費區(qū)，書庫也對應的做了調整。頂部 Tab 均放在背景層，導航欄跟內容放在前層并通過分割線區(qū)分兩者。這樣做的好處是更聚焦內容。

2. 增加圖形

相信大家對全部是文字同時需要你做篩選的頁面多半會感覺壓力大，所以我們增加了標簽圖形設計。

關鍵路徑三：書籍詳情頁

現(xiàn)狀：書籍詳情頁決定著用戶是否閱讀這本書，包含了書籍基礎信息和關鍵決策信息，原有的詳情頁基礎信息等視覺元素展示雜亂，導致無法快速獲得有效信息。

優(yōu)化：

1. 信息降噪

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

2. 書評橫滑

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

3. 外露首章

第一章內容是非常重要的關鍵決策信息，通過簡介+第一章內容外露為用戶提供了更好的判斷依據。

3. 圖形及其他嘗試

圖標設計

結合新的設計語言我們重塑了整套圖標體系，在統(tǒng)一設計風格的基礎上精簡原有圖形，使整體造型更加精簡、柔和，同時我們遵循 icon 網格設計規(guī)范，得以最大保證 icon 體量感的一致。

系統(tǒng)圖標：

標簽欄圖標：

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

其他圖形設計

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

沉淀總結

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