產(chan)品(pin)改版是每個(ge)(ge)產(chan)品(pin)人可能都(dou)會經歷到的事，小到一個(ge)(ge)主頁面(mian)，大(da)到整(zheng)個(ge)(ge)產(chan)品(pin)升級改版；而(er)做(zuo)這(zhe)樣的調(diao)整(zheng)，不管大(da)小，往(wang)(wang)往(wang)(wang)貫穿改版生命周期(qi)(qi)，而(er)這(zhe)個(ge)(ge)周期(qi)(qi)大(da)致可以分為(wei)“設計(ji)(ji)前”、“設計(ji)(ji)中”、“設計(ji)(ji)后”共3個(ge)(ge)關鍵環節。

本期文(wen)章(zhang)，將基于這一場景，分(fen)享其(qi)中需要注(zhu)意的(de)8點核心要素。

一、改版背景

在開始前，先(xian)簡單(dan)說下為什么會有“產品改版”這一(yi)需求。

產(chan)品設計框(kuang)架：當(dang)一個產品遇到業務變(bian)化，或者產品能力迭(die)代(dai)已久，過往定(ding)下的(de)框(kuang)架可能有了(le)較大變(bian)化，甚至約束了(le)后續的(de)迭(die)代(dai)；所以怎(zen)么(me)設計怎(zen)么(me)布局都會看著很(hen)別(bie)扭(niu)，那么(me)這時候就需要再次(ci)重新梳理產品的(de)核心方(fang)向和框(kuang)架布局。

品(pin)(pin)牌升(sheng)級(ji)：當一(yi)(yi)個產(chan)品(pin)(pin)到了一(yi)(yi)個新(xin)階段(duan)，它需(xu)要重構自身(shen)的(de)(de)定位，在用戶心中建(jian)立新(xin)的(de)(de)心智模型(xing)和品(pin)(pin)牌認知(zhi)；因為(wei)一(yi)(yi)個趨近成熟的(de)(de)產(chan)品(pin)(pin)，這時(shi)候會更(geng)強調(diao)產(chan)品(pin)(pin)文化，而這時(shi)候建(jian)立一(yi)(yi)個新(xin)的(de)(de)文化觀念(nian)，有時(shi)候就需(xu)要這一(yi)(yi)個“全新(xin)升(sheng)級(ji)改版(ban)”來(lai)建(jian)立這一(yi)(yi)的(de)(de)認知(zhi)。

產(chan)品功能(neng)(neng)：單純從設計而(er)言，在功能(neng)(neng)越來越豐(feng)富情況，過往的設計可能(neng)(neng)會(hui)偏“定制(zhi)”，和后續迭代起來的功能(neng)(neng)沒那么統(tong)一(yi)連貫(guan)，這樣就缺乏一(yi)些(xie)一(yi)致性；所以對于一(yi)些(xie)產(chan)品設計、交(jiao)互體驗也是需要(yao)重新統(tong)一(yi)起來。

二、設計的三個重要階段

以一個(ge)改版設計的全貌且具備閉環的，可以劃分三(san)個(ge)重要階段：

• 設(she)計(ji)前(qian)：指在進行具體設(she)計(ji)時，需要做(zuo)的前(qian)置工(gong)作。而(er)這(zhe)些工(gong)作包括“用戶認知(zhi)”、“意見收(shou)集”、“數據分析(xi)”等等；做(zuo)這(zhe)些工(gong)作的目的，在于為后續設(she)計(ji)提供較(jiao)為科學、客觀的依據。

• 設(she)(she)計(ji)中：指在(zai)具體設(she)(she)計(ji)時，需要做的(de)幾個關(guan)鍵工作。這里(li)有(you)先(xian)后之分，分別(bie)是“產(chan)(chan)(chan)品調性”、“產(chan)(chan)(chan)品布(bu)局”、“功能設(she)(she)計(ji)”；確(que)立此次設(she)(she)計(ji)的(de)基調，梳理(li)新(xin)的(de)產(chan)(chan)(chan)品框(kuang)架及布(bu)局，并進行相(xiang)應(ying)的(de)產(chan)(chan)(chan)品設(she)(she)計(ji)。

• 設計后(hou)：指(zhi)在輸出方案(an)后(hou)，需(xu)(xu)要持(chi)續(xu)關注(zhu)效(xiao)果(guo)體驗(yan)。很多人認為輸出就相當(dang)于完成工作(zuo)，但(dan)實(shi)際還(huan)需(xu)(xu)要持(chi)續(xu)關注(zhu)用(yong)戶反(fan)饋和數據表現，這(zhe)部分工作(zuo)特(te)別強調(diao)閉環(huan)作(zuo)用(yong)主要便于是否還(huan)需(xu)(xu)持(chi)續(xu)優(you)化，以及驗(yan)證(zheng)設計方案(an)的效(xiao)果(guo)如何等(deng)等(deng)。

接下來，就具體說說具體哪9個關(guan)鍵(jian)點：

三、設計前

在做改版設計時(shi)，上來不(bu)應該大刀闊(kuo)斧去搞所謂“創新(xin)”，需(xu)要進行(xing)一些“前置工作”，為(wei)后續(xu)的執(zhi)行(xing)提供(gong)了極其重要的可行(xing)性和科學性參考。

1. 用戶認知

簡單來說，就是需要了解當前用戶對產品的認知到了一個什么階段。

一個(ge)相對穩定成熟的(de)產品(pin)，已經有較明顯(xian)的(de)用(yong)(yong)戶(hu)分(fen)層，這時(shi)候不同的(de)用(yong)(yong)戶(hu)群(qun)體自然有不同的(de)認知(zhi)，那(nei)么在產品(pin)上發生(sheng)的(de)行(xing)為(wei)都(dou)會有明顯(xian)差異；所以在改版前，就需(xu)要再一次全(quan)面剖析用(yong)(yong)戶(hu)當前認知(zhi)情況，同時(shi)印證(zheng)過(guo)往設計(ji)目標的(de)匹配度，并(bing)為(wei)了后續的(de)設計(ji)提(ti)供參考(kao)（是否重新引導、是否保留等(deng)等(deng)）。

（圖例取自互聯網）

而這(zhe)(zhe)個(ge)方(fang)法(fa)，可以采用(yong)用(yong)研當中(zhong)的(de)“地圖故事”，先對(dui)整個(ge)產品進行用(yong)戶(hu)分(fen)層，分(fen)成幾(ji)個(ge)關鍵(jian)的(de)用(yong)戶(hu)群(qun)體(ti)(ti)，基于這(zhe)(zhe)些用(yong)戶(hu)群(qun)體(ti)(ti)，對(dui)其從進入平臺到離開，進行完整的(de)畫(hua)像描(miao)述。

2. 意見收集

常(chang)見的(de)可以(yi)(yi)采用問(wen)卷調(diao)研、用戶(hu)評價反饋等(deng)等(deng)。但這里還(huan)有一個手段也可以(yi)(yi)采用：

其實(shi)內(nei)部(bu)成員是這個產(chan)品最熟悉的人(ren)，所以(yi)針對內(nei)部(bu)進行(xing)一(yi)(yi)場“吐槽大會”，是性價比很高的一(yi)(yi)次“用戶調研(yan)”；可以(yi)召集(ji)各端關鍵角色（尤(you)其測試），來模擬用戶一(yi)(yi)個一(yi)(yi)個環節（or頁面）來吐槽。

但這(zhe)里要注意的(de)(de)是，因(yin)為(wei)熟悉，所(suo)(suo)以有時(shi)候會(hui)陷入慣性思維（可能(neng)會(hui)想當然），把這(zhe)些思維來代替用(yong)(yong)戶(hu)的(de)(de)真正想法；譬如項目成員屬于“老(lao)用(yong)(yong)戶(hu)”，那么面對新用(yong)(yong)戶(hu)的(de)(de)心(xin)智是否能(neng)夠完全(quan)同(tong)理，所(suo)(suo)提出(chu)的(de)(de)問題是否有代表(biao)性，都(dou)是值得推(tui)敲的(de)(de)。

3. 數據分析

用戶訪談畢竟(jing)樣(yang)本有限，但通過數(shu)據(ju)，可以較大規模(mo)去(qu)了解用戶在產品上的(de)一些表(biao)現，專門(men)的(de)數(shu)據(ju)分析(xi)就不在這里展開講。

但有一點需要注意，明確分(fen)析目標(biao)、采用合理的分(fen)析模型會指(zhi)標(biao)來觀察用戶表(biao)現。大到(dao)如漏斗(dou)分(fen)析、留存(cun)分(fen)析等，小到(dao)具體的頁面數據(ju)(ju)（熱區、停留時長等）、功能數據(ju)(ju)（操作頻率等）。

四、設計中

有了(le)以(yi)上的(de)一些依據支撐后(hou)，對于后(hou)續的(de)設計已經(jing)有了(le)些方向，那么這時候(hou)在進(jin)入這環節，就需(xu)要注意(yi)以(yi)下幾點。

1. 明確產品調性

不管是產(chan)品剛搭建，還是改(gai)版，其實(shi)都是需要明確產(chan)品的(de)調(diao)(diao)性(xing)(xing)。這個(ge)調(diao)(diao)性(xing)(xing)可以是品牌(pai)調(diao)(diao)性(xing)(xing)，也可以是視覺調(diao)(diao)性(xing)(xing)；通過(guo)此次改(gai)動，在用戶心中形成(cheng)心智模型(xing)，側(ce)面表明這個(ge)產(chan)品的(de)“態度”。

舉個例子，像上圖阿里系幾(ji)(ji)款(kuan)app產(chan)(chan)品(pin)的(de)(de)底部欄，都(dou)呈現較為一(yi)(yi)致的(de)(de)理念(nian)（這可能也是產(chan)(chan)品(pin)內部的(de)(de)一(yi)(yi)些共(gong)通產(chan)(chan)品(pin)理念(nian)）；這幾(ji)(ji)款(kuan)產(chan)(chan)品(pin)手(shou)淘、支付(fu)寶、閑魚(yu)和飛豬，都(dou)幾(ji)(ji)乎偏“輕快”的(de)(de)氛圍(wei)，而(er)不是一(yi)(yi)個簡潔嚴肅的(de)(de)調(diao)性(xing)，同時(shi)風格也是偏“擬(ni)人(ren)化”，這也是電商的(de)(de)一(yi)(yi)種“活躍”特(te)征表現，而(er)這就(jiu)是所謂的(de)(de)調(diao)性(xing)。

2. 重構產品框架

前面也提到過(guo)，產品迭(die)代了一(yi)個(ge)階段后(hou)，會發現越來越“臃腫“，某些功能模塊定位變得模糊(hu)，甚至擴展性比較(jiao)差；又(you)或者(zhe)能力到了一(yi)個(ge)新階段，需(xu)(xu)要再次(ci)明確能力路徑，那(nei)么這時(shi)候就需(xu)(xu)要再重構下產品框(kuang)架，也是為接(jie)來下的實際(ji)設計提供(gong)框(kuang)架脈(mo)絡。

這(zhe)(zhe)是當前微信個(ge)人中心(xin)的“支(zhi)付(fu)”頁(ye)面，早期這(zhe)(zhe)個(ge)功(gong)能頁(ye)尚未接入(ru)那么多外部生態(tai)服(fu)務(wu)，采用(yong)列表(biao)展示就已經ok了（假(jia)設），只要有新增就這(zhe)(zhe)樣持(chi)續添(tian)加即可。

但是到(dao)了越(yue)來(lai)越(yue)多(duo)，且每個功能(neng)(neng)之間既存在差異，也(ye)有些共通的行(xing)業屬(shu)性。那(nei)么到(dao)了這(zhe)時候，就(jiu)需要(yao)再重新梳理(li)這(zhe)些功能(neng)(neng)模塊，這(zhe)樣也(ye)是有利于用戶快速感知(zhi)這(zhe)里有什(shen)么，以及找到(dao)常用服務。

所(suo)以采用了如上圖這樣的九宮格形式，以模(mo)塊來進行(xing)區(qu)域劃(hua)分，這樣既(ji)能(neng)在用戶(hu)形成慣性記憶，也能(neng)利(li)于(yu)功能(neng)**限度去展示。

3. 產品布局

定(ding)了產(chan)品框架，這時候就可(ke)以思考產(chan)品布局了。所謂產(chan)品布局，就是(shi)結(jie)合產(chan)品框架和功能屬性(xing)，以結(jie)構化的形(xing)式合適地展示在用戶眼(yan)前。

當然，不(bu)同(tong)(tong)的產品業務，其布局都(dou)相對不(bu)同(tong)(tong)。這塊(kuai)有共(gong)性的同(tong)(tong)時也有差異性；所以，這里有幾個原則需要注意：

1）web端(duan)和APP端(duan)（包(bao)括H5）：用戶視野區域、操作(zuo)工(gong)具（手(shou)指、鼠標等）是不(bu)同的。

2）B端(duan)和C端(duan)的差異

3）細(xi)分(fen)領域(yu)差異：不(bu)同領域(yu)的產品，其展示(shi)的核心服務(wu)極大(da)影響了(le)產品的布局展示(shi)。

譬(pi)如內容型(xing)產品(pin)，更多是瀑布流（上(shang)中下布局(ju)(ju)）；工具型(xing)產品(pin)更多是列表(biao)或九(jiu)宮格展示（上(shang)下布局(ju)(ju)）。

4. 功能設計

這部分就(jiu)是具體的設計了(le)，而相關(guan)的介(jie)紹(shao)就(jiu)十分多了(le)，就(jiu)不在展開(kai)。

這(zhe)里有一(yi)個極關鍵的地方，就是必須在每(mei)個頁(ye)面、每(mei)個核心模塊都形成一(yi)個清晰明了的“用(yong)戶使用(yong)路徑(jing)”，而不是簡單(dan)的堆砌擺放。

同時也有幾點原(yuan)則(ze)可以參(can)考(kao)：

• 一(yi)致(zhi)性：任何設計，同(tong)屬性、同(tong)場(chang)景的功(gong)能，都盡可能保(bao)持一(yi)致(zhi)性；而這種(zhong)一(yi)致(zhi)性包(bao)括(kuo)文案、交互等。

• 通用(yong)(yong)性(xing)(xing)：我們(men)在原(yuan)型(xing)設計(ji)的時候，盡可(ke)能去考(kao)慮這些功能點(dian)的通用(yong)(yong)性(xing)(xing)。可(ke)能不(bu)同(tong)功能入口分布在不(bu)同(tong)頁(ye)面，可(ke)能定(ding)義、作用(yong)(yong)都不(bu)太相同(tong)。但(dan)是我們(men)也可(ke)以盡量(liang)去抽象出其中的共性(xing)(xing)部分，進(jin)行通用(yong)(yong)性(xing)(xing)設計(ji)，這樣可(ke)以減少用(yong)(yong)戶的認知成本。

• 關(guan)聯性(xing)(xing)：每個(ge)頁(ye)面(mian)的(de)設(she)計，其實都是有(you)(you)關(guan)聯性(xing)(xing)和引導性(xing)(xing)，所以我(wo)們在(zai)具體頁(ye)面(mian)功能(neng)設(she)計時，盡可能(neng)把強關(guan)聯部分放(fang)在(zai)一(yi)起，或者(zhe)有(you)(you)指向性(xing)(xing)的(de)，這樣就不會東(dong)擺西(xi)放(fang)，顯得(de)極為混亂；有(you)(you)些(xie)時候純粹為了解決(jue)問(wen)題(ti)，而簡單(dan)放(fang)個(ge)功能(neng)上去，沒有(you)(you)思考任何關(guan)聯性(xing)(xing)或未(wei)來的(de)延續性(xing)(xing)。

在這(zhe)(zhe)里(li)也推薦《簡約至上》這(zhe)(zhe)本書，任(ren)何設(she)計(ji)都可以引(yin)用里(li)面的一(yi)些核(he)心思想，而設(she)計(ji)當(dang)然不是如(ru)書名那樣一(yi)味直(zhi)接“簡約”，也是進行合(he)理的結構化(hua)設(she)計(ji)。

重新“組(zu)織”功(gong)能點，把不必要的(de)、重復(fu)的(de)“刪除”掉，或進(jin)行非當前核心的(de)“隱藏”起來，甚至明面上可以保(bao)留但是(shi)“轉移(yi)”了另一(yi)種(zhong)實現方式(shi)來進(jin)行。

五、設計后

當交(jiao)付研(yan)發上線后，還有2個(ge)關鍵點需要關注，這樣才能(neng)真正驗證設計目標并形成閉環。

1. 用戶試用

（用(yong)戶研究也是(shi)一(yi)個(ge)大學問），當有較大的(de)(de)變動(dong)時候，這(zhe)時候不(bu)妨找些(xie)用(yong)戶進行試用(yong)體驗；盡管小范圍(wei)的(de)(de)線(xian)下體驗不(bu)見(jian)得反映多少真實(shi)情況，但(dan)至少可以感(gan)知到一(yi)些(xie)信息，看(kan)是(shi)否(fou)與(yu)設(she)計初衷較大的(de)(de)背離(li)；而(er)這(zhe)里**能夠(gou)找老用(yong)戶和新(xin)用(yong)戶，這(zhe)樣做前后對(dui)比的(de)(de)感(gan)知，能夠(gou)更直(zhi)觀反映問題。

2. 效果數據驗證

我們(men)做這(zhe)次改版(ban)，不(bu)僅(jin)僅(jin)在與用(yong)戶溝通調研來拿到效果反饋信(xin)息。也是需要制定一定的數(shu)據監控(kong)來看(kan)關(guan)鍵核(he)心指標(biao)是否(fou)發生變化(hua)，或者基于此次改版(ban)制定相關(guan)的數(shu)據分析指標(biao)，來實際轉化(hua)情況。

1）外部數(shu)據：如C端用戶，監控新上線(xian)后應(ying)用市場的數(shu)據情況，可以應(ying)用評(ping)分(fen)是否下(xia)降（負面反饋(kui)多少）、下(xia)載/安裝次數(shu)是否較(jiao)大變化(hua)

2）內(nei)部數據(ju)：你的(de)(de)(de)設計都(dou)是(shi)帶有(you)目的(de)(de)(de)性的(de)(de)(de)，所以(yi)有(you)時候(hou)就需要通(tong)過內(nei)部數據(ju)來印證你的(de)(de)(de)想法是(shi)否(fou)符(fu)合預期(qi)。這(zhe)里(li)沒有(you)通(tong)用參考性，不同(tong)的(de)(de)(de)產品業務、改(gai)版(ban)方向都(dou)不同(tong)，數據(ju)指標也不同(tong)；這(zhe)時候(hou)就建議拉上數據(ju)分(fen)析同(tong)學(xue)，來描述你的(de)(de)(de)改(gai)版(ban)方向，意(yi)圖實現那些目的(de)(de)(de)，讓數據(ju)分(fen)析同(tong)學(xue)拆解目標，來制(zhi)定“監控指標”進行效果驗證。

如果(guo)影響規模(mo)較(jiao)大，可(ke)能就(jiu)會采用A/Btest實驗，但一些(xie)產品內的(de)關鍵指標維度不妨可(ke)以(yi)思考：停留時(shi)長(chang)、訪問率、留存、任(ren)務完成率等等。

舉(ju)個(ge)例子：假(jia)設你以同理心來模擬用(yong)戶的(de)行為(wei)路徑，發現操作場(chang)景過于復(fu)雜(za)，且(qie)布局(ju)不太合理，同時這個(ge)環節的(de)訪(fang)問時長奇高無比；那么(me)這時候打算做減法(fa)，就需要看最(zui)終(zhong)的(de)時長數據或無效點(dian)擊次數是(shi)否下(xia)降，提(ti)升了(le)用(yong)戶的(de)效率。

產(chan)(chan)品改版(ban)，無疑是一場考驗(yan)基本功的big需求，用戶研(yan)究(jiu)、數據分(fen)析(xi)、產(chan)(chan)品架構、產(chan)(chan)品設計等等貫穿其中；而這(zhe)9個關鍵點(dian)，都(dou)是一名(ming)出色產(chan)(chan)品基本掌握(wo)的，每(mei)一項都(dou)值得打磨學習。