《以實例講產(chǎn)品改版方法論》系列，是一個時間跨度接近半年的全站改版大項目，留下的一點經(jīng)驗，共分為兩個部分。本文為下篇，主要講改版語境下的需求規(guī)劃與交互設(shè)計方法技巧，上篇為改版的立項與推動實操經(jīng)驗。

1. 改版需求規(guī)劃：要打擒王戰(zhàn)、攻堅戰(zhàn)、殲滅戰(zhàn)

我們首先要明確一個概念：大改版就是要樹立好靶子，抓核心要點進而重點擊破。因為改版立項后，通常開發(fā)資源充足，跨部門協(xié)調(diào)師出有名，如果不能打擒王戰(zhàn)、打攻堅戰(zhàn)，不能解決好關(guān)鍵問題，不能集中資源克服疑難問題，那就是浪費資源，不痛不癢。
那么具體如何辨別好靶子呢？

• 首頁明顯可見的問題。
• 關(guān)系產(chǎn)品核心價值的問題（例如UGC缺乏有效的生產(chǎn)者引導機制）。
• 核心體驗流程的問題（例如資訊媒體的內(nèi)容導航、搜索功能效率低下）。
• 影響業(yè)務(wù)轉(zhuǎn)化的問題（如業(yè)務(wù)表單體驗很差）。
• 技術(shù)上的疑難問題、牽一發(fā)動全身的問題。

經(jīng)過對需求池的分類統(tǒng)計，我們定義了原版web端最主要、優(yōu)先級也最高的四大問題，大家可以參照上述原則看例子：

首頁子欄目混亂，曝光欠缺。

首頁、資訊詳情頁停留時長較短，跳出率高。

導航混亂且過載，快速迭代期陸續(xù)加了多個重要欄目和業(yè)務(wù)入口，小屏幕用戶的導航條都已經(jīng)不夠用了。

業(yè)務(wù)表單的組織結(jié)構(gòu)混亂，有用戶反饋找不到入口，也有用戶填寫遇到障礙。在是否要求登錄上沒有一致的規(guī)則，頁面邏輯有錯，跳轉(zhuǎn)會讓人疑惑。

那么為什么說改版又是殲滅戰(zhàn)呢？
這是因為我發(fā)現(xiàn)，通常在開發(fā)中，會遺留一些邊緣用例產(chǎn)生的問題處于pending狀態(tài)。按照現(xiàn)在互聯(lián)網(wǎng)公司的迭代和變更速度，延遲解決約等于不解決，那么改版，就是掃除這些蒼蠅的絕佳推進機會。每個細枝末節(jié)的遺漏、特殊狀態(tài)、像素級的誤差甚至是文案標點，都可以在改版中做到一個不留，全部殲滅。

以上就是我在做改版需求規(guī)劃時的原則，結(jié)合工作量，就可以確定改版需求的范圍和比重。

2. 修復信息架構(gòu)：正骨和消腫

針對1、3、4的問題，我們重新梳理了全站的信息架構(gòu)。

2.1 板塊/信息的分類與組織

信息架構(gòu)中最核心的就是分類法，以下是我總結(jié)的分類維度。

• 關(guān)聯(lián)：在業(yè)務(wù)上有緊密相關(guān)的。如“投資人”和“投融資項目”板塊，屬于從同一業(yè)務(wù)線中的方向不同的兩條流程，向不同的用戶群分別提供服務(wù)。
• 從屬：信息的邏輯歸屬關(guān)系。如文章的兩級分類。
• 同類：屬于同一類信息的不同表現(xiàn)形態(tài)。因信息豐度、來源、時效性、外來屬性等因素不同而產(chǎn)生的呈現(xiàn)差異，如“資訊”、“快訊”與“熱文”，都是新聞資訊類信息，同一個事件可能會在這三者中的任意出現(xiàn)，但展示的字段與布局完全不一樣。應(yīng)注意區(qū)別于從屬，但有時候和從屬的概念相容，這取決于產(chǎn)品目的。
• 同質(zhì)：信息的抽象概念相同，此時通常用戶對其操作模式和預期也是相同的。宏觀上依據(jù)這個分類，可以將信息放入對應(yīng)的布局區(qū)域如焦點區(qū)、熱銷位、板塊窗口位、入口按鈕菜單、用戶菜單等。
• 等重：在某個產(chǎn)品階段內(nèi)，信息的重要性相近。這種分類結(jié)果會隨產(chǎn)品發(fā)展而變化，比如新功能剛推出，你需要超越重要性去給它更強的引流入口。

整理出來之后，大至功能板塊、小至信息布局，都有了清晰的依據(jù)和約束條件。

接著細化的工作：
組織信息的方式（按標簽、按分類、按來源等）、
呈現(xiàn)信息的規(guī)則（顯示條件、排序、分頁、隱藏與轉(zhuǎn)移、加載方式、特殊布局位、默認/缺省設(shè)置等）

2.2 收納箱：處理導航過載的良方

舊版產(chǎn)品的首頁主導航，導航標記多達13個，11寸下的顯示已經(jīng)無法調(diào)整。我依據(jù)等重信息分類，將全產(chǎn)品不重要的功能統(tǒng)統(tǒng)隱藏進【發(fā)現(xiàn)】里面。這時候發(fā)現(xiàn)，公司的2個主要線下業(yè)務(wù)流程的表單入口，也會跟著線上不重要的信息板塊被扔進去，層級會非常深。于是又將他們提出來，利用“同類”分類法，放在【服務(wù)】里面。今后如果還有更多的非主線板塊/欄目，在上線一段時期過后，也會將考慮是否放到【發(fā)現(xiàn)】里面。

2.3 建立統(tǒng)一的操作認知

原版產(chǎn)品的表單，分處于3種不同狀態(tài)的菜單導航中：需要登錄、不需要登錄、已經(jīng)登錄。造成的問題是，我們有的業(yè)務(wù)無法被曝光在未登錄用戶的菜單里，并且在使用時看見同一頁面中有的入口時有時無，很容易迷惑，進而找不到之前提交的信息在何處更改。
針對這個問題，我從建立產(chǎn)品各方面的一致性來解決，包括入口樣式與位置、操作路徑、操作反饋、文本提示等，以保證用戶對同質(zhì)信息或操作，符合其心智模型，或者能建立正確的理解模型。

2.4 考慮改版對SEO的影響

作為資訊類web產(chǎn)品，一定會考慮每次改版或者頁面調(diào)整對SEO的影響。對于主要內(nèi)容要慎用ajax，即使因為體驗優(yōu)化的方案或者反爬蟲決定要使用，那么也要在其他地方補充上能被搜索引擎抓取到的完整頁面，只不過這個入口，不一定被用戶發(fā)現(xiàn)和經(jīng)常使用。實例大家可以分別點擊下列紅框的效果，并觀察頁面地址變化。

2.5 延后復雜輸入操作

最簡單的一層是延后登錄等，將注冊、登錄操作延后到要將用戶行為或數(shù)據(jù)與ID綁定起來的時候。
還有一些是，將原本不適合放在線上、不適合放在移動端的操作，轉(zhuǎn)移到線下人工處理或是利用文件傳輸處理，僅保留能保證主線流程不中斷的信息填寫，這樣可以得到更低的跳出率。

3. 打磨交互細節(jié)

3.1 使用動效來表達路徑、連續(xù)性、從屬關(guān)系

為了使復雜設(shè)計、新設(shè)計更易于理解，我們經(jīng)常使用動效來表達功能的操作原理。

路徑很好理解，典例如將商品添加到購物車后，會有圖像元素從按鈕處以拋物線為軌跡，移動到購物車按鈕。其余還有改版后的操作引導等，可通過軌跡、次序來暗示路徑或方向。

連續(xù)性是指當有元素在橫向、縱向空間中被隱藏，那么可以用對應(yīng)軸向的運動來表達元素的連續(xù)。例如下圖中的導航，我在web端大膽借鑒了移動端的設(shè)計方式。

完成這個動效設(shè)計時候，還要注意3點：

關(guān)注初態(tài)：利用格式塔原則中的“閉合”概念，用殘缺的初態(tài)來提示用戶。

運動方式符合基本概念：該處導航是一個有頭有尾的線條，一定不要做成循環(huán)，那樣會給用戶帶來認知和操作的困擾。

降低對普通用戶的干擾：導航點到第五個以后，才會有動效，在用戶點擊前面幾個高頻分類的時候，如果也做橫向移動，會干擾正常瀏覽，故做起來盡量克制，不干擾正常使用。

最后講講動效表達從屬關(guān)系的例子。還是如圖的導航，只有一個一級分類有子分類，那么子分類菜單就隱藏到父級分類被選中之后吧。

3.2 通過用戶的注意力焦點決定元素位置

改版設(shè)計遇到一個細節(jié)爭論，“首發(fā)”和“獨家”這兩個重要標簽，到底放在哪里，在資訊列表中，是放在資訊頭圖上還是資訊標題前呢？此時產(chǎn)品目標是讓它們顯示在最重要的地方。那么我需要觀察或模擬用戶在本產(chǎn)品內(nèi)注意力焦點的流動，來決定元素位置。通過簡單用研的最終方案如下圖所示。

后來想了一想，要講出道理的話，應(yīng)該是由于垂直類資訊閱讀，用戶的行為偏理性，且配圖的目的通常只是稀釋文字密度，降低閱讀壓力，用戶的注意力焦點，以及選擇進入哪篇資訊的依據(jù)，不在圖片上，都在標題上。如果有眼動圖，那我有把握猜測是用戶焦點大部分是在標題與標題之間移動。

3.3 將數(shù)據(jù)分析融入設(shè)計過程

數(shù)據(jù)分析會涉及改版前、中、后，前定問題，中助設(shè)計，后有反饋驗證。
這里僅談對設(shè)計的幫助。舉個例子，設(shè)計內(nèi)容板塊時，可以先用SQL去拿到自家數(shù)據(jù)庫的關(guān)鍵字段，再用webscraper等爬蟲工具爬同類競品，并統(tǒng)計分析內(nèi)容的如下屬性：

• 極值：極大、極小、空值，以及其成因、實例。
• 平均值、中位數(shù)
• 分布范圍、離散度

一口能答出這些數(shù)據(jù)，那么你的設(shè)計在落地的時候就避免了絕大多數(shù)問題。并且，這些數(shù)據(jù)有時候除了二次處理，還需要結(jié)合場景目標來分析，如資訊閱讀時間預估提示功能，有以下兩個問題：

上萬字的統(tǒng)計和超過一定分鐘數(shù)（如15分鐘）的提示是無意義的，還會嚇走用戶。

分布范圍非常集中于某幾個區(qū)間，線性的映射函數(shù)會失去分離度。

那么對分段函數(shù)的處理，不能采用直觀數(shù)據(jù)，需要結(jié)合數(shù)據(jù)分布范圍和離散度映射出一個“更有吸引力”的數(shù)據(jù)組合來顯示。

3.4 默認規(guī)則、數(shù)據(jù)來源缺失的處理

改版可能會動到一些根基功能，沒有數(shù)據(jù)來源，則需要增加支線功能來讓老用戶過渡到新版，比如之前沒有嚴格綁定手機號，現(xiàn)在要求手機號必填，但又有微信直接注冊和郵箱注冊且遺失郵箱的極端場景。我們就遇到了用戶使用企業(yè)郵箱注冊后離職，無法再次使用郵箱驗證并綁定手機號，這樣的一個場景。

4. 打造產(chǎn)品的萬用基石

4.1 填充空白，利用動靜變化占據(jù)注意力

在首頁新設(shè)計了一個填充性區(qū)域，來專門做關(guān)鍵業(yè)務(wù)的曝光。在首頁向上滾動到大概第三屏的位置（此時右側(cè)邊欄已經(jīng)完成網(wǎng)站的主要功能板塊的遍歷），右邊欄的塊級元素會靜止在頁面上，直到視區(qū)窗口滾動到最下方或起點高度以上。

該區(qū)域的理念是，用戶翻到第三屏的時候，認為其對內(nèi)容需求有一定深度了，此時利用動靜的變化引起注意，有目的地推薦一些內(nèi)容板塊，不會招致反感。
該區(qū)域定位很明顯，當前階段什么東西重要，或者想解決什么問題，提升什么數(shù)據(jù)，直接放上去就會有效果。
目前在這個區(qū)域，放了3個內(nèi)容：

主要業(yè)務(wù)轉(zhuǎn)化入口

快訊 & 熱文（內(nèi)容閱讀延伸）

廣告位（當沒有廣告時，增加快訊&熱文的條數(shù)以達到剛好填充屏幕）

三個內(nèi)容均是對癥下藥，均取得了首頁及相應(yīng)版塊數(shù)據(jù)上的大提升，如提交數(shù)量、停留時間、PV等，其中快訊板塊的日均PV同比有78%的提升。

并且要注意的是，這個區(qū)域也是可以往水平軸向擴展的，比如利用輪播、tab、走馬燈等組件，但同時要注意擴展也會分流。有了這個填充性組件，如果以后會豐富功能或者提升曝光，那無疑我們已經(jīng)提前先把框架搭好了。

4.2 利用抽象模型使產(chǎn)品可擴展

我們還可以分析一些高頻同質(zhì)的新需求，并設(shè)計一些通用性很強的模塊，提煉出核心內(nèi)容的范式，提供標準化、組件化需求擴展迭代方式，為以后新欄目的快速上線創(chuàng)造條件，并減少部分開發(fā)成本，長遠上解決問題。
例如下圖，就是一個首頁資訊欄目擴展的標準容器。

總結(jié)

以上是生活随笔為你收集整理的以实例讲产品改版（下）：需求与设计的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。