如何設(shè)計一個標(biāo)準(zhǔn)的后臺頁面框架圖
在產(chǎn)品流程中,架構(gòu)、流程和角色的權(quán)限處理完后,我們就會開始頁面的具體設(shè)計。本文作者分享了后臺頁面的設(shè)計思路,供大家參考。
在產(chǎn)品架構(gòu)、流程設(shè)計和角色權(quán)限設(shè)計完成之后,開始著手每個頁面的具體設(shè)計。
一個標(biāo)準(zhǔn)的后臺頁面框架應(yīng)該主要分為:搜索欄、功能欄、列表區(qū)(其中含操作列)、匯總欄(分為數(shù)據(jù)匯總區(qū)、分頁區(qū))。
一、導(dǎo)航欄
位置:頁面最頂部
用戶告訴用戶現(xiàn)在“哪里”,展示方式為:一級菜單名稱>二級菜單名稱>三級菜單名稱
做的好一點的話,可以在頁面名稱上加鏈接,點擊跳轉(zhuǎn)至對應(yīng)菜單頁面。
二、搜索欄
位置:導(dǎo)航欄下方
沒啥好說的,篩選數(shù)據(jù)用,分為篩選條件和按鈕。
篩選條件:一般肯定會包含名稱、日期、編號/編碼/ID(唯一標(biāo)識),其余的篩選條件看用戶需要。假如篩選條件非常多,超過3行,還需要增加展開、收起按鈕來優(yōu)化頁面空間
按鈕:查詢必有,重置看篩選數(shù)量,如果篩選數(shù)量多的話就加一個重置按鈕
三、功能欄
位置:在搜索欄和列表區(qū)之間。
這里面的功能按鈕是面向的是所有查詢數(shù)據(jù)、多條數(shù)據(jù),或者新增數(shù)據(jù)。
比如:
導(dǎo)出:導(dǎo)出的是查詢出來的所有數(shù)據(jù)
批量刪除:在列表中勾選數(shù)據(jù)后,點擊將勾選數(shù)據(jù)一批全部刪除
新建任務(wù):新建的是一條全新的數(shù)據(jù)
多說一句,凡是查詢數(shù)據(jù)的頁面,都應(yīng)有導(dǎo)出功能,業(yè)務(wù)方肯定會要全部明細(xì)數(shù)據(jù)的清單。
四、列表區(qū)
位置:在功能欄下方
數(shù)據(jù)字段的羅列,必須要的字段有以下5個,其余字段看用戶需要增添。
字段的順序從左往右一般為:編號/編碼/ID、名稱、狀態(tài)、類型、時間,其他字段順序根據(jù)用戶查看頻率排列,用的越頻繁越靠左。
注意事項
- 列表的字段不是越多越好,最好是查詢數(shù)據(jù)庫里單表的數(shù)據(jù),因為要是一個列表查詢了多張數(shù)據(jù)庫表,會導(dǎo)致頁面加載巨慢
- 列表的字段應(yīng)只包含數(shù)值類型的字段,比如:圖片、視頻,就不適合放在列表中,應(yīng)該放在操作列查看。
- 在表格內(nèi),數(shù)據(jù)值類型為文字的居左,數(shù)字、時間的居右(參考Excel)
- 小數(shù)點位數(shù)統(tǒng)一,一般保留2位小數(shù),第三位四舍五入
此外,有些后臺列表會將最左邊1-2列固定,因為數(shù)據(jù)字段很多,避免用戶查看后面的值時忘了前面的。
操作列
位置:在列表的最后一列
這里的功能按鈕,都是對應(yīng)一條數(shù)據(jù)進(jìn)行操作的。按鈕類型分為以下5種
五、匯總欄
位置:列表下方
匯總欄又可分為數(shù)據(jù)匯總區(qū)、分頁區(qū)。
數(shù)據(jù)匯總區(qū)
匯總數(shù)據(jù)必須在對應(yīng)字段的正下方,可匯總的字段一般為數(shù)量、金額,像均值、率值不可匯總,當(dāng)然,如果用戶有需要,可按其他的公式進(jìn)行計算匯總至此。
分頁區(qū)
列表翻頁用。一般包含列表數(shù)據(jù)總條數(shù)、每頁條數(shù)、第幾頁、共幾頁、上一頁、下一頁。
六、頁面框架和角色權(quán)限
為什么后臺頁面框架的布局要是這個樣子呢?
一是這個頁面框架非常清晰的分配了功能和信息的布局,二是這樣的框架可以和角色權(quán)限完美兼容。
在角色權(quán)限設(shè)計的時候,我們可以用一張表將系統(tǒng)的所有角色對應(yīng)的菜單列出來。
接著,在角色權(quán)限功能-配置新角色時,頁面的按鈕權(quán)限通過功能、操作兩塊進(jìn)行勾選即可。
最終,用戶登錄后臺頁面,看到的就是與之權(quán)限對應(yīng)、整齊劃一的按鈕。
本文由 @吳德馨 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
題圖來自 Unsplash,基于CC0協(xié)議
該文觀點僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。
- 目前還沒評論,等你發(fā)揮!