web端表格設(shè)計(jì)規(guī)范整理

時(shí)間：2023-10-04 00:00:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-04 00:00:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

web端表格設(shè)計(jì)規(guī)范整理：

一、表格的定義

表格又稱(chēng)為表，是用來(lái)收集、整理、組織、分析數(shù)據(jù)的二維矩陣；它既是一種可視化交流模式，又是一種組織整理數(shù)據(jù)的手段。

二、表格的用途

表格結(jié)構(gòu)簡(jiǎn)單，分隔明確，可保證信息可讀性，易于用戶(hù)快速掃描瀏覽并獲取所需；數(shù)據(jù)經(jīng)過(guò)歸納整理和合理布局后，更易于用戶(hù)感知分辨其中的差異與變化、關(guān)聯(lián)與區(qū)別，并進(jìn)行對(duì)比分析；交互層面，用戶(hù)可以對(duì)數(shù)據(jù)信息進(jìn)行排序、搜索、篩選、以及相關(guān)業(yè)務(wù)處理等復(fù)雜操作。

三、表格的構(gòu)成與布局

1 表格的構(gòu)成

通常表格的組成元素以及相關(guān)元素會(huì)有多個(gè)部分，為容器、篩選區(qū)、功能性按鈕、表頭、表體以及底欄等六個(gè)部分

01 內(nèi)部構(gòu)成元素：標(biāo)題、表頭、表體、表尾

02 外部相關(guān)元素：篩選區(qū)、按鈕區(qū)、底欄

2 表格的基本布局

信息內(nèi)容的有效傳達(dá)是表格設(shè)計(jì)的本質(zhì)，就表格本身而言應(yīng)該是隱型的，應(yīng)該讓用戶(hù)注意力聚焦在核心內(nèi)容上。所以，邊框的顏色應(yīng)非常淡，不能妨礙快速瀏覽。







表格的基本類(lèi)型：

01 網(wǎng)格型

表格有均勻而明顯的分割線，邊框單元格比較明顯。

對(duì)于數(shù)據(jù)之間的關(guān)系緊密（列信息較多而沒(méi)有足夠空間用留白來(lái)分割信息）且有對(duì)比關(guān)系的。

02 水平線型

僅顯示水平線可減少整個(gè)網(wǎng)格的視覺(jué)噪聲

它能顯著減輕表格在垂直方向的視覺(jué)重量，提升用戶(hù)進(jìn)行大量數(shù)據(jù)對(duì)比時(shí)的速度；因此對(duì)于所有數(shù)據(jù)集大小，此樣式都是最常見(jiàn)的。

03 斑馬條紋型

隔行交替使用不同底色來(lái)區(qū)分?jǐn)?shù)據(jù)

每行交替使用不同的顏色背景是幫助用戶(hù)在閱讀時(shí)保持其位置的另一種好方法；對(duì)于較大的數(shù)據(jù)集，建議使用此樣式，在較大的數(shù)據(jù)集中，交替模式將很清晰，并且不會(huì)引起特定行突出顯示的混亂。

四、表格設(shè)計(jì)技巧

1 數(shù)據(jù)對(duì)齊方式

表頭與信息內(nèi)容對(duì)齊方式一致,以便更好的獲取數(shù)據(jù)信息

01 居中對(duì)齊 ：左右留白對(duì)齊，視覺(jué)效果好
02 居左對(duì)齊：符合人們從左到右的閱讀習(xí)慣，符合正常的心智模型







按字符長(zhǎng)度定義

• 可變長(zhǎng)度字符串左對(duì)齊：“可變長(zhǎng)度”指長(zhǎng)度不固定的數(shù)據(jù)列；
• 固定長(zhǎng)度字符串居中：“固定長(zhǎng)度”指長(zhǎng)度不會(huì)變化的數(shù)據(jù)列，如日期2020-09-25；
• 可比較字符串右對(duì)齊：“可比較字符串”指需要關(guān)聯(lián)對(duì)比的數(shù)據(jù)列，基本都指數(shù)字、金額等；

按數(shù)據(jù)類(lèi)型定義

• 文本型左對(duì)齊，包括非比較型數(shù)字，符合人們從左到右的閱讀習(xí)慣，符合正常的心智模型。
• 數(shù)值型右對(duì)齊，這是因?yàn)樵趯?duì)比數(shù)字時(shí)，首先看個(gè)位，然后十位、百位等置，如小數(shù)點(diǎn)后面的位數(shù)不同，以個(gè)位數(shù)字為基準(zhǔn)，居中對(duì)齊，便于對(duì)比。
• 布爾型居中對(duì)齊，如 男/女，是/否等；

數(shù)據(jù)對(duì)齊方式

• 文本型左對(duì)齊，符合正常的閱讀習(xí)慣,從左到右
• 數(shù)值型右對(duì)齊，有利于數(shù)據(jù)間的對(duì)比
• 表頭與信息內(nèi)容對(duì)齊方式一致,以便更好的獲取數(shù)據(jù)信息

2 表頭 設(shè)計(jì)規(guī)范

• 精簡(jiǎn)表頭信息：生僻字段可以跟一個(gè)釋義標(biāo)識(shí)，鼠標(biāo)懸停時(shí)出現(xiàn)該字段的詳細(xì)解釋
• 功能復(fù)合型表頭：文字+篩選/排序/搜索和標(biāo)簽
• 組合表頭
• 多級(jí)表頭：數(shù)據(jù)結(jié)構(gòu)比較復(fù)雜，可使用多級(jí)表頭來(lái)體現(xiàn)數(shù)據(jù)的層次關(guān)系

3 操作區(qū)設(shè)計(jì)規(guī)范

操作項(xiàng)一般存在于條目最后，以及表頭位置，分別對(duì)應(yīng)單條操作與批量操作的場(chǎng)景

當(dāng)信息過(guò)載，操作項(xiàng)這個(gè)list非常長(zhǎng)的話(huà)，頁(yè)面將會(huì)非常擁擠；文字按鈕因?yàn)橐曈X(jué)特征比較明顯，造成了不必要的分散注意力；誤操作率相對(duì)較高，同樣因?yàn)楸砀窨臻g有限，當(dāng)操作區(qū)非常靠近，很容易一不小心就點(diǎn)錯(cuò)了。













04 行高 設(shè)計(jì)規(guī)范

適宜的行高使得數(shù)據(jù)更易于被閱讀，但這不代表行高越大越利于閱讀，行高的大小應(yīng)該是與字體成比例的，在單行文字的情況下表格間距一般在字符大小的三倍以?xún)?nèi)。

行高是非常重要的參數(shù)，直接影響著閱讀體驗(yàn)。較小的行高能承載更多信息，讓用戶(hù)無(wú)需滾動(dòng)鼠標(biāo)即可看到更多數(shù)據(jù)，但會(huì)降低掃描效果，導(dǎo)致視覺(jué)解析錯(cuò)誤。適宜的行高使得頁(yè)面更透氣，但并不是越大越好。設(shè)置行高的原則是：A.單行顯示時(shí)，數(shù)據(jù)顯示緊湊、有序。B.多行顯示時(shí)，弱化表格形式，提供豐富的視覺(jué)展現(xiàn)。因此，對(duì)于單行顯示的表格，建議行高為字體高度的2.5倍到3倍；對(duì)于多行顯示的表格，建議內(nèi)容區(qū)到上下邊框的距離略小于文字高度。當(dāng)然，也可以提供切換按鈕讓用戶(hù)自己控制顯示密度。

五 表格的外部元素

如何優(yōu)化篩選區(qū)

數(shù)據(jù)集較大的B端系統(tǒng)來(lái)說(shuō)，往往篩選條件比較多，都將其展示出來(lái)會(huì)導(dǎo)致空間占比過(guò)大，影響了用戶(hù)對(duì)表格信息的獲取 。










功能操作區(qū)

對(duì)于數(shù)據(jù)批量操作頻繁的場(chǎng)景，建議將操作放到表格頂部，與勾選操作配合使用。

表格的設(shè)計(jì)規(guī)范

表格是為可讀性而生的，一個(gè)結(jié)構(gòu)清晰的布局能大大提升用戶(hù)對(duì)信息的接收速度和理解程度。設(shè)計(jì)易讀、易掃視、易比較、易操作的表格結(jié)構(gòu)是表格設(shè)計(jì)的首要目標(biāo)。