後臺介面設計之表格設計

前言  

表格是後臺介面中佔比十分之重的一個元件，常以為表格設計十分簡單，仔細分析後，會發現表格合理化的設計、邏輯化的設計對於一個平臺而言多麼重要。

想設計出一款便捷好用、直觀準確的系統，表格中內容的佈局、資料的展示、操作項的羅列……每一處設計都值得細細斟酌。

表格的使用場景：

· 展現資訊全面性

呈現大量資訊，並展現資料間的複雜關係。

· 編輯性大於易讀性

資料非固定，可進行增刪改查。

· 需要對比資料

對比行與行之間的資料，瞭解兩者差異。

 

表格的功能：

· 新增資料

· 編輯資料

· 刪除資料

· 搜尋與篩選

· 排序

· 對比

· 顯示多欄位

· 計算

 

 

組成  

 

 

視覺

 

 

· 行

· 列

· 佈局

· 對齊

· 數字處理

· 簡潔

· 層級與重點資訊

· 視覺化趨勢

 

 

1.行

介面在不同的裝置上體驗會有所差異。以騰訊云為例，使用騰訊雲的使用者的裝置解析度分佈如右圖所示。

可以看出1920×1020大屏佔比最多，1366×768的小屏使用者僅次第二。在1920×1020的尺寸下，以表格為例，首屏可以顯示11行。大屏使用者表示，他們對一屏顯示多少行並沒有多少感知。

但對於小屏使用者，在表頭和頁尾固定的情況下，一次只能看到6行左右，對掃視的效率確實有所影響。但是如果不固定表頭和頁尾，滾動時不限定區域而是全屏滾動的話，一屏也可以看到10行的內容。

 

 

資料參考：https://www.uisdc.com/high-table-row-design#

 

影響行資訊閱讀的一個關鍵是行高的設定，在與開發溝通過程中因為表述不一常引起歧義，幾個數值表達含義需瞭解一下。

 

 

在文字排版中，行高的選擇一般為字號的1.2~1.8倍，段間距通常使用一個行高的距離。

 

在考慮表格的行高時，可以參考文字排版的常用做法，將整個表格的行高分成文字行高、文字與分割線間距離，即上下間距兩部分來考慮，文字行高可以設定為字號的1.2~1.8倍，文字與分割線間距離可以設定為字號的1~1.5倍。分為這樣的兩部分也比較符合開發同學寫程式碼時的習慣。

 

推薦幾個常用的行高值。

① 字號12px，文字行高是字號的1.5倍即18px，上下間距是字號的1.2倍即15px，表格行高 48px。

這種行高整個表格最透氣，在小屏下整屏可以顯示9行，對於掃視效率影響不大。

② 字號12px，文字行高是字號的1.5倍即18px，上下間距是字號的1倍即12px，表格行高 42px。

這種行高的表格間距較為適中，在小屏下整屏可以顯示10行。

③ 字號12px，文字行高是字號的1.3倍即16px，上下間距是字號的0.6倍即8px，表格行高 32px。

這種表格比較緊湊，在小屏下整屏可以顯示12行。可以用於卡片中的小型表格等空間比較小的地方。

PS：自適應情況下，原本一行的文字在小屏下可能呈現出兩行，即使有的文字仍只有一行，此時每行高度也要做到統一。

 

2.列

一行排列多少欄位，每列欄位寬度多少，也是設計時值得考慮的。

① 列與列之間去掉分隔線，更利於橫向閱讀。

② 給出預設寬度，字數多的時候用省略號，滑鼠懸浮可展示全部文字。

③ 列寬支援自動拉伸，根據使用者需要自行拖拽。

④ 橫向滾動條，優先順序高的展示出來，優先順序低的滾動條展示。

 

 

⑤ 當表格資訊很多且需要對比時，可固定左側左列，其他資訊用橫向滾動條展現。

 

⑥ 表頭放置一個設定按鈕，支援欄位自定義。點選設定，使用者可自行決定每列顯示什麼欄位。

 

3.佈局

 

4.對齊

文字左對齊，資料右對齊。儘量保證資料的小數點後保留位數一致，若不能，則以個位數為基準對齊。

對於不存在的資料，單元格不能空置，需要用短橫線代替，表示該項資料不存在，給使用者明確指示。

對於資料為零的單元格，要填上0，且小數點後位數、單位，都要與上下單元格保持一致。

在任何情況下，單元格都不應該空置出現，避免使用者的困惑。針對不存在的資料可以用其他佔位符，告知使用者該單元格不存在資料；對於資料為零的單元格，與上下資料單位、小數點相同的0來表示。

 

 

5.簡潔

· 精簡表頭

· 減少分隔線

· 不使用斑馬線

· 儘量以黑白為主

· 減少其他元素的使用

 

6.層級與重點資訊

· 顏色的使用

使用者通常優先閱讀最具視覺重量的內容，因此，對使用者判斷有決策作用的重要內容可以儘量凸顯。例如狀態上的異常可以用高亮色標出等。表格中也可以用圖形化的形式來幫助使用者快速搜尋資訊，例如在表格中使用進度條來表明用量等資訊。

 

 

· 足夠的留白

· 層級處理方法

 

 

7.視覺化趨勢

· 圖表的使用

· 卡片的使用

 

 

互動

 

1. 固定與滾動

①表頭固定

②首列固定

③底欄固定

 

2. 操作

①單行操作

· 編輯、刪除、設定等icon含義明確，為人熟知，故僅用純icon來表示，簡潔醒目

· 對於圖形意義不太明確或者圖形的含義有較大變化的，採用圖形+文字/文字形式，以便準確傳達意義。

· 操作項可以放置在條目最後。

· 大於等於3個操作，建議操作項摺疊，點選更多再展示。

 

②批量操作

純文字放在表頭上方，勾選相應條目後特定操作按鈕可用。文字按鈕傳達意義更加直接明確，辨識性強。

 

③檢視詳細

 

通常可連結文字給藍色值，以顯示可點選檢視詳情。

 

④編輯

 

3.排序

適時的排序篩選功能也可以幫助使用者在大量的資訊中按照順序找到自己想要的資訊，或快速篩選出自己想要的資訊。

 

4.檢視

①展開行

②彈窗

 

③側邊滑出

④檢視切換

 

 

總結

表格只是後臺介面設計中一個元件，而我這裡總結的表格的幾個設計點也只是片面之言。想把後臺設計好，還有好多地方值得思考，值得總結。

·  沒有絕對的規範，只有相對的規範。使用時還得“因地制宜”。

·  沒有完全的規範，只有基本的原則。列出的規範很顯然不是全面的，相信也不會有篇文章能夠列出所有的規範。只能以此為參考，適量將元件規範化。

·  沒有組合的規範，只有總結的規範。每個人的理解都不相同，可以將這一元件歸為這一類別，也可歸為另一類別。因人而異，無需固定。