后台界面設計之表格設計規范參考

本文轉載自查看原文 2021-10-08 11:38 2125 Web前端/ 開發技術/ 項目總結/ 隨談/ 計算機常用知識

表格是后台界面中占比十分之重的一個組件，表格中內容的布局、數據的展示、操作項的羅列……每一處設計都值得細細斟酌。

前言

表格是后台界面中占比十分之重的一個組件，常以為表格設計十分簡單，仔細分析后，會發現表格合理化的設計、邏輯化的設計對於一個平台而言多么重要。

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

表格的使用場景：

· 展現信息全面性：呈現大量信息，並展現數據間的復雜關系。

· 編輯性大於易讀性：數據非固定，可進行增刪改查。

· 需要對比數據：對比行與行之間的數據，了解兩者差異。

表格的功能：

· 添加數據

· 編輯數據

· 刪除數據

· 搜索與篩選

· 排序

· 對比

· 顯示多字段

· 計算

組成

undefined

視覺

· 行

· 列

· 布局

· 對齊

· 數字處理

· 簡潔

· 層級與重點信息

· 可視化趨勢

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、查看

①展開行

②彈窗

③側邊滑出

④視圖切換

總結

表格只是后台界面設計中一個組件，而我這里總結的表格的幾個設計點也只是片面之言。想把后台設計好，還有好多地方值得思考，值得總結。

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

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

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

一路走來數個年頭，感謝RDIFramework.NET框架的支持者與使用者，大家可以通過下面的地址了解詳情。

RDIFramework.NET官方網站：http://www.rdiframework.net/

RDIFramework.NET官方博客：http://blog.rdiframework.net/

特別說明，框架相關的技術文章請以官方網站為准，歡迎大家收藏！

RDIFramework.NET框架由海南國思軟件科技有限公司專業團隊長期打造、一直在更新、一直在升級，請放心使用！

歡迎關注RDIFramework.NET框架官方微信公眾號（微信號：guosisoft），及時了解最新動態。

使用微信掃描二維碼立即關注

微信掃描二維碼

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 后台界面設計之表單設計規范參考 Android的界面設計規范-6 Android的界面設計規范-2 Android的界面設計規范-3 Android的界面設計規范-7 Android的界面設計規范-1 App界面設計規范-字體規范 IOS與Android APP界面設計規范要點后台返回數據時，接口設計規范參考 APP和后台接口設計規范