本文筆者將為大家分析后臺設(shè)計的五個要素：輔助設(shè)計鲤遥、表單設(shè)計斋日、搜索欄設(shè)計、頁面設(shè)計挠羔、導(dǎo)航欄設(shè)計的應(yīng)用情景以及作用井仰。
在進入正文之前，請容我多嘴一句破加，寫這個的初衷也是為自己的以往做個總結(jié)吧俱恶！陸陸續(xù)續(xù)往里邊增加和刪減了不少的內(nèi)容，留下相對直觀的內(nèi)容范舀。
不知道你們對于一個好用的后臺是什么樣的概念速那？是高內(nèi)聚、低耦合尿背、高易用性端仰、簡潔大方的界面、良好的反饋機制田藐、高拓展性荔烧、人性化的交互設(shè)計？這些可能都是吧汽久！
這篇文章主要的目的是：寫一些后臺設(shè)計方面比較行之有效的經(jīng)驗之談鹤竭。當(dāng)然也看了一些別人的文章，不然也沒法相對規(guī)范的歸納以往的經(jīng)驗景醇，然后就是對自己以往走過的坑有個總結(jié)臀稚，同時后來者有個警示，當(dāng)然里邊有些我說的可能不適用一些后臺系統(tǒng)三痰，請慢噴吧寺。
同時，對以往因為個人經(jīng)驗不足造成的種種事故的公司散劫，深感抱歉稚机，哈哈！（略略略获搏，然而內(nèi)心并無愧疚之心赖条！這個虛偽的產(chǎn)品！）
一、輔助設(shè)計
1. 輔助文字
輔助文字一般都是顯示于界面的外部來提示纬乍、引導(dǎo)用戶的下一步操作碱茁，與正文相比不是很明顯，存在感相對弱化仿贬，不至于過于吸引用戶的注意力早芭，但又會放在相對明顯、關(guān)鍵的地方诅蝶。
情景：在以下幾個地方比較常見關(guān)鍵輸入框旁邊退个、標(biāo)題的介紹、統(tǒng)計圖表的屬性名稱等場景调炬。
下面上效果：
作用：上面可以用到輔助文字的地方语盈，即弱化存在感、同時也能正確的提示和引導(dǎo)用戶缰泡。
2. 幫助文字
幫助文字相對于輔助文字的純在感又會被再弱化一個檔次刀荒，往往是因為內(nèi)容過多或者用戶關(guān)注頻次低而被放置于相對不顯眼的地方。
情景：在那些地方用到的幫助文字比較多呢棘钞？沒錯缠借，就是問題文檔、客服咨詢的場景運用的比較多宜猜。
作用：幫助文字往往是因為包括內(nèi)容過多泼返，為了不主動分散用戶的注意力，往往都是需要觸發(fā)姨拥，不然會因為頁面繁雜绅喉、主次不分影響用戶的感知、干擾用戶的判斷叫乌。
3. 輸入框設(shè)計
后臺的輸入框的設(shè)計并沒有太多講究柴罐，能正確引導(dǎo)用戶輸入正確的內(nèi)容即可，主要分兩步：引導(dǎo)到正確的輸入位置憨奸、輸入正確的內(nèi)容革屠。
情景：多用于登錄、注冊排宰、搜索欄似芝、用戶信息輸入、訂單信息輸入等場景额各，我就不一一列舉了国觉。
作用：是為了給予用戶良好的反饋吧恃，減少用戶輸入的失誤率虾啦。
4. 限制條件提示
情景：限制條件提示多數(shù)的運用于輸入的場景，比如要求的輸入的文字或者上傳圖片文件的字?jǐn)?shù)、大小傲醉、格式等等蝇闭。
作用：通過限制的條件提前讓用戶了解到輸入的前置條件，降低操作的失誤率和提升操作的效率硬毕。
5. 可視化反饋
可視化反饋在后臺的設(shè)計中的重要性是毋庸置疑的呻引，反饋的形式也多種多樣。當(dāng)然吐咳，作為產(chǎn)品的自己也要區(qū)分什么場景需要用到反饋逻悠，什么情況不需要用到，并不是反饋越多越好韭脊。那么童谒，在什么情況下使用反饋比較好呢？
——關(guān)鍵節(jié)點和重要信息錄入沪羔。
情景：
可視化反饋的運用場景我就列舉幾個饥伊，比如：寄快遞的時候收件人的姓名、電話和的地址信息是不是很重要蔫饰？那么琅豆，這一塊就很有必要給到他們正確、錯誤的輸入反饋篓吁，這就是重要信息輸入的反饋機制茫因。
還有關(guān)鍵節(jié)點的反饋我再舉例一個，比如：你購物付款的時候杖剪，往往支付完的時候會提示你支付成功或支付失敗节腐，當(dāng)關(guān)鍵頁面、業(yè)務(wù)或者操作流程從一個進入下一個節(jié)點的時候摘盆，好的反饋機制會給予用戶良好的體驗翼雀。當(dāng)然這個節(jié)點關(guān)鍵與否需要判定的條件過多，我就過多講訴了孩擂。
下面狼渊，給大家?guī)讉€比較直觀的圖：
二、表單設(shè)計
1. 只讀模式
只讀模式的表單主要是作為信息展示作用类垦，操作的功能并不多或者沒有狈邑，不會直接表單列表進行操作，比如：發(fā)票列表蚤认、操作日志等操作性較低的信息列表都會以只讀模式顯示米苹。
作用：只讀模式的表單最重要的就是易讀性和易操作性。
2. 可用模式
可用模式的表單可操作的空間很大砰琢，根據(jù)業(yè)務(wù)蘸嘶、需求的區(qū)別一般在這幾個區(qū)域?qū)Ρ韱芜M行編輯：頂部搜索欄區(qū)域良瞧、列表頂部區(qū)域、列表內(nèi)容區(qū)域训唱、列表列的末尾褥蚯。
那么，每個區(qū)域的操作放置有什么講究呢况增？
也不是亂放的赞庶，頂部搜索欄區(qū)域和底部操作區(qū)域一般用于放置可以對列表內(nèi)多項行進行操作的功能，如批量刪除澳骤、批量審核歧强、批量發(fā)貨、批量核銷等等功能为肮；尾部操作區(qū)域只對單行信息進行操作誊锭；表內(nèi)操作區(qū)域是單行內(nèi)的單個信息字段進行操作，如姓名編輯弥锄、電話編輯等等丧靡；列表頂部區(qū)域只對列表的單列信息進行操作，如排序籽暇、篩選等等温治。
三、搜索欄設(shè)計
搜索欄需要根據(jù)搜索欄的搜索的條件的多少進行排版戒悠，一般有以下幾種布局方式：顯式布局熬荆、隱式布局、半隱式布局绸狐。
這里的“隱”是指需要觸發(fā)才能看到搜索條件的意思卤恳。
相比于隱式布局和顯示布局，半隱式布局會將觸發(fā)頻次相對少的條件隱藏寒矿，顯示出觸發(fā)頻次高的操作功能突琳。
下面是幾種布局的顯示形式：
多數(shù)的列表以顯式和半隱式布局為主，隱式布局多數(shù)用于規(guī)則性的條件篩選才會使用符相，因為規(guī)則性的條件篩選涉及到的操作和邏輯相對比較多拆融，為提高列表的易讀性所以采用隱式設(shè)計。
四啊终、 頁面布局
1. 多列式布局
主要使用信息的模塊化和分組展示的形式镜豹，來提高信息的易讀性和復(fù)用性。
在客戶詳情模塊區(qū)分出了三個比較明顯的區(qū)域蓝牲，個人基礎(chǔ)信息趟脂、個人信用、個人證件例衍，增加整個頁面的易讀性昔期，同時對于模塊化的信息的方式更利于系統(tǒng)的擴展已卸、調(diào)用和復(fù)用。
2. 單列布局
單列布局的方式多用于彈窗或者信息量較少的界面镇眷，信息之間同質(zhì)性高咬最，如個人信息中的姓名翎嫡、電話欠动、地址、身份證號等與個人相關(guān)性比較高的信息惑申，往往會以單列頁面的形式整合到個人信息中具伍，單列布局信息頁面的特點之一就是信息的同質(zhì)性高。
3. 擬物型布局
擬物型布局的特點就是從形態(tài)上能加深用戶對于信息和場景的理解圈驼，比如：個人信息廣泛運用于各種場景人芽，如果單單以個人信息的形態(tài)展示，可能用戶不會很直觀的了解該信息的用途绩脆，但若是信息的布局以車票萤厅、門禁卡、銀行卡的信息形態(tài)來展示靴迫，就相當(dāng)直觀惕味。
4. 步驟向?qū)筒季?/p>
當(dāng)頁面信息較多、臃腫玉锌，且流程化傾向嚴(yán)重名挥，那么采用步驟向?qū)筒季值姆绞饺ピO(shè)計是比較合理的，能有效的降低輸入的壓力主守、降低信息信息重復(fù)輸入風(fēng)險禀倔。
步驟向?qū)筒季侄嘤糜谧浴⒁龑?dǎo)使用参淫、多重關(guān)鍵信息的錄入情景救湖，多重信息因為信息的重要性和信息比較多，采用步驟的方式可以分段錄入信息涎才，不至于使用戶輸入的時候產(chǎn)生太大厭煩感捎谨。同時，因為意外情況導(dǎo)致錄入失敗時憔维，分段錄入的方式可以保存部分信息涛救。
五、導(dǎo)航欄設(shè)計
導(dǎo)航欄設(shè)計一般有這幾種頂部導(dǎo)航欄业扒、側(cè)邊欄检吆、動態(tài)側(cè)邊欄、多級結(jié)構(gòu)程储，不過也有混合設(shè)計的方式蹭沛，適用分類較多的布局臂寝。
頂部導(dǎo)航欄于頁面頂部。
側(cè)邊欄多于頁面左側(cè)展示：
動態(tài)側(cè)邊欄當(dāng)鼠標(biāo)移入時展開摊灭，鼠標(biāo)移出時收起咆贬。
多級結(jié)構(gòu)：
最后，在廢話幾句吧帚呼！寫的不是很好掏缎，口語化比較嚴(yán)重，還有表達方面也不是很好煤杀，總之眷蜈，后續(xù)會慢慢改進了！
