列表頁(yè)腦圖

左側(cè)導(dǎo)航欄

全局導(dǎo)航

1、導(dǎo)航欄可折疊收起菜單。

2、收起時(shí)，鼠標(biāo)懸浮在圖標(biāo)上同時(shí)右側(cè)彈出菜單欄，然后觸發(fā)菜單文字。

頂部導(dǎo)航欄

• Tab擺放位置（什么時(shí)候在上，什么時(shí)候在下？）

1、根據(jù)tab的層級(jí)來(lái)確定位置，最高層級(jí)在上，不同流程層級(jí)在下。

Tab在上：用戶明確自己想要查找的目標(biāo)在哪個(gè)tab并且需要一眼看到所有概況（想要查找數(shù)據(jù)時(shí)，直接到對(duì)應(yīng)的tab下查找）。

Tab在下：需要看到查詢的結(jié)果在各tab下的分布情況。

篩選/搜索區(qū)

1、篩選區(qū)包括搜索項(xiàng)、查詢、清除查詢；如果搜索項(xiàng)超過(guò)一行時(shí)，需要「展開(kāi)、收起」按鈕。

2、折疊展開(kāi)設(shè)計(jì)：默認(rèn)顯示一行將使用頻率高、覆蓋面廣的1-3個(gè)顯示出來(lái)其他的隱藏。（用戶頻繁使用的篩選條件能一眼找到）。

3、按鈕固定在最右側(cè)不變，搜索項(xiàng)可進(jìn)行自適應(yīng)。

4、篩選條件：

• 交叉篩選：選擇篩選條件后，需點(diǎn)擊「查詢」按鈕才能觸發(fā)篩選條件。
• 實(shí)時(shí)篩選：篩選條件不存在交叉，可以實(shí)時(shí)篩選。像“流程狀態(tài)”此類固定選項(xiàng)類，要不要提供“勾選即執(zhí)行搜索”功能？用戶可能還需要綜合其他搜索條件一起查詢，如果執(zhí)行搜索可能會(huì)打斷用戶剛才的輸入。
• 時(shí)間篩選：根據(jù)真實(shí)場(chǎng)景來(lái)提供快捷選項(xiàng)，比如：昨天、最近7天、最近30天...

全局操作

1、功能性按鈕和批量操作（比如新增、導(dǎo)入、導(dǎo)出...）

2、根據(jù)使用頻率進(jìn)行排列新增＞導(dǎo)入＞導(dǎo)出；使用頻率高的操作采用高亮顯示。

3、如果按鈕太多可進(jìn)行操作項(xiàng)分類。

表格欄

表頭

1、在能夠概括的情況下，盡量簡(jiǎn)練、準(zhǔn)確，一般可根據(jù)上下文關(guān)系進(jìn)行簡(jiǎn)化，以達(dá)到節(jié)省表格頭部空間和減輕視覺(jué)壓力的作用，讓用戶注意力聚焦在數(shù)據(jù)本身。

2、對(duì)于比較復(fù)雜的表頭，可以跟一個(gè)釋義標(biāo)識(shí)，鼠標(biāo)懸停時(shí)出現(xiàn)該字段的詳細(xì)解釋。

3、表頭篩選、排序功能

• 表頭字段太多怎么辦？

提供表頭篩選功能，依據(jù)用戶關(guān)注度最高的字段進(jìn)行排列。

• 哪些字段需要排序功能？

需結(jié)合業(yè)務(wù)場(chǎng)景具體分析，一般來(lái)說(shuō)，編號(hào)、時(shí)間、價(jià)格字段，提供正序、倒序功能。

• 默認(rèn)排序

考慮用戶第一次進(jìn)入列表頁(yè)的初始化狀態(tài)，保證用戶進(jìn)入頁(yè)面時(shí)大概率能直接看到自己想要的東西。

表體

包含多選列、數(shù)據(jù)列、操作列

• 哪些字段可以前置？

特殊處理操作的按鈕、字段優(yōu)先級(jí)、狀態(tài)可以前置，方便一目了然。

• 表格字段太長(zhǎng)該如何處理？

1、全部展示（缺點(diǎn)：利用滾軸滑動(dòng)次數(shù)太多用戶視覺(jué)容易疲憊）。

2、較長(zhǎng)字段用“…”展示，防止字段重復(fù)，對(duì)重要字段進(jìn)行快速區(qū)分、對(duì)比（優(yōu)點(diǎn)：每行可顯示較多的信息 缺點(diǎn)：想要看全信息，只能鼠標(biāo)移入字段出現(xiàn)氣泡顯示完整信息）。

3、換行，保持行高不變，改變文字距單元格的上下間距，最好不要超過(guò)3行，多余字段用”…”顯示（優(yōu)點(diǎn)：盡可能顯示全部?jī)?nèi)容 缺點(diǎn)：同2）。

4、字段優(yōu)先級(jí)分類，做折疊展開(kāi)設(shè)計(jì)（篩選信息層級(jí)較高的字段放在表格欄，次要信息放入二級(jí)表格）。

5、數(shù)據(jù)庫(kù)中沒(méi)有該字段，用“-”，數(shù)量用“0”后邊有小數(shù)點(diǎn)、后位數(shù)保持上下單位一致。

• 表格設(shè)計(jì)如何降噪

1、讓用戶將注意力放在數(shù)據(jù)信息上，而不是表格底色、邊框

2、不使用斑馬線設(shè)計(jì)、分割線樣式輕盈、去掉不必要的裝飾和顏色

• 單行操作項(xiàng)位置如何處理？

基于業(yè)務(wù)、基于場(chǎng)景

比如用戶以處理訂單為主，操作項(xiàng)建議放在第一列，方便用戶操作。

如果用戶以查看信息為主，操作項(xiàng)一般放在最后一列。

• 如何處理由于用戶權(quán)限不同或者狀態(tài)不同這兩種原因，使得每行的數(shù)據(jù)擁有不同的操作項(xiàng)？

可以采用下拉框設(shè)計(jì)

• 行高

1、行高=文字行高+上下間距

2、文字行高可以設(shè)定為字號(hào)的1.2~1.8倍，上下間距可以設(shè)定為字號(hào)的1~1.5倍；行高影響每行信息的易讀性。

3、一般行高為32-56px

• 列間距、列數(shù)、對(duì)齊方式

1、采用8px網(wǎng)格作為基礎(chǔ)單位，來(lái)定義各組件和模塊間距，因?yàn)槟壳爸髁髯烂嬖O(shè)備屏幕分辨率在垂直和水平方向基本都可以被8整除，使用8px比較普適。

2、最好列數(shù)在7±2

3、對(duì)齊方式：文本采用左對(duì)齊，金額及跟金額相關(guān)的百分比、操作項(xiàng)采用右對(duì)齊

• 分頁(yè)器
• 一頁(yè)展示多少條合適？

一頁(yè)最好能在一屏展示，避免用戶來(lái)回上下滾動(dòng)，比如固定為展示10條。

用戶特殊使用需求，不適用以上規(guī)則，一頁(yè)可能展示10條/20條，都可以。

視覺(jué)稿