原型對于產(chǎn)品經(jīng)理來說是一門必修課，本篇文章作者總結(jié)了后臺原型設(shè)計五大要點，主要針對剛?cè)胄泻笈_設(shè)計經(jīng)驗不太豐富的同學(xué)。

對于很多初次設(shè)計后臺的產(chǎn)品經(jīng)理而言，原型是個很大的問題，因為平時接觸的少，競品又難以獲取，連個抄的地方都沒有，所以即使胸中需求千千萬，也不知道怎么表現(xiàn)。

在此，筆者針對后臺設(shè)計經(jīng)驗不太豐富的同學(xué)，總結(jié)了后臺原型設(shè)計五大要點，與大家分享。

原型是表現(xiàn)產(chǎn)品經(jīng)理想法的重要工具，當(dāng)我們調(diào)研清楚需求和流程后，需要原型幫助我們整理思路，用具象化的方式與需求提出方、開發(fā)人員、測試人員溝通。

無論公司是否有專業(yè)的交互設(shè)計師，對于產(chǎn)品經(jīng)理而言，這都是一項必備的基本功。

但是，它只是一個表現(xiàn)手段，無論你是用Axure還是墨刀，甚至手繪，通過原型整理你的思路，然后表達(dá)清楚才是重點，切莫本末倒置，把時間精力過多的花在所謂的高保真和花里胡哨的動效上，最后需求評審的時候一頓亂秀猛如虎，一看邏輯二百五。

產(chǎn)品經(jīng)理更重要的是：思考清楚每個需求的用戶、場景及其合理性；反復(fù)核對流程是否有問題；每個字段的來源及用途是否清晰；細(xì)節(jié)是否完善。

一、頁面常見布局

后臺相比于前端，更側(cè)重功能與邏輯，在頁面布局上，都大同小異，整體來講，分為logo、頂部導(dǎo)航、個人中心、側(cè)面導(dǎo)航、內(nèi)容區(qū)五個部分。

1. logo

放置企業(yè)logo，可以作為回到首頁的快速入口。如果我們設(shè)計的是一個To B的SaaS產(chǎn)品，為了滿足付費企業(yè)的個性化需求，這里需要靈活配置，以放置客戶的企業(yè)logo；

2. 頂部導(dǎo)航和側(cè)面導(dǎo)航：

頂部導(dǎo)航與側(cè)面導(dǎo)航可共存也可獨立。

當(dāng)產(chǎn)品層級大于等于三級時，可采用頂部導(dǎo)航+側(cè)面導(dǎo)航，頂部導(dǎo)航做一二級，側(cè)面導(dǎo)航做三級及以上；但當(dāng)產(chǎn)品層級超過三級時，說明產(chǎn)品復(fù)雜度很高，對用戶會造成很大的學(xué)習(xí)和記憶負(fù)擔(dān)，需要簡化并重新設(shè)計產(chǎn)品層級；當(dāng)產(chǎn)品層級僅為一兩級時，即可使用單獨使用頂部導(dǎo)航或側(cè)面導(dǎo)航。

需要注意的是，兩種導(dǎo)航共存時，我們一般把頂部導(dǎo)航作為更高級別，當(dāng)單獨使用一種導(dǎo)航時，我們又更多的使用側(cè)面導(dǎo)航，這主要是因為人的閱讀習(xí)慣和更好的拓展性。

3. 個人中心：

相較于前端產(chǎn)品，后臺產(chǎn)品的個人中心要簡單很多，主要用于賬號退出和切換，在個人中心入口旁邊，可以作為很多全局性功能的入口，如：搜索、消息中心等。

4. 內(nèi)容區(qū)

正文內(nèi)容區(qū)域，是我們信息展示和操作的主要區(qū)域。

二、首頁設(shè)計

在后臺產(chǎn)品中，首頁是一個非常重要的功能，但在很多產(chǎn)品中又容易把它忽略，尤其是內(nèi)部使用的后臺，可能根本不會做這個功能，但實際上，一個好的首頁，能極大的提升產(chǎn)品的使用體驗和工作效率。

將首頁上的功能以面向用戶為維度劃分，可以分為面向全部用戶的功能和面向單個用戶的功能。

1. 面向全部用戶功能

面向全部用戶的功能在原型上主要體現(xiàn)為數(shù)據(jù)監(jiān)控、資訊信息、其他功能入口三種。

數(shù)據(jù)監(jiān)控：

在首頁上，根據(jù)產(chǎn)品性質(zhì)不同，需要顯示整體、關(guān)鍵性數(shù)據(jù)及相關(guān)走勢。

例如：統(tǒng)計產(chǎn)品總用戶數(shù)、總銷售額、日活、月活、轉(zhuǎn)化率以及對應(yīng)數(shù)據(jù)的同比、環(huán)比等。目的是讓產(chǎn)品所有相關(guān)人對產(chǎn)品現(xiàn)狀及發(fā)展情況有一個直觀的認(rèn)識。

資訊信息：

這個功能在SaaS產(chǎn)品中使用較多，會把當(dāng)下與產(chǎn)品相關(guān)的資訊、動態(tài)等信息以文章鏈接的形式推送顯示出來。

對于公司內(nèi)部使用后臺，一般不會做這個功能，但當(dāng)有全局消息通知的需求時，可采用頂部跑馬燈的形式告知。

其他功能入口：

這個功能的設(shè)計有兩種應(yīng)用場景：

1. 一是應(yīng)用于一個大系統(tǒng)包含多個小系統(tǒng)時。在系列的第二篇文章中，筆者介紹過當(dāng)一個系統(tǒng)過大時，需要采用領(lǐng)域設(shè)計的方式將一個大型系統(tǒng)分拆為多個小系統(tǒng)，當(dāng)分拆的小系統(tǒng)功能也很多時，可以獨立成一個新的子產(chǎn)品，然后在這個大的系統(tǒng)的首頁給一個功能入口，這樣新的產(chǎn)品就可以采用新的交互和UI，而無需與父產(chǎn)品保持完全統(tǒng)一；
2. 另外一種應(yīng)用場景是我們的產(chǎn)品需要包含已有的某個系統(tǒng)同時不對包含系統(tǒng)做改動時。例如我們要做一個新的電商管理后臺，而前面因為業(yè)務(wù)優(yōu)先級已經(jīng)開發(fā)了一套商品庫存管理系統(tǒng)，暫時又不想對這套系統(tǒng)進(jìn)行改動，這個時候就可以在新的電商管理后臺的首頁加一個商品庫存管理系統(tǒng)的入口，既方便操作，也體現(xiàn)了兩個產(chǎn)品的包含關(guān)系；

2. 面向單個用戶功能

主要包括該用戶的待辦事項、流程進(jìn)度等。

待辦事項：

將用戶在系統(tǒng)中所需處理的事項快速展現(xiàn)出來，能極大的提高工作效率。

事項列表增加排序、分組、篩選這些附加功能，能幫助用戶更方便的找到自己想要的；對于一些可快速操作的事項，如審批等，可以直接在列表中加上操作按鈕，就不用再次點擊到對應(yīng)模塊去操作了。

流程進(jìn)度：

在首頁展現(xiàn)的流程進(jìn)度主要是這個用戶發(fā)起的流程，其他關(guān)聯(lián)性不那么強的流程則放在其他模塊

三、列表及表單頁設(shè)計

1. 列表頁設(shè)計

列表頁是后臺最為常見的頁面形式之一，用于分條展現(xiàn)同類數(shù)據(jù)。它包括表格列表、卡片列表兩種。

表格列表：

表格列表其實是一個后臺頁面上的Excel表格，除簡單的羅列一些字段外，可以做一些更為豐富的排序、橫向進(jìn)度條拖動、隱藏等功能，以應(yīng)對表格數(shù)據(jù)過多的情況。

操作方面，不同的功能需要進(jìn)行單個操作或批量操作，例如存在批量刪除列表中數(shù)據(jù)情況，需要在表格數(shù)據(jù)前加上復(fù)選框和全選按鈕。

卡片列表：

卡片列表主要應(yīng)用于列表字段少、字段內(nèi)容固定、視覺樣式要求高的場景，例如教育產(chǎn)品中的課程列表。

卡片列表最大的優(yōu)勢在于利用圖片或短視頻讓頁面美觀豐富，不至于像其他后臺頁面，但這也導(dǎo)致這種形式拓展性不強、維護(hù)成本高，所以一定要根據(jù)使用場景而定。

2. 表單頁設(shè)計

表單頁是后臺產(chǎn)品的另一種常用頁面，多用于新增、編輯功能。常用表單主要是基礎(chǔ)表單和分步表單。

四、可視化設(shè)計

可視化設(shè)計的重要性已經(jīng)不必強調(diào)了，千言萬語不如一張圖有效，尤其在后臺產(chǎn)品中，各種數(shù)據(jù)統(tǒng)計、報表、行為路徑等，都需要借助可視化設(shè)計將他們直觀、漂亮的展示出來。

在可視化設(shè)計中，主要可分成數(shù)據(jù)可視化、關(guān)系可視化、時間空間可視化三種類型。

1. 數(shù)據(jù)可視化

在數(shù)據(jù)可視化設(shè)計中，數(shù)據(jù)本身不重要，重要的是采用哪種方式更為合理，所以當(dāng)我們需要將數(shù)據(jù)用可視化的方式展現(xiàn)時，需要先搞清楚有哪些圖表，每種圖表的作用，然后用這些圖去體現(xiàn)數(shù)據(jù)。

常用圖形包括：條形（柱狀）圖、餅圖、折線圖、散點圖、熱力圖、雷達(dá)圖、旭日圖等，在這里推薦百度的EChart：http://www.echartsjs.com/index.html，所有你想到想不到的圖都可以找到。

2. 關(guān)系可視化

關(guān)系可視化體現(xiàn)了不同角色間錯綜復(fù)雜、難以語言描述的關(guān)系。常見于各種架構(gòu)設(shè)計、產(chǎn)品結(jié)構(gòu)設(shè)計中。

3. 時間空間可視化

時間可視化：

時間的可視化在上面“工作臺的設(shè)計”中已經(jīng)提到了，是以時間軸的形式，將各個關(guān)鍵時間點的相關(guān)事項展現(xiàn)出來，用來體現(xiàn)各事項發(fā)生的先后順序及相對計劃時間的進(jìn)度情況。

空間可視化：

空間可視化應(yīng)該是我們?nèi)粘Ｉ钪薪佑|最多的一種可視化設(shè)計，例如各種地圖、地鐵線路圖等。

五、幫助中心

幫助中心是很多產(chǎn)品經(jīng)理容易忽視但其實非常重要的一個模塊。

大部分的后臺、To B產(chǎn)品由于業(yè)務(wù)和邏輯的復(fù)雜性，不可能做得像前端產(chǎn)品那樣易用，同時又沒有統(tǒng)一的交互規(guī)范，用戶使用類似產(chǎn)品不多，導(dǎo)致產(chǎn)品推出后需要花大量的時間、人力做培訓(xùn)、講解，即使給出了相應(yīng)的文檔，也會由于各種原因沒有保存或忽略。

所以后臺產(chǎn)品需要一個更加優(yōu)質(zhì)的幫助中心來幫助他人，幫助自己。

1. 頁面布局上大多是左側(cè)目錄，右側(cè)為對應(yīng)的正文說明；
2. 幫助文檔不應(yīng)僅從功能上介紹產(chǎn)品，由于后臺產(chǎn)品需求、場景與角色關(guān)聯(lián)性大，所以還需要增加按不同角色介紹產(chǎn)品的使用；
3. 正文除了圖文形式，如果是對外的系統(tǒng)產(chǎn)品，還應(yīng)補充視頻形式，結(jié)合語音進(jìn)行講解，才能更清晰的將產(chǎn)品介紹給客戶

作者：周翔，起點學(xué)院深圳1609期產(chǎn)品經(jīng)理實戰(zhàn)訓(xùn)練營學(xué)員

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

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