起點課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識B端UI交互界面基礎組件-表格
導語：在前一篇文章《B端UI界面交互基礎組件-翻頁控制》中，一起學習了B端“翻頁控制”組件UI設計規(guī)范，其中包括“常規(guī)翻頁”、“簡單翻頁”、“極簡翻頁”；并從翻頁控制組件的需求場景、內(nèi)容布局以及交互方式等方面對以上組件進行了詳盡的規(guī)范描述；今天我們繼續(xù)介紹了B端“表格”組件的交互規(guī)范。
一、基礎表格
1. 需求場景
二維數(shù)據(jù)進行集中展示
2. 內(nèi)容與布局
表格主體分為三個區(qū)域：表頭、表體、統(tǒng)計數(shù)據(jù)。
1）表頭布局
表頭位于表最頂部。
一般情況下，非特殊情況，不顯示序列號，存在行選擇按鈕時不推薦顯示序號列：
有選擇框無序號列：
有序號列無選擇框：
在一個表格列數(shù)據(jù)中，必須制定一個關(guān)鍵列（對行數(shù)據(jù)具有代表意義的數(shù)據(jù)項），關(guān)健列在首列：
在表頭可見的情況下，至少保留關(guān)鍵列標題，其他列根據(jù)業(yè)務員場景的功能的復雜性動態(tài)調(diào)整：
僅顯示關(guān)鍵列與操作列標題：
僅保留關(guān)鍵列標題：
包含列標題、排序按鈕、數(shù)據(jù)控制按鈕。
列標題：
- 在列數(shù)據(jù)為文本類型時，局左顯示；
- 列數(shù)據(jù)為同一單位數(shù)字時，居右顯示，單位不同則按文本類型處理；
- 單列中包含兩項列數(shù)據(jù)定義時，用“/”符號連接數(shù)據(jù)項，例如：ID/名稱、創(chuàng)建時間/到期時間；
- 標題帶單位，統(tǒng)一使用“標題文本（單位）”表現(xiàn)。
列數(shù)據(jù)控制按鈕，跟隨在列標題之后，提供諸如：分類、排序功能。
在特定情況下，數(shù)據(jù)寬度超過預定限制，需要對列鎖定。
左側(cè)鎖定：序號必須處于鎖定狀態(tài)，非特殊情況關(guān)鍵列也需要處于左側(cè)鎖定狀態(tài)。
左右兩側(cè)鎖定：
2）表體布局
顯示高度設定，無論表體數(shù)據(jù)行數(shù)量多少顯示高度固定，當內(nèi)容超高時出現(xiàn)垂直滾動條：
表體無數(shù)據(jù)時：
表體內(nèi)容較少時：
表體內(nèi)容較多時：
顯示高度受限，當表體高度達到限制高度時，表體高度不再變化，并出現(xiàn)垂直滾動條：
表體有最小高度限制：未達到最小高度時，表體以最小限制高度為準：
表體無最小高度限制：
高度已到達上限，表體出現(xiàn)垂直滾動條：
當表體無數(shù)據(jù)時，如需提示用戶在無數(shù)據(jù)情況下進行數(shù)據(jù)新增可以進行如下顯示：
表體行每列數(shù)據(jù)根據(jù)表頭約束內(nèi)容進行顯示：
列為兩項數(shù)據(jù)聯(lián)合顯示：每行數(shù)據(jù)占用一行，行內(nèi)文本遵循文本顯示規(guī)范。
如列數(shù)據(jù)僅作為補充描述內(nèi)容，文本顯示可以進行弱化顯示。
表格中如果有關(guān)鍵數(shù)據(jù)項，如ID、名稱，盡量保證顯示寬度，一個表格中只允許一個關(guān)鍵數(shù)據(jù)項（盡量選取全英文字符數(shù)據(jù)項為關(guān)鍵數(shù)據(jù)項）。
例如ID作為本表格的關(guān)鍵數(shù)據(jù)項，ID涉及總長度為32個字符；則保證32個字符能完全顯示的空間，其余數(shù)據(jù)項允許顯示寬度不夠截斷展示。
3）統(tǒng)計項區(qū)域在可見狀態(tài)時，跟隨在表體后部，局左顯示：
表格無選中框：只顯示“總計X條”。
表格有選中框：顯示“已選擇X條，總計X條”
4）【建議】對表格數(shù)據(jù)項數(shù)量進行控制，盡量避免出現(xiàn)列顯示超過設計寬度。
3. 交互建議
當表格支持行選擇時，選擇應對行數(shù)據(jù)統(tǒng)計后，數(shù)據(jù)區(qū)域?qū)獌?nèi)容發(fā)生變化。
二、分屏加載表格
1. 需求場景
二維數(shù)據(jù)進行集中展示。
支持大數(shù)據(jù)量的數(shù)據(jù)展示。
避免大數(shù)據(jù)量一次獲取與加載的性能問題。
2. 內(nèi)容與布局
根據(jù)功能需要，表格主體分為兩個區(qū)域：表頭、表體、加載控制、數(shù)據(jù)統(tǒng)計。
表頭、表體與基礎表格樣式約束保持一致。
加載控制按鈕處于表體與統(tǒng)計信息顯示區(qū)域之間。
手動控制加載出現(xiàn)加載控制按鈕：
滾屏自動加載不使用加載控制按鈕，直接使用加載狀態(tài)：
當數(shù)據(jù)處于加載過程時，加載控制按鈕變更為加載狀態(tài)信息：
當表格數(shù)據(jù)無更多數(shù)據(jù)時，加載控制按鈕隱藏顯示：
數(shù)據(jù)統(tǒng)計信息在表格行數(shù)據(jù)是否具備復選功能時表現(xiàn)不同狀態(tài)。
無復選框或有復選框但未選擇任何數(shù)據(jù)“已加載X條，總計X條”：
3. 交互行為
使用點擊加載更多模式，需點擊加載按鈕進入數(shù)據(jù)獲??；完成數(shù)據(jù)更新后追加數(shù)據(jù)到標題行數(shù)據(jù)后部，每次獲取數(shù)量根據(jù)業(yè)務需要進行設置：
當所有數(shù)據(jù)加載完畢后，加載控制按鈕區(qū)域隱藏：
當表格數(shù)據(jù)屬于可選擇，且已有數(shù)據(jù)被選擇時，統(tǒng)計信息如下：
滾屏自動加載在縱向滾動條滾動到表格列底部時，自動觸發(fā)加載行為：
正在加載中不允許二次加載，需加載完畢后進行再執(zhí)行對應加載操作。
三、分頁加載表格
1. 需求場景
二維數(shù)據(jù)進行集中展示。
支持大數(shù)據(jù)量的數(shù)據(jù)展示。
避免大數(shù)據(jù)量一次獲取與加載的性能問題。
支持頁面按需要快速跳轉(zhuǎn)加載。
2. 內(nèi)容與布局
根據(jù)功能需要，表格主體分為兩個區(qū)域：表頭、表體、翻頁控制。
表頭、表體顯示規(guī)則與基礎表格相同。
表格統(tǒng)計數(shù)據(jù)在翻頁控制按鈕中集中展示。
當表格數(shù)據(jù)無數(shù)據(jù)時，翻頁控制按鈕不可見：
有數(shù)據(jù)時，翻頁按鈕可見：
無數(shù)據(jù)時，翻頁按鈕不可見。
翻頁按鈕區(qū)域居于表格居右展示。根據(jù)表格業(yè)務需要選擇翻頁按鈕類型
3. 交互行為
在有表體數(shù)據(jù)選中操作時與翻頁控制按鈕統(tǒng)計數(shù)據(jù)聯(lián)動。
翻頁按鈕觸發(fā)對應翻頁操作后，表體數(shù)據(jù)、統(tǒng)計數(shù)據(jù)對應刷新。
當指向頁碼無任何數(shù)據(jù)時，自動跳轉(zhuǎn)到運行跳轉(zhuǎn)的最后一頁。
四、總結(jié)
關(guān)于B端基礎交互組件“表格”的相關(guān)分享就到這里，下一章我們介紹“表單”包括基礎表單、全頁表單的相關(guān)交互規(guī)范。
本文由 @云計算產(chǎn)品汪 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自 unsplash，基于 CC0 協(xié)議
- 目前還沒評論，等你發(fā)揮！
