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

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

一、背景 · 題目

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

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

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

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

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

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

二、設計定位

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

三、設計流程

1. 梳理-歸納-調整

調整架構讓功能區(qū)域劃分更清晰。

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

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

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

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

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

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

2. 基于數據的層級調整

根據點擊數據調整功能的層級。

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

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

3. 通過訪談與調研降低設計的體系性風險

讓老用戶幫助發(fā)現產品設計中的風險點。

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

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

4. 多輪內測

多輪內測確保核心題目點得到解決。

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

四、設計細節(jié)

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

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

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

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

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

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

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

五、思考總結

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

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

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

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

2. 功能模塊低耦合，進步復用率

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

3. 設計資料的沉淀和更新

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

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

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

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

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

迎接關注「閱體裁驗設計YUX」公眾號