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

2019/4/22 14:46:13來源：互聯(lián)網(wǎng)

郁劍華：回顧對于一個較大型且歷史包袱比較重的項目我們是如何去做改版的。

一、背景 · 題目

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

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

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

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

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

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

二、設(shè)計定位

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

三、設(shè)計流程

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4. 多輪內(nèi)測

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

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

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

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

起點平臺的老用戶許多，長時間的閱齡也讓用戶的書架積累了大量的書籍。如何在書架大量的書中定位到本身想看的書是個一向必要解決的題目。

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

有沒有辦法可以解決這個題目？

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

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

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

五、思考總結(jié)

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

1. 全局性思考，確保體驗同等性

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

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

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

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

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

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

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

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

在設(shè)計的過程中，我們經(jīng)常會面臨一些設(shè)計點由于時間緊，排期短，導(dǎo)致最終上線的結(jié)果并不是我們一開始所設(shè)計的。在版本上線之后，設(shè)計師完全可以自動繼承跟蹤這些設(shè)計，去體驗，去和使用的用戶聊。一方面作為設(shè)計者能領(lǐng)會到本身設(shè)計的價值，另一方面能在體驗和溝通過程中繼承發(fā)掘設(shè)計優(yōu)化的點。最后從設(shè)計維度推動產(chǎn)品下一個版本的體驗優(yōu)化。很難有一步到位的好設(shè)計，持續(xù)打磨和優(yōu)化是一種不錯的體例。

起點的這次改版，在項目組的成員賡續(xù)努力下，日趨完美，將來大概仍會面臨各式各樣的挑釁，但我們肯定會努力把起點品牌的文化和情感傳承下去，讓起點讀書更有溫度，被更多的用戶接受和喜好。