郁劍華：回顧對(duì)于一個(gè)較大型且歷史包袱比較重的項(xiàng)目我們是如何去做改版的。

一、背景 · 問(wèn)題

起點(diǎn)是一個(gè)有著16年歷史的原創(chuàng)文學(xué)品牌，有著成熟的品牌定位和產(chǎn)品風(fēng)格，經(jīng)過(guò)這些年的不斷努力，也積累了一大批長(zhǎng)期使用、粘性高的擁躉。有些用戶幾乎是從起點(diǎn)品牌創(chuàng)立初期就開始使用。這些老用戶在長(zhǎng)期使用過(guò)程中，養(yǎng)成了自己固有的看書、找書的方式和途徑，對(duì)改變的態(tài)度比較保守。

起點(diǎn)讀書自上次大改版到現(xiàn)在已經(jīng)有很多年了，與此同時(shí)外部的閱讀市場(chǎng)也在不斷發(fā)生著變化。

一方面，從品牌和視覺(jué)而言，PC端于2016年經(jīng)歷了一次 Logo 升級(jí)，對(duì)篆體進(jìn)行了簡(jiǎn)化，同時(shí)對(duì)字體進(jìn)行了標(biāo)準(zhǔn)化處理，一定程度提高了辨識(shí)度。

但升級(jí)后仍然面臨認(rèn)知模糊，篆體字做 Logo 品牌仍不夠年輕等問(wèn)題。

另一方面，從架構(gòu)和交互方面，隨著產(chǎn)品功能的不斷增加和完善，已有的產(chǎn)品架構(gòu)已經(jīng)不能支撐現(xiàn)有的產(chǎn)品形態(tài)。很多新增功能的入口，不得不見縫插針的穿插在各個(gè)頁(yè)面中。App 的信息架構(gòu)開始變得混亂，大大增加了新用戶的上手難度，同時(shí)也不利于新增重要功能模塊的曝光。

所以改版自然而然成了我們需要面對(duì)的問(wèn)題。過(guò)去的一年，我們做了很多嘗試和探索，去探索改版的各種可能性。現(xiàn)在改版版本趨于完善，可以回顧一下對(duì)于一個(gè)較大型且歷史包袱比較重的項(xiàng)目我們是如何去做改版的。

二、設(shè)計(jì)定位

• 品牌升級(jí)、界面風(fēng)格年輕化
• 重新梳理信息架構(gòu)，全局控件，適應(yīng)后續(xù)業(yè)務(wù)發(fā)展
• 提高還原度、保持雙端體驗(yàn)一致性

三、設(shè)計(jì)流程

1. 梳理-歸納-調(diào)整

調(diào)整架構(gòu)讓功能區(qū)域劃分更清晰。

我們?cè)陧?xiàng)目起始階段梳理了線上版本的所有頁(yè)面和功能，將功能相近的入口進(jìn)行了歸類。使得區(qū)域劃分更加清晰，便于新用戶在上手體驗(yàn)的過(guò)程中快速建立心智模型。

• 書架：管理書架和獲得關(guān)注用戶的消息。
• 精選：包含分類、排行、免費(fèi)、新書、完本、搜索等找書入口。頂部男生、女生、漫畫、聽書的4tab排布，讓各種類型的作品劃分的更清晰，也大大增加了漫畫聽書板塊的曝光。
• 發(fā)現(xiàn)：承載UGC相關(guān)內(nèi)容和其他的一些功能模塊。
• 我的：管理用戶信息和設(shè)置。

另一方面，在梳理頁(yè)面的過(guò)程中，我們也對(duì)端內(nèi)所有的控件和展示規(guī)則進(jìn)行了梳理。

在交互視覺(jué)階段，我們將全局使用的控件樣式重新進(jìn)行梳理、歸類、設(shè)計(jì)出適用于全端的樣式組合。解決了舊版樣式表現(xiàn)不一的情況，同時(shí)通過(guò)對(duì)組件系統(tǒng)、云端合作進(jìn)行研究與推廣，提升了出稿效率、優(yōu)化了合作流程，并為后續(xù)的設(shè)計(jì)還原提供了規(guī)范依據(jù)。

我們將各類通用規(guī)則（如時(shí)間、數(shù)字、文字表述等）進(jìn)行了重新制定。從視覺(jué)維度我們又把色彩、字體、彈窗、點(diǎn)擊區(qū)等進(jìn)行梳理整合形成規(guī)范。通過(guò)交互視覺(jué)的雙向標(biāo)準(zhǔn)，我們將起點(diǎn)龐大的結(jié)構(gòu)收縮在設(shè)計(jì)的可控范圍內(nèi)；保證一致性的同時(shí)，也為產(chǎn)品設(shè)計(jì)提供理論依據(jù)。規(guī)范讓后續(xù)的設(shè)計(jì)效率提高，成本減少，也讓設(shè)計(jì)師可以將更多的精力放在打磨細(xì)節(jié)和優(yōu)化體驗(yàn)上。

我們一直在思考控件庫(kù)的本質(zhì)意義，通過(guò)與開發(fā)同學(xué)溝通，我們將設(shè)計(jì)使用的組件庫(kù)與開發(fā)的組件庫(kù)進(jìn)行整合，最終開發(fā)出一套可操作的組件程序。通過(guò)該程序，我們可以直接在手機(jī)上對(duì)各類組件進(jìn)行預(yù)覽或者自由組合。開發(fā)同學(xué)可以在代碼層面利用該程序中的基礎(chǔ)樣式拼接出全端大部分樣式。只需要簡(jiǎn)單的調(diào)整就可完成大部分的組件更新，一定程度上提高了開發(fā)效率。

2. 基于數(shù)據(jù)的層級(jí)調(diào)整

根據(jù)點(diǎn)擊數(shù)據(jù)調(diào)整功能的層級(jí)。

在設(shè)計(jì)初期，通過(guò)燈塔拉取了功能模塊各處的點(diǎn)擊數(shù)據(jù)，數(shù)據(jù)反映了用戶對(duì)于功能的使用頻次和關(guān)注程度。在保證不丟失信息的情況下，對(duì)于點(diǎn)擊較少，低頻使用的入口進(jìn)行了整合或增加層級(jí)。把優(yōu)質(zhì)位置讓給更為核心和常用的功能。讓頁(yè)面變得更簡(jiǎn)潔，用戶可以更高效的找到自己常用的功能，避免出現(xiàn)認(rèn)知過(guò)載。

前期的設(shè)計(jì)方案我們傾向于大膽，希望傳遞更多的設(shè)計(jì)思路給用戶。如果一開始就畏首畏尾，最終在不斷的調(diào)整中很可能就是產(chǎn)品換了一套皮膚，無(wú)法解決本質(zhì)的問(wèn)題。

3. 通過(guò)訪談與調(diào)研降低設(shè)計(jì)的系統(tǒng)性風(fēng)險(xiǎn)

讓老用戶幫助發(fā)現(xiàn)產(chǎn)品設(shè)計(jì)中的風(fēng)險(xiǎn)點(diǎn)。

前期發(fā)散設(shè)計(jì)的過(guò)程中，我們主動(dòng)跟作家、編輯各相關(guān)業(yè)務(wù)部門進(jìn)行了大量的溝通，在獲得了很多建議的同時(shí)，保證設(shè)計(jì)盡量不去影響業(yè)務(wù)側(cè)的核心訴求。如果等到產(chǎn)品落地后再溝通很可能出現(xiàn)較大的風(fēng)險(xiǎn)。每個(gè)業(yè)務(wù)方考慮問(wèn)題的角度不同，而設(shè)計(jì)者如何在中間掌握好平衡非常重要。

在基本達(dá)成共識(shí)之后，我們除了和公司內(nèi)部資深用戶進(jìn)行了溝通，又邀請(qǐng)了10位真實(shí)資深用戶進(jìn)行了訪談并試用產(chǎn)品 Demo。資深用戶的介入為產(chǎn)品提供了很多有價(jià)值的意見和后續(xù)優(yōu)化的方向。因?yàn)楸敬胃陌娴恼{(diào)整很大，所以回頭再來(lái)看這次訪談很有價(jià)值，幫助我們確定了思路，減少了風(fēng)險(xiǎn)。

4. 多輪內(nèi)測(cè)

多輪內(nèi)測(cè)確保核心問(wèn)題點(diǎn)得到解決。

僅僅小范圍的訪談收集到的信息可能不夠全面，所以在改版正式上線之前，產(chǎn)品同學(xué)安排了多輪內(nèi)測(cè)來(lái)驗(yàn)證方案。在內(nèi)測(cè)過(guò)程中，我們不斷收集內(nèi)測(cè)用戶的反饋，根據(jù)反饋中的問(wèn)題有針對(duì)性的優(yōu)化調(diào)整了方案。

四、設(shè)計(jì)細(xì)節(jié)

改版做了很多設(shè)計(jì)上的調(diào)整與優(yōu)化，這里跟大家分享一下書架處的一個(gè)設(shè)計(jì)。

起點(diǎn)平臺(tái)的老用戶很多，長(zhǎng)時(shí)間的閱齡也讓用戶的書架積累了大量的書籍。如何在書架大量的書中定位到自己想看的書是個(gè)一直需要解決的問(wèn)題。

一個(gè)有序的書架是快速定位的關(guān)鍵。很多人一開始會(huì)整理書架，慢慢就因?yàn)槁闊┒艞壵怼Ｒ坏┦栌谡恚瑥臅鼙姸嗟臅卸ㄎ灰吹臅妥兊煤苈闊?/p>

有沒(méi)有辦法可以解決這個(gè)問(wèn)題？

我們和使用分組的用戶溝通發(fā)現(xiàn)，用戶管理書架的維度比較單一，集中在幾個(gè)維度：作品更新狀態(tài)，經(jīng)典歸檔（已經(jīng)看過(guò)的好書，在書荒時(shí)回看），養(yǎng)肥作品（等作品更新積累到一定章節(jié)后再一次性看完）、分類／標(biāo)簽作品（同一類型的作品）。

于是我們嘗試在這幾個(gè)維度給用戶提前建立好篩選項(xiàng)，因?yàn)槲覀兪菑臄?shù)據(jù)層面進(jìn)行的篩選，所以作品會(huì)根據(jù)實(shí)時(shí)的狀態(tài)出現(xiàn)在不同的篩選項(xiàng)中，用戶無(wú)需再進(jìn)行手動(dòng)的管理。我們也希望通過(guò)之后越來(lái)越全面和智能的篩選項(xiàng)將用戶從繁瑣的書架管理中逐漸解放出來(lái)，無(wú)需再建立一堆分組。

書架篩選的出現(xiàn)給了后續(xù)很多的想象空間，讓書架精細(xì)化運(yùn)營(yíng)成為可能，我們也將繼續(xù)探索更好的方案。

五、思考總結(jié)

改版對(duì)于任何一個(gè)產(chǎn)品而言都是一個(gè)很有挑戰(zhàn)的事情，對(duì)于設(shè)計(jì)師而言也會(huì)承受各方面的壓力，但是為了避免犯錯(cuò)而不去作為，不去探索，并不是我們所希望看到的。要守住老用戶的同時(shí)，展望并吸引更多的新用戶。

1. 全局性思考，確保體驗(yàn)一致性

在日常的設(shè)計(jì)中參與的設(shè)計(jì)師眾多，設(shè)計(jì)師很容易各自為戰(zhàn)，為了某個(gè)模塊的效果，增加特殊的樣式，特殊的概念甚至特殊的交互形式。時(shí)間一久 app 很容易變得雜亂而臃腫，用戶更是不懂各個(gè)地方的區(qū)別，可能樣子差不多的兩個(gè)模塊，同樣的操作卻有完全不同的結(jié)果，讓人一頭霧水。所以在合作的時(shí)候要重視規(guī)范信息的同步和共識(shí)，就像視覺(jué)設(shè)計(jì)一樣，需要先確定整個(gè)產(chǎn)品的主風(fēng)格，大家圍繞主風(fēng)格再進(jìn)行設(shè)計(jì)。所有人站在全局來(lái)思考自己模塊的設(shè)計(jì)，在滿足需求的基礎(chǔ)上，兼顧全局體驗(yàn)的一致性。

查看相關(guān)文檔：起點(diǎn)改版視覺(jué)工作流優(yōu)化

2. 功能模塊低耦合，提高復(fù)用率

盡量減少功能模塊之間的耦合度，讓每個(gè)模塊盡可能獨(dú)立承載完成某個(gè)特定的功能。不要讓兩個(gè)模塊之間產(chǎn)生過(guò)于復(fù)雜的關(guān)聯(lián)關(guān)系。否則在產(chǎn)品功能迭代的過(guò)程中，很有可能修改了一處設(shè)計(jì)導(dǎo)致其他模塊都受到關(guān)聯(lián)影響。盡量通過(guò)功能復(fù)用來(lái)滿足需求，更加靈活。

3. 設(shè)計(jì)資料的沉淀和更新

這次改版過(guò)程中遇到的一個(gè)問(wèn)題就是有些功能模塊因?yàn)闀r(shí)間太久遠(yuǎn)，沒(méi)有沉淀下來(lái)的設(shè)計(jì)稿和需求文檔。在后續(xù)迭代可能加入了各種各樣的小邏輯，但是后面介入的設(shè)計(jì)師并不知道，只能摸著石頭過(guò)河，一邊通過(guò)線上版本去嘗試邊界邏輯，一方面只能寄希望于客戶端同學(xué)在開發(fā)時(shí)給予提示。所以從團(tuán)隊(duì)的角度而言，重視設(shè)計(jì)資料的沉淀。從個(gè)人的角度注意自己稿件的及時(shí)更新和同步。

4. 風(fēng)險(xiǎn)設(shè)計(jì)不要一蹴而就，反復(fù)體驗(yàn)不斷優(yōu)化

將需要試錯(cuò)的設(shè)計(jì)最小化實(shí)現(xiàn)，再通過(guò)后續(xù)迭代完善體驗(yàn)。這樣可以保證產(chǎn)品靈活應(yīng)對(duì)各種反饋。在較小的成本下進(jìn)行調(diào)整。

在設(shè)計(jì)的過(guò)程中，我們經(jīng)常會(huì)面臨一些設(shè)計(jì)點(diǎn)因?yàn)闀r(shí)間緊，排期短，導(dǎo)致最終上線的效果并不是我們一開始所設(shè)計(jì)的。在版本上線之后，設(shè)計(jì)師完全可以主動(dòng)繼續(xù)跟蹤這些設(shè)計(jì)，去體驗(yàn)，去和使用的用戶聊。一方面作為設(shè)計(jì)者能體會(huì)到自己設(shè)計(jì)的價(jià)值，另一方面能在體驗(yàn)和溝通過(guò)程中繼續(xù)挖掘設(shè)計(jì)優(yōu)化的點(diǎn)。最后從設(shè)計(jì)維度推動(dòng)產(chǎn)品下一個(gè)版本的體驗(yàn)優(yōu)化。很難有一步到位的好設(shè)計(jì)，持續(xù)打磨和優(yōu)化是一種不錯(cuò)的方式。

起點(diǎn)的這次改版，在項(xiàng)目組的成員不斷努力下，日趨完善，未來(lái)也許仍會(huì)面臨各式各樣的挑戰(zhàn)，但我們一定會(huì)努力把起點(diǎn)品牌的文化和情感傳承下去，讓起點(diǎn)讀書更有溫度，被更多的用戶接受和喜歡。

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

「優(yōu)秀團(tuán)隊(duì)的改版設(shè)計(jì)案例」

• 《丁香園 8.0 全新改版升級(jí)，設(shè)計(jì)背后的故事》
• 《看似簡(jiǎn)單的喜馬拉雅FM主播等級(jí)體系，是如何做改版設(shè)計(jì)的？》
• 《上億人使用的泛娛樂(lè)微信店，是如何做改版設(shè)計(jì)的？》