為大家梳理一個web表格設(shè)計(jì)框架迟郎，希望能夠給大家?guī)硗暾牟灰粯拥膬?nèi)容剥险。全文12,598字 ，預(yù)計(jì)閱讀30分鐘宪肖，建議收藏表制。

在網(wǎng)頁或桌面端為載體的B端產(chǎn)品和生產(chǎn)力工具中，越來越多的設(shè)計(jì)師需要和數(shù)據(jù)打交道控乾，查詢和處理數(shù)據(jù)的能力是當(dāng)前正在設(shè)計(jì)的大多數(shù)產(chǎn)品的關(guān)鍵要求之一么介，表格被公認(rèn)為是展現(xiàn)數(shù)據(jù)最為清晰、高效的形式之一蜕衡，也是世界上最常用的用戶界面工具壤短，其重要性不言而喻。

1. 表格的布局與構(gòu)成

表格慨仿，展示行列數(shù)據(jù)久脯，既是一種可視化交流模式，又是一種整理數(shù)據(jù)的手段镶骗。表格幫助我們組織和展示信息桶现，同時保證信息的可讀性，從大量信息中找到所需內(nèi)容鼎姊；通過合理布局骡和，感知不同信息間的關(guān)聯(lián)與區(qū)別，進(jìn)行分析和比較相寇；對數(shù)據(jù)進(jìn)行排序慰于、搜索、分頁唤衫、自定義操作等復(fù)雜行為婆赠。

1.1 表格的布局

表格的行元素和列元素行和相交就會形成一個簡單的二維表，行佳励，列元素的空間組合就確定了一個個單元格休里。常見的表格布局有水平型、垂直型和矩陣型三種基本布局赃承，分別強(qiáng)調(diào)行妙黍、列、單元格瞧剖。

水平型會弱化列的存在拭嫁，強(qiáng)調(diào)行信息的連貫性可免，適用于用戶閱讀信息時是從左到右，然后自上而下逐條掃描做粤。垂直型是通過強(qiáng)化列的視覺特征來突出不同列信息的對比浇借。矩陣型的表格有均勻統(tǒng)一的分割線，單元格比較明顯怕品，適用于列信息較多而沒有足夠空間用留白來分割信息的表格妇垢，同時我認(rèn)為單元格合并的情況也屬于矩陣型。

還有比較常用的表格類型層級型：

層級表

是表達(dá)結(jié)構(gòu)性關(guān)系的表格肉康，表現(xiàn)得如同樹的分支修己，所以又叫樹列表。每一個條目可展開或折疊包含的更詳細(xì)的行信息迎罗，也包含嵌套子表格。

層級表并不如矩陣表直觀片仿，但通過結(jié)構(gòu)化的組織方式逐級展示表的數(shù)據(jù)內(nèi)容纹安，讓整體信息架構(gòu)一目了然，非常適合大型數(shù)據(jù)表砂豌。

結(jié)合層級表的使用場景厢岂，多以查看為主，編輯需求較少阳距。

同時還有特殊的表格類型塔粒，圖表型與卡片型：

圖表型

除了在單元格中引用圖表之外，很多時候都會提供圖表/表格視圖切換筐摘，便于用戶從圖形角度查看卒茬、分析自己關(guān)注的數(shù)據(jù)。有時也會有“圖表+表格”的形式咖熟，這時候圃酵，表格往往只作為明細(xì)放在頁面底部。大量的表格也會導(dǎo)致視覺的單調(diào)馍管。

卡片型

可以用卡片的形式來展示信息郭赐，將信息以組的概念呈現(xiàn)，單張卡片內(nèi)的信息按優(yōu)先級進(jìn)行排列确沸。此外捌锭，卡片彼此之間又形成一個整體。

卡片是一種承載信息的容器罗捎，對可承載的內(nèi)容類型無過多限制观谦，它讓一類信息集中化，增強(qiáng)區(qū)塊感的同時更易于操作宛逗；卡片通常以網(wǎng)格或矩陣的方式排列坎匿，傳達(dá)相互之間的層級關(guān)系。適合較為輕量級和個性化較強(qiáng)的信息區(qū)塊展示。

注：在有限的表格空間內(nèi)需注意卡片信息之間的間距替蔬，若卡片信息過長可做截斷處理告私。

在實(shí)際工作中，上述表格類型還有可能互相結(jié)合承桥，以更好的達(dá)到相應(yīng)的分析目的驻粟。

比如垂直–層級，矩陣–數(shù)據(jù)立體表等凶异。

1.2 表格的構(gòu)成

從視覺結(jié)構(gòu)的表現(xiàn)角度蜀撑，個人將“表格”的構(gòu)成分為：標(biāo)題、表上方篩選操作區(qū)剩彬、表頭酷麦、表體、底欄喉恋。由表頭沃饶、表體構(gòu)成內(nèi)部區(qū)域沾瓦，由標(biāo)題病毡、篩選操作罢缸、底欄構(gòu)成外部區(qū)域大猛。

標(biāo)題

標(biāo)題是對表格信息內(nèi)容的整體概括耙考，可包含數(shù)據(jù)來源及屬性(日期荆忍、地區(qū)等)既穆，以便用戶對表格內(nèi)容有整體認(rèn)知隐解。給數(shù)據(jù)表格起一個清晰簡明的標(biāo)題抖拦，與其他的設(shè)計(jì)同等重要升酣。有了好的標(biāo)題，表格就可以獨(dú)立使用态罪，如果導(dǎo)航菜單層級清晰拗踢，同樣能起到標(biāo)題的作用。標(biāo)題作為最重要的識別元素向臀，默認(rèn)展示在左上角巢墅。

篩選操作區(qū)域

這里特指位于表頭的上方的操作區(qū)域，包含篩選券膀，操作按鈕等其他操作君纫。篩選區(qū)包含模糊搜索和條件篩選，按鈕分為增刪改和其它業(yè)務(wù)處理操作芹彬，合理設(shè)計(jì)篩選區(qū)可以大大提高用戶的效率蓄髓。

表頭

表頭對數(shù)據(jù)性質(zhì)的歸類。表頭按慣例要對數(shù)據(jù)的簡況做出反映舒帮，如被調(diào)查者的性別会喝、年齡陡叠、學(xué)歷、收入肢执、家庭成員組成枉阵、政治背景、經(jīng)濟(jì)狀況等预茄。表頭的字段名稱應(yīng)當(dāng)符合人們的思維習(xí)慣兴溜，保證用戶理解。如果有需要解釋耻陕，則在字段名稱旁邊加說明小圖標(biāo)(小問號)拙徽。表頭在這里也能指列行標(biāo)簽，是對所屬行或列數(shù)據(jù)的描述诗宣。

除了容納行/列標(biāo)簽之外膘怕，表頭也可以進(jìn)行排序、搜索召庞、篩選等淳蔼。

表體

表體是表格的主體內(nèi)容，具體信息數(shù)據(jù)內(nèi)容的填充區(qū)域裁眯，由一個個基礎(chǔ)的單元格組成，單元格是表格呈現(xiàn)數(shù)據(jù)信息的基本單位讳癌，可以是計(jì)數(shù)穿稳、百分比、均值晌坤、"-"等任何數(shù)據(jù)逢艘。表體包含數(shù)據(jù)，分割線骤菠，背景它改，單元格數(shù)據(jù)可進(jìn)行點(diǎn)擊操作，如鏈接跳轉(zhuǎn)(項(xiàng)目或者商品等)商乎、展開嵌套表的子集信息(子表格)央拖、操作按鈕(查看編輯)等。

表尾一般是統(tǒng)計(jì)類數(shù)據(jù)鹉戚，例如合計(jì)鲜戒、平均數(shù)等。表尾使用頻率較少抹凳，且重要性明顯不如表頭遏餐，我就把它歸到表體這類。

底欄

底欄在表格最下方赢底，主要展示正文中的數(shù)據(jù)量或單頁數(shù)據(jù)的概覽信息失都，也常提供統(tǒng)計(jì)功能柏蘑，供用戶了解總體進(jìn)展。底欄一般放統(tǒng)計(jì)信息粹庞、分頁控件咳焚、備注說明、操作按鈕(加載更多)等內(nèi)容信粮。

底欄最常見的元素就是分頁黔攒，分頁可以放在頭部或底部，常見的還是放到底部强缘，分頁固定能省去用戶需要翻到頂部或底部進(jìn)行操作的麻煩督惰。分頁可分為整體頁碼平鋪式、全功能版旅掂、簡易版等赏胚，需要根據(jù)不同的場景選擇最優(yōu)的設(shè)計(jì)方案，比如有的時候并不需要定點(diǎn)跳轉(zhuǎn)商虐。

無限滾動可以替代分頁觉阅，但對于功能優(yōu)先的應(yīng)用未必適用。下圖為查看更多按鈕秘车，比較少見：

同時典勇，在選中操作的下，操作按鈕也可以位于底欄叮趴，在未選中時操作置灰割笙。

2. 表格的視覺

采用格式一致外觀，突出有利于對象識別的關(guān)鍵信息眯亦。

2.1 視覺標(biāo)準(zhǔn)

填充與邊距

合適的填充和邊距對于視覺設(shè)計(jì)至關(guān)重要伤溉，既包括保證數(shù)據(jù)單元格之間的留白，又包括單元格內(nèi)部留白妻率，以保證易讀性乱顾，當(dāng)創(chuàng)建表格設(shè)計(jì)規(guī)范并嚴(yán)格遵循后，就可以創(chuàng)建視覺一致的表宫静。表格本身應(yīng)具有最小寬度走净，在不同畫面中寬度應(yīng)可以增長到整個空間，所以每個列也需具備最小寬度孤里。如果頁面寬度小于表格温技，那么表格應(yīng)水平可拖拽。

對齊方式

數(shù)據(jù)合適的位置排列能夠提升數(shù)據(jù)的瀏覽效率和準(zhǔn)確度扭粱。對齊能夠很好的形成視覺引導(dǎo)線舵鳞，會讓表格更加規(guī)范易理解，給用戶視覺上的統(tǒng)一感琢蛤，視線流動更順暢蜓堕，讓用戶快速的捕捉到所需內(nèi)容抛虏。

正如連續(xù)律所描述的，人們傾向于把那些經(jīng)歷最小變化或阻斷的直線或圓滑曲線知覺為一個整體套才，傾向于使知覺對象的直線繼續(xù)成為直線迂猴，使曲線繼續(xù)成為曲線。在界面設(shè)計(jì)中背伴，將元素進(jìn)行對齊沸毁，既符合用戶的認(rèn)知特性，也能引導(dǎo)視覺流向傻寂，讓用戶更流暢地接收信息息尺。

數(shù)字應(yīng)該右對齊

在表格中，諸如金額疾掰、數(shù)量等數(shù)值排列時搂誉，通常采用“右對齊”方式，既方便用戶快捷讀取數(shù)據(jù)静檬，還可以使用戶進(jìn)行縱向數(shù)據(jù)對比炭懊。數(shù)字是從右向左讀的，是因?yàn)槲覀儗Ρ葦?shù)字時拂檩，首先看個位侮腹，然后十位、百位稻励。當(dāng)個位數(shù)值對齊時父阻，我們就可以快速查看前面的數(shù)值，比較多個數(shù)據(jù)的大小钉迷。因此，表格的數(shù)字應(yīng)當(dāng)右對齊钠署。

當(dāng)我們常用的字體如果不同數(shù)字寬度不一致時糠聪，會導(dǎo)致千位分隔符不在一條直線上，所以要選擇數(shù)字等寬的字體谐鼎，等寬的數(shù)字在同一豎線時更容易對比舰蟆。

文字信息左對齊

因?yàn)槲覀冮喿x文字信息是從左向右讀，如果不采用左對齊狸棍，會降低瀏覽文字的效率身害。

混合型文本左對齊

當(dāng)數(shù)字、文字草戈、字母組成混合數(shù)據(jù)時塌鸯，標(biāo)題和正文左對齊，使用了一個視覺起點(diǎn)唐片。

在實(shí)際工作中丙猬，主流框架組件涨颜，表格列數(shù)據(jù)對齊同時針對分割線，雖不是完美中的對齊茧球，但開發(fā)成本低庭瑰。

不論何種對齊方式，都需要考慮到該字段可能存在的極端情況抢埋。如：普通文本若過長弹灭，可在鼠標(biāo)懸停狀態(tài)時單元格展開列出全部字段信息。

色彩

一般表格具有的顏色盡可能少揪垄。顏色和可讀性是密切相關(guān)的穷吮，要合理的使用顏色，普通表盡量使用簡單的背景色和點(diǎn)綴色福侈。背景色方面酒来，除了行/列交替顏色(可以區(qū)隔內(nèi)容，引導(dǎo)視線)肪凛、懸停高亮底色(便于準(zhǔn)確辨別光標(biāo)所在行)等處理方法堰汉，還可以對表頭表尾進(jìn)行視覺區(qū)分。但不能增加過多顏色以引起混亂伟墙。

分割線顏色盡量不要與背景色相差太大翘鸭。當(dāng)字體選擇深灰色，背景為淺白色時戳葵，邊框選擇淺灰色就乓，這樣可以減少我們視覺疲勞，不會使表格看起來令人生畏拱烁。

2.2 表頭的優(yōu)化

表頭標(biāo)簽應(yīng)該簡煉準(zhǔn)確生蚁，以達(dá)到節(jié)省表頭空間和減輕視覺壓力的作用，讓用戶注意力聚焦在數(shù)據(jù)本身戏自。當(dāng)然對于產(chǎn)品而言邦投，先能把事情說清楚，再考慮文字的簡潔性擅笔。

當(dāng)數(shù)據(jù)結(jié)構(gòu)比較復(fù)雜的時候志衣，使用多級表頭來體現(xiàn)表頭與數(shù)據(jù)的層次關(guān)系，如下圖：

當(dāng)數(shù)據(jù)有看不懂或生僻的信息時猛们，用戶期望有人告訴他為什么會這樣念脯，就需要在表頭標(biāo)簽后加上小問號，鼠標(biāo)懸停彈出說明文字的提示框弯淘。

不需要表頭

如果表格數(shù)據(jù)可以自我解釋绿店，表頭就可以不需要。電子郵件的表格是一個好例子庐橙，郵件主題惯吕，發(fā)送者惕它，發(fā)送日期都區(qū)別度高不會混淆的。當(dāng)然有的情況表頭是不能去掉的废登，例如有兩個不明確的日期淹魄，這時候你就需要定義一個表頭。

2.3 行的優(yōu)化

默認(rèn)排序

所有行按邏輯排序堡距，比如按風(fēng)險由小到大甲锡，將最安全的操作放最前面；或按照信息時間排序羽戒，由新到舊缤沦，以創(chuàng)建時間進(jìn)行排序，即最新創(chuàng)建的排在最前面易稠。

合適的行高

行高是非常重要的參數(shù)缸废，直接影響著閱讀體驗(yàn)。較小的行高承載更多信息驶社，讓用戶無需滾動鼠標(biāo)即可看到更多數(shù)據(jù)企量，但會降低掃描效果，導(dǎo)致視覺解析錯誤亡电。適宜的行高使得數(shù)據(jù)更易于被閱讀届巩，但這不代表行高越大越利于閱讀。

設(shè)置行高的原則：

A.單行數(shù)據(jù)顯示時份乒，數(shù)據(jù)顯示緊湊恕汇、有序。

B.多行數(shù)據(jù)顯示時或辖，弱化表格形式瘾英，提供豐富的視覺展現(xiàn)。

因此颂暇，對于單行顯示的表格缺谴，建議行高為字體高度的2.5倍到3倍；對于多行顯示的表格蟀架，建議內(nèi)容區(qū)到上下邊框的距離略小于文字高度瓣赂。當(dāng)然榆骚，也可以提供切換按鈕讓用戶自己控制顯示密度片拍。

橫向斑馬線

斑馬線又稱作間行換色、隔行變色妓肢、行的交替樣式捌省。它能讓行間界限更為明顯，同時加強(qiáng)視覺流的橫向引導(dǎo)碉钠，避免在閱讀表格時出現(xiàn)迷失情況纲缓，要注意兩種顏色不能反差過大卷拘。另外，可以根據(jù)實(shí)際情況選擇是否與邊框同時使用祝高。

行的強(qiáng)調(diào)

有時為了強(qiáng)調(diào)行內(nèi)信息的連續(xù)性栗弟，可去掉單元格的縱向分割線，僅使用橫向分割線和底色分割工闺，使橫向信息更加連續(xù)通暢乍赫，以提升閱讀效率。

表格還可以通過顏色來指示狀態(tài)陆蟆，顏色指示可以幫助用戶識別哪些行可能需要特別注意的行數(shù)據(jù)雷厂。

同時可以對行內(nèi)信息進(jìn)行擴(kuò)充，進(jìn)一步弱化表格形式叠殷，豐富各類信息的視覺呈現(xiàn)改鲫，同時兼顧行與行之間的關(guān)鍵信息的對比，如上文表格布局提到的圖表的使用林束。

2.4 列的優(yōu)化

減少列的數(shù)量

盡量減少列的數(shù)量像棘，關(guān)注用戶需要的必要信息。當(dāng)數(shù)據(jù)列過多時诊县，要分清主次列讲弄，非重點(diǎn)、輔助性信息可以通過次級入口來解決依痊，如固定重要列(主體名稱/操作列)避除，次級列在表格中間區(qū)域左右拖動。

合適的列寬

列寬嚴(yán)謹(jǐn)?shù)奶幚矸绞接腥N胸嘁。第一瓶摆，通過柵格，由列的數(shù)量決定列寬性宏，主流框架組件一般是這種群井；第二，可以固定部分列的寬度毫胜，其余列則按百分比處理书斜；第三，在固定寬度的基礎(chǔ)上酵使，允許用戶自由拖動調(diào)整列寬的大小荐吉。（當(dāng)然我覺得不要太拘泥這個，合適就好）

列的強(qiáng)調(diào)

為便于用戶對數(shù)據(jù)進(jìn)行對比分析口渔，可以在原始數(shù)據(jù)的基礎(chǔ)上給出差值样屠、升降變化等數(shù)據(jù)處理結(jié)果，減少用戶數(shù)據(jù)加工的過程，直達(dá)用戶獲取信息的目標(biāo)(需要明確用戶目標(biāo))痪欲，提高用戶的閱讀速度悦穿。

一般列的強(qiáng)調(diào)是配合列排序功能使用的，如點(diǎn)擊率业踢、訪問量的排序栗柒。有時會使用不同粗細(xì)的縱向分割線或不同底色對列信息進(jìn)行區(qū)隔，增加同類信息的對比性知举。

2.5 單元格數(shù)據(jù)展示

度量單位的使用

其中的關(guān)鍵區(qū)別在于數(shù)字的大小傍衡。數(shù)據(jù)的度量單位無需重復(fù)，一般在表頭標(biāo)識清楚即可负蠕。

空白單元格處理

一般指空數(shù)據(jù)或零數(shù)據(jù)的情況蛙埂，空白單元格容易造成用戶困惑甚至誤解，用戶會搞不清楚到底是沒有數(shù)據(jù)遮糖，還是數(shù)值為零绣的？正確做法是，對于數(shù)據(jù)為零的單元格欲账，要填上0屡江，且小數(shù)點(diǎn)后位數(shù)、單位赛不，都要與上下數(shù)據(jù)格式保持一致惩嘉；對于沒有數(shù)據(jù)的單元格，通常是用“－”表示踢故。

B端后臺數(shù)據(jù)類型較多文黎，最好能為空數(shù)據(jù)做出釋義，可以在“列標(biāo)簽”或底欄給出解釋文案殿较。

數(shù)據(jù)過多耸峭，單元格的寬度根據(jù)列中字符的長短自動變化寬度，超過該列寬可以省略顯示淋纲，末尾以"..."顯示劳闹，鼠標(biāo)懸停時出現(xiàn)氣泡顯示完整內(nèi)容。

關(guān)鍵屬性標(biāo)識洽瞬，比如用戶重點(diǎn)關(guān)注數(shù)據(jù)狀態(tài)本涕、某些數(shù)據(jù)的上升和下降等，可用符號進(jìn)行標(biāo)識伙窃，幫助用戶快速定位到目標(biāo)信息菩颖。

2.6 分隔線

水平分隔線，能顯著減輕表格在垂直方向的視覺重量对供，內(nèi)容更加條理清晰位他，便于用戶對比查看數(shù)據(jù)。

垂直分隔線产场，在表格中使用適合的對齊方式后鹅髓，那么就可以省略；數(shù)據(jù)量級比較大的表格京景，列之間過于緊密時建議保留窿冯，可以使用較淡的分隔線，將不同列數(shù)據(jù)區(qū)分開來确徙，提升瀏覽速度醒串。

下圖采用了同時使用水平和垂直分隔線：

如果在表格中使用適合的對齊方式，分隔線就是多余的鄙皇。但由于表格數(shù)據(jù)量級不同芜赌，即使要用，分隔線也要淡伴逸，不能妨礙快速瀏覽缠沈。

2.7 分頁及翻頁

在web端，表格的的數(shù)據(jù)內(nèi)容超過一定“數(shù)量”時需要提供翻頁功能错蝴，這個“數(shù)量”由表頭的高度洲愤、表格的行間距、目標(biāo)用戶群體的顯示設(shè)備的配置等因素來決定顷锰，原則是不要超過一屏柬赐，考慮到每個用戶的使用習(xí)慣，可以讓用戶自定義每頁的顯示的數(shù)量官紫。相比于跨屏翻頁而言肛宋，向下滾屏?xí)憷谙挛?b>控制表內(nèi)容中展開比較了無線滾動與分頁束世。

分頁控件內(nèi)容 ：用戶自定義每頁顯示的數(shù)量悼吱，當(dāng)前頁碼(行數(shù))，全部數(shù)據(jù)的頁數(shù)(行數(shù))良狈，向前翻頁后添，向后翻頁，到達(dá)第一頁薪丁，到達(dá)最后一頁等遇西。

當(dāng)用戶的數(shù)據(jù)未超過一頁時，可以隱藏翻頁控件严嗜。翻頁按鈕不可用時粱檀，須給出置灰態(tài)或不可點(diǎn)擊。

分頁控件做為篩選數(shù)據(jù)的一種方式漫玄，通城羊牵可以結(jié)合排序压彭、篩選等其它控件一起使用，來提升用戶的操作效率渗常，如網(wǎng)易的郵箱壮不，翻頁與日歷結(jié)合使用，對于有大量郵件數(shù)據(jù)的用戶來說皱碘，查閱郵件的效率更高询一。

除了無限滾動，還有第三種翻頁方式癌椿，鼠標(biāo)點(diǎn)擊“加載更多”按鈕以查看更多數(shù)據(jù)健蕊。

2.8 簡化表格

干凈的表格使人愉悅。特別是在處理大量數(shù)據(jù)時踢俄，巨大的數(shù)據(jù)量會增加用戶的壓力缩功，因此要減少視覺干擾。刪除不必要的分隔符與背景都办，去除陰影等掂之。信息內(nèi)容的有效傳達(dá)是表格設(shè)計(jì)的本質(zhì)，讓用戶注意力聚焦在核心內(nèi)容上脆丁。所以世舰，做減法設(shè)計(jì)就顯得可貴了。

實(shí)現(xiàn)簡化的方法是適當(dāng)刪減槽卫。如果畫面視覺很糟糕跟压，請刪除輔助信息、不常用的控件和分散注意力的樣式歼培，但要小心刪除必要內(nèi)容臭杰。“簡單并不意味著沒有雜亂漾稀，這是簡單的結(jié)果句喜。簡單性在某種程度上基本上描述了對象和產(chǎn)品的目的和位置飒泻。想設(shè)計(jì)出一個井然有序的產(chǎn)品。這并不簡單噪窘∷褡“ - Jonathan Ive

減少分隔線

這必須是在數(shù)據(jù)允許的情況下。水平分隔線能顯著減輕長表格在垂直方向的視覺重量倔监，加快數(shù)值的對比效率直砂。但如果在表格中使用適合的對齊方式，豎直分隔線就是多余的浩习。它們最大的貢獻(xiàn)就是縮減元素之間的距離静暂，明確了單元格范圍。即使要用垂直分割線谱秽，也要淡洽蛀，不能妨礙快速瀏覽摹迷。

不使用斑馬線，使用不同底色區(qū)分指示不同類型的數(shù)據(jù)是有必要的郊供，但是用來區(qū)分同一類數(shù)據(jù)峡碉，斑馬線在很多時候又是沒有必要的，因?yàn)樗椒指罹€已經(jīng)明顯區(qū)隔了颂碘。

省去分隔線，對于較小的椅挣，動態(tài)性較小的表头岔，可以省去所有分隔線，并獲得醒目的外觀鼠证。當(dāng)然峡竣，這更多是數(shù)據(jù)量不大且易分辨的情況。

盡量以黑白為主

運(yùn)用彩色表達(dá)組織或含義可能會增加誤解量九，并且引發(fā)視覺障礙者的易用性問題适掰。普通表格一般使用顏色代表狀態(tài)或進(jìn)度。

克制圖形元素的使用

其他圖形元素荠列，如星號类浪、三角、圓點(diǎn)肌似、對勾费就、叉等，雖然能夠幫助組織數(shù)據(jù)川队、更直觀的傳達(dá)信息力细，但要注意數(shù)量，物極必反固额，要注意克制這些元素的使用眠蚂。

3. 表格的交互

優(yōu)秀的表格交互給予用戶操控感，不讓其迷失在數(shù)據(jù)中斗躏。提供便捷的過濾篩選組件逝慧，配合鼠標(biāo)懸停、點(diǎn)擊啄糙、框選等操作馋艺，方便用戶查看更多數(shù)據(jù)信息，快速定位目標(biāo)數(shù)據(jù)迈套，或根據(jù)特定規(guī)律對數(shù)據(jù)進(jìn)行排序捐祠、突出、降維等處理桑李。當(dāng)我們將這些組件與交互動作結(jié)合踱蛀，用一些習(xí)以為常的交互去操縱表格時窿给，用戶將更清晰、有信心率拒、提效率崩泡。

3.1 篩選與搜索

篩選和搜索是用戶精確目標(biāo)數(shù)據(jù)的好方法，這是一項(xiàng)基本功能猬膨，可讓用戶從默認(rèn)的表格數(shù)據(jù)輕松獲取要查找的內(nèi)容角撞，在數(shù)據(jù)量較大的表中特別有用，一般位于表上方的操作區(qū)域或表頭區(qū)域勃痴。

表上方

當(dāng)表格的數(shù)據(jù)量較大時谒所，可在表上方操作區(qū)域增加對象搜索或數(shù)據(jù)分類來提升用戶查找效率，且能同時使用沛申。提供多維的篩選和排序劣领，是增加用戶效率的有效方式。

輸入搜索框輸入用戶關(guān)心的內(nèi)容铁材，既可以實(shí)時篩選尖淘，也可以點(diǎn)擊觸發(fā)，一般須支持模糊查詢著觉，否則用戶必須記住所有內(nèi)容村生，才能查出要找的目標(biāo)項(xiàng)，成本過高饼丘。也有特殊情況梆造，如保密性較高的賬號密碼列表查詢需精確輸入。

無論手動查詢還是自動查詢葬毫，如果查詢條件是組合的幾個镇辉，那么一般是填好全部篩選條件再讓用戶點(diǎn)擊查詢按鈕。因?yàn)槿绻脩粢樵兊谋砀駭?shù)據(jù)具有多個屬性且相互聯(lián)系時贴捡，組合條件的查詢顯然是更合理的忽肛。

如果篩選操作是單個條件獨(dú)立查詢，各個篩選條件都是相互獨(dú)立的烂斋，那么最好填好一個條件便自動查詢屹逛。

篩選條件有時候既需要匯總數(shù)據(jù)的，又需看單一條件下的數(shù)據(jù)汛骂，比如狀態(tài)包含“待付款罕模、待發(fā)貨和待收貨等”，此時則是做成Tab單選較好帘瞭，如下圖所示淑掌。

表頭

放置在表頭標(biāo)簽上的篩選，受列內(nèi)容的影響蝶念，一般做單次篩選抛腕。通過對表頭標(biāo)簽旁按鈕的點(diǎn)擊芋绸，使用戶更快捷進(jìn)入到自己的篩選條件中。通常担敌，表單越左的列數(shù)據(jù)越重要的摔敛，也是篩選頻率與需求最高的，因此高頻的篩選場景基本可以得到滿足全封。

3.2 滾動與固定

垂直滾動固定表頭

垂直滾動時马昙，固定表頭可以讓用戶明白當(dāng)前單元格數(shù)據(jù)信息的屬性和含義，體現(xiàn)界面友好性刹悴。當(dāng)數(shù)據(jù)列差異不大行楞，用戶不能直接根據(jù)表格數(shù)據(jù)分辨類型時，尤其需要固定表頭颂跨。當(dāng)表頭有操作時敢伸，固定表頭更能提升使用效率扯饶。

數(shù)據(jù)列表相當(dāng)龐大而復(fù)雜的時候恒削，使用固定表頭可以幫助用戶區(qū)分列與屬性。

水平滾動列固定

當(dāng)呈現(xiàn)大量數(shù)據(jù)時尾序，表包含的列數(shù)超出了該表的最大寬度钓丰，水平滾動就無法避免。第一列(前幾列)或操作列固定能更方便信息的對比與操作每币⌒。基于我們讀取信息的方式，從左到右放置關(guān)鍵列兰怠。最左側(cè)的列會引起最多的關(guān)注梦鉴，當(dāng)我們感興趣時，才會查看其他列揭保，它會影響用戶閱讀所需時間與精力肥橙。

在大型表格中，我們才可以水平滾動秸侣，最好是尋找可替代方案存筏。表格中文本為什么這么長？能減少字?jǐn)?shù)嘛味榛？可以將文本換至第二行以減少水平寬度嗎椭坚？能否為過長的文字選擇別名嗎？可否用圖形條目取代搏色？是否可以采取工具提醒善茎？是否可以安排在窗口或?qū)υ捒蚶铮?/p>

一般有兩個解決辦法：文本換行，對它縮排频轿；在單元格區(qū)域截斷文本巾表，在提示中顯示完整文本汁掠。方法一意味著我們要增加表格高度，且每行高度可能不同集币；方法二考阱，如果不同文本內(nèi)容的頭幾個字一樣就存在問題了。但這兩種方法都比水平滾動好鞠苟。

3.3 排序

表格初始有一個默認(rèn)排序乞榨，也叫初始排序。但有時当娱，用戶希望將表格中某一行位置換到另一位置吃既。

拖曳排序

拖放似乎很簡單。就是抓住某個元素把它放到另一個地方而已跨细○幸校可是，事實(shí)上冀惭，拖放過程涉及到了大量細(xì)節(jié)震叙，在拖放期間，需要處理許多特定的狀態(tài)散休。

用戶在拖動模塊時媒楼，頁面整體布局基本保持不變。因?yàn)橐苿拥牟皇悄K戚丸，而是插入條划址。插入條指明了放置模塊時的目標(biāo)位置。常用于數(shù)據(jù)量較小限府，有拖曳排序需求的場景夺颤。又可以運(yùn)用在多個表一起的情況。

穿梭表格

就是多表格拖拽的情況胁勺。比如左側(cè)的表格內(nèi)容可拖拽至右側(cè)列表框世澜，同時支持表內(nèi)上下拖拽更換位置順序，也可直接選中對象在兩欄中按鈕移動姻几，完成拖拽行為宜狐。

那如何讓用戶知道可拖拽呢？

增加意向符號蛇捌；改變光標(biāo)樣式抚恒；增加被拖拽對象臨時性底色，突出顯示络拌。

如何讓用戶知道怎么拖拽到哪里俭驮？

被拖入?yún)^(qū)域應(yīng)增加插入位置符號，可以明確指出放置模塊的目標(biāo)位置，減少用戶困惑混萝，也可以對放置操作發(fā)生后的頁面外觀提前給出預(yù)覽遗遵。同時設(shè)計(jì)時考慮上下左右兩個方向的拖拽運(yùn)動分別可以觸發(fā)什么結(jié)果，超出表格范圍拖拽對象消失逸嘀。

被拖動對象應(yīng)呈現(xiàn)為輕微透明的樣式车要？應(yīng)該顯示為完全不透明？或者改為使用縮略圖表示崭倘？我認(rèn)為這三種方法都可以翼岁。透明效果也會讓更多表格內(nèi)容對用戶可見，有助于用戶預(yù)覽最終放置后的結(jié)果司光。從而方便用戶查看頁面琅坡，也會表明該模塊處于一種特殊模式中。透明可以表明相應(yīng)被拖拽對象尚未定位残家，或者說正處于過渡狀態(tài)榆俺。

表頭排序

排序又分為降序和升序，比如坞淮，事件相關(guān)的表格茴晋，默認(rèn)時間降序排列；風(fēng)險相關(guān)的表格碾盐，默認(rèn)安全降序排序晃跺。

表頭排序可以輔助用戶快速挖掘出需要關(guān)注的信息揩局，發(fā)現(xiàn)數(shù)據(jù)信息之間的關(guān)系毫玖，一般可按數(shù)字大小、文字拼音順序凌盯、字母順序等其它數(shù)據(jù)特征進(jìn)行排序付枫。如果表格中不是所有數(shù)據(jù)都能排序時，則需要標(biāo)識出可排序操作的列驰怎，一般采用三角箭頭做為標(biāo)識阐滩，實(shí)時反饋當(dāng)前操作狀態(tài)。

3.4 控制表內(nèi)容

控制列

可伸縮列

由于存在多個數(shù)據(jù)標(biāo)題和列县忌，我們只能根據(jù)表格的寬度來展示數(shù)據(jù)掂榔。在某些情況下，表格可允許用戶選擇他們關(guān)注的列症杏，在其固定寬度基礎(chǔ)上装获，讓用戶可以自由拖動列寬邊緣以調(diào)整列寬。

自定義選擇列

由于數(shù)據(jù)報表厉颤，往往需要滿足各種不同的角色在不同場景下的需求穴豫，因而在表格數(shù)據(jù)顯示上，一般采取寧多勿少的原則逼友，即盡可能提供詳細(xì)的數(shù)據(jù)精肃，由此會數(shù)據(jù)指標(biāo)過多秤涩，難以在表內(nèi)完整展示，導(dǎo)致需要水平拉伸司抱，降低了表格的可讀性筐眷。

針對上面這個問題上，可將所有的指標(biāo)名稱羅列在表格上方习柠，并提供多選操作浊竟，在默認(rèn)情況下僅展示最常用、最重要的幾個指標(biāo)（如下圖）津畸。這樣能讓用戶在表格上方看到所有指標(biāo)名稱振定，避免了原來需要水平拖拽而導(dǎo)致指標(biāo)瀏覽不全的情況。其次肉拓，用戶可以根據(jù)自己的需要后频，自由的選擇顯示所需指標(biāo)，隱藏不必要指標(biāo)暖途，減少干擾卑惜。

B端后臺通常會對應(yīng)不同的角色及不同的需求，可讓用戶根據(jù)自己的需求來定義表格的展示列及列的順序驻售。同時系統(tǒng)應(yīng)記住用戶上一次自定義列的設(shè)置露久。

控制行

控制行高

較小的行高讓用戶無需滾動頁面就能查看到更多的數(shù)據(jù)，但可掃描性的效果易導(dǎo)致視覺迷失欺栗。這就是為什么許多成功的數(shù)據(jù)表設(shè)計(jì)包含了控制行高(顯示密度)的功能毫痕。

樹形表

行也可以結(jié)構(gòu)化分為不同的類別，前面提到了層級表/樹形表迟几，可以嵌套子表格消请，展開和折疊±嗳可操作按鈕一般位于各級行標(biāo)題左側(cè)臊泰，具有獨(dú)特的視覺效果并具有擴(kuò)展或折疊的功能。單擊表中的類別標(biāo)題會在類別的展開或折疊狀態(tài)之間切換蚜枢。展開與折疊也將極大的影響行內(nèi)容顯示缸逃。

分頁

分頁可以將表內(nèi)容信息劃分成獨(dú)立的頁面來顯示。

優(yōu)點(diǎn)：

1.良好轉(zhuǎn)換：當(dāng)用戶是在結(jié)果列表中查找特定信息而不僅僅瀏覽信息流時厂抽，分頁就是好的選擇需频。你會知道表格總量與當(dāng)前頁的準(zhǔn)確數(shù)量，能夠決定在哪里停下或者去哪里修肠。

再次尋找特定數(shù)據(jù)時贺辰，分頁方案讓我們能夠大概定向到目標(biāo)數(shù)據(jù)位置。用戶可能難以記錄目標(biāo)數(shù)據(jù)頁精確數(shù)字，但一般能記錄大概范圍饲化，而頁碼鏈接能讓用戶更容易到達(dá)那里莽鸭。

2.掌控感：無限滾動就像個無止境空間——無論你滾動多久，你會感覺永遠(yuǎn)結(jié)束不了吃靠。當(dāng)用戶知道可用行數(shù)量時硫眨，他們可以自己主觀做出決定而不是被動滾動。同樣的巢块，當(dāng)用戶能夠看到結(jié)果的數(shù)量時礁阁，他們將能夠預(yù)估他們查看表數(shù)據(jù)大概要花費(fèi)多長時間。

缺點(diǎn)：

額外的動作：在分頁方案中族奢，用戶要到達(dá)下一頁表內(nèi)容姥闭，就必須點(diǎn)擊分頁控件上的按鈕跳轉(zhuǎn)，等待表格新內(nèi)容的加載越走。

無限滾動

表格無限下拉加載使用戶在數(shù)據(jù)內(nèi)容面前一直滾動查看棚品。向下滾動的時候不斷加載新內(nèi)容，雖然十分方便與誘人廊敌，但不是什么場景都適用铜跑。

優(yōu)點(diǎn)：

1.高效瀏覽：無線滾動提供了一個高效的方法讓用戶瀏覽表數(shù)據(jù)信息，而不必等待表格新內(nèi)容的加載骡澈。當(dāng)用戶并不特意尋找特定的內(nèi)容時锅纺，他們需要通過查看大量內(nèi)容找到自己中意的信息。

2.體驗(yàn)更好：用戶使用滾動能獲得比點(diǎn)擊分頁有更好的體驗(yàn)肋殴。滾動行為要比點(diǎn)擊更快更容易囤锉，對于那些連續(xù)且冗長的內(nèi)容，無限滾動要比把分頁的有更好的易用性疼电。尤其在表格區(qū)域狹小時嚼锄，使用無線滾動更能節(jié)省空間减拭。

缺點(diǎn)：

1.受限性能：頁面加載速度是良好體驗(yàn)的一切蔽豺。尤其是表格計(jì)算數(shù)據(jù)時需注意使用無限滾動，緩慢的加載速度會造成用戶的不耐煩與離開拧粪。用戶在一個表格頁面中越向下滾動修陡，就會加載更多的內(nèi)容，當(dāng)數(shù)據(jù)量過大時可霎，結(jié)果就是頁面性能越來越低魄鸦。

2.位置丟失：無線滾動同分頁相比，沒法標(biāo)記當(dāng)前位置且不能再隨意回到之前位置癣朗。一旦離開拾因，就會丟失當(dāng)前的瀏覽記錄，如果要回到上次的位置，必須得重新滾動去尋找绢记。當(dāng)用戶有這種行為的話扁达，無線滾動就會讓用戶產(chǎn)生困擾厭煩。尤其當(dāng)你刷新頁面時發(fā)現(xiàn)自己又回到表格頂部蠢熄，不得不重新滾動等待結(jié)果的加載以繼續(xù)查看跪解。

3.信息缺失：滾動條并沒有反映出實(shí)際數(shù)據(jù)量。假設(shè)快要接近底部了签孔，當(dāng)受到引誘滾動條再滾動一點(diǎn)點(diǎn)時叉讥，結(jié)果卻會發(fā)現(xiàn)表格數(shù)據(jù)量又刷新了。從一個可用性的角度來說饥追，打破滾動條的正常使用規(guī)則對用戶來講是糟糕的图仓。

一般來說，無限滾動適用于在數(shù)據(jù)有限且信息重復(fù)的表格但绕，有利于內(nèi)容探索透绩。分頁則適用用戶在尋找特定信息及瀏覽記錄，易快速訪問壁熄。

3.5 查看次要信息

表格內(nèi)容的取舍要建立在對業(yè)務(wù)的了解之上帚豪，盡量精簡指標(biāo)，隱藏不必要信息草丧，減少干擾狸臣，避免無主次的鋪出所有信息。不要讓用戶一次性接收過于龐大的信息量昌执，建議默認(rèn)只展示用戶所必須的信息烛亦，其他次要信息通過展開下拉等方式展示，為輔助信息提供深層入口懂拾。

展開行

展開行允許用戶無需打開新頁面在表格內(nèi)即可查看附加信息煤禽，防止用戶迷失。

子表格

表格中打開表格岖赋，表格組節(jié)把相關(guān)的行組合在一起檬果，并且能夠收縮和展開，各組節(jié)層級要有樣式區(qū)別唐断。如有需要选脊，在每個組節(jié)里可以顯示數(shù)據(jù)概要信息。

彈窗

包括模態(tài)彈窗和非模態(tài)彈窗脸甘，模態(tài)彈窗是僅支持打開一個彈窗進(jìn)行詳細(xì)查看恳啥，非模態(tài)彈窗是可以同時打開多個，并允許拖動彈窗位置進(jìn)行信息對比丹诀。

模態(tài)允許用戶留在表格視圖中钝的，且更多地關(guān)注附加信息和操作：

非模態(tài)彈窗對于主動使用的用戶來說可能很有用翁垂，可以通過一系列操作，比較不同行數(shù)據(jù)的細(xì)節(jié)：

視圖切換

可以通過視圖切換查看更多細(xì)節(jié)硝桩，比如在“表格”和“左列表+右詳情”之間切換沮峡，或者提供“只看文本，看文本和縮略圖亿柑，只看縮略圖”幾種查看方式邢疙。相比彈窗減少了頁面層級和隔離感。單擊行鏈接將表格轉(zhuǎn)換為左側(cè)的列表項(xiàng)目和右側(cè)的其他詳細(xì)信息望薄，這讓用戶能夠解析大型數(shù)據(jù)集疟游，而且在涉及到多個項(xiàng)目時不會丟失位置。

3.6 數(shù)據(jù)的編輯操作

編輯表格數(shù)據(jù)在大眾化的Web應(yīng)用程序中并不常見痕支。不過颁虐，在企業(yè)級Web應(yīng)用程序中，表格則占據(jù)統(tǒng)治地位卧须。此時另绩，最常見的用戶需求，就是想要像使用Excel一樣實(shí)現(xiàn)表格編輯花嘶。畢竟Excel早已成為編輯網(wǎng)格數(shù)據(jù)的一種標(biāo)準(zhǔn)笋籽。

表格數(shù)據(jù)的操作大體可分為顯性與隱性。顯性操作椭员，指操作選項(xiàng)顯示在行內(nèi)车海，直觀明了；隱性操作隘击，當(dāng)鼠標(biāo)懸停時或勾選才顯示操作選項(xiàng)侍芝，界面簡潔明快，可減輕空間壓力埋同，減少干擾州叠。

單行操作和批量操作

操作項(xiàng)一般存在于行數(shù)據(jù)最后，為固定列凶赁，或表上方位置咧栗，兩者對應(yīng)多種操作場景。

單行數(shù)據(jù)操作

文字按鈕操作項(xiàng)一般不多于三個時哟冬，圖標(biāo)按鈕不多于四個時楼熄，操作項(xiàng)跟在行條目后面；當(dāng)超過時浩峡，建議將操作折疊收起，點(diǎn)擊更多彈出多個操作選項(xiàng)错敢。當(dāng)操作按鈕致灰時翰灾，鼠標(biāo)選中可顯示原因缕粹。

如果行操作不那么重要，或者說行操作過于啰嗦影響用戶閱讀時纸淮，可使用隱形操作平斩，鼠標(biāo)在行區(qū)域懸停時，可對當(dāng)前行背景作出區(qū)分咽块，或放大懸停區(qū)域绘面，同時行尾出現(xiàn)可操作按鈕，進(jìn)行行操作侈沪。如谷歌郵箱：

批處理操作

對于數(shù)據(jù)批量操作的場景揭璃，建議將操作放到表格上方，與復(fù)選框操作配合使用亭罪。批處理操作模式允許用戶對一行或多行對象執(zhí)行操作瘦馍，并在選中復(fù)選框后激活表上方操作按鈕，如刪除应役、批準(zhǔn)情组、拒絕、復(fù)制之類的操作箩祥，這將節(jié)省用戶時間院崇，避免重復(fù)對多行進(jìn)行相同操作。

表格上方的所有篩選或搜索按鈕可能會因操作按鈕出現(xiàn)過多而暫時隱藏袍祖，如果空間限制導(dǎo)致操作按鈕排列不下亚脆，則使用“更多操作”按鈕。

二次確認(rèn)提示：對于用戶操作結(jié)果給出提示窗反饋盲泛，用戶點(diǎn)擊「刪除」后濒持，直接操作；出現(xiàn)提示框告知用戶操作成功寺滚，并提供用戶「撤銷」的按鈕柑营；用戶進(jìn)行下一個操作或者15s內(nèi)不進(jìn)行任何操作，提示框消失村视，用戶無法再「撤銷」官套。

在執(zhí)行某些無法撤銷的操作時，點(diǎn)擊刪除后蚁孔，出現(xiàn)模態(tài)彈窗進(jìn)行二次確認(rèn)奶赔，在當(dāng)前頁面完成任務(wù)。同時禁止濫用模態(tài)彈窗進(jìn)行二次確認(rèn)杠氢，就既打斷用戶心流（無法將上下文帶到彈出框中）站刑，也無法避免失誤的發(fā)生。

單選鼻百、多選和全選

數(shù)據(jù)較多時绞旅，單個選擇數(shù)據(jù)費(fèi)時費(fèi)力摆尝。單選框是只能單選，而復(fù)選框是能選擇單個因悲、多個或全部選擇項(xiàng)堕汞，而實(shí)際上純粹的單選很少見，所以建議一般場景下在表格最左側(cè)加上復(fù)選框晃琳，如前面說到的批量操作讯检，多選后，就可以批量操作卫旱。點(diǎn)擊選框所在行的局部能讓整行被選中人灼，每個選定的行都接受突出顯示處理，這種做法可增大點(diǎn)擊區(qū)域減少界面的混亂誊涯。

具體設(shè)計(jì)時挡毅，可以按照數(shù)據(jù)類型進(jìn)行選擇漠吻，如郵件已讀桶略、未讀等。

可進(jìn)行選擇的表格需告知用戶已選數(shù)據(jù)量镇饮，在翻頁時是否允許跨頁選擇取逾；全選是當(dāng)前頁視圖中的所有項(xiàng)目還是選擇表格中的所有項(xiàng)目耗绿。

單元格編輯、行編輯與表格編輯

針對于需要進(jìn)行數(shù)據(jù)編輯的表格砾隅。表內(nèi)編輯能使數(shù)據(jù)更具可操作性误阻，表內(nèi)編輯一般優(yōu)于彈窗。要啟動編輯功能晴埂，必須通過鼠標(biāo)單擊究反，而非鼠標(biāo)懸停。這樣就能確保整潔的網(wǎng)格顯示效果儒洛。假如是通過鼠標(biāo)懸停來觸發(fā)精耐，鼠標(biāo)每經(jīng)過一個單元格就得顯示一個編輯框，那這種編輯模式就會干擾到不同單元格間的切換琅锻，會有多么煩人卦停。

單元格編輯：針對單個，不連續(xù)的可編輯的單元格恼蓬，為了讓功能更容易被發(fā)現(xiàn)惊完，可以在單元格數(shù)據(jù)旁放置編輯圖標(biāo)，這樣可編輯和不可編輯的單元格視覺對比就十分明顯处硬。單擊該圖標(biāo)即可觸發(fā)編輯小槐，單元格內(nèi)出現(xiàn)輸入框，保存數(shù)據(jù)并退出郁油。有了這個隨時可見的鏈接后本股，編輯功能就更容易被注意到了攀痊。

單元格編輯時桐腌，也可以設(shè)置整個單元格為熱區(qū)拄显，以便用戶觸發(fā)。

覆蓋層編輯：點(diǎn)擊編輯圖標(biāo)觸發(fā)案站；通過在頁面上方添加一層來放置編輯數(shù)據(jù)躬审。雖然編輯期間也不會離開當(dāng)前頁面，但卻不是在頁面中直接實(shí)現(xiàn)編輯蟆盐。而是把一個輕量級的彈出式覆蓋層（如對話框）作為編輯窗口承边。

選擇覆蓋層編輯而非行內(nèi)編輯的原因也很多。有時候石挂，不可能把某個復(fù)雜的編輯任務(wù)安排在同一個頁面中完成博助，如果嵌入頁面的編輯區(qū)域太大，會因?yàn)榘褍?nèi)容過多地推向下方而損害頁面的整體感痹愚。

而其他情況下富岳，也可以選擇中斷當(dāng)前頁面流，尤其是被編輯的信息本身非常重要時拯腮。覆蓋層能夠?yàn)橛脩籼峁┟鞔_的編輯空間窖式。提示如果有必要占用專門的屏幕空間放置編輯窗格，而且頁面的上下文對編輯任務(wù)也不重要动壤，就可以考慮使用覆蓋層編輯萝喘。

行編輯：針對同一行標(biāo)簽下的數(shù)據(jù)編輯。新增數(shù)據(jù)行后琼懊，視圖定位到新增的行并高亮顯示阁簸，讓用戶快速聚焦。幾秒后高亮消失哼丈，以免過度干擾用戶启妹。

不過，表內(nèi)編輯圖標(biāo)會涉及平衡頁面中視覺干擾的問題削祈，如果功能及其提示在頁面中的數(shù)量過多翅溺，很可能造成功能的利用率下降。如果一行有多個編輯選項(xiàng)髓抑，則可以適當(dāng)使用彈窗編輯數(shù)據(jù)咙崎；如果表格有大部分單元格數(shù)據(jù)需要編輯，則可以全局編輯吨拍。

全局表格編輯：點(diǎn)擊表格編輯按鈕褪猛，當(dāng)前表格所有可編輯的數(shù)據(jù)單元格內(nèi)顯示文本修改框或類似XLSX的角標(biāo)，進(jìn)入一種特殊得編輯狀態(tài)羹饰，不會給人直覺造成混亂伊滋。這一功能基本用于大面積需要填寫和修改時碳却，如大型填寫報表。

大型數(shù)據(jù)表由于支持編輯數(shù)據(jù)處多笑旺，這種方法的另一個問題是容易填錯單元格昼浦，想象單元格的密集，用戶意外編輯錯誤也時有發(fā)生筒主，這樣的話需要編輯/暫存/提交三個操作关噪。如果發(fā)現(xiàn)編輯的內(nèi)容報錯可被更正，應(yīng)直接引導(dǎo)用戶更正乌妙；如果報錯內(nèi)容不可被更正使兔，則告知用戶原因。

大型數(shù)據(jù)表如需減少與表格無關(guān)的視覺干擾藤韵，提供表格的沉浸式閱讀體驗(yàn)虐沥，可提供全屏查看的入口，但應(yīng)注意可以讓用戶便捷的退出泽艘。全屏模式可以直接屏蔽掉頁面其它內(nèi)容欲险，只留下表格區(qū)域，用戶通過ESC鍵或按鈕隨時退出全屏模式悉盆，學(xué)習(xí)成本較低盯荤。

當(dāng)表格數(shù)據(jù)為空時，在表格的空白內(nèi)容處加入可創(chuàng)建的快捷入口焕盟，引導(dǎo)用戶新建表格數(shù)據(jù)秋秤，或者導(dǎo)入數(shù)據(jù)。如下圖郵箱已發(fā)送郵箱為空時：

當(dāng)沒有創(chuàng)建訴求的脚翘，直接告之暫無數(shù)據(jù)灼卢。如數(shù)據(jù)是系統(tǒng)產(chǎn)生的，不是由用戶創(chuàng)建的来农，直接告之暫無數(shù)據(jù)鞋真，話術(shù)的表述則需與后臺文案的整體風(fēng)格保持一致。

后記

個人關(guān)于web表格設(shè)計(jì)的看法基本寫完了沃于，在總結(jié)歸納中也發(fā)現(xiàn)了自己平常設(shè)計(jì)表格中的其他問題涩咖。大多表格設(shè)計(jì)在不同場景中需要隨機(jī)應(yīng)變，沒有絕對的規(guī)范繁莹，只有相對的規(guī)范檩互。我們要理解規(guī)范背后的原則，推導(dǎo)出適應(yīng)其他場景的規(guī)范咨演。

歡迎留言糾正闸昨，感謝閱讀。

我是一只小龍，請鞭撻我吧饵较！

參考資料：

1.web表格設(shè)計(jì)攻略http://www.woshipm.com/ucd/714641.html

2.B端后臺數(shù)據(jù)的表格的易讀性和易操作性體驗(yàn)http://www.woshipm.com/pd/1657136.html

3.螞蟻設(shè)計(jì)模式https://ant.design/docs/spec/alignment-cn

4.設(shè)計(jì)表格的可重用性https://uxdesign.cc/designing-tables-for-reusability-490a3760533

5.數(shù)據(jù)表的用戶界面最佳設(shè)計(jì)http://www.woshipm.com/pd/661699.html

6.樹形控件在生產(chǎn)力工具中的設(shè)計(jì)https://zhuanlan.zhihu.com/p/260068653

7.element組件庫：https://element.eleme.cn/#/zh-CN/component/table