第四章 後台設計基礎（二） 後台視覺

來自專欄 後台產品有話說

後台管理系統是後台產品經理設計工作的主要內容。後台管理系統設計思路以及內容設計到：

（1）後台管理模塊框架的搭建。就是通過MIND的形式規划出來後台包含哪些模塊，這些模塊有哪些具體菜單，菜單包含哪些具體功能等，如下圖所示：

（2）後台管理系統設計框架的搭建，也就是後台一個整體的交互風格，包括模塊、菜單的布局、級數，門戶整體的色調、一般情況下管理後台都是PC端WEB形式的後台，比如下面圖示：

（3）後台管理系統整體業務框架、業務邏輯搭建，以及相關具體功能業務邏輯，此部分內容我會在下一章後台設計相關流程圖中在著重講解。

（4）後台具體功能具體頁面的設計，比如相關業務的增刪改停、相關業務工作流、相關業務的查詢統計等功能，在此步驟中會涉及到相關元素的使用，比如表單、顏色、按鈕、控制項等，本章將提供一些常用的具體元素，希望大家在設計具體頁面選用這些元素的時候提供一個參考。

1、框架顏色

我們在設計後台框架的時候，為了設計出來的更加高保真，可以選定後台框架的主題色，相關顏色可以參考如下圖示：

2、字體，後台文本是用戶與系統交互的最根本的元素，希望提供一個模板話的字體設計，設計出來的後台更具視覺層次、更加清晰，是咱們的後台更有可讀性。

3、按鈕，按鈕現在基本上已扁平化為主，如果是大號的按鈕是14號字體，中號的按鈕是12號字體，相關按鈕的顏色提供如下幾種僅供參考：

4、標籤，標籤可以引用到某一工作流狀態、某一對象標示，標籤也是已扁平化為主，大號標籤12號字體，相關標籤參考如下：

5、警示圖表，在設計後台系統時，需要有一些警示圖表，來體現是成功、失敗、還是警告燈，可根據提下圖示參考：

6、分頁符，後台系統有好多表單設計，瀏覽時都需要分頁的，提供如下三種分頁符方式，供參考：

7、時間控制項，我們在做後台台功能時，會有好多時間控制項的應用，現在提供如下兩種時間控制項模式：

8、常規輸入框，在管理後台我們需要很多輸入控制項，下圖提供了一些常見的輸入框形式：

9、其他小圖標，有時候設計後台時，提供一些小圖標，會使設計出來的後台更具觀賞性，比如下列小圖標：

10、進度條，我們後台設計中會有一些流程上的設計，會有一些狀態控制，或是一些引導操作的進度條，比如下面兩種：

以上，具體提供了在設計後台相關功能頁面相關元素樣例，希望後台產品經理小白在設計後台產品具體功能頁面時相關元素的使用有一個參考，使咱們設計出來的後台更加統一、更具視覺效果，相關控制項的選擇提供一定的參考價值。