表格是后臺界面中占比十分之重的一個組件，常以為表格設(shè)計十分簡單，仔細(xì)分析后，會發(fā)現(xiàn)表格合理化的設(shè)計、邏輯化的設(shè)計對于一個平臺而言多么重要。 想設(shè)計出一款便捷好用、直觀準(zhǔn)確的系統(tǒng)，表格中內(nèi)容的布局、數(shù)據(jù)的展示、操作項的羅列……每一處設(shè)計都值得細(xì)細(xì)斟酌。

表格是后臺界面中占比十分之重的一個組件，表格中內(nèi)容的布局、數(shù)據(jù)的展示、操作項的羅列……每一處設(shè)計都值得細(xì)細(xì)斟酌。

前言

表格是后臺界面中占比十分之重的一個組件，常以為表格設(shè)計十分簡單，仔細(xì)分析后，會發(fā)現(xiàn)表格合理化的設(shè)計、邏輯化的設(shè)計對于一個平臺而言多么重要。

想設(shè)計出一款便捷好用、直觀準(zhǔn)確的系統(tǒng)，表格中內(nèi)容的布局、數(shù)據(jù)的展示、操作項的羅列……每一處設(shè)計都值得細(xì)細(xì)斟酌。

表格的使用場景：

· 展現(xiàn)信息全面性：呈現(xiàn)大量信息，并展現(xiàn)數(shù)據(jù)間的復(fù)雜關(guān)系。

· 編輯性大于易讀性：數(shù)據(jù)非固定，可進(jìn)行增刪改查。

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

表格的功能：

· 添加數(shù)據(jù)

· 編輯數(shù)據(jù)

· 刪除數(shù)據(jù)

· 搜索與篩選

· 排序

· 對比

· 顯示多字段

· 計算

組成

視覺

· 行

· 列

· 布局

· 對齊

· 數(shù)字處理

· 簡潔

· 層級與重點信息

· 可視化趨勢

1、行

界面在不同的設(shè)備上體驗會有所差異。以騰訊云為例，使用騰訊云的用戶的設(shè)備分辨率分布如右圖所示。

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

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

數(shù)據(jù)參考：https://www.uisdc.com/high-table-row-design#

影響行信息閱讀的一個關(guān)鍵是行高的設(shè)置，在與開發(fā)溝通過程中因為表述不一常引起歧義，幾個數(shù)值表達(dá)含義需了解一下。

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

在考慮表格的行高時，可以參考文字排版的常用做法，將整個表格的行高分成文字行高、文字與分割線間距離，即上下間距兩部分來考慮，文字行高可以設(shè)定為字號的1.2_{1.8倍，文字與分割線間距離可以設(shè)定為字號的1}1.5倍。分為這樣的兩部分也比較符合開發(fā)同學(xué)寫代碼時的習(xí)慣。

推薦幾個常用的行高值。

① 字號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：自適應(yīng)情況下，原本一行的文字在小屏下可能呈現(xiàn)出兩行，即使有的文字仍只有一行，此時每行高度也要做到統(tǒng)一。

2、列

一行排列多少字段，每列字段寬度多少，也是設(shè)計時值得考慮的。

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

② 給出默認(rèn)寬度，字?jǐn)?shù)多的時候用省略號，鼠標(biāo)懸浮可展示全部文字。

③ 列寬支持自動拉伸，根據(jù)用戶需要自行拖拽。

④ 橫向滾動條，優(yōu)先級高的展示出來，優(yōu)先級低的滾動條展示。

⑤ 當(dāng)表格信息很多且需要對比時，可固定左側(cè)左列，其他信息用橫向滾動條展現(xiàn)。

⑥ 表頭放置一個設(shè)置按鈕，支持字段自定義。點擊設(shè)置，用戶可自行決定每列顯示什么字段。

3、布局

4、對齊

文字左對齊，數(shù)據(jù)右對齊。盡量保證數(shù)據(jù)的小數(shù)點后保留位數(shù)一致，若不能，則以個位數(shù)為基準(zhǔn)對齊。

對于不存在的數(shù)據(jù)，單元格不能空置，需要用短橫線代替，表示該項數(shù)據(jù)不存在，給用戶明確指示。

對于數(shù)據(jù)為零的單元格，要填上0，且小數(shù)點后位數(shù)、單位，都要與上下單元格保持一致。

在任何情況下，單元格都不應(yīng)該空置出現(xiàn)，避免用戶的困惑。針對不存在的數(shù)據(jù)可以用其他占位符，告知用戶該單元格不存在數(shù)據(jù)；對于數(shù)據(jù)為零的單元格，與上下數(shù)據(jù)單位、小數(shù)點相同的0來表示。

5、簡潔

· 精簡表頭

· 減少分隔線

· 不使用斑馬線

· 盡量以黑白為主

· 減少其他元素的使用

6、層級與重點信息

· 顏色的使用

用戶通常優(yōu)先閱讀最具視覺重量的內(nèi)容，因此，對用戶判斷有決策作用的重要內(nèi)容可以盡量凸顯。例如狀態(tài)上的異常可以用高亮色標(biāo)出等。表格中也可以用圖形化的形式來幫助用戶快速搜索信息，例如在表格中使用進(jìn)度條來表明用量等信息。

· 足夠的留白

· 層級處理方法

7、可視化趨勢

· 圖表的使用

· 卡片的使用

交互

1、固定與滾動

①表頭固定

②首列固定

③底欄固定

2、操作

①單行操作

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

· 對于圖形意義不太明確或者圖形的含義有較大變化的，采用圖形+文字/文字形式，以便準(zhǔn)確傳達(dá)意義。

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

· 大于等于3個操作，建議操作項折疊，點擊更多再展示。

②批量操作

純文字放在表頭上方，勾選相應(yīng)條目后特定操作按鈕可用。文字按鈕傳達(dá)意義更加直接明確，辨識性強(qiáng)。

③查看詳細(xì)

通常可鏈接文字給藍(lán)色值，以顯示可點擊查看詳情。

④編輯

3、排序

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

4、查看

①展開行

②彈窗

③側(cè)邊滑出

④視圖切換

總結(jié)

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

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

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

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

• .NET敏捷開發(fā)框架-RDIFramework.NET V5.1發(fā)布(跨平臺)
• RDIFramework.NET開發(fā)框架編碼管理助力業(yè)務(wù)編碼的自動處理
• RDIFramework.NET開發(fā)框架在線表單設(shè)計助力可視化快速開發(fā)
• RDIFramework.NET開發(fā)框架在線表單設(shè)計整合工作流程的使用
• RDIFramework.NET敏捷開發(fā)框架助力企業(yè)BPM業(yè)務(wù)流程系統(tǒng)的開發(fā)與落地
• 通過SignalR技術(shù)整合即時通訊(IM)在.NET敏捷開發(fā)框架中落地
• RDIFramework.NET — 基于.NET的快速信息化系統(tǒng)開發(fā)框架 — 系列目錄
• RDIFramework.NET敏捷開發(fā)框架 ━ 工作流程組件介紹
• RDIFramework.NET敏捷開發(fā)框架 ━ 工作流程組件Web業(yè)務(wù)平臺
• RDIFramework.NET敏捷開發(fā)框架 ━ 工作流程組件WinForm業(yè)務(wù)平臺
• 微信公眾號開發(fā)系列-玩轉(zhuǎn)微信開發(fā)-目錄匯總
• .NET Core部署到linux(CentOS)最全解決方案，常規(guī)篇
• .NET Core部署到linux(CentOS)最全解決方案，進(jìn)階篇(Supervisor+Nginx)
• .NET Core部署到linux(CentOS)最全解決方案，高階篇(Docker+Nginx 或 Jexus)
• .NET Core部署到linux(CentOS)最全解決方案，入魔篇(使用Docker+Jenkins實現(xiàn)持續(xù)集成、自動化部署)
• 一網(wǎng)打盡，一文講通虛擬機(jī)VirtualBox及Linux使用
• 一文講通.NET Core部署到Windows IIS最全解決方案
• 常用linux命令，開發(fā)必備

---

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

RDIFramework.NET官方網(wǎng)站：http://www.rdiframework.net/

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

特別說明，框架相關(guān)的技術(shù)文章請以官方網(wǎng)站為準(zhǔn)，歡迎大家收藏！

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

歡迎關(guān)注RDIFramework.NET框架官方微信公眾號（微信號：guosisoft），及時了解最新動態(tài)。

使用微信掃描二維碼立即關(guān)注