后臺一般都是顯示數(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)出的效果確能夠讓人感覺到非常的驚艷不已哦!