后臺一般都是顯示數(shù)據(jù)分析和一些功能設置的，所以后臺界面的設計一定要能夠讓客戶一眼就能抓住重點，下面我們跟隨小編一起來了解一下后臺界面設計的相關資料吧。

后臺界面設計頁面布局

　　后臺產(chǎn)品更側(cè)重于功能與邏輯，在頁面布局上都大同小異。經(jīng)常用到的兩種布局：

　　(1)左右結(jié)構，分為Logo、登錄賬戶、側(cè)面導航、內(nèi)容區(qū)四部分;

　　(2)上下結(jié)構，分為Logo、頂部導航、登錄賬戶、內(nèi)容區(qū)四部分。

　　Logo：可放置后臺系統(tǒng)的名稱或者圖標，可以作為回到系統(tǒng)主頁的快速入口。

　　登錄賬戶：可放置當前登錄人賬戶，通過此入口可進入個人中心詳情頁面。一般會有賬戶的退出和切換。在登錄賬戶前面，可以添加全局性功能的入口，如：搜索、消息中心等。

　　導航：

　　(1)側(cè)面導航，多用于后臺管理系統(tǒng)或內(nèi)容太過龐雜的web端網(wǎng)站，按照系統(tǒng)功能點劃分一級導航，二級導航等，能容納更多信息且更符合閱讀習慣，有更好的拓展性。

　　(2)頂部導航，多用來劃分網(wǎng)站的主要板塊，常見于產(chǎn)品層級較少的網(wǎng)站或內(nèi)容較規(guī)則的資訊類網(wǎng)站，如騰訊新聞、搜狐新聞等。

　　內(nèi)容區(qū)：正文內(nèi)容區(qū)域，展示我們信息和操作的主要區(qū)域。

（圖片來自網(wǎng)絡）

　　后臺界面設計首頁設計

　　后臺產(chǎn)品絕大多數(shù)都是有首頁的，首頁設計之前，我們需要考慮首頁內(nèi)容是針對所有用戶還是針對單一用戶。

　　所有用戶：展示產(chǎn)品相關的各種統(tǒng)計圖、通知公告、集成的功能入口等。

　　單一用戶：展示待辦事項等只與當前登錄用戶相關的業(yè)務。

　　也有首頁中將兩者結(jié)合起來的，既放通知公告、熱點問題等針對所有用戶的內(nèi)容，也放待辦事項等針對單一用戶的內(nèi)容。

　　后臺界面設計列表頁設計

　　1、查詢條件：

　　查詢條件有哪些;哪些必填(紅色*標注，在文字左側(cè));排序;是否支持模糊查詢;下拉框不存在默認值時，默認為“請選擇”;輸入框不存在默認值時，默認為“請輸入”;查詢條件右對齊，輸入框左對齊。

2、查詢結(jié)果：

　　(1)表頭：有哪些字段、對每個字段的理解、字段的數(shù)據(jù)值是什么樣子的、排序、有單位的字段帶單位，如：金額(元)、可添加淺色的背景色、表頭左側(cè)添加一個【序號】字段

　　(2)列表的初始狀態(tài)：

　　不顯示，選擇條件點擊查詢以后才顯示

　　顯示表頭等查詢結(jié)果框架，選擇條件點擊查詢以后才顯示數(shù)據(jù)

　　進來就按照默認條件展示數(shù)據(jù)

　　(3)數(shù)據(jù)量有多少：分頁展示還是添加豎向滾動條展示;添加豎向滾動條時，是否需要固定表頭或者只在顯示數(shù)據(jù)的表格中添加豎向滾動條

　　(4)表格列數(shù)較多情況的幾種處理方式：添加橫向滾動條;允許用戶對列自定;固定某些列，比如身份證號、姓名

（圖片來自網(wǎng)絡）

　　(5)列寬：表頭不能換行，列寬至少大于表頭

　　列內(nèi)容固定時，如手機號等，列寬應大于該固定寬度

　　列內(nèi)容不固定時，應考慮大多數(shù)情況，保證大多數(shù)數(shù)據(jù)完整顯示

　　數(shù)據(jù)長度大于列寬時，數(shù)據(jù)內(nèi)容進行截斷，末尾加......鼠標移入時，在上方顯示 浮層顯示完整內(nèi)容，當數(shù)據(jù)末尾具有有價值內(nèi)容時可采用中間截斷，如郵箱 12345......@163.com;或允許用戶對列寬進行調(diào)整

　　(6)排序：常用日期字段的升序、降序來排序;多列具有排序功能時，確定好優(yōu)先級

　　(7)對齊方式：我公司使用文本居中對齊，數(shù)值金額右對齊的方式

　　(8)詳情入口：一是以具有區(qū)別性的字段為鏈接(視覺上有所不同，如字體調(diào)為藍色);二是在表格內(nèi)單獨設置【查看】入口，字段較多有橫向滾動條時建議將入口放在表格左側(cè)，字段較少時可放在表格右側(cè)。前者節(jié)省空間，后者存在感強，需要根據(jù)具體場景來確定方案

　　(9)勾選：

　　全選可以進行批量選中，在多頁的情況下，通常有兩種需求，其一是選中當前 頁，其二是選中全部。

　　跨頁選擇，在第一頁勾選幾項后，翻頁再去勾選其他項時，有兩種情況：其一 是翻頁后不保留選中狀態(tài);其二是保留選中狀態(tài)，但往往無法快速獲 知已選項的 情況，所以，在切換到其他頁面時，需要再表格頂部顯示已選項情況，允許刪除 其中某一項和清空所有。

　　(10)按鈕：在表格頂部放置按鈕，比如新增、編輯、刪除等放在左側(cè)還是右側(cè)根據(jù)情況調(diào)整(我司右側(cè)居多)，有些按鈕時配合勾選進行操作的，當沒有勾選項時，禁用該按鈕或者給出彈框提示

(11)導出：給開發(fā)一個Excel模板，表名+篩選條件+時間+導出數(shù)據(jù)，通常使用表名來確定文件名稱，另外需注意美觀性

　　(12)未查詢到結(jié)果時，給予未查詢到的相關提示，如“暫無查詢結(jié)果”

（圖片來自網(wǎng)絡）

后臺界面設計添加頁設計

　　1、方式：打開一個新的頁面或彈框的頁面。

　　2、內(nèi)容分類：信息字段較多的時候，最好能夠結(jié)合字段信息做一個分類，比如案件信息，企業(yè)信息，辦理信息、附件信息

　　3、字段內(nèi)容規(guī)范：

　　是否必填(必填項以紅色號標識出來，紅色在文字左側(cè);當必填項沒有填寫時，可在光標移走時，給出檢驗提示，如字段文本框下標紅或高亮警示)

　　是否有字符限制(字符格式、字符長度)，如：手機號、身份證號等。不符合格式的不允許寫入，超過長度的不再寫入

　　是否有默認值，如當前日期、當前辦理人等，可直接寫入且不允許修改

　　是否有單選，如性別，不需要文本框輸入，單選即可

　　4、提示：保存、提交、刪除等按鈕，需要進行二次確認;操作成功、操作失敗需給出提示。

　　5、鍵盤支持：支持TAB鍵移切換動光標焦點，移動遵循從左上至右下的原則

　　小編覺得后臺的界面設計原則其實都是非常簡單的，但是它們最終說呈現(xiàn)出的效果確能夠讓人感覺到非常的驚艷不已哦!