起點讀書APP改版項目小結(jié):我們是如何落地的?

3 評論 14221 瀏覽 106 收藏 16 分鐘

回顧一個較大型且歷史包袱比較重的項目,我們是如何去做改版的。

一、背景 · 問題

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

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

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

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

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

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

二、設(shè)計定位

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

三、設(shè)計流程

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4. 多輪內(nèi)測

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

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

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

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

起點平臺的老用戶很多,長時間的閱齡也讓用戶的書架積累了大量的書籍。如何在書架大量的書中定位到自己想看的書是個一直需要解決的問題。

一個有序的書架是快速定位的關(guān)鍵。很多人一開始會整理書架,慢慢就因為麻煩而放棄整理。一旦疏于整理,從書架眾多的書中定位要看的書就變得很麻煩。

有沒有辦法可以解決這個問題?

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

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

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

五、思考總結(jié)

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

1. 全局性思考,確保體驗一致性

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

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

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

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

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

4. 風(fēng)險設(shè)計不要一蹴而就,反復(fù)體驗不斷優(yōu)化

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

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

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

 

作者:郁劍華

來源:微信公眾號“閱文體驗設(shè)計YUX(ID:YUX_design)”

本文由 @閱文體驗設(shè)計YUX 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

題圖來源于網(wǎng)絡(luò)

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 寫的很棒 很有學(xué)習(xí)借鑒意義

    來自浙江 回復(fù)
  2. 控件小程序太棒了,贊!

    來自北京 回復(fù)