本文筆者將為大家分析后臺設計的五個要素：輔助設計、表單設計、搜索欄設計、頁面設計、導航欄設計的應用情景以及作用。

在進入正文之前，請容我多嘴一句，寫這個的初衷也是為自己的以往做個總結吧！陸陸續續往里邊增加和刪減了不少的內容，留下相對直觀的內容。

不知道你們對于一個好用的后臺是什么樣的概念？是高內聚、低耦合、高易用性、簡潔大方的界面、良好的反饋機制、高拓展性、人性化的交互設計？這些可能都是吧！

這篇文章主要的目的是：寫一些后臺設計方面比較行之有效的經驗之談。當然也看了一些別人的文章，不然也沒法相對規范的歸納以往的經驗，然后就是對自己以往走過的坑有個總結，同時后來者有個警示，當然里邊有些我說的可能不適用一些后臺系統，請慢噴。

同時，對以往因為個人經驗不足造成的種種事故的公司，深感抱歉，哈哈?。月月?，然而內心并無愧疚之心！這個虛偽的產品?。?/p>

一、輔助設計

1. 輔助文字

輔助文字一般都是顯示于界面的外部來提示、引導用戶的下一步操作，與正文相比不是很明顯，存在感相對弱化，不至于過于吸引用戶的注意力，但又會放在相對明顯、關鍵的地方。

情景：在以下幾個地方比較常見關鍵輸入框旁邊、標題的介紹、統計圖表的屬性名稱等場景。

下面上效果：

作用：上面可以用到輔助文字的地方，即弱化存在感、同時也能正確的提示和引導用戶。

2. 幫助文字

幫助文字相對于輔助文字的純在感又會被再弱化一個檔次，往往是因為內容過多或者用戶關注頻次低而被放置于相對不顯眼的地方。

情景：在那些地方用到的幫助文字比較多呢？沒錯，就是問題文檔、客服咨詢的場景運用的比較多。

作用：幫助文字往往是因為包括內容過多，為了不主動分散用戶的注意力，往往都是需要觸發，不然會因為頁面繁雜、主次不分影響用戶的感知、干擾用戶的判斷。

3. 輸入框設計

后臺的輸入框的設計并沒有太多講究，能正確引導用戶輸入正確的內容即可，主要分兩步：引導到正確的輸入位置、輸入正確的內容。

情景：多用于登錄、注冊、搜索欄、用戶信息輸入、訂單信息輸入等場景，我就不一一列舉了。

作用：是為了給予用戶良好的反饋，減少用戶輸入的失誤率。

4. 限制條件提示

情景：限制條件提示多數的運用于輸入的場景，比如要求的輸入的文字或者上傳圖片文件的字數、大小、格式等等。

作用：通過限制的條件提前讓用戶了解到輸入的前置條件，降低操作的失誤率和提升操作的效率。

5. 可視化反饋

可視化反饋在后臺的設計中的重要性是毋庸置疑的，反饋的形式也多種多樣。當然，作為產品的自己也要區分什么場景需要用到反饋，什么情況不需要用到，并不是反饋越多越好。那么，在什么情況下使用反饋比較好呢？

——關鍵節點和重要信息錄入。

情景：

可視化反饋的運用場景我就列舉幾個，比如：寄快遞的時候收件人的姓名、電話和的地址信息是不是很重要？那么，這一塊就很有必要給到他們正確、錯誤的輸入反饋，這就是重要信息輸入的反饋機制。

還有關鍵節點的反饋我再舉例一個，比如：你購物付款的時候，往往支付完的時候會提示你支付成功或支付失敗，當關鍵頁面、業務或者操作流程從一個進入下一個節點的時候，好的反饋機制會給予用戶良好的體驗。當然這個節點關鍵與否需要判定的條件過多，我就過多講訴了。

下面，給大家幾個比較直觀的圖：

二、表單設計

1. 只讀模式

只讀模式的表單主要是作為信息展示作用，操作的功能并不多或者沒有，不會直接表單列表進行操作，比如：發票列表、操作日志等操作性較低的信息列表都會以只讀模式顯示。

作用：只讀模式的表單最重要的就是易讀性和易操作性。

2. 可用模式

可用模式的表單可操作的空間很大，根據業務、需求的區別一般在這幾個區域對表單進行編輯：頂部搜索欄區域、列表頂部區域、列表內容區域、列表列的末尾。

那么，每個區域的操作放置有什么講究呢？

也不是亂放的，頂部搜索欄區域和底部操作區域一般用于放置可以對列表內多項行進行操作的功能，如批量刪除、批量審核、批量發貨、批量核銷等等功能；尾部操作區域只對單行信息進行操作；表內操作區域是單行內的單個信息字段進行操作，如姓名編輯、電話編輯等等；列表頂部區域只對列表的單列信息進行操作，如排序、篩選等等。

三、搜索欄設計

搜索欄需要根據搜索欄的搜索的條件的多少進行排版，一般有以下幾種布局方式：顯式布局、隱式布局、半隱式布局。

這里的“隱”是指需要觸發才能看到搜索條件的意思。

相比于隱式布局和顯示布局，半隱式布局會將觸發頻次相對少的條件隱藏，顯示出觸發頻次高的操作功能。

下面是幾種布局的顯示形式：

多數的列表以顯式和半隱式布局為主，隱式布局多數用于規則性的條件篩選才會使用，因為規則性的條件篩選涉及到的操作和邏輯相對比較多，為提高列表的易讀性所以采用隱式設計。

四、 頁面布局

1. 多列式布局

主要使用信息的模塊化和分組展示的形式，來提高信息的易讀性和復用性。

在客戶詳情模塊區分出了三個比較明顯的區域，個人基礎信息、個人信用、個人證件，增加整個頁面的易讀性，同時對于模塊化的信息的方式更利于系統的擴展、調用和復用。

2. 單列布局

單列布局的方式多用于彈窗或者信息量較少的界面，信息之間同質性高，如個人信息中的姓名、電話、地址、身份證號等與個人相關性比較高的信息，往往會以單列頁面的形式整合到個人信息中，單列布局信息頁面的特點之一就是信息的同質性高。

3. 擬物型布局

擬物型布局的特點就是從形態上能加深用戶對于信息和場景的理解，比如：個人信息廣泛運用于各種場景，如果單單以個人信息的形態展示，可能用戶不會很直觀的了解該信息的用途，但若是信息的布局以車票、門禁卡、銀行卡的信息形態來展示，就相當直觀。

4. 步驟向導型布局

當頁面信息較多、臃腫，且流程化傾向嚴重，那么采用步驟向導型布局的方式去設計是比較合理的，能有效的降低輸入的壓力、降低信息信息重復輸入風險。

步驟向導型布局多用于注冊、引導使用、多重關鍵信息的錄入情景，多重信息因為信息的重要性和信息比較多，采用步驟的方式可以分段錄入信息，不至于使用戶輸入的時候產生太大厭煩感。同時，因為意外情況導致錄入失敗時，分段錄入的方式可以保存部分信息。

五、導航欄設計

• 導航欄設計一般有這幾種頂部導航欄、側邊欄、動態側邊欄、多級結構，不過也有混合設計的方式，適用分類較多的布局。
• 頂部導航欄于頁面頂部。

側邊欄多于頁面左側展示：

動態側邊欄當鼠標移入時展開，鼠標移出時收起。

多級結構：

最后，在廢話幾句吧！寫的不是很好，口語化比較嚴重，還有表達方面也不是很好，總之，后續會慢慢改進了！

本文由 @藍色刀鋒 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議