国产欧美三级日韩_可以免费看日韩无码黄色电影_91九色成人在线_亚洲伊人精品久久久久_国产精选视频一区二区三区不卡播放无码_影音先锋在线资源观看男士天堂影院网站_黄色软件免费网站_人妻中文字幕无码久久αV_欧美亚洲国产成人一区二区_欧美日韩一级特黄大片免色

前言  

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

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

表格的使用場(chǎng)景：

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

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

· 編輯性大于易讀性

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

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

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

表格的功能：

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

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

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

· 搜索與篩選

· 排序

· 對(duì)比

· 顯示多字段

· 計(jì)算

組成  

視覺

· 行

· 列

· 布局

· 對(duì)齊

· 數(shù)字處理

· 簡(jiǎn)潔

· 層級(jí)與重點(diǎn)信息

· 可視化趨勢(shì)

1.行

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

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

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

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

影響行信息閱讀的一個(gè)關(guān)鍵是行高的設(shè)置，在與開發(fā)溝通過程中因?yàn)楸硎霾灰怀Ｒ鹌缌x，幾個(gè)數(shù)值表達(dá)含義需了解一下。

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

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

推薦幾個(gè)常用的行高值。

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

這種行高整個(gè)表格最透氣，在小屏下整屏可以顯示9行，對(duì)于掃視效率影響不大。

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

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

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

這種表格比較緊湊，在小屏下整屏可以顯示12行?？梢杂糜诳ㄆ械男⌒捅砀竦瓤臻g比較小的地方。

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

2.列

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

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

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

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

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

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

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

3.布局

4.對(duì)齊

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

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

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

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

5.簡(jiǎn)潔

· 精簡(jiǎn)表頭

· 減少分隔線

· 不使用斑馬線

· 盡量以黑白為主

· 減少其他元素的使用

6.層級(jí)與重點(diǎn)信息

· 顏色的使用

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

· 足夠的留白

· 層級(jí)處理方法

7.可視化趨勢(shì)

· 圖表的使用

· 卡片的使用

交互

1. 固定與滾動(dòng)

①表頭固定

②首列固定

③底欄固定

2. 操作

①單行操作

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

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

· 操作項(xiàng)可以放置在條目最后。

· 大于等于3個(gè)操作，建議操作項(xiàng)折疊，點(diǎn)擊更多再展示。

②批量操作

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

③查看詳細(xì)

通?？涉溄游淖纸o藍(lán)色值，以顯示可點(diǎn)擊查看詳情。

④編輯

3.排序

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

4.查看

①展開行

②彈窗

③側(cè)邊滑出

④視圖切換

總結(jié)

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

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

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

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