本文筆者將為大家分析后臺設(shè)計(jì)的五個(gè)要素：輔助設(shè)計(jì)、表單設(shè)計(jì)、搜索欄設(shè)計(jì)、頁面設(shè)計(jì)、導(dǎo)航欄設(shè)計(jì)的應(yīng)用情景以及作用。

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

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

這篇文章主要的目的是：寫一些后臺設(shè)計(jì)方面比較行之有效的經(jīng)驗(yàn)之談。當(dāng)然也看了一些別人的文章，不然也沒法相對規(guī)范的歸納以往的經(jīng)驗(yàn)，然后就是對自己以往走過的坑有個(gè)總結(jié)，同時(shí)后來者有個(gè)警示，當(dāng)然里邊有些我說的可能不適用一些后臺系統(tǒng)，請慢噴。

同時(shí)，對以往因?yàn)閭€(gè)人經(jīng)驗(yàn)不足造成的種種事故的公司，深感抱歉，哈哈?。月月?，然而內(nèi)心并無愧疚之心！這個(gè)虛偽的產(chǎn)品?。?/p>

一、輔助設(shè)計(jì)

1. 輔助文字

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

情景：在以下幾個(gè)地方比較常見關(guān)鍵輸入框旁邊、標(biāo)題的介紹、統(tǒng)計(jì)圖表的屬性名稱等場景。

下面上效果：

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

2. 幫助文字

幫助文字相對于輔助文字的純在感又會被再弱化一個(gè)檔次，往往是因?yàn)閮?nèi)容過多或者用戶關(guān)注頻次低而被放置于相對不顯眼的地方。

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

作用：幫助文字往往是因?yàn)榘▋?nèi)容過多，為了不主動(dòng)分散用戶的注意力，往往都是需要觸發(fā)，不然會因?yàn)轫撁娣彪s、主次不分影響用戶的感知、干擾用戶的判斷。

3. 輸入框設(shè)計(jì)

后臺的輸入框的設(shè)計(jì)并沒有太多講究，能正確引導(dǎo)用戶輸入正確的內(nèi)容即可，主要分兩步：引導(dǎo)到正確的輸入位置、輸入正確的內(nèi)容。

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

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

4. 限制條件提示

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

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

5. 可視化反饋

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

——關(guān)鍵節(jié)點(diǎn)和重要信息錄入。

情景：

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

還有關(guān)鍵節(jié)點(diǎn)的反饋我再舉例一個(gè)，比如：你購物付款的時(shí)候，往往支付完的時(shí)候會提示你支付成功或支付失敗，當(dāng)關(guān)鍵頁面、業(yè)務(wù)或者操作流程從一個(gè)進(jìn)入下一個(gè)節(jié)點(diǎn)的時(shí)候，好的反饋機(jī)制會給予用戶良好的體驗(yàn)。當(dāng)然這個(gè)節(jié)點(diǎn)關(guān)鍵與否需要判定的條件過多，我就過多講訴了。

下面，給大家?guī)讉€(gè)比較直觀的圖：

二、表單設(shè)計(jì)

1. 只讀模式

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

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

2. 可用模式

可用模式的表單可操作的空間很大，根據(jù)業(yè)務(wù)、需求的區(qū)別一般在這幾個(gè)區(qū)域?qū)Ρ韱芜M(jìn)行編輯：頂部搜索欄區(qū)域、列表頂部區(qū)域、列表內(nèi)容區(qū)域、列表列的末尾。

那么，每個(gè)區(qū)域的操作放置有什么講究呢？

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

三、搜索欄設(shè)計(jì)

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

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

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

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

多數(shù)的列表以顯式和半隱式布局為主，隱式布局多數(shù)用于規(guī)則性的條件篩選才會使用，因?yàn)橐?guī)則性的條件篩選涉及到的操作和邏輯相對比較多，為提高列表的易讀性所以采用隱式設(shè)計(jì)。

四、 頁面布局

1. 多列式布局

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

在客戶詳情模塊區(qū)分出了三個(gè)比較明顯的區(qū)域，個(gè)人基礎(chǔ)信息、個(gè)人信用、個(gè)人證件，增加整個(gè)頁面的易讀性，同時(shí)對于模塊化的信息的方式更利于系統(tǒng)的擴(kuò)展、調(diào)用和復(fù)用。

2. 單列布局

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

3. 擬物型布局

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

4. 步驟向?qū)筒季?/h3>

當(dāng)頁面信息較多、臃腫，且流程化傾向嚴(yán)重，那么采用步驟向?qū)筒季值姆绞饺ピO(shè)計(jì)是比較合理的，能有效的降低輸入的壓力、降低信息信息重復(fù)輸入風(fēng)險(xiǎn)。

步驟向?qū)筒季侄嘤糜谧?、引?dǎo)使用、多重關(guān)鍵信息的錄入情景，多重信息因?yàn)樾畔⒌闹匾院托畔⒈容^多，采用步驟的方式可以分段錄入信息，不至于使用戶輸入的時(shí)候產(chǎn)生太大厭煩感。同時(shí)，因?yàn)橐馔馇闆r導(dǎo)致錄入失敗時(shí)，分段錄入的方式可以保存部分信息。

五、導(dǎo)航欄設(shè)計(jì)

• 導(dǎo)航欄設(shè)計(jì)一般有這幾種頂部導(dǎo)航欄、側(cè)邊欄、動(dòng)態(tài)側(cè)邊欄、多級結(jié)構(gòu)，不過也有混合設(shè)計(jì)的方式，適用分類較多的布局。
• 頂部導(dǎo)航欄于頁面頂部。

側(cè)邊欄多于頁面左側(cè)展示：

動(dòng)態(tài)側(cè)邊欄當(dāng)鼠標(biāo)移入時(shí)展開，鼠標(biāo)移出時(shí)收起。

多級結(jié)構(gòu)：

最后，在廢話幾句吧！寫的不是很好，口語化比較嚴(yán)重，還有表達(dá)方面也不是很好，總之，后續(xù)會慢慢改進(jìn)了！

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

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