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

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

前期研究

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

1、閱讀類App研究

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

色彩應(yīng)用方面

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

色彩選?。憾嘁云放粕鳛橹魃{(diào)，輔助色在不同色相內(nèi)進(jìn)行擴(kuò)展 2-6 種，且顏色明度偏亮（B值都在90以上）。

背景色選?。罕尘吧倪x取基本都為白色。

灰色系選?。憾鄶?shù) App 在使用黑白時(shí)，都帶有色彩傾向，和主色相近。

漸變色選?。簼u變色多數(shù)使用的是同色系漸變，少部分使用的雙色調(diào)漸變，主要應(yīng)用在 icon 和按鈕上。

文字應(yīng)用方面

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

字號(hào)：標(biāo)題多用 30pt、36pt、40pt；頂部導(dǎo)航多用 32pt，底部導(dǎo)航多用 20pt；單書(shū)書(shū)名多用 32pt、多本書(shū)并列顯示的書(shū)名用 24pt、28pt；內(nèi)容部分多用 28pt；輔助信息多使用 24pt；且字號(hào)為偶數(shù)，多以 2 或 4 的倍數(shù)遞增；

字體顏色：主要使用灰色系，采用明度變化來(lái)區(qū)分，部分灰色系中帶有主色的色彩傾向；提示類字體顏色多在輔助色中選取使用。

間距應(yīng)用方面

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

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

2、流行趨勢(shì)研究

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

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

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

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

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

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

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

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

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

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

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

視覺(jué)物化映射：宋體、精致、簡(jiǎn)潔等。

原生/衍生：令人激動(dòng)、興奮、年輕化。

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

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

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

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

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

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

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

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

制定視覺(jué)規(guī)范

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

構(gòu)建視覺(jué)組件庫(kù)

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

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

視覺(jué)界面呈現(xiàn)

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

不足與反思

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

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

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

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

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

在設(shè)計(jì)流程中，設(shè)計(jì)驗(yàn)證是必不可少的一個(gè)閉環(huán)，我們?cè)谕瓿伤性O(shè)計(jì)任務(wù)后，需要進(jìn)行設(shè)計(jì)驗(yàn)證。然而，有些頁(yè)面我們無(wú)法對(duì)設(shè)計(jì)驗(yàn)證的標(biāo)注達(dá)成共識(shí)，是因?yàn)樵谠O(shè)計(jì)之初，沒(méi)有對(duì)頁(yè)面制定具體的設(shè)計(jì)目標(biāo)。所以，要解決這個(gè)問(wèn)題，首先，需要針對(duì)具體的頁(yè)面或是模塊，制定明確的設(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)、過(guò)程、結(jié)果驗(yàn)證，簡(jiǎn)單歸納的幾個(gè)反思點(diǎn)，提煉了部分關(guān)鍵內(nèi)容沉淀，以幫助團(tuán)隊(duì)在后續(xù)的項(xiàng)目中解決相關(guān)問(wèn)題。

總結(jié)

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

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

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

作者：張明麗

公眾號(hào)：閱文體驗(yàn)設(shè)計(jì)YUX