在產(chǎn)品流程中，架構(gòu)、流程和角色的權(quán)限處理完后，我們就會(huì)開始頁面的具體設(shè)計(jì)。本文作者分享了后臺頁面的設(shè)計(jì)思路，供大家參考。

在產(chǎn)品架構(gòu)、流程設(shè)計(jì)和角色權(quán)限設(shè)計(jì)完成之后，開始著手每個(gè)頁面的具體設(shè)計(jì)。

一個(gè)標(biāo)準(zhǔn)的后臺頁面框架應(yīng)該主要分為：搜索欄、功能欄、列表區(qū)（其中含操作列）、匯總欄（分為數(shù)據(jù)匯總區(qū)、分頁區(qū)）。

一、導(dǎo)航欄

位置：頁面最頂部

用戶告訴用戶現(xiàn)在“哪里”，展示方式為：一級菜單名稱>二級菜單名稱>三級菜單名稱

做交互设计10年，我为何转岗到产品经理？

真正转岗之后，我发现很多工作还是超出了自己的想象。产品经理的工作确实比较杂。理论上，产品经理的工作包括了产品的方方面面，从市场研究、用户调研、数据分析...

查看详情 >

做的好一點(diǎn)的話，可以在頁面名稱上加鏈接，點(diǎn)擊跳轉(zhuǎn)至對應(yīng)菜單頁面。

二、搜索欄

位置：導(dǎo)航欄下方

沒啥好說的，篩選數(shù)據(jù)用，分為篩選條件和按鈕。

篩選條件：一般肯定會(huì)包含名稱、日期、編號/編碼/ID（唯一標(biāo)識），其余的篩選條件看用戶需要。假如篩選條件非常多，超過3行，還需要增加展開、收起按鈕來優(yōu)化頁面空間

按鈕：查詢必有，重置看篩選數(shù)量，如果篩選數(shù)量多的話就加一個(gè)重置按鈕

三、功能欄

位置：在搜索欄和列表區(qū)之間。

這里面的功能按鈕是面向的是所有查詢數(shù)據(jù)、多條數(shù)據(jù)，或者新增數(shù)據(jù)。

比如：

導(dǎo)出：導(dǎo)出的是查詢出來的所有數(shù)據(jù)

批量刪除：在列表中勾選數(shù)據(jù)后，點(diǎn)擊將勾選數(shù)據(jù)一批全部刪除

新建任務(wù)：新建的是一條全新的數(shù)據(jù)

多說一句，凡是查詢數(shù)據(jù)的頁面，都應(yīng)有導(dǎo)出功能，業(yè)務(wù)方肯定會(huì)要全部明細(xì)數(shù)據(jù)的清單。

四、列表區(qū)

位置：在功能欄下方

數(shù)據(jù)字段的羅列，必須要的字段有以下5個(gè)，其余字段看用戶需要增添。

字段的順序從左往右一般為：編號/編碼/ID、名稱、狀態(tài)、類型、時(shí)間，其他字段順序根據(jù)用戶查看頻率排列，用的越頻繁越靠左。

注意事項(xiàng)

1. 列表的字段不是越多越好，最好是查詢數(shù)據(jù)庫里單表的數(shù)據(jù)，因?yàn)橐且粋€(gè)列表查詢了多張數(shù)據(jù)庫表，會(huì)導(dǎo)致頁面加載巨慢
2. 列表的字段應(yīng)只包含數(shù)值類型的字段，比如：圖片、視頻，就不適合放在列表中，應(yīng)該放在操作列查看。
3. 在表格內(nèi)，數(shù)據(jù)值類型為文字的居左，數(shù)字、時(shí)間的居右（參考Excel）
4. 小數(shù)點(diǎn)位數(shù)統(tǒng)一，一般保留2位小數(shù)，第三位四舍五入

此外，有些后臺列表會(huì)將最左邊1-2列固定，因?yàn)閿?shù)據(jù)字段很多，避免用戶查看后面的值時(shí)忘了前面的。

操作列

位置：在列表的最后一列

這里的功能按鈕，都是對應(yīng)一條數(shù)據(jù)進(jìn)行操作的。按鈕類型分為以下5種

五、匯總欄

位置：列表下方

匯總欄又可分為數(shù)據(jù)匯總區(qū)、分頁區(qū)。

數(shù)據(jù)匯總區(qū)

匯總數(shù)據(jù)必須在對應(yīng)字段的正下方，可匯總的字段一般為數(shù)量、金額，像均值、率值不可匯總，當(dāng)然，如果用戶有需要，可按其他的公式進(jìn)行計(jì)算匯總至此。

分頁區(qū)

列表翻頁用。一般包含列表數(shù)據(jù)總條數(shù)、每頁條數(shù)、第幾頁、共幾頁、上一頁、下一頁。

六、頁面框架和角色權(quán)限

為什么后臺頁面框架的布局要是這個(gè)樣子呢？

一是這個(gè)頁面框架非常清晰的分配了功能和信息的布局，二是這樣的框架可以和角色權(quán)限完美兼容。

在角色權(quán)限設(shè)計(jì)的時(shí)候，我們可以用一張表將系統(tǒng)的所有角色對應(yīng)的菜單列出來。

接著，在角色權(quán)限功能-配置新角色時(shí)，頁面的按鈕權(quán)限通過功能、操作兩塊進(jìn)行勾選即可。

最終，用戶登錄后臺頁面，看到的就是與之權(quán)限對應(yīng)、整齊劃一的按鈕。