導(dǎo)語(yǔ)：在前一篇文章《B端UI界面交互基礎(chǔ)組件-翻頁(yè)控制》中，一起學(xué)習(xí)了B端“翻頁(yè)控制”組件UI設(shè)計(jì)規(guī)范，其中包括“常規(guī)翻頁(yè)”、“簡(jiǎn)單翻頁(yè)”、“極簡(jiǎn)翻頁(yè)”；并從翻頁(yè)控制組件的需求場(chǎng)景、內(nèi)容布局以及交互方式等方面對(duì)以上組件進(jìn)行了詳盡的規(guī)范描述；今天我們繼續(xù)介紹了B端“表格”組件的交互規(guī)范。

一、基礎(chǔ)表格

1. 需求場(chǎng)景

二維數(shù)據(jù)進(jìn)行集中展示

2. 內(nèi)容與布局

表格主體分為三個(gè)區(qū)域：表頭、表體、統(tǒng)計(jì)數(shù)據(jù)。

1）表頭布局

表頭位于表最頂部。

一般情況下，非特殊情況，不顯示序列號(hào)，存在行選擇按鈕時(shí)不推薦顯示序號(hào)列：

有選擇框無(wú)序號(hào)列：

有序號(hào)列無(wú)選擇框：

在一個(gè)表格列數(shù)據(jù)中，必須制定一個(gè)關(guān)鍵列（對(duì)行數(shù)據(jù)具有代表意義的數(shù)據(jù)項(xiàng)），關(guān)健列在首列：

在表頭可見的情況下，至少保留關(guān)鍵列標(biāo)題，其他列根據(jù)業(yè)務(wù)員場(chǎng)景的功能的復(fù)雜性動(dòng)態(tài)調(diào)整：

僅顯示關(guān)鍵列與操作列標(biāo)題：

僅保留關(guān)鍵列標(biāo)題：

包含列標(biāo)題、排序按鈕、數(shù)據(jù)控制按鈕。

列標(biāo)題：

• 在列數(shù)據(jù)為文本類型時(shí)，局左顯示；
• 列數(shù)據(jù)為同一單位數(shù)字時(shí)，居右顯示，單位不同則按文本類型處理；
• 單列中包含兩項(xiàng)列數(shù)據(jù)定義時(shí)，用“/”符號(hào)連接數(shù)據(jù)項(xiàng)，例如：ID/名稱、創(chuàng)建時(shí)間/到期時(shí)間；
• 標(biāo)題帶單位，統(tǒng)一使用“標(biāo)題文本（單位）”表現(xiàn)。

列數(shù)據(jù)控制按鈕，跟隨在列標(biāo)題之后，提供諸如：分類、排序功能。

在特定情況下，數(shù)據(jù)寬度超過預(yù)定限制，需要對(duì)列鎖定。

左側(cè)鎖定：序號(hào)必須處于鎖定狀態(tài)，非特殊情況關(guān)鍵列也需要處于左側(cè)鎖定狀態(tài)。

左右兩側(cè)鎖定：

2）表體布局

顯示高度設(shè)定，無(wú)論表體數(shù)據(jù)行數(shù)量多少顯示高度固定，當(dāng)內(nèi)容超高時(shí)出現(xiàn)垂直滾動(dòng)條：

表體無(wú)數(shù)據(jù)時(shí)：

表體內(nèi)容較少時(shí)：

表體內(nèi)容較多時(shí)：

顯示高度受限，當(dāng)表體高度達(dá)到限制高度時(shí)，表體高度不再變化，并出現(xiàn)垂直滾動(dòng)條：

表體有最小高度限制：未達(dá)到最小高度時(shí)，表體以最小限制高度為準(zhǔn)：

表體無(wú)最小高度限制：

高度已到達(dá)上限，表體出現(xiàn)垂直滾動(dòng)條：

當(dāng)表體無(wú)數(shù)據(jù)時(shí)，如需提示用戶在無(wú)數(shù)據(jù)情況下進(jìn)行數(shù)據(jù)新增可以進(jìn)行如下顯示：

表體行每列數(shù)據(jù)根據(jù)表頭約束內(nèi)容進(jìn)行顯示：

列為兩項(xiàng)數(shù)據(jù)聯(lián)合顯示：每行數(shù)據(jù)占用一行，行內(nèi)文本遵循文本顯示規(guī)范。

如列數(shù)據(jù)僅作為補(bǔ)充描述內(nèi)容，文本顯示可以進(jìn)行弱化顯示。

表格中如果有關(guān)鍵數(shù)據(jù)項(xiàng)，如ID、名稱，盡量保證顯示寬度，一個(gè)表格中只允許一個(gè)關(guān)鍵數(shù)據(jù)項(xiàng)（盡量選取全英文字符數(shù)據(jù)項(xiàng)為關(guān)鍵數(shù)據(jù)項(xiàng)）。

例如ID作為本表格的關(guān)鍵數(shù)據(jù)項(xiàng)，ID涉及總長(zhǎng)度為32個(gè)字符；則保證32個(gè)字符能完全顯示的空間，其余數(shù)據(jù)項(xiàng)允許顯示寬度不夠截?cái)嗾故尽?/p>

3）統(tǒng)計(jì)項(xiàng)區(qū)域在可見狀態(tài)時(shí)，跟隨在表體后部，局左顯示：

表格無(wú)選中框：只顯示“總計(jì)X條”。

表格有選中框：顯示“已選擇X條，總計(jì)X條”

4）【建議】對(duì)表格數(shù)據(jù)項(xiàng)數(shù)量進(jìn)行控制，盡量避免出現(xiàn)列顯示超過設(shè)計(jì)寬度。

3. 交互建議

當(dāng)表格支持行選擇時(shí)，選擇應(yīng)對(duì)行數(shù)據(jù)統(tǒng)計(jì)后，數(shù)據(jù)區(qū)域?qū)?yīng)內(nèi)容發(fā)生變化。

二、分屏加載表格

1. 需求場(chǎng)景

二維數(shù)據(jù)進(jìn)行集中展示。

支持大數(shù)據(jù)量的數(shù)據(jù)展示。

避免大數(shù)據(jù)量一次獲取與加載的性能問題。

2. 內(nèi)容與布局

根據(jù)功能需要，表格主體分為兩個(gè)區(qū)域：表頭、表體、加載控制、數(shù)據(jù)統(tǒng)計(jì)。

表頭、表體與基礎(chǔ)表格樣式約束保持一致。

加載控制按鈕處于表體與統(tǒng)計(jì)信息顯示區(qū)域之間。

手動(dòng)控制加載出現(xiàn)加載控制按鈕：

滾屏自動(dòng)加載不使用加載控制按鈕，直接使用加載狀態(tài)：

當(dāng)數(shù)據(jù)處于加載過程時(shí)，加載控制按鈕變更為加載狀態(tài)信息：

當(dāng)表格數(shù)據(jù)無(wú)更多數(shù)據(jù)時(shí)，加載控制按鈕隱藏顯示：

數(shù)據(jù)統(tǒng)計(jì)信息在表格行數(shù)據(jù)是否具備復(fù)選功能時(shí)表現(xiàn)不同狀態(tài)。

無(wú)復(fù)選框或有復(fù)選框但未選擇任何數(shù)據(jù)“已加載X條，總計(jì)X條”：

3. 交互行為

使用點(diǎn)擊加載更多模式，需點(diǎn)擊加載按鈕進(jìn)入數(shù)據(jù)獲取；完成數(shù)據(jù)更新后追加數(shù)據(jù)到標(biāo)題行數(shù)據(jù)后部，每次獲取數(shù)量根據(jù)業(yè)務(wù)需要進(jìn)行設(shè)置：

當(dāng)所有數(shù)據(jù)加載完畢后，加載控制按鈕區(qū)域隱藏：

當(dāng)表格數(shù)據(jù)屬于可選擇，且已有數(shù)據(jù)被選擇時(shí)，統(tǒng)計(jì)信息如下：

滾屏自動(dòng)加載在縱向滾動(dòng)條滾動(dòng)到表格列底部時(shí)，自動(dòng)觸發(fā)加載行為：

正在加載中不允許二次加載，需加載完畢后進(jìn)行再執(zhí)行對(duì)應(yīng)加載操作。

三、分頁(yè)加載表格

1. 需求場(chǎng)景

二維數(shù)據(jù)進(jìn)行集中展示。

支持大數(shù)據(jù)量的數(shù)據(jù)展示。

避免大數(shù)據(jù)量一次獲取與加載的性能問題。

支持頁(yè)面按需要快速跳轉(zhuǎn)加載。

2. 內(nèi)容與布局

根據(jù)功能需要，表格主體分為兩個(gè)區(qū)域：表頭、表體、翻頁(yè)控制。

表頭、表體顯示規(guī)則與基礎(chǔ)表格相同。

表格統(tǒng)計(jì)數(shù)據(jù)在翻頁(yè)控制按鈕中集中展示。

當(dāng)表格數(shù)據(jù)無(wú)數(shù)據(jù)時(shí)，翻頁(yè)控制按鈕不可見：

有數(shù)據(jù)時(shí)，翻頁(yè)按鈕可見：

無(wú)數(shù)據(jù)時(shí)，翻頁(yè)按鈕不可見。

翻頁(yè)按鈕區(qū)域居于表格居右展示。根據(jù)表格業(yè)務(wù)需要選擇翻頁(yè)按鈕類型

3. 交互行為

在有表體數(shù)據(jù)選中操作時(shí)與翻頁(yè)控制按鈕統(tǒng)計(jì)數(shù)據(jù)聯(lián)動(dòng)。

翻頁(yè)按鈕觸發(fā)對(duì)應(yīng)翻頁(yè)操作后，表體數(shù)據(jù)、統(tǒng)計(jì)數(shù)據(jù)對(duì)應(yīng)刷新。

當(dāng)指向頁(yè)碼無(wú)任何數(shù)據(jù)時(shí)，自動(dòng)跳轉(zhuǎn)到運(yùn)行跳轉(zhuǎn)的最后一頁(yè)。

四、總結(jié)

關(guān)于B端基礎(chǔ)交互組件“表格”的相關(guān)分享就到這里，下一章我們介紹“表單”包括基礎(chǔ)表單、全頁(yè)表單的相關(guān)交互規(guī)范。

本文由 @云計(jì)算產(chǎn)品汪 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 unsplash，基于 CC0 協(xié)議