《以實(shí)例講產(chǎn)品改版方法論》系列，是一個(gè)時(shí)間跨度接近半年的全站改版大項(xiàng)目焰轻，留下的一點(diǎn)經(jīng)驗(yàn)，共分為兩個(gè)部分昆雀。本文為下篇辱志，主要講改版語(yǔ)境下的需求規(guī)劃與交互設(shè)計(jì)方法技巧，上篇為改版的立項(xiàng)與推動(dòng)實(shí)操經(jīng)驗(yàn)狞膘。
1. 改版需求規(guī)劃：要打擒王戰(zhàn)揩懒、攻堅(jiān)戰(zhàn)、殲滅戰(zhàn)
我們首先要明確一個(gè)概念：大改版就是要樹立好靶子挽封，抓核心要點(diǎn)進(jìn)而重點(diǎn)擊破已球。因?yàn)楦陌媪㈨?xiàng)后，通常開發(fā)資源充足辅愿，跨部門協(xié)調(diào)師出有名智亮，如果不能打擒王戰(zhàn)、打攻堅(jiān)戰(zhàn)点待，不能解決好關(guān)鍵問(wèn)題阔蛉，不能集中資源克服疑難問(wèn)題，那就是浪費(fèi)資源癞埠，不痛不癢状原。
那么具體如何辨別好靶子呢？
- 首頁(yè)明顯可見(jiàn)的問(wèn)題燕差。
- 關(guān)系產(chǎn)品核心價(jià)值的問(wèn)題（例如UGC缺乏有效的生產(chǎn)者引導(dǎo)機(jī)制）遭笋。
- 核心體驗(yàn)流程的問(wèn)題（例如資訊媒體的內(nèi)容導(dǎo)航、搜索功能效率低下）徒探。
- 影響業(yè)務(wù)轉(zhuǎn)化的問(wèn)題（如業(yè)務(wù)表單體驗(yàn)很差）瓦呼。
- 技術(shù)上的疑難問(wèn)題、牽一發(fā)動(dòng)全身的問(wèn)題。
經(jīng)過(guò)對(duì)需求池的分類統(tǒng)計(jì)央串，我們定義了原版web端最主要磨澡、優(yōu)先級(jí)也最高的四大問(wèn)題，大家可以參照上述原則看例子：
- 首頁(yè)子欄目混亂质和，曝光欠缺稳摄。
- 首頁(yè)、資訊詳情頁(yè)停留時(shí)長(zhǎng)較短饲宿，跳出率高厦酬。
- 導(dǎo)航混亂且過(guò)載，快速迭代期陸續(xù)加了多個(gè)重要欄目和業(yè)務(wù)入口瘫想，小屏幕用戶的導(dǎo)航條都已經(jīng)不夠用了仗阅。
- 業(yè)務(wù)表單的組織結(jié)構(gòu)混亂，有用戶反饋找不到入口国夜，也有用戶填寫遇到障礙减噪。在是否要求登錄上沒(méi)有一致的規(guī)則，頁(yè)面邏輯有錯(cuò)车吹，跳轉(zhuǎn)會(huì)讓人疑惑筹裕。
那么為什么說(shuō)改版又是殲滅戰(zhàn)呢？
這是因?yàn)槲野l(fā)現(xiàn)窄驹，通常在開發(fā)中朝卒，會(huì)遺留一些邊緣用例產(chǎn)生的問(wèn)題處于pending狀態(tài)。按照現(xiàn)在互聯(lián)網(wǎng)公司的迭代和變更速度馒吴，延遲解決約等于不解決扎运，那么改版，就是掃除這些蒼蠅的絕佳推進(jìn)機(jī)會(huì)饮戳。每個(gè)細(xì)枝末節(jié)的遺漏豪治、特殊狀態(tài)、像素級(jí)的誤差甚至是文案標(biāo)點(diǎn)扯罐，都可以在改版中做到一個(gè)不留负拟，全部殲滅。
以上就是我在做改版需求規(guī)劃時(shí)的原則歹河，結(jié)合工作量掩浙，就可以確定改版需求的范圍和比重。
2. 修復(fù)信息架構(gòu)：正骨和消腫
針對(duì)1秸歧、3厨姚、4的問(wèn)題，我們重新梳理了全站的信息架構(gòu)键菱。
2.1 板塊/信息的分類與組織
信息架構(gòu)中最核心的就是分類法谬墙，以下是我總結(jié)的分類維度。
- 關(guān)聯(lián)：在業(yè)務(wù)上有緊密相關(guān)的。如“投資人”和“投融資項(xiàng)目”板塊拭抬，屬于從同一業(yè)務(wù)線中的方向不同的兩條流程部默，向不同的用戶群分別提供服務(wù)。
- 從屬：信息的邏輯歸屬關(guān)系造虎。如文章的兩級(jí)分類傅蹂。
- 同類：屬于同一類信息的不同表現(xiàn)形態(tài)。因信息豐度算凿、來(lái)源份蝴、時(shí)效性、外來(lái)屬性等因素不同而產(chǎn)生的呈現(xiàn)差異氓轰，如“資訊”搞乏、“快訊”與“熱文”，都是新聞資訊類信息戒努，同一個(gè)事件可能會(huì)在這三者中的任意出現(xiàn)，但展示的字段與布局完全不一樣镐躲。應(yīng)注意區(qū)別于從屬储玫，但有時(shí)候和從屬的概念相容，這取決于產(chǎn)品目的萤皂。
- 同質(zhì)：信息的抽象概念相同撒穷，此時(shí)通常用戶對(duì)其操作模式和預(yù)期也是相同的。宏觀上依據(jù)這個(gè)分類裆熙，可以將信息放入對(duì)應(yīng)的布局區(qū)域如焦點(diǎn)區(qū)端礼、熱銷位、板塊窗口位入录、入口按鈕菜單蛤奥、用戶菜單等。
- 等重：在某個(gè)產(chǎn)品階段內(nèi)僚稿，信息的重要性相近凡桥。這種分類結(jié)果會(huì)隨產(chǎn)品發(fā)展而變化，比如新功能剛推出蚀同，你需要超越重要性去給它更強(qiáng)的引流入口缅刽。
整理出來(lái)之后，大至功能板塊蠢络、小至信息布局衰猛，都有了清晰的依據(jù)和約束條件。
接著細(xì)化的工作：
組織信息的方式（按標(biāo)簽刹孔、按分類啡省、按來(lái)源等）、
呈現(xiàn)信息的規(guī)則（顯示條件、排序冕杠、分頁(yè)微姊、隱藏與轉(zhuǎn)移、加載方式分预、特殊布局位兢交、默認(rèn)/缺省設(shè)置等）
2.2 收納箱：處理導(dǎo)航過(guò)載的良方
舊版產(chǎn)品的首頁(yè)主導(dǎo)航，導(dǎo)航標(biāo)記多達(dá)13個(gè)笼痹，11寸下的顯示已經(jīng)無(wú)法調(diào)整配喳。我依據(jù)等重信息分類，將全產(chǎn)品不重要的功能統(tǒng)統(tǒng)隱藏進(jìn)【發(fā)現(xiàn)】里面凳干。這時(shí)候發(fā)現(xiàn)晴裹，公司的2個(gè)主要線下業(yè)務(wù)流程的表單入口，也會(huì)跟著線上不重要的信息板塊被扔進(jìn)去救赐，層級(jí)會(huì)非常深涧团。于是又將他們提出來(lái)，利用“同類”分類法经磅，放在【服務(wù)】里面泌绣。今后如果還有更多的非主線板塊/欄目，在上線一段時(shí)期過(guò)后预厌，也會(huì)將考慮是否放到【發(fā)現(xiàn)】里面阿迈。
2.3 建立統(tǒng)一的操作認(rèn)知
原版產(chǎn)品的表單，分處于3種不同狀態(tài)的菜單導(dǎo)航中：需要登錄轧叽、不需要登錄苗沧、已經(jīng)登錄。造成的問(wèn)題是炭晒，我們有的業(yè)務(wù)無(wú)法被曝光在未登錄用戶的菜單里待逞，并且在使用時(shí)看見(jiàn)同一頁(yè)面中有的入口時(shí)有時(shí)無(wú)，很容易迷惑网严，進(jìn)而找不到之前提交的信息在何處更改飒焦。
針對(duì)這個(gè)問(wèn)題，我從建立產(chǎn)品各方面的一致性來(lái)解決屿笼，包括入口樣式與位置牺荠、操作路徑、操作反饋驴一、文本提示等休雌，以保證用戶對(duì)同質(zhì)信息或操作，符合其心智模型肝断，或者能建立正確的理解模型杈曲。
2.4 考慮改版對(duì)SEO的影響
作為資訊類web產(chǎn)品驰凛，一定會(huì)考慮每次改版或者頁(yè)面調(diào)整對(duì)SEO的影響。對(duì)于主要內(nèi)容要慎用ajax担扑，即使因?yàn)轶w驗(yàn)優(yōu)化的方案或者反爬蟲決定要使用恰响，那么也要用其他頁(yè)面補(bǔ)充上，只不過(guò)這個(gè)入口涌献，不一定被用戶發(fā)現(xiàn)和經(jīng)常使用胚宦。實(shí)例大家可以分別點(diǎn)擊下列紅框的效果，并觀察頁(yè)面地址變化燕垃。
2.5 延后復(fù)雜輸入操作
最簡(jiǎn)單的一層是延后登錄等枢劝，將注冊(cè)、登錄操作延后到要將用戶行為或數(shù)據(jù)與ID綁定起來(lái)的時(shí)候卜壕。
還有一些是您旁，將原本不適合放在線上、不適合放在移動(dòng)端的操作轴捎，轉(zhuǎn)移到線下人工處理或是利用文件傳輸處理鹤盒，僅保留能保證主線流程不中斷的信息填寫，這樣可以得到更低的跳出率侦副。
3. 打磨交互細(xì)節(jié)
3.1 使用動(dòng)效來(lái)表達(dá)路徑昨悼、連續(xù)性、從屬關(guān)系
為了使復(fù)雜設(shè)計(jì)跃洛、新設(shè)計(jì)更易于理解，我們經(jīng)常使用動(dòng)效來(lái)表達(dá)功能的操作原理终议。
路徑很好理解汇竭，典例如將商品添加到購(gòu)物車后，會(huì)有圖像元素從按鈕處以拋物線為軌跡穴张，移動(dòng)到購(gòu)物車按鈕细燎。其余還有改版后的操作引導(dǎo)等，可通過(guò)軌跡皂甘、次序來(lái)暗示路徑或方向玻驻。
連續(xù)性是指當(dāng)有元素在橫向、縱向空間中被隱藏偿枕，那么可以用對(duì)應(yīng)軸向的運(yùn)動(dòng)來(lái)表達(dá)元素的連續(xù)璧瞬。例如下圖中的導(dǎo)航，我在web端大膽借鑒了移動(dòng)端的設(shè)計(jì)方式渐夸。
完成這個(gè)動(dòng)效設(shè)計(jì)時(shí)候嗤锉，還要注意3點(diǎn)：
- 關(guān)注初態(tài)：利用格式塔原則中的“閉合”概念，用殘缺的初態(tài)來(lái)提示用戶墓塌。
- 運(yùn)動(dòng)方式符合基本概念：該處導(dǎo)航是一個(gè)有頭有尾的線條瘟忱，一定不要做成循環(huán)奥额，那樣會(huì)給用戶帶來(lái)認(rèn)知和操作的困擾。
- 降低對(duì)普通用戶的干擾：導(dǎo)航點(diǎn)到第五個(gè)以后访诱，才會(huì)有動(dòng)效垫挨，在用戶點(diǎn)擊前面幾個(gè)高頻分類的時(shí)候，如果也做橫向移動(dòng)触菜，會(huì)干擾正常瀏覽九榔，故做起來(lái)盡量克制，不干擾正常使用玫氢。
最后講講動(dòng)效表達(dá)從屬關(guān)系的例子帚屉。還是如圖的導(dǎo)航，只有一個(gè)一級(jí)分類有子分類漾峡，那么子分類菜單就隱藏到父級(jí)分類被選中之后吧攻旦。
3.2 通過(guò)用戶的注意力焦點(diǎn)決定元素位置
改版設(shè)計(jì)遇到一個(gè)細(xì)節(jié)爭(zhēng)論，“首發(fā)”和“獨(dú)家”這兩個(gè)重要標(biāo)簽生逸，到底放在哪里牢屋，在資訊列表中，是放在資訊頭圖上還是資訊標(biāo)題前呢槽袄？此時(shí)產(chǎn)品目標(biāo)是讓它們顯示在最重要的地方烙无。那么我需要觀察或模擬用戶在本產(chǎn)品內(nèi)注意力焦點(diǎn)的流動(dòng)，來(lái)決定元素位置遍尺。通過(guò)簡(jiǎn)單用研的最終方案如下圖所示截酷。
后來(lái)想了一想，要講出道理的話乾戏，應(yīng)該是由于垂直類資訊閱讀迂苛，用戶的行為偏理性，且配圖的目的通常只是稀釋文字密度鼓择，降低閱讀壓力三幻，用戶的注意力焦點(diǎn)，以及選擇進(jìn)入哪篇資訊的依據(jù)呐能，不在圖片上念搬，都在標(biāo)題上。如果有眼動(dòng)圖摆出，那我有把握猜測(cè)是用戶焦點(diǎn)大部分是在標(biāo)題與標(biāo)題之間移動(dòng)朗徊。
3.3 將數(shù)據(jù)分析融入設(shè)計(jì)過(guò)程
數(shù)據(jù)分析會(huì)涉及改版前、中偎漫、后荣倾，前定問(wèn)題，中助設(shè)計(jì)骑丸，后有反饋驗(yàn)證舌仍。
這里僅談對(duì)設(shè)計(jì)的幫助妒貌。舉個(gè)例子，設(shè)計(jì)內(nèi)容板塊時(shí)铸豁，可以先用SQL去拿到自家數(shù)據(jù)庫(kù)的關(guān)鍵字段灌曙，再用webscraper等爬蟲工具爬同類競(jìng)品，并統(tǒng)計(jì)分析內(nèi)容的如下屬性：
- 極值：極大节芥、極小在刺、空值，以及其成因头镊、實(shí)例蚣驼。
- 平均值、中位數(shù)
- 分布范圍相艇、離散度
一口能答出這些數(shù)據(jù)颖杏，那么你的設(shè)計(jì)在落地的時(shí)候就避免了絕大多數(shù)問(wèn)題。并且坛芽，這些數(shù)據(jù)有時(shí)候除了二次處理留储，還需要結(jié)合場(chǎng)景目標(biāo)來(lái)分析，如資訊閱讀時(shí)間預(yù)估提示功能咙轩，有以下兩個(gè)問(wèn)題：
- 上萬(wàn)字的統(tǒng)計(jì)和超過(guò)一定分鐘數(shù)（如15分鐘）的提示是無(wú)意義的获讳，還會(huì)嚇走用戶。
- 分布范圍非常集中于某幾個(gè)區(qū)間活喊，線性的映射函數(shù)會(huì)失去分離度丐膝。
那么對(duì)分段函數(shù)的處理，不能采用直觀數(shù)據(jù)钾菊，需要結(jié)合數(shù)據(jù)分布范圍和離散度映射出一個(gè)“更有吸引力”的數(shù)據(jù)組合來(lái)顯示帅矗。
3.4 默認(rèn)規(guī)則、數(shù)據(jù)來(lái)源缺失的處理
改版可能會(huì)動(dòng)到一些根基功能结缚，沒(méi)有數(shù)據(jù)來(lái)源，則需要增加支線功能來(lái)讓老用戶過(guò)渡到新版软棺，比如之前沒(méi)有嚴(yán)格綁定手機(jī)號(hào)红竭，現(xiàn)在要求手機(jī)號(hào)必填，但又有微信直接注冊(cè)和郵箱注冊(cè)且遺失郵箱的極端場(chǎng)景喘落。我們就遇到了用戶使用企業(yè)郵箱注冊(cè)后離職茵宪，無(wú)法再次使用郵箱驗(yàn)證并綁定手機(jī)號(hào)，這樣的一個(gè)場(chǎng)景瘦棋。
4. 打造產(chǎn)品的萬(wàn)用基石
4.1 填充空白稀火，利用動(dòng)靜變化占據(jù)注意力
在首頁(yè)新設(shè)計(jì)了一個(gè)填充性區(qū)域，來(lái)專門做關(guān)鍵業(yè)務(wù)的曝光赌朋。在首頁(yè)向上滾動(dòng)到大概第三屏的位置（此時(shí)右側(cè)邊欄已經(jīng)完成網(wǎng)站的主要功能板塊的遍歷）凰狞，右邊欄的塊級(jí)元素會(huì)靜止在頁(yè)面上篇裁，直到視區(qū)窗口滾動(dòng)到最下方或起點(diǎn)高度以上。
該區(qū)域的理念是赡若，用戶翻到第三屏的時(shí)候达布，認(rèn)為其對(duì)內(nèi)容需求有一定深度了，此時(shí)利用動(dòng)靜的變化引起注意逾冬，有目的地推薦一些內(nèi)容板塊黍聂，不會(huì)招致反感。
該區(qū)域定位很明顯身腻，當(dāng)前階段什么東西重要产还，或者想解決什么問(wèn)題，提升什么數(shù)據(jù)嘀趟，直接放上去就會(huì)有效果脐区。
目前在這個(gè)區(qū)域，放了3個(gè)內(nèi)容：
- 主要業(yè)務(wù)轉(zhuǎn)化入口
- 快訊 & 熱文（內(nèi)容閱讀延伸）
- 廣告位（當(dāng)沒(méi)有廣告時(shí)去件，增加快訊&熱文的條數(shù)以達(dá)到剛好填充屏幕）
三個(gè)內(nèi)容均是對(duì)癥下藥坡椒，均取得了首頁(yè)及相應(yīng)版塊數(shù)據(jù)上的大提升，如提交數(shù)量尤溜、停留時(shí)間倔叼、PV等，其中快訊板塊的日均PV同比有78%的提升宫莱。
并且要注意的是丈攒，這個(gè)區(qū)域也是可以往水平軸向擴(kuò)展的，比如利用輪播授霸、tab巡验、走馬燈等組件，但同時(shí)要注意擴(kuò)展也會(huì)分流碘耳。有了這個(gè)填充性組件显设，如果以后會(huì)豐富功能或者提升曝光，那無(wú)疑我們已經(jīng)提前先把框架搭好了辛辨。
4.2 利用抽象模型使產(chǎn)品可擴(kuò)展
我們還可以分析一些高頻同質(zhì)的新需求捕捂，并設(shè)計(jì)一些通用性很強(qiáng)的模塊，提煉出核心內(nèi)容的范式斗搞，提供標(biāo)準(zhǔn)化指攒、組件化需求擴(kuò)展迭代方式，為以后新欄目的快速上線創(chuàng)造條件僻焚，并減少部分開發(fā)成本允悦，長(zhǎng)遠(yuǎn)上解決問(wèn)題。
例如下圖虑啤，就是一個(gè)首頁(yè)資訊欄目擴(kuò)展的標(biāo)準(zhǔn)容器隙弛。
