在B端界面中，通常大量使用表格來(lái)展示結(jié)構(gòu)化的數(shù)據(jù)，合理的設(shè)計(jì)表格，能給用戶帶來(lái)高效的信息獲取率，我們一起來(lái)瞧瞧普通但不平凡的表格有哪些設(shè)計(jì)要點(diǎn)。

 

 

 

 

 

 

 

 

 

表格常用于信息收集（展示）、數(shù)據(jù)分析、歸納整理、等活動(dòng)中，在互聯(lián)網(wǎng)產(chǎn)品應(yīng)用中，非常適合于：

 

1. 需要組織和展示大量數(shù)據(jù)信息

表格結(jié)構(gòu)簡(jiǎn)單，分隔歸納明確，特別適合組織和展示大量的信息內(nèi)容，且易于用戶瀏覽和獲取信息。

 

2. 當(dāng)數(shù)據(jù)信息需要進(jìn)行多種復(fù)雜操作時(shí)

需要對(duì)信息進(jìn)行排序、搜索、篩選、分頁(yè)、自定義選項(xiàng)等操作。

 

3. 信息上下間的對(duì)比

表格的歸納與分類，使信息之間易于對(duì)比，便于用戶快速查詢其中的差異與變化、關(guān)聯(lián)和區(qū)別。比如：金額 百分比 數(shù)據(jù)升降展示

 

 

 

 

 

 

 

 

 

首先我們了解下表格的構(gòu)成：頂欄、表格主體、底欄

 

 

 

 

 

 

·頂欄標(biāo)題

 

頂欄標(biāo)題不僅是起到內(nèi)容的總覽作用，也是區(qū)分不同模塊內(nèi)容的標(biāo)識(shí)，通過(guò)對(duì)標(biāo)題層級(jí)的凸顯，讓用戶感知到模塊內(nèi)容已切換。

 

在設(shè)計(jì)的時(shí)候會(huì)有兩種情況：

（1）包含在卡片內(nèi)，作為最高層級(jí)凸顯。在功能模塊較多時(shí)采用居多，強(qiáng)調(diào)不同的模塊內(nèi)容

（2）標(biāo)題在卡片外，作為內(nèi)容的描述。在功能單一時(shí)靠呼吸感區(qū)分，主要是凸顯內(nèi)容側(cè)

 

 

 

 

·主體

 

表頭一般指列標(biāo)簽，這里也指首列行標(biāo)簽，是對(duì)所屬行或列信息的描述。

表體—表格的主體，承載著內(nèi)容信息數(shù)據(jù)，由單元格組成。

 

 

 

 

 

 

·分頁(yè)

 

「迷你型」展示：當(dāng)數(shù)據(jù)當(dāng)分頁(yè)數(shù)量較少時(shí)，在7頁(yè)以內(nèi)時(shí)，可采用。

「精簡(jiǎn)型」展示：當(dāng)「頁(yè)面空間不足」或降低分頁(yè)的「視覺(jué)影響」時(shí)，可采用該類型。

「完整型」展示：當(dāng)表格數(shù)據(jù)較多，為滿足各種功能需求，可采用該類型。

 

 

 

 

·表格中的字體/行高

 

常用的文字大小：表頭14PX，列文字：13PX

 

在具體設(shè)定表格行高時(shí)，表格中以文字信息為主，可以參考文字排版的常用做法，將整個(gè)表格的行高分成文字行高、文字與分割線間距離，即上下間距兩部分來(lái)考慮。文字行高可以設(shè)定為字號(hào)的1.2~1.8倍，文字與分割線間距離可以設(shè)定為字號(hào)的1~1.5倍。分為這樣的兩部分也比較符合開發(fā)同學(xué)寫代碼時(shí)的習(xí)慣（多行行高同理去設(shè)定）。

 

 

 

 

 

 

 

 

·對(duì)齊方式

 

表格中的對(duì)齊一直是讓人比較糾結(jié)的事情，不同的類別對(duì)應(yīng)不用的對(duì)齊方式，常見(jiàn)的對(duì)齊樣式有如下幾種

 

數(shù)字信息右對(duì)齊， 包含金額、長(zhǎng)寬高等需要關(guān)聯(lián)比較的字段，這是因?yàn)槲覀冊(cè)趯?duì)比數(shù)字時(shí)，首先看個(gè)位，然后十位、百位等。

 

文字信息左對(duì)齊，符合正常的心智模型，一般人們的閱讀方式是從左往右，從上往下。

 

固定字段居中對(duì)齊 ，比如日期（2020-11-11），狀態(tài)文字（未審核、已收款等）或者存在布爾關(guān)系的文本（是/否、男/女等），這能更好的信息呈現(xiàn)及表格空間的節(jié)省。

 

表頭與數(shù)據(jù)信息對(duì)齊， 這能保持表格豎直方向整潔，營(yíng)造一致性和上下文環(huán)境。

 

 

 

 

 

 

·數(shù)據(jù)多層級(jí)

 

除了常規(guī)的表格樣式之外還會(huì)出現(xiàn)特殊的表格樣式，在復(fù)雜的表格中，由于數(shù)據(jù)量較多，并且數(shù)據(jù)有層級(jí)關(guān)系，所以會(huì)對(duì)數(shù)據(jù)表格進(jìn)行分層處理，優(yōu)先展示第一層級(jí)的數(shù)據(jù)內(nèi)容，將二三層級(jí)的數(shù)據(jù)隱藏起來(lái)，用戶點(diǎn)擊后再展示。

 

 

 

 

 

 

·數(shù)據(jù)修改

 

表格的編輯通常有兩種，一種是在彈窗或者新頁(yè)面進(jìn)行內(nèi)容編輯。常用在數(shù)據(jù)較多、內(nèi)容較復(fù)雜的情況。

另外一種是當(dāng)前表格編輯，表格編輯又分：帶單元格編輯功能的表格、帶行編輯功能的表格。常用在表格數(shù)據(jù)較少，沒(méi)有更多詳情，表格已經(jīng)展示全部?jī)?nèi)容。當(dāng)前表格編輯，比較方便用戶操作，讓用戶能直觀的查看編輯單元格。

 

 

 

 

 

·數(shù)據(jù)操作

 

數(shù)據(jù)操作主要是針對(duì)表格數(shù)據(jù)的增、刪、改，從控制范圍可分為：?jiǎn)涡胁僮鳌⑴坎僮?、全局操作?/p>

單行操作也稱行內(nèi)操作，常見(jiàn)的顯性與隱性兩種方式。顯性操作，操作項(xiàng)顯示在行內(nèi)，直觀明了；隱性操作，鼠標(biāo)懸停時(shí)才顯示操作項(xiàng)，界面簡(jiǎn)潔，留更多的空間給需要查看的數(shù)據(jù)內(nèi)容，減輕空間壓力，減少干擾；

顯性操作，文字按鈕操作項(xiàng)一般不多于三個(gè)，圖標(biāo)按鈕不多于四個(gè)時(shí)，操作項(xiàng)跟在行條目后面；當(dāng)超過(guò)時(shí)，建議將相對(duì)低頻操作選項(xiàng)折疊收起，點(diǎn)擊"更多"或“...”下拉顯示。操作按鈕致灰時(shí)，鼠標(biāo)選中可顯示原因。

 

 

 

 

 

在日常的工作環(huán)境中會(huì)遇到很多情況，這時(shí)候就需要用到一些方法來(lái)處理數(shù)據(jù)

 

·關(guān)于分割線

 

表格行列的分割方式有：

 

網(wǎng)格式：類似excel，這樣的方式很好的所有行和列進(jìn)行分割，但是網(wǎng)格很容易給人造成視覺(jué)疲勞。

水平線：僅對(duì)行進(jìn)行分割，通過(guò)間距與對(duì)齊的方式對(duì)列進(jìn)行視覺(jué)上的分割，這樣的方式可以很好的對(duì)數(shù)據(jù)進(jìn)行劃分，便于閱讀。

斑馬條紋：通過(guò)低飽和度的顏色交替的對(duì) 行 進(jìn)行分割，同樣很好的對(duì)數(shù)據(jù)進(jìn)行劃分，便于閱讀。

留白，不分割：直接留白，通過(guò)間距來(lái)劃分，不建議使用這樣的方式，因?yàn)閿?shù)據(jù)較多的時(shí)候，用戶十分容易將行對(duì)應(yīng)錯(cuò)，容易造成混亂。

 

關(guān)于空數(shù)據(jù)

 

表格中經(jīng)常會(huì)出現(xiàn)空數(shù)據(jù)或無(wú)數(shù)據(jù)的情況，留白處理會(huì)給用戶造成一定的困惑和誤解，是系統(tǒng)沒(méi)有加載出來(lái)嗎或誤以為出現(xiàn)了bug？明智的做法，是無(wú)數(shù)據(jù)時(shí)用「-」來(lái)填充顯示，數(shù)據(jù)為零時(shí)與上下數(shù)據(jù)單位、小數(shù)點(diǎn)相同的0來(lái)顯示。

 

 

 

 

 

表格無(wú)內(nèi)容且沒(méi)有創(chuàng)建訴求的，數(shù)據(jù)是系統(tǒng)產(chǎn)生的，不是由用戶創(chuàng)建的，直接告之暫無(wú)數(shù)據(jù)

 

 

用戶有創(chuàng)建訴求，數(shù)據(jù)是由用戶或系統(tǒng)產(chǎn)生的則直接示意用戶創(chuàng)建數(shù)據(jù)

 

表格篇的總結(jié)到此結(jié)束啦~ 設(shè)計(jì)師在具體的項(xiàng)目中根據(jù)用戶和產(chǎn)品的需求進(jìn)行調(diào)整，合理使用表格，表格能承載更多的內(nèi)容信息，圖片，文本，文件等格式都能在表格中被包容，此次分享暫時(shí)只分享到了文字類的表格內(nèi)容，謝謝觀看