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

本期文章，將基于這一場景，分享其中需要(yao)(yao)注意的8點核心(xin)要(yao)(yao)素。

一、改版背景

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

產品設計框(kuang)(kuang)(kuang)架：當一(yi)個(ge)產品(pin)遇(yu)到業務變化，或者產品(pin)能力迭代(dai)已久，過(guo)往定(ding)下(xia)的(de)框(kuang)(kuang)(kuang)架可(ke)能有了(le)(le)較大變化，甚至(zhi)約束了(le)(le)后續(xu)的(de)迭代(dai)；所以怎(zen)么(me)設(she)計怎(zen)么(me)布(bu)局都會(hui)看著很(hen)別扭，那么(me)這時候(hou)就需要再次重新梳(shu)理(li)產品(pin)的(de)核(he)心(xin)方向和(he)框(kuang)(kuang)(kuang)架布(bu)局。

品牌升(sheng)級：當(dang)一(yi)(yi)個(ge)產(chan)品到了(le)一(yi)(yi)個(ge)新階段，它需要重構(gou)自身(shen)的定位(wei)，在(zai)用戶心中建(jian)立新的心智(zhi)模(mo)型和品牌認知；因(yin)為(wei)一(yi)(yi)個(ge)趨近成熟的產(chan)品，這時候(hou)會更強調產(chan)品文(wen)化，而這時候(hou)建(jian)立一(yi)(yi)個(ge)新的文(wen)化觀念，有時候(hou)就需要這一(yi)(yi)個(ge)“全新升(sheng)級改(gai)版(ban)”來建(jian)立這一(yi)(yi)的認知。

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

二、設計的三個重要階段

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

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

• 設計(ji)中：指在具體設計(ji)時，需要(yao)做的(de)幾(ji)個關鍵工作。這里有先后之(zhi)分，分別是(shi)“產品(pin)調性”、“產品(pin)布(bu)局”、“功能(neng)設計(ji)”；確(que)立此次設計(ji)的(de)基調，梳理新的(de)產品(pin)框(kuang)架及布(bu)局，并(bing)進(jin)行相應的(de)產品(pin)設計(ji)。

• 設計后：指(zhi)在輸(shu)(shu)出方案后，需要持(chi)續(xu)關(guan)注效(xiao)果體驗。很多(duo)人認為輸(shu)(shu)出就相(xiang)當于完成工(gong)作，但實(shi)際(ji)還(huan)(huan)需要持(chi)續(xu)關(guan)注用(yong)戶反饋和數據表現，這(zhe)部(bu)分工(gong)作特別強(qiang)調閉環作用(yong)主要便于是(shi)否還(huan)(huan)需持(chi)續(xu)優化，以及驗證設計方案的(de)效(xiao)果如何(he)等等。

接下(xia)來，就具(ju)體(ti)說(shuo)說(shuo)具(ju)體(ti)哪9個關鍵點：

三、設計前

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

1. 用戶認知

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

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

（圖例取自互聯網）

而這(zhe)個(ge)方法，可以采(cai)用用研當中的(de)“地(di)圖故(gu)事”，先對整個(ge)產(chan)品進行(xing)用戶(hu)分(fen)層，分(fen)成幾個(ge)關鍵的(de)用戶(hu)群(qun)體，基于(yu)這(zhe)些(xie)用戶(hu)群(qun)體，對其(qi)從(cong)進入平臺(tai)到(dao)離開(kai)，進行(xing)完整的(de)畫(hua)像描述。

2. 意見收集

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

其實內(nei)部(bu)成員是(shi)這個(ge)產品最(zui)熟(shu)悉的人，所以針對(dui)內(nei)部(bu)進(jin)行(xing)一場(chang)“吐槽大(da)會”，是(shi)性(xing)價比很高的一次“用(yong)戶(hu)調(diao)研”；可以召(zhao)集各端關(guan)鍵角色(se)（尤其測試），來(lai)(lai)模擬用(yong)戶(hu)一個(ge)一個(ge)環(huan)節（or頁(ye)面）來(lai)(lai)吐槽。

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

3. 數據分析

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

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

四、設計中

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

1. 明確產品調性

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

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

2. 重構產品框架

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

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

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

所以采用(yong)了如上(shang)圖這(zhe)(zhe)樣的九(jiu)宮(gong)格(ge)形式(shi)，以模(mo)塊來(lai)進行區域劃(hua)分，這(zhe)(zhe)樣既能(neng)在(zai)用(yong)戶形成慣(guan)性(xing)記憶(yi)，也(ye)能(neng)利(li)于功能(neng)**限度去展示。

3. 產品布局

定了產品(pin)框(kuang)架，這(zhe)時(shi)候就(jiu)可以思(si)考產品(pin)布(bu)局(ju)了。所謂產品(pin)布(bu)局(ju)，就(jiu)是(shi)結合(he)產品(pin)框(kuang)架和功能(neng)屬性，以結構(gou)化(hua)的形式合(he)適(shi)地展示在用戶眼前。

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

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

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

3）細分領域差異：不同(tong)領域的(de)產品，其(qi)展示(shi)的(de)核心服務極大影響了產品的(de)布(bu)局(ju)展示(shi)。

譬(pi)如(ru)內容型(xing)產品，更多是瀑(pu)布流(liu)（上中(zhong)下(xia)布局(ju)）；工(gong)具型(xing)產品更多是列表或(huo)九宮格展示（上下(xia)布局(ju)）。

4. 功能設計

這(zhe)部分就(jiu)是具(ju)體的(de)設(she)計了，而相關(guan)的(de)介紹(shao)就(jiu)十分多了，就(jiu)不在(zai)展開。

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

同(tong)時(shi)也有幾點原(yuan)則可以參考：

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

• 通(tong)用(yong)(yong)性：我們(men)在原型設(she)計的時候，盡可(ke)(ke)能(neng)去考慮(lv)這些功(gong)(gong)能(neng)點的通(tong)用(yong)(yong)性。可(ke)(ke)能(neng)不(bu)(bu)同功(gong)(gong)能(neng)入(ru)口分(fen)布在不(bu)(bu)同頁(ye)面(mian)，可(ke)(ke)能(neng)定義、作用(yong)(yong)都不(bu)(bu)太相同。但是我們(men)也可(ke)(ke)以盡量去抽象出其中(zhong)的共性部分(fen)，進行通(tong)用(yong)(yong)性設(she)計，這樣可(ke)(ke)以減少用(yong)(yong)戶的認(ren)知成本(ben)。

• 關(guan)聯(lian)性(xing)：每個頁面的設(she)(she)計，其(qi)實(shi)都是有關(guan)聯(lian)性(xing)和(he)引導性(xing)，所(suo)以我們在具體頁面功(gong)能(neng)(neng)設(she)(she)計時(shi)(shi)，盡(jin)可能(neng)(neng)把強關(guan)聯(lian)部分(fen)放在一起(qi)，或(huo)者有指向性(xing)的，這樣就不(bu)會東擺(bai)西放，顯(xian)得極為混亂；有些時(shi)(shi)候純粹為了解決問題，而簡(jian)單(dan)放個功(gong)能(neng)(neng)上去(qu)，沒有思考(kao)任何(he)關(guan)聯(lian)性(xing)或(huo)未來的延續性(xing)。

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

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

五、設計后

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

1. 用戶試用

（用(yong)(yong)戶研究也是一個大學問），當(dang)有較(jiao)大的變動(dong)時(shi)候，這時(shi)候不妨(fang)找些用(yong)(yong)戶進行試用(yong)(yong)體驗(yan)；盡管小范(fan)圍的線下體驗(yan)不見(jian)得反映多(duo)少真實情(qing)況，但至少可以(yi)感知到一些信息，看是否與設(she)計初衷較(jiao)大的背離；而這里**能夠(gou)找老(lao)用(yong)(yong)戶和新用(yong)(yong)戶，這樣做前(qian)后(hou)對比(bi)的感知，能夠(gou)更直(zhi)觀(guan)反映問題。

2. 效果數據驗證

我們做(zuo)這次(ci)改(gai)版(ban)(ban)，不僅(jin)(jin)僅(jin)(jin)在與用戶溝通調研來(lai)拿到(dao)效果反饋信息(xi)。也是需(xu)要制(zhi)定(ding)一定(ding)的數(shu)(shu)據監控來(lai)看關鍵核心指(zhi)標是否發生變化，或者基于此次(ci)改(gai)版(ban)(ban)制(zhi)定(ding)相關的數(shu)(shu)據分析指(zhi)標，來(lai)實際(ji)轉化情(qing)況(kuang)。

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

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

如果影響(xiang)規模(mo)較大，可能(neng)就會(hui)采用A/Btest實驗(yan)，但一些產品(pin)內的關鍵指標維度不妨可以(yi)思考(kao)：停留時(shi)長、訪問率(lv)、留存(cun)、任務完成率(lv)等(deng)等(deng)。

舉個(ge)例子：假設你以同理(li)心來(lai)模(mo)擬(ni)用戶(hu)的(de)行為路徑，發現操作場景過于(yu)復雜，且布局不太合理(li)，同時(shi)(shi)這個(ge)環(huan)節(jie)的(de)訪問時(shi)(shi)長(chang)奇高(gao)無比；那(nei)么這時(shi)(shi)候打算(suan)做減法，就需(xu)要看最終的(de)時(shi)(shi)長(chang)數據或無效(xiao)點擊次(ci)數是否下降，提升(sheng)了用戶(hu)的(de)效(xiao)率。

產(chan)(chan)品(pin)改(gai)版，無(wu)疑(yi)是(shi)一場考驗基本功的big需求，用戶研究、數據(ju)分析、產(chan)(chan)品(pin)架構、產(chan)(chan)品(pin)設計等(deng)等(deng)貫穿其中；而這9個關鍵(jian)點，都(dou)(dou)是(shi)一名(ming)出色產(chan)(chan)品(pin)基本掌握的，每一項都(dou)(dou)值得打(da)磨學(xue)習。