在產(chǎn)品的工作中，迭代占據(jù)了大部分的工作。而重構(gòu)、優(yōu)化是最頻繁的操作和工作內(nèi)容之一。這篇文章，作者為我們解讀了優(yōu)化過程中的產(chǎn)品流程，希望對(duì)你有所幫助。

如今國內(nèi)互聯(lián)網(wǎng)行業(yè)早已邁入成熟期。除非你去到一個(gè)初創(chuàng)公司，無論你去大廠，中廠還是小廠，幾乎很難有機(jī)會(huì)從0到1打造一款產(chǎn)品。

BAT等互聯(lián)網(wǎng)大廠發(fā)展至今都有20個(gè)年頭了，內(nèi)部系統(tǒng)和體系早已成熟，創(chuàng)新的機(jī)會(huì)有限。對(duì)于剛?cè)霃S的新人來說，更多的是要把幾年前甚至十幾年前開發(fā)出來的系統(tǒng)翻新，讓系統(tǒng)從功能到用戶體驗(yàn)，都跟上時(shí)代的腳步。

優(yōu)化（翻新）后臺(tái)系統(tǒng)UI是個(gè)吃力不討好的事。如果公司有對(duì)項(xiàng)目ROI的評(píng)估流程，換UI這種事基本上是算不出來ROI的。和To C的前端相比，后臺(tái)系統(tǒng)的使用人數(shù)基本只有一個(gè)零頭，如果從提升員工效率的角度計(jì)算收益，結(jié)果會(huì)相當(dāng)慘淡。如果純粹地只是把界面變得更好看，對(duì)于一個(gè)后臺(tái)系統(tǒng)來說，意義不是很大。我們?cè)谕七M(jìn)翻新項(xiàng)目的時(shí)候，要思考的是更多意義。

趁著翻新這個(gè)機(jī)會(huì)，我們應(yīng)該把系統(tǒng)相關(guān)的業(yè)務(wù)都梳理和重新整合一遍。一些陳舊的業(yè)務(wù)需求，可能早就沒人用了，但是一直沒有下線。還有一些UI，可能在需求不斷疊加的時(shí)候，變得越來越復(fù)雜。東加一個(gè)西加一個(gè)，借著翻新的機(jī)會(huì)，也可以把這些零散的功能重新整合。

一、翻新的流程

翻新是一個(gè)巨大的項(xiàng)目。面對(duì)復(fù)雜的系統(tǒng)，剛開始可能手足無措，找不到切入點(diǎn)。

這時(shí)候，可以根據(jù)下面的流程，一步步操作推進(jìn)：

1. 拆解

把原本系統(tǒng)中所有的頁面，按鈕，表單，所有元件都拆解一遍。記錄所有的頁面元素。至少要記錄每個(gè)按鈕的功能，想對(duì)系統(tǒng)更進(jìn)一步地翻新，還需要拆解功能背后詳細(xì)的邏輯。

某個(gè)后臺(tái)系統(tǒng)，有n個(gè)功能模塊，總共包含m個(gè)一級(jí)頁面，一級(jí)頁面中有x個(gè)按鈕或鏈接，每個(gè)按鈕，鏈接分別跳轉(zhuǎn)到什么二級(jí)頁面。拆解的過程中可以先以頁面為單位，看看一共有多少個(gè)頁面，它們之間的關(guān)系是怎么樣的，分別承載了什么功能。

拆解過程中一定要完全客觀，不要帶任何主觀判斷。比如這個(gè)按鈕沒用，那個(gè)元件樣式不好等等。拆解就是一個(gè)機(jī)械的過程，不需要多加任何判斷。所有一切需要可以優(yōu)化的東西，都可以在后面的步驟中決定。

拆解后的成果物：系統(tǒng)頁面結(jié)構(gòu)圖

圖中每個(gè)頁面或組件，都可以以下面的形式展示，上面寫名稱，下面放截圖：

如果覺得畫圖太麻煩，也可以整理成excel表格的形式。當(dāng)然圖是最直觀清晰的，不僅在自己拆解的時(shí)候更清楚，也可以為開發(fā)、業(yè)務(wù)、以及自己團(tuán)隊(duì)中的其他小伙伴提供更直觀的參考。

2. 業(yè)務(wù)流程梳理

經(jīng)過了第一步的拆解，我們已經(jīng)知道了系統(tǒng)中到底有些什么頁面，到底有多少功能。當(dāng)我們拆解完所有的頁面和元素后，會(huì)發(fā)現(xiàn)原先的舊版系統(tǒng)很亂。有些功能不需要，有些功能邏輯有問題或者有些功能放的地方不對(duì)。第二步我們就要進(jìn)行梳理。梳理的過程，應(yīng)該按照業(yè)務(wù)的維度進(jìn)行整理歸納，而不是按照系統(tǒng)功能去整理。

如果這時(shí)候重新直接把第一步拆解后的頁面和組件重組，表面上頁面變得更有條理了，背后的細(xì)節(jié)可能還有問題。多余的還是多余，缺少的還是缺少。這時(shí)就應(yīng)該先拋棄功能，從業(yè)務(wù)角度出發(fā)進(jìn)行梳理。

在一套用戶管理（CRM）的后臺(tái)系統(tǒng)里，會(huì)有用戶詳細(xì)信息，數(shù)據(jù)統(tǒng)計(jì)等業(yè)務(wù)流程。每個(gè)流程中還會(huì)有一些子流程。如用戶列表里，會(huì)有新建用戶，用戶信息編輯，刪除用戶等字流程。

接下來重要的一步，是對(duì)每個(gè)子流程都進(jìn)行閉環(huán)檢查。閉環(huán)這個(gè)詞對(duì)大家來說既熟悉又陌生，很多人其實(shí)并不知道閉環(huán)的確切含義。什么叫閉環(huán)，我認(rèn)為是從開始一個(gè)動(dòng)作，之后發(fā)生一連串的動(dòng)作以及其反饋，直到用戶得到最終反饋，認(rèn)為整個(gè)業(yè)務(wù)流程結(jié)束了，就是整個(gè)閉環(huán)。

比如新建用戶，開始新建是一個(gè)動(dòng)作，新建過程中的各種驗(yàn)證是反饋，新建成功后確認(rèn)也是反饋，看到這個(gè)反饋后，用戶可以認(rèn)為這個(gè)子流程結(jié)束了。新建頁面之外，新建過程中各種驗(yàn)證的反饋頁面，新建成功后的確認(rèn)頁面，確認(rèn)這些頁面是否完整，就是閉環(huán)檢查的目的。

梳理后的成果物：業(yè)務(wù)流程結(jié)構(gòu)圖

3. 填充重構(gòu)

在上一步中，我們已經(jīng)梳理出來了所有業(yè)務(wù)流程，以及業(yè)務(wù)流程所需要的閉環(huán)。這些流程很大程度上是通過第一步的拆解知道的。當(dāng)我們接手一個(gè)新的系統(tǒng)時(shí)，很多系統(tǒng)功能我們可能都不知道。因?yàn)橛行┕δ芸赡茉缇筒挥昧?，也就不?huì)去關(guān)注。只有當(dāng)我們認(rèn)真去拆解的時(shí)候，才會(huì)知道原來還有這么個(gè)業(yè)務(wù)流程

在重新梳理完業(yè)務(wù)流程后，我們現(xiàn)在有兩部分內(nèi)容。被拆解完的零散的頁面和組件，以及重新梳理過后結(jié)構(gòu)化的業(yè)務(wù)流程。一個(gè)是零散但實(shí)際的，一個(gè)是結(jié)構(gòu)化但抽象的。

比如我們?cè)瓉硪呀?jīng)有一個(gè)新建用戶的頁面，就可以把這個(gè)頁面填到新建用戶的業(yè)務(wù)流程中。有可能我們?cè)谔畛涞倪^程中，找不到一個(gè)合適的頁面或組件來填充，這時(shí)候說明原來的系統(tǒng)中有所疏漏，就需要重新增加新的頁面或組件。

我們需要做的就是把這些實(shí)際的系統(tǒng)填到抽象的流程中。完成業(yè)務(wù)與系統(tǒng)的結(jié)合。

4. UI重新設(shè)計(jì)

當(dāng)我們把業(yè)務(wù)流程和所需要的頁面組件都重新進(jìn)行過配對(duì)后，最后一步才是重新設(shè)計(jì)UI。設(shè)計(jì)方面我也不是專家。如果團(tuán)隊(duì)中有專業(yè)的UI設(shè)計(jì)師就最好不過了。沒有的話可以用一些最新的框架和組件，只需要自己調(diào)整一些布局即可。

拆解、梳理、重構(gòu)和設(shè)計(jì)，以上4步，就是一套完整的后臺(tái)翻新流程。

二、抄作業(yè)也能用這套流程

這4個(gè)步驟不僅可以用于翻新，還可以用于抄作業(yè)！

一定不要覺得抄襲是一件很簡(jiǎn)單的事。抄的好和抄的不好，最后的差距會(huì)非常大。抄襲往往是發(fā)生在我們對(duì)于一件事沒有經(jīng)驗(yàn)，但交付的成果又需要達(dá)到一定水平時(shí)。抄襲確實(shí)是最有效的方法。并不是一件很壞很low的事。在踏入一個(gè)新的領(lǐng)域時(shí)，講究的是“守”“破”“離”。先得抄的好，才能超越的好。

如果純是抄一些表面的東西，沒挖掘背后深層的邏輯和流程，結(jié)果可能就是東施效顰。

三、賦予翻新項(xiàng)目新的意義

通過這4步將后臺(tái)系統(tǒng)翻新，起到的效果不僅僅是頁面變得更時(shí)尚，更好用。對(duì)整個(gè)團(tuán)隊(duì)的產(chǎn)品經(jīng)理、開發(fā)、測(cè)試和UI來說，業(yè)務(wù)流程、系統(tǒng)結(jié)構(gòu)、功能邏輯都會(huì)變得更清晰。

不要的功能該扔的扔，有bug該修的修，就像給系統(tǒng)做一個(gè)大掃除一樣。整體的開發(fā)和迭代效率就會(huì)大大提高。這時(shí)候翻新的ROI，就可以根據(jù)提升開發(fā)效率，提升產(chǎn)品迭代速度，提升用戶使用效率等各個(gè)進(jìn)行計(jì)算。讓翻新項(xiàng)目從此變得不再雞肋。

本文由 @哈維 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議