亚洲欧美日韩综合系列在线_91精品人妻一区二区_欧美大肥婆一级特大AA片_九色91视频免费观看_亚洲综合国产精品_av中文字幕在线不卡_久久精品色综合网_看黄色视频的软件_无卡无码高清中文字幕码2024_亚洲欧美日韩天堂网

前言  

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

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

表格的使用場景：

· 展現(xiàn)信息全面性

呈現(xiàn)大量信息，并展現(xiàn)數(shù)據(jù)間的復雜關系。

· 編輯性大于易讀性

數(shù)據(jù)非固定，可進行增刪改查。

· 需要對比數(shù)據(jù)

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

表格的功能：

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

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

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

· 搜索與篩選

· 排序

· 對比

· 顯示多字段

· 計算

組成  

視覺

· 行

· 列

· 布局

· 對齊

· 數(shù)字處理

· 簡潔

· 層級與重點信息

· 可視化趨勢

1.行

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

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

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

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

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

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

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

推薦幾個常用的行高值。

① 字號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行?？梢杂糜诳ㄆ械男⌒捅砀竦瓤臻g比較小的地方。

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

2.列

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

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

② 給出默認寬度，字數(shù)多的時候用省略號，鼠標懸浮可展示全部文字。

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

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

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

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

3.布局

4.對齊

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

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

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

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

5.簡潔

· 精簡表頭

· 減少分隔線

· 不使用斑馬線

· 盡量以黑白為主

· 減少其他元素的使用

6.層級與重點信息

· 顏色的使用

用戶通常優(yōu)先閱讀最具視覺重量的內容，因此，對用戶判斷有決策作用的重要內容可以盡量凸顯。例如狀態(tài)上的異?？梢杂酶吡辽珮顺龅?。表格中也可以用圖形化的形式來幫助用戶快速搜索信息，例如在表格中使用進度條來表明用量等信息。

· 足夠的留白

· 層級處理方法

7.可視化趨勢

· 圖表的使用

· 卡片的使用

交互

1. 固定與滾動

①表頭固定

②首列固定

③底欄固定

2. 操作

①單行操作

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

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

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

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

②批量操作

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

③查看詳細

通?？涉溄游淖纸o藍色值，以顯示可點擊查看詳情。

④編輯

3.排序

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

4.查看

①展開行

②彈窗

③側邊滑出

④視圖切換

總結

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

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

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

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