作者整理了一套后臺系統(tǒng)原型模板，與各位PM分享，希望給大家的工作帶來些幫助。

后臺系統(tǒng)的原型模板早在做APP模板前就已經(jīng)使用了很長一段時間。

后臺原型不需要也不適合太多特殊的交互設(shè)計，大部分頁面無非列表、表單、查看頁中的一種，其實更適合使用模板元件來節(jié)省工作量。

個人經(jīng)驗，靈活使用這套模板和元件，起碼可以節(jié)省50%以上的工作量。

基本思路和文檔結(jié)構(gòu)

相比于注重交互體驗的前端需求，后臺需求更注重業(yè)務(wù)邏輯、系統(tǒng)架構(gòu)的設(shè)計，因此后臺需求中把需求說明作為第一個章節(jié)，同時刪除了交互說明章節(jié)。

后臺系統(tǒng)實現(xiàn)上，很少會專門進(jìn)行UI設(shè)計，一般是沿用現(xiàn)成的后臺框架來實現(xiàn)，建議原型盡量用黑白灰來表現(xiàn)，并且如非特殊需要，不要去設(shè)計特殊的交互效果，減少實施時的額外開銷。

文檔長這樣

原型文檔主要有三部分，需求說明、修訂記錄和完整原型本身。

需求說明

需求說明部分取代傳統(tǒng)的PRD文檔的作用，按需闡述項目背景、需求范圍等內(nèi)容。

最重要的是列出本次需求點列表，并可以配合原型頁面（用快照元件）給予更直觀的說明。

修訂記錄

包括文檔修訂記錄和項目版本記錄。

原型模板說明

后臺原型框架采用常見的后臺框架，上方為系統(tǒng)標(biāo)題和登錄信息，左側(cè)為菜單欄。

考慮到易用性，菜單層級固定為兩級，上方預(yù)留了一個多后臺系統(tǒng)之間的調(diào)整入口，也可作為頂級菜單使用。

一般來說，后臺很多操作頁面樣式都很相似，為了減少誤操作的可能，所有頁面頂部為面包屑頁面路徑顯示，提醒用戶當(dāng)前所在頁面。

原型-列表頁

列表頁區(qū)域分別為篩選欄、操作欄、列表、分頁條。

操作欄主要放置批量操作按鈕或者新增按鈕等非針對已有記錄的操作功能入口。已有記錄的單次操作入口放在對應(yīng)記錄右側(cè).

原型-表單頁

表單頁模板提供了常用的表單元件，應(yīng)該可以符合大部分的需要。詳見原型。

原型-查看頁

原型-常用組件

常用組件頁面，把前面三個頁面沒有涉及的一些其他的后臺常用組件匯集顯示，方便使用。

也可以下載配套的元件庫（見文章最后）使用。

附

【20180131】原來的下載分享被度娘和諧了。

新下載鏈接: https://pan.baidu.com/s/1eTgLyQQ 密碼: tybz

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