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

后臺界面設(shè)計(jì)頁面布局

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

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

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

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

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

　　導(dǎo)航：

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

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

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

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

　　后臺界面設(shè)計(jì)首頁設(shè)計(jì)

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

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

　　單一用戶：展示待辦事項(xiàng)等只與當(dāng)前登錄用戶相關(guān)的業(yè)務(wù)。

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

　　后臺界面設(shè)計(jì)列表頁設(shè)計(jì)

　　1、查詢條件：

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

2、查詢結(jié)果：

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

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

　　不顯示，選擇條件點(diǎn)擊查詢以后才顯示

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

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

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

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

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

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

　　列內(nèi)容固定時(shí)，如手機(jī)號等，列寬應(yīng)大于該固定寬度

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

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

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

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

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

　　(9)勾選：

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

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

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

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

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

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

后臺界面設(shè)計(jì)添加頁設(shè)計(jì)

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

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

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

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

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

　　是否有默認(rèn)值，如當(dāng)前日期、當(dāng)前辦理人等，可直接寫入且不允許修改

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

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

　　5、鍵盤支持：支持TAB鍵移切換動光標(biāo)焦點(diǎn)，移動遵循從左上至右下的原則

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