上億人使用的起點(diǎn)讀書APP，背后的改版設(shè)計(jì)實(shí)錄！

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

一、背景 · 題目

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

起點(diǎn)讀書自上次大改版到如今已經(jīng)有許多年了，與此同時(shí)外部的閱讀市場(chǎng)也在賡續(xù)發(fā)生著轉(zhuǎn)變。

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

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

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

所以改版天然而然成了我們必要面對(duì)的題目。曩昔的一年，我們做了許多嘗試和探索，去探索改版的各種可能性。如今改版版本趨于完美，可以回顧一下對(duì)于一個(gè)較大型且歷史包袱比較重的項(xiàng)目我們是如何去做改版的。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

前期的設(shè)計(jì)方案我們傾向于勇敢，盼望傳遞更多的設(shè)計(jì)思路給用戶。假如一開始就畏首畏尾，最終在賡續(xù)的調(diào)整中很可能就是產(chǎn)品換了一套皮膚，無法解決本質(zhì)的題目。

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

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

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

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

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

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

僅僅小范圍的訪談收集到的信息可能不夠周全，所以在改版正式上線之前，產(chǎn)品同窗安排了多輪內(nèi)測(cè)來驗(yàn)證方案。在內(nèi)測(cè)過程中，我們賡續(xù)收集內(nèi)測(cè)用戶的反饋，根據(jù)反饋中的題目有針對(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è)一向必要解決的題目。

一個(gè)有序的書架是快速定位的關(guān)鍵。許多人一開始會(huì)整頓書架，慢慢就由于麻煩而摒棄整頓。一旦疏于整頓，從書架浩繁的書中定位要看的書就變得很麻煩。

有沒有辦法可以解決這個(gè)題目？

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

于是我們嘗試在這幾個(gè)維度給用戶提前建立好篩選項(xiàng)，由于我們是從數(shù)據(jù)層面進(jìn)行的篩選，所以作品會(huì)根據(jù)實(shí)時(shí)的狀況出如今不同的篩選項(xiàng)中，用戶無需再進(jìn)行手動(dòng)的管理。我們也盼望通過之后越來越周全和智能的篩選項(xiàng)將用戶從繁瑣的書架管理中漸漸解放出來，無需再建立一堆分組。

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

五、思考總結(jié)

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

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

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

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

2. 功能模塊低耦合，進(jìn)步復(fù)用率

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

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

這次改版過程中碰到的一個(gè)題目就是有些功能模塊由于時(shí)間太久遠(yuǎn)，沒有沉淀下來的設(shè)計(jì)稿和需求文檔。在后續(xù)迭代可能加入了各種各樣的小邏輯，但是后面介入的設(shè)計(jì)師并不知道，只能摸著石頭過河，一邊通過線上版本去嘗試邊界邏輯，一方面只能寄盼望于客戶端同窗在開發(fā)時(shí)給予提醒。所以從團(tuán)隊(duì)的角度而言，正視設(shè)計(jì)資料的沉淀。從小我的角度細(xì)致本身稿件的及時(shí)更新和同步。

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

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

在設(shè)計(jì)的過程中，我們經(jīng)常會(huì)面臨一些設(shè)計(jì)點(diǎn)由于時(shí)間緊，排期短，導(dǎo)致最終上線的結(jié)果并不是我們一開始所設(shè)計(jì)的。在版本上線之后，設(shè)計(jì)師完全可以自動(dòng)繼承跟蹤這些設(shè)計(jì)，去體驗(yàn)，去和使用的用戶聊。一方面作為設(shè)計(jì)者能領(lǐng)會(huì)到本身設(shè)計(jì)的價(jià)值，另一方面能在體驗(yàn)和溝通過程中繼承發(fā)掘設(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)目組的成員賡續(xù)努力下，日趨完美，將來大概仍會(huì)面臨各式各樣的挑釁，但我們肯定會(huì)努力把起點(diǎn)品牌的文化和情感傳承下去，讓起點(diǎn)讀書更有溫度，被更多的用戶接受和喜好。

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