本文主要介紹了設(shè)計(jì)后臺(tái)產(chǎn)品時(shí)，需要注意的后臺(tái)產(chǎn)品的交互設(shè)計(jì)以及如何對(duì)后臺(tái)產(chǎn)品的數(shù)據(jù)進(jìn)行復(fù)盤。期待為你帶來(lái)啟發(fā)，enjoy~

后臺(tái)產(chǎn)品的交互設(shè)計(jì)

在剛接觸后臺(tái)產(chǎn)品設(shè)計(jì)的時(shí)候，對(duì)于整個(gè)后臺(tái)產(chǎn)品的交互并沒(méi)有一個(gè)特別清晰的概念，尤其是當(dāng)我們面對(duì)的大部分產(chǎn)品都是各式各樣的C端產(chǎn)品，而后臺(tái)產(chǎn)品可能除了列表就是表單，似乎也并不能留給設(shè)計(jì)過(guò)多的設(shè)計(jì)空間。

當(dāng)我面對(duì)自己第一個(gè)大型后臺(tái)項(xiàng)目——生鮮ERP的時(shí)候，我們的產(chǎn)品設(shè)計(jì)研發(fā)居然自己生造了一套設(shè)計(jì)規(guī)范。不僅浪費(fèi)時(shí)間，而且相關(guān)的設(shè)計(jì)還不如Antdesgin這些市面上成熟的UI框架。

隨著接觸的產(chǎn)品越來(lái)越多，不同業(yè)務(wù)邏輯所涉及到的功能也越發(fā)的復(fù)雜，就會(huì)發(fā)現(xiàn)有時(shí)候當(dāng)一個(gè)產(chǎn)品功能不知道怎么抽象成功能的時(shí)候，一個(gè)好的交互組件可能一下就解決了你的這個(gè)問(wèn)題，因?yàn)檫@個(gè)問(wèn)題也許就是別人踩過(guò)的坑。

比如當(dāng)你因?yàn)閿?shù)據(jù)繁多而不知道怎么選擇的時(shí)候，Element或者Antdesign已經(jīng)為你提供了數(shù)十種樹形選擇器，穿梭框；你在設(shè)計(jì)一個(gè)上傳圖片的小功能時(shí)，Antdesign的插件其實(shí)已經(jīng)有了查看大圖以及刪除的功能，而經(jīng)驗(yàn)不足的你可能遺漏了這兩個(gè)小功能。

所以做在后臺(tái)產(chǎn)品的時(shí)候，我們沒(méi)有必要重復(fù)造輪子，多了解些市面上優(yōu)秀的框架，不僅有助于我們開闊思路，鍛煉產(chǎn)品功能的抽象能力。而且還可以節(jié)省成本、時(shí)間。

尤其是后臺(tái)設(shè)計(jì)框架——Antdesgin，不僅給我提供了一套優(yōu)秀的設(shè)計(jì)框架，還將自己的設(shè)計(jì)語(yǔ)言總結(jié)成了豐富詳實(shí)的文檔，我們?cè)谌粘５墓ぷ髦?，了解了這個(gè)，就完全可以了解整個(gè)后臺(tái)產(chǎn)品的交互設(shè)計(jì)思路；具體文檔如下：https://ant.design/docs/spec/introduce-cn。

Antdesgin的文檔中不僅介紹了設(shè)計(jì)的基本原則，包括親密性、對(duì)齊、對(duì)比、重復(fù)這四個(gè)從《寫給大家看到設(shè)計(jì)書》中脫胎的經(jīng)典理論、以及費(fèi)茨法則等的應(yīng)用，也有從視覺(jué)、設(shè)計(jì)模式等的介紹，還有Antdesgin的Axure以及sketch的模板下載。

總之，學(xué)習(xí)后臺(tái)產(chǎn)品的交互設(shè)計(jì)，讀這一篇就夠了。

后臺(tái)產(chǎn)品的數(shù)據(jù)如何復(fù)盤

在《用戶體驗(yàn)要素》一書中所提到的用戶體驗(yàn)五要素：戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層。我們已經(jīng)大致從頭到尾梳理了一遍。一個(gè)后臺(tái)產(chǎn)品，經(jīng)歷了這樣的一個(gè)流程其實(shí)也大致成型；在產(chǎn)品初長(zhǎng)成之后，我們就應(yīng)該考慮后續(xù)的事情——這個(gè)產(chǎn)品怎么樣？設(shè)計(jì)得合理不合理，后續(xù)哪些地方需要改進(jìn)等等。

這個(gè)時(shí)候，數(shù)據(jù)的意義就顯著十分重要，而對(duì)于后臺(tái)產(chǎn)品來(lái)說(shuō)，與C端產(chǎn)品的關(guān)注DAU、MAU、關(guān)注流量轉(zhuǎn)化漏斗、流失率等等還不盡相同。

后臺(tái)產(chǎn)品的數(shù)據(jù)復(fù)盤，應(yīng)該注意以下幾點(diǎn)：

1. 相對(duì)值比絕對(duì)值更有意義

對(duì)于后臺(tái)產(chǎn)品來(lái)說(shuō)，我們更多的時(shí)候是無(wú)法衡量一個(gè)產(chǎn)品的絕對(duì)值的。比如某個(gè)C端營(yíng)銷活動(dòng)上線之后，多少人參與，多少人下單，發(fā)了多少?gòu)埲?，核銷了多少?gòu)埲鹊冗@些是營(yíng)銷活動(dòng)的核心指標(biāo)，而對(duì)于后臺(tái)產(chǎn)品，可能你所服務(wù)的對(duì)象只是公司的某個(gè)部門的某幾個(gè)人。從整個(gè)使用的量級(jí)上是不會(huì)有大的變化或波動(dòng)。

所以一個(gè)后臺(tái)產(chǎn)品，應(yīng)該關(guān)注的指標(biāo)是它的相對(duì)值，即上線前后的對(duì)比。

2. 核心指標(biāo)數(shù)據(jù)：成本、效率

那么，我們更應(yīng)該關(guān)注那些指標(biāo)的相對(duì)值呢？

大部分后臺(tái)產(chǎn)品的設(shè)計(jì)初衷其實(shí)是為了某個(gè)業(yè)務(wù)流程的降本增效。因此要關(guān)注的核心指標(biāo)也是成本及效率；你所設(shè)計(jì)的產(chǎn)品，在上線后給公司的降低了多少的成本，提高了多少的效率。才是最核心的指標(biāo)，也是設(shè)計(jì)產(chǎn)品是否合格的關(guān)鍵因素所在。

比如當(dāng)物流運(yùn)輸管理系統(tǒng)上線后，我們將不同的業(yè)務(wù)環(huán)節(jié)進(jìn)行拆分，分開去看每個(gè)環(huán)節(jié)的成本降低了多少，效率提高了多少。

具體比如可以列一個(gè)表格：裝車后拍照留存這個(gè)功能，之前無(wú)系統(tǒng)時(shí)的環(huán)節(jié)為微信發(fā)圖片，整個(gè)環(huán)節(jié)為：司機(jī)拍照→發(fā)到司機(jī)群→運(yùn)維到某個(gè)時(shí)間統(tǒng)一收集→錄入Excel→進(jìn)行評(píng)估處理→進(jìn)行歸檔備份；將其每個(gè)點(diǎn)的大致時(shí)間都進(jìn)行評(píng)估。

系統(tǒng)上線后，這個(gè)環(huán)節(jié)為：司機(jī)拍照→上傳系統(tǒng)→運(yùn)維查看→異常信息處理。

通過(guò)每個(gè)環(huán)節(jié)的數(shù)據(jù)對(duì)比，我們就可以將在產(chǎn)品設(shè)計(jì)中優(yōu)秀的點(diǎn)以及有所不足的點(diǎn)很直觀的展示出來(lái)。

3. 非核心指標(biāo)數(shù)據(jù)都有哪些？

成本和效率是在后臺(tái)產(chǎn)品中做數(shù)據(jù)分析統(tǒng)計(jì)時(shí)最核心的兩個(gè)指標(biāo)。除此之外后臺(tái)產(chǎn)品中還有一些其他的指標(biāo)需要我們關(guān)注。

非核心的指標(biāo)可以結(jié)合業(yè)務(wù)流程，確定一些專屬指標(biāo)，比如做一套發(fā)券系統(tǒng)，可以以發(fā)券業(yè)務(wù)場(chǎng)景的滿足率作為指標(biāo)。

另外有些專業(yè)性較強(qiáng)的系統(tǒng)，有些指標(biāo)也會(huì)有些強(qiáng)專業(yè)性的要求，比如一些大型企業(yè)的費(fèi)控系統(tǒng)，企業(yè)員工的報(bào)銷準(zhǔn)確率是其一個(gè)比較重要的指標(biāo)。

另外，還有一些指標(biāo)比如流程中的關(guān)聯(lián)性哪個(gè)最大，一個(gè)流程的時(shí)效對(duì)另外一個(gè)流程影響最大；哪個(gè)流程耗時(shí)最多，步驟最多等等，這些數(shù)據(jù)都是我們可以考慮拾取指標(biāo)的點(diǎn)。

4. 有了數(shù)據(jù)后該怎么用

我們?cè)谟辛藬?shù)據(jù)的分析結(jié)果后，可從以下幾點(diǎn)去著手對(duì)自己的產(chǎn)品進(jìn)行改進(jìn)：

1）對(duì)每個(gè)環(huán)節(jié)進(jìn)行分類，根據(jù)不同的占比確定指標(biāo)效率

由于業(yè)務(wù)邏輯的復(fù)雜性，每個(gè)環(huán)節(jié)的效率提升可能都不太一樣；比如環(huán)節(jié)A可能你線上化之后立刻就能提升20%；而環(huán)節(jié)B由于線上線下聯(lián)動(dòng)較多，輸入的數(shù)據(jù)較多，優(yōu)化優(yōu)化再優(yōu)化之后也可能只提升5%。

所以對(duì)于數(shù)據(jù)的效果，我們不能一概而論。需要將每個(gè)環(huán)節(jié)依據(jù)其特征進(jìn)行一次分類；耗費(fèi)工時(shí)較多優(yōu)化效果卻不盡人意的這一類，在后續(xù)的產(chǎn)品設(shè)計(jì)中可將其優(yōu)先級(jí)放低。線上化程度較多，可節(jié)省大量人力成本和資源的，需要優(yōu)先考慮；

2）圈定高頻操作的最小范圍，從操作層級(jí)上進(jìn)行優(yōu)化

在我們?cè)O(shè)計(jì)產(chǎn)品的時(shí)候，無(wú)論是找業(yè)務(wù)方進(jìn)行需求分析還是自己調(diào)研產(chǎn)生的結(jié)果，很多業(yè)務(wù)流程及操作內(nèi)容往往并不是特別準(zhǔn)確的；不重要卻高頻的一些業(yè)務(wù)流程有時(shí)候在業(yè)務(wù)方的描述中會(huì)一筆帶過(guò)，而因此我們?cè)谠O(shè)計(jì)產(chǎn)品的時(shí)候也是放在了某個(gè)不起眼的位置。

這個(gè)時(shí)候，每個(gè)業(yè)務(wù)操作的埋點(diǎn)就起了比較重要的作用。它可以檢測(cè)出哪些行為是高頻的行為，我們?cè)谀玫竭@些結(jié)果后，需要做的是減少高頻行為的操作層級(jí)、優(yōu)化高頻行為的操作路徑。

同時(shí)，在進(jìn)行高頻優(yōu)化的時(shí)候，一定要確定高頻操作的最小范圍，因?yàn)橐粋€(gè)流程可能會(huì)冗長(zhǎng)繁瑣，如果將這個(gè)流程的操作層級(jí)全部提升，可能會(huì)得不償失。

舉個(gè)例子，在TMS系統(tǒng)中，司機(jī)送貨后的拍照只是一個(gè)支線業(yè)務(wù)流程，而排線操作確是核心鏈路之中的。所以極有可能在業(yè)務(wù)的描述中會(huì)花費(fèi)大量的筆墨描述排線流程，對(duì)司機(jī)送貨后的拍照可能只是一帶而過(guò)。

然而，在實(shí)際的操作中，業(yè)務(wù)方進(jìn)行排線的時(shí)候雖然耗費(fèi)的時(shí)間比較長(zhǎng)，流程比較復(fù)雜，但是一次流程可能只會(huì)有一次排線。

而司機(jī)送貨后的拍照，卻是需要在整個(gè)行程中每送到一家都需要進(jìn)行拍照的，一次行程可能會(huì)操作十幾次。如果我們?cè)诼爮臉I(yè)務(wù)描述后將這個(gè)操作埋得比較深，在實(shí)際操作的時(shí)候無(wú)疑會(huì)提高操作時(shí)間及復(fù)雜性，效率降低。這個(gè)時(shí)候，在后期優(yōu)化及復(fù)盤的時(shí)候，我們就可以將流程進(jìn)行二次梳理。訂單完成頁(yè)面右上角保持拍照按鈕的常駐，可以進(jìn)行快速拍照。

3）梳理常用表單信息，進(jìn)行模板化設(shè)計(jì)

在積累了一定的數(shù)據(jù)后，有些業(yè)務(wù)場(chǎng)景中許多的操作可能都可以總結(jié)出幾類常用的標(biāo)準(zhǔn)，尤其是一些表單類的操作內(nèi)容，需要?jiǎng)?chuàng)建的記錄信息十個(gè)字段里面有六個(gè)可能在A場(chǎng)景下所填寫的信息是一樣的。在這種情況下，我們就可以將表單的信息作為模板化，簡(jiǎn)化填寫流程，提高效率。這里提供一個(gè)SQL的思路，在積累的一定的數(shù)據(jù)后，符合這種特征的表單內(nèi)容，可以用其進(jìn)行數(shù)據(jù)的梳理；

SELECT

count(*) as ‘每種類型的數(shù)量’,

count(distinct?業(yè)務(wù)場(chǎng)景) as ‘分布的業(yè)務(wù)場(chǎng)景’,

具體的表單元素

from

需要查詢的表1,

需要查詢的表2

where

需要提出的一些因素

group by

需要進(jìn)行組合的元素1,

需要進(jìn)行組合的元素2

order by

count(*) desc

在拿到業(yè)務(wù)數(shù)據(jù)后，我們要做的遠(yuǎn)不止這些。業(yè)務(wù)流程的優(yōu)化原則其實(shí)可以作為數(shù)據(jù)分析的一些指導(dǎo)性原則，這里可以再回顧一下：

1. 簡(jiǎn)化高頻操作：操作頻率越高的操作，越值得進(jìn)行流程的優(yōu)化。比如某個(gè)系統(tǒng)的操作頻率為一次閉環(huán)任務(wù)占用總工時(shí)的1%，每次閉環(huán)任務(wù)會(huì)有30次操作，則當(dāng)流程效率優(yōu)化10%時(shí)，一次閉環(huán)任務(wù)效率就是整體提高3%。
2. 合并流程比較緊密的操作：如果兩個(gè)流程銜接的特別緊密，可將其進(jìn)行流程上的合并。
3. 抽象繁瑣的流程，盡量系統(tǒng)化：如果為人工操作起來(lái)比較復(fù)雜繁瑣的流程，可將其抽象成系統(tǒng)化流程，即減少內(nèi)部交互，提高操作效率。
4. 整理工作流：流程中涉及到工作流的內(nèi)容進(jìn)行梳理（工作流介紹可看之前的文章）
5. 異常流程梳理：主線流程梳理后，對(duì)主線流程中可能產(chǎn)生的異常流程進(jìn)行輸出。關(guān)鍵節(jié)點(diǎn)按照流程六要素進(jìn)行流程梳理。

以上的一系列文章就是我在平時(shí)設(shè)計(jì)一款后臺(tái)產(chǎn)品時(shí)的整體思路，整理出來(lái)一是將自己一段時(shí)間以來(lái)的知識(shí)做一個(gè)總結(jié)和回顧，讓自己可以在平時(shí)的工作中可以有對(duì)業(yè)務(wù)更加深刻的理解，對(duì)產(chǎn)品設(shè)計(jì)上更大的提升；另外也做為自己一個(gè)階段性的回顧，以免后續(xù)工作中遇到同樣的問(wèn)題會(huì)忘記一些之前的坑，作為前車之鑒留給自己。

另外，將這些分享出來(lái)也可以給大家分享一些自己平時(shí)設(shè)計(jì)產(chǎn)品的思路，給大家避免一些自己踩過(guò)的坑。

相關(guān)閱讀

從0到1設(shè)計(jì)后臺(tái)產(chǎn)品（一）：給后臺(tái)產(chǎn)品分個(gè)類

從0到1設(shè)計(jì)后臺(tái)產(chǎn)品（二）：如何定義業(yè)務(wù)需求？

從0到1設(shè)計(jì)后臺(tái)產(chǎn)品（三）：產(chǎn)品功能解構(gòu)

#專欄作家#

執(zhí)迷，微信公眾號(hào)：執(zhí)迷有悟，人人都是產(chǎn)品經(jīng)理專欄作家，一個(gè)后臺(tái)產(chǎn)品經(jīng)理。

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

題圖來(lái)自 unsplash，基于 CC0 協(xié)議