web頁(yè)面中表格設(shè)計(jì)攻略

在后臺(tái)管理系統(tǒng)、數(shù)據(jù)類(lèi)產(chǎn)品等的設(shè)計(jì)中，表格作為一種常見(jiàn)的信息組織整理手段，甚至是web頁(yè)面的基礎(chǔ)設(shè)施之一，其重要性不言自明。結(jié)合最近做的幾個(gè)項(xiàng)目和相關(guān)設(shè)計(jì)經(jīng)驗(yàn)總結(jié)，特此整理出這樣一篇設(shè)計(jì)攻略，希望能夠?qū)δ愕脑O(shè)計(jì)有所幫助。

表格的定義與用途

表格的定義

表格是用來(lái)收集、整理、組織、分析數(shù)據(jù)的二維矩陣。一般來(lái)說(shuō)，由行、列分割而成的單元格是構(gòu)成表格的基本元素。表格的行、列之間相互獨(dú)立又相互關(guān)聯(lián)，充滿(mǎn)變化。行與列形成了單元格的長(zhǎng)與高，不同的長(zhǎng)高有著疏密之別，進(jìn)而使表格產(chǎn)生充實(shí)或透氣之感。

表格的用途

表格是常見(jiàn)的信息組織手段，是web頁(yè)面布局的重要組成部分，可用于保存和展示少量或大量結(jié)構(gòu)化數(shù)據(jù)、靜態(tài)數(shù)據(jù)以及處于變化中的數(shù)據(jù)。具體說(shuō)來(lái)，表格結(jié)構(gòu)簡(jiǎn)單，分隔明確，可保證信息可讀性，易于用戶(hù)快速掃描瀏覽并獲取所需;數(shù)據(jù)經(jīng)過(guò)歸納整理和合理布局后，更易于用戶(hù)感知分辨其中的差異與變化、關(guān)聯(lián)與區(qū)別，并進(jìn)行對(duì)比分析;交互層面，用戶(hù)可以對(duì)數(shù)據(jù)信息進(jìn)行排序、搜索、篩選、以及相關(guān)業(yè)務(wù)處理等復(fù)雜操作。

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

表格的構(gòu)成

1、內(nèi)部構(gòu)成元素

內(nèi)部構(gòu)成元素包括標(biāo)題、表頭、表體、表尾等。標(biāo)題是對(duì)表格信息內(nèi)容的整體概括，可包含數(shù)據(jù)來(lái)源及屬性(日期、地區(qū)等)，以便用戶(hù)對(duì)表格內(nèi)容有整體認(rèn)知。表頭一般指列標(biāo)簽，這里也指首列行標(biāo)簽，是對(duì)所屬行或列信息的描述。表尾一般是統(tǒng)計(jì)信息，例如總計(jì)、平均數(shù)等。

2、外部相關(guān)元素

外部相關(guān)元素包括篩選區(qū)、按鈕區(qū)、底欄等。篩選區(qū)包含模糊搜索和條件篩選。按鈕區(qū)的按鈕可分為增刪改操作和業(yè)務(wù)處理操作。底欄一般放統(tǒng)計(jì)信息、分頁(yè)等內(nèi)容。

表格的基本布局

一般來(lái)說(shuō)，表格有水平型、垂直型和矩陣型三種布局。水平布局會(huì)弱化列的存在，強(qiáng)調(diào)信息的連貫性，保證用戶(hù)閱讀信息時(shí)視覺(jué)流是從左到右的，然后自上而下逐條掃描，適合大量信息的瀏覽。垂直布局是在行分割的基礎(chǔ)上，通過(guò)強(qiáng)化列的視覺(jué)特征來(lái)突出行間信息的對(duì)比。矩形布局的表格有均勻而明顯的分割線(xiàn)，邊框單元格比較明顯，適用于列信息較多而沒(méi)有足夠空間用留白來(lái)分割信息時(shí)。

設(shè)計(jì)原則與目標(biāo)

表格的設(shè)計(jì)集中體現(xiàn)在可視化(可讀性)和易操作兩個(gè)方面，好的數(shù)據(jù)表格允許用戶(hù)對(duì)信息進(jìn)行快速的掃描、查詢(xún)、過(guò)濾、分析等操作，以獲取深刻認(rèn)知并快速準(zhǔn)確完成目標(biāo)任務(wù)。其基本設(shè)計(jì)原則是“全面整合并呈現(xiàn)業(yè)務(wù)數(shù)據(jù)，提供順暢閱讀體驗(yàn)，便于用戶(hù)發(fā)掘重要信息，進(jìn)行便捷操作”，簡(jiǎn)而言之，即“滿(mǎn)足業(yè)務(wù)需求+符合用戶(hù)心智模型”。

如果處理得當(dāng)，復(fù)雜的數(shù)據(jù)也能讓用戶(hù)輕松瀏覽和比較;處理不善，簡(jiǎn)單的表格也會(huì)令用人難以理解。要平衡用戶(hù)的瀏覽目的和設(shè)計(jì)者的傳達(dá)目的，對(duì)部分信息進(jìn)行強(qiáng)調(diào)或弱化處理。其中，如何讓表格在表現(xiàn)層傳達(dá)更好，考驗(yàn)UI的視覺(jué)表現(xiàn)功底;如何讓表格在結(jié)構(gòu)層更合理、在操作層更易用，則考驗(yàn)交互設(shè)計(jì)師的數(shù)據(jù)整合功力。

表格是為可讀性而生的，一個(gè)結(jié)構(gòu)清晰的布局能大大提升用戶(hù)對(duì)信息的接收速度和理解程度。因此，設(shè)計(jì)易讀，易掃視，易比較，易操作的表格結(jié)構(gòu)是表格設(shè)計(jì)的首要目標(biāo)。

設(shè)計(jì)技巧：視覺(jué)篇

精簡(jiǎn)數(shù)據(jù)，明確信息優(yōu)先級(jí)

雖然終極技巧是“在全面了解實(shí)際業(yè)務(wù)需求的基礎(chǔ)上進(jìn)行靈活設(shè)計(jì)”，但對(duì)于不熟悉業(yè)務(wù)的交互設(shè)計(jì)師而言，數(shù)據(jù)的取舍和處理卻是最難的。對(duì)表格內(nèi)容的取舍要建立在對(duì)業(yè)務(wù)的了解之上，盡量精簡(jiǎn)指標(biāo)，隱藏不必要信息，減少干擾，避免無(wú)主次的鋪出所有信息。不要讓用戶(hù)一次性接收過(guò)于龐大的信息量，尤其不要超出用戶(hù)的視線(xiàn)范圍，避免通過(guò)拖拽的方式查看信息。建議默認(rèn)只展示用戶(hù)所必須的信息，其他次要信息通過(guò)展開(kāi)下拉等方式展示，為輔助信息提供深層入口。

表頭的優(yōu)化

(1)精簡(jiǎn)表頭信息

表頭標(biāo)簽應(yīng)該簡(jiǎn)煉準(zhǔn)確，以達(dá)到節(jié)省表頭空間和減輕視覺(jué)壓力的作用，讓用戶(hù)注意力聚焦在數(shù)據(jù)本身。如果精簡(jiǎn)后的生僻字段難以自我解釋?zhuān)梢愿粋€(gè)釋義標(biāo)識(shí)，鼠標(biāo)懸停時(shí)出現(xiàn)該字段的詳細(xì)解釋?zhuān)瑫r(shí)滿(mǎn)足新手用戶(hù)、普通用戶(hù)以及專(zhuān)家用戶(hù)的需求。

(2)情況允許時(shí)，去掉表頭

如果表格數(shù)據(jù)可以自我解釋?zhuān)眍^就不是必須的。

(3)采用多級(jí)表頭整合信息

數(shù)據(jù)結(jié)構(gòu)比較復(fù)雜的時(shí)候，可使用多級(jí)表頭來(lái)體現(xiàn)數(shù)據(jù)的層次關(guān)系。

(4)功能復(fù)合型表頭

除了容納行標(biāo)簽之外，表頭也可以包含排序、搜索、篩選等功能。

行的優(yōu)化

(1)合適的行高

行高是非常重要的參數(shù)，直接影響著閱讀體驗(yàn)。較小的行高能承載更多信息，讓用戶(hù)無(wú)需滾動(dòng)鼠標(biāo)即可看到更多數(shù)據(jù)，但會(huì)降低掃描效果，導(dǎo)致視覺(jué)解析錯(cuò)誤。適宜的行高使得頁(yè)面更透氣，但并不是越大越好。設(shè)置行高的原則是：A.單行顯示時(shí)，數(shù)據(jù)顯示緊湊、有序。B.多行顯示時(shí)，弱化表格形式，提供豐富的視覺(jué)展現(xiàn)。因此，對(duì)于單行顯示的表格，建議行高為字體高度的2.5倍到3倍;對(duì)于多行顯示的表格，建議內(nèi)容區(qū)到上下邊框的距離略小于文字高度。當(dāng)然，也可以提供切換按鈕讓用戶(hù)自己控制顯示密度。

(2)橫向斑馬線(xiàn)

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

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

有時(shí)為強(qiáng)調(diào)行內(nèi)信息的連續(xù)性(此時(shí)不強(qiáng)調(diào)行間數(shù)據(jù)的對(duì)比)，可去掉單元格的縱向分割線(xiàn)，僅使用橫向分割線(xiàn)和底色分割，使橫向信息更加連續(xù)通暢，以提升閱讀效率。此時(shí)，可以對(duì)行內(nèi)信息進(jìn)行擴(kuò)充(例子：淘寶商品頁(yè))，進(jìn)一步弱化表格形式，豐富各類(lèi)信息的視覺(jué)呈現(xiàn)，同時(shí)兼顧行與行之間的關(guān)鍵信息的對(duì)比。

列的優(yōu)化

(1)合適的列寬

列寬的處理有三種方式。第一，可以按字段類(lèi)型和內(nèi)容給出固定寬度，如姓名100px，手機(jī)號(hào)150px，地址200px;第二，可以固定部分列的寬度，其余列則按百分比處理;第三，在固定寬度的基礎(chǔ)上，允許用戶(hù)自由拖動(dòng)調(diào)整列寬的大小。

(2)縱向斑馬線(xiàn)

即間列換色，是垂直版的隔行變色，用于強(qiáng)化列與列之間的差異，用處有限。

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

一般列的強(qiáng)調(diào)是配合表格列排序功能使用的，如點(diǎn)擊率、訪(fǎng)問(wèn)量的排序。有時(shí)會(huì)使用不同粗細(xì)的縱向分割線(xiàn)對(duì)信息進(jìn)行區(qū)隔，增加同類(lèi)信息對(duì)比性。

分割線(xiàn)的處理

正確使用分割線(xiàn)可以實(shí)現(xiàn)對(duì)表格行與列的強(qiáng)調(diào)。首先，做純粹客觀(guān)的數(shù)據(jù)展示時(shí)會(huì)使用同樣顏色和透明度的橫縱分割線(xiàn)或斑馬線(xiàn)，此時(shí)不強(qiáng)調(diào)單個(gè)數(shù)據(jù)或者數(shù)據(jù)之間的關(guān)系，避免帶來(lái)錯(cuò)誤的引導(dǎo)。其次，展示獨(dú)立數(shù)據(jù)時(shí)需要弱化縱向分割線(xiàn)，會(huì)采用斑馬線(xiàn)和懸浮高亮底色的方式以體現(xiàn)一條數(shù)據(jù)的完整性。

最后，處理具有明確類(lèi)別指向的數(shù)據(jù)時(shí)，在橫線(xiàn)均勻分割的基礎(chǔ)上，往往會(huì)用不同的縱向分隔線(xiàn)對(duì)數(shù)據(jù)進(jìn)行分類(lèi)區(qū)隔，以表達(dá)數(shù)據(jù)之間的類(lèi)別關(guān)系。

對(duì)齊規(guī)則

合適的對(duì)齊方式能夠提升數(shù)據(jù)的瀏覽效率。表格內(nèi)信息的縱向列對(duì)齊(符合格式塔心理學(xué)中相近原則)能夠很好的形成視覺(jué)引導(dǎo)線(xiàn)。通過(guò)對(duì)齊，會(huì)讓表格更加規(guī)范易理解，給用戶(hù)視覺(jué)上的統(tǒng)一感，視線(xiàn)流動(dòng)更順暢，讓用戶(hù)快速的捕捉到所需內(nèi)容。

(1)按字符長(zhǎng)度定義：

(2)按數(shù)據(jù)類(lèi)型定義：

(3)其他特殊規(guī)則：

數(shù)字的處理

(1)數(shù)字和單位的使用

對(duì)數(shù)字字體而言，從高度上看可分為舊體數(shù)字與等高數(shù)字(舊體數(shù)字能很好匹配小寫(xiě)字母)，從寬度上看可分為比例數(shù)字和表格數(shù)字(表格數(shù)字的每一個(gè)尺寸都相對(duì)獨(dú)立，方便縱向?qū)R)。其中的關(guān)鍵區(qū)別在于數(shù)字“1”，為了更好對(duì)齊和對(duì)比，建議使用等寬的表格字體。數(shù)據(jù)的度量單位無(wú)需重復(fù)，只需要在表頭標(biāo)識(shí)清楚即可。

(2)減少用戶(hù)計(jì)算

對(duì)于進(jìn)行對(duì)比分析的數(shù)據(jù)，在原始數(shù)據(jù)的基礎(chǔ)上給出差值、升降變化、總計(jì)值、平均值等分析性的數(shù)據(jù)處理結(jié)果，直達(dá)用戶(hù)獲取信息的目標(biāo)(需要明確用戶(hù)目標(biāo))，而盡量減少用戶(hù)心算或者線(xiàn)下處理的過(guò)程，如股票數(shù)據(jù)變化，音樂(lè)排行榜等，能顯著提升信息的閱讀和理解效率。

(3)空白單元格處理

一般指空數(shù)據(jù)或零數(shù)據(jù)的情況，空白單元格容易造成用戶(hù)困惑甚至誤解，用戶(hù)會(huì)搞不清楚到底是沒(méi)有數(shù)據(jù)，還是數(shù)值為零。正確做法是，對(duì)于不存在的數(shù)據(jù)，單元格不能空置，要用短橫線(xiàn)代替，表示該項(xiàng)數(shù)據(jù)不存在，給用戶(hù)明確指示;對(duì)于數(shù)據(jù)為零的單元格，要填上0，且小數(shù)點(diǎn)后位數(shù)、單位，都要與上下單元格保持一致。

設(shè)計(jì)視覺(jué)層級(jí)，高亮重點(diǎn)信息，引導(dǎo)讀者視線(xiàn)

(1)顏色的使用

顏色和可讀性是密切相關(guān)的，所以要合理的使用顏色，盡量使用簡(jiǎn)單的背景色和點(diǎn)綴色。背景色方面，除了行/列交替顏色(可以區(qū)隔內(nèi)容，引導(dǎo)視線(xiàn))、懸停高亮底色(便于準(zhǔn)確辨別光標(biāo)所在行)等處理方法，還可以對(duì)表頭表尾進(jìn)行視覺(jué)區(qū)分。

(2)足夠的留白

既包括保證數(shù)據(jù)單元格之間的留白，又包括單元格內(nèi)部(padding)留白，以保證易讀性。

(3)其他視覺(jué)突出手段

通過(guò)調(diào)整背景顏色、放大局部元素、顏色區(qū)分、icon點(diǎn)綴等手段，以及高亮強(qiáng)調(diào)重要的行和列，使重要信息突出，提高用戶(hù)的閱讀速度，幫助用戶(hù)快速定位重點(diǎn)信息。

(4)層級(jí)處理方法

通過(guò)調(diào)整標(biāo)題、標(biāo)簽的字體，邊框線(xiàn)的設(shè)計(jì)，底色的運(yùn)用等，區(qū)分不同的功能模塊，從而設(shè)計(jì)出合理的視覺(jué)層級(jí)，活躍表格氛圍，引導(dǎo)用戶(hù)的視線(xiàn)流動(dòng)。

減少裝飾元素，降低視覺(jué)噪音

信息內(nèi)容的有效傳達(dá)是表格設(shè)計(jì)的本質(zhì)，就表格本身而言應(yīng)該是隱型的，應(yīng)該讓用戶(hù)注意力聚焦在核心內(nèi)容上。所以，做減法設(shè)計(jì)就顯得尤為可貴。

(1)減少分隔線(xiàn)

水平分割線(xiàn)能顯著減輕長(zhǎng)表格在垂直方向的視覺(jué)重量，加快大量數(shù)值的對(duì)比工作。但如果在表格中使用適合的對(duì)齊方式，豎直分隔線(xiàn)完全是多余的。它們大的貢獻(xiàn)就是縮減元素之間的距離后也能區(qū)分不同元素。即使要用，也要非常淡，不能妨礙快速瀏覽。

(2)不使用斑馬線(xiàn)

使用不同底色區(qū)分指示不同類(lèi)型的數(shù)據(jù)(如總和、平均值)是有必要的，但是斑馬線(xiàn)在很多時(shí)候是沒(méi)有必要的，因?yàn)樗鼈兪峭活?lèi)數(shù)據(jù)，而且水平分割線(xiàn)就已經(jīng)能夠明顯區(qū)隔。

(3)盡量以黑白為主

運(yùn)用彩色表達(dá)組織或含義可能會(huì)增加誤解，并且引發(fā)視覺(jué)障礙者的易用性問(wèn)題。

(4)減少其他圖形元素的使用

其他圖形元素，如星號(hào)，三角，圓點(diǎn)，對(duì)勾，叉等，雖然能夠幫助組織數(shù)據(jù)、更直觀(guān)的傳達(dá)信息，但物極必反，少即是多，要注意克制這些元素的使用。

可視化趨勢(shì)

(1)圖表的使用

除了在單元格中引用圖表之外，很多時(shí)候都會(huì)提供圖表/表格視圖切換，便于用戶(hù)從圖形角度查看、分析自己關(guān)注的數(shù)據(jù)。有時(shí)也會(huì)有“圖表+表格”的形式，這時(shí)候，表格往往只作為明細(xì)放在頁(yè)面底部。

(2)卡片的使用

在信息量較少或特別多的情況下可以用卡片的形式來(lái)展示信息，將信息以組的概念呈現(xiàn)，單張卡片內(nèi)的信息按優(yōu)先級(jí)進(jìn)行排列。此外，卡片彼此之間又形成一個(gè)整體。

設(shè)計(jì)技巧：交互篇

關(guān)鍵字搜索

用戶(hù)可以通過(guò)輸入特殊條件進(jìn)行搜索，從而快速定位到所需的目標(biāo)數(shù)據(jù)條目。搜索輸入框盡量采用模糊搜索，不要讓用戶(hù)去辨認(rèn)、識(shí)別要輸入的內(nèi)容。模糊搜索一般單獨(dú)使用，或者和篩選區(qū)進(jìn)行明顯隔離后使用。篩選為主要場(chǎng)景時(shí)，搜索框可以作為篩選條件之一。搜索為主要場(chǎng)景時(shí)，篩選區(qū)可看做高級(jí)搜索隱藏起來(lái)。個(gè)人認(rèn)為搜索和篩選同時(shí)使用在大多數(shù)情況下都是多余的，因?yàn)樗殉鰜?lái)的結(jié)果已經(jīng)比較明確了，而篩選一般有比較明確的業(yè)務(wù)目的。而關(guān)鍵的沖突在于觸發(fā)方式的不同，篩選有“實(shí)時(shí)篩選”和“點(diǎn)擊查詢(xún)按鈕觸發(fā)篩選”兩種，而搜索大部分是“觸發(fā)搜索”，實(shí)時(shí)的比較少。

在樣式上，搜索可以分為簡(jiǎn)單搜索、標(biāo)簽搜索、列標(biāo)簽搜索、高級(jí)搜索等四類(lèi)。簡(jiǎn)單搜索由一個(gè)搜索框和一個(gè)按鈕組成，搜索框內(nèi)有提示語(yǔ)告訴用戶(hù)可以輸入哪些內(nèi)容，支持模糊查詢(xún)，可以實(shí)時(shí)搜索或觸發(fā)點(diǎn)擊搜索。特殊情況下，可以輸入多個(gè)條件同時(shí)篩選，取并集或取交集。標(biāo)簽搜索指的是先選擇搜索種類(lèi)，再輸入內(nèi)容，由于每次只能對(duì)單一條件進(jìn)行搜索，因此準(zhǔn)確性更高。列標(biāo)簽搜索是指在一些特定標(biāo)簽上加上搜索框。高級(jí)搜索即點(diǎn)擊更多展開(kāi)更多篩選條件，減少了更多條件對(duì)用戶(hù)的干擾，但降低了易發(fā)現(xiàn)性。

條件篩選

篩選按照觸發(fā)方式可分為觸發(fā)篩選和實(shí)時(shí)篩選，一般情況下，篩選條件存在交叉時(shí)使用觸發(fā)篩選，不存在交叉時(shí)使實(shí)時(shí)篩選。但是在后臺(tái)條件允許的情況下，發(fā)現(xiàn)型網(wǎng)站一般建議實(shí)時(shí)篩選，也可以根據(jù)篩選條件的數(shù)量選擇合適的觸發(fā)方式，比如條件少時(shí)用實(shí)時(shí)篩選，條件多時(shí)用觸發(fā)篩選。

對(duì)于篩選條件有交叉的場(chǎng)景，建議采用展開(kāi)形式，并手動(dòng)觸發(fā)刷新。對(duì)于篩選條件沒(méi)有交叉的場(chǎng)景，當(dāng)條件少于五個(gè)，采用tab切換;超過(guò)五個(gè)少于二十個(gè)，采用下拉選擇;多于二十五個(gè)，為下拉選擇添加模糊匹配，并且實(shí)時(shí)刷新。

其中，tab切換適合沒(méi)有交集的內(nèi)容，需要按照特定順序分類(lèi)，并保證分類(lèi)覆蓋所有情況，也不宜過(guò)多。對(duì)于需輸入篩選條件的場(chǎng)景，如日期篩選條件，展示出來(lái)。下拉選擇比tab占的空間小，但建議把重要項(xiàng)默認(rèn)顯示，下拉列表內(nèi)也可以加入單選按鈕或者復(fù)選框。表頭篩選更節(jié)省空間，不過(guò)一次只能篩選一類(lèi)條件。全部顯示篩選項(xiàng)適用于輸入項(xiàng)相對(duì)很少的情況。

提供自定義列

為了滿(mǎn)足多個(gè)角色在不同情況下的業(yè)務(wù)需求，系統(tǒng)往往采取寧多勿少的原則盡可能提供詳細(xì)的數(shù)據(jù)給用戶(hù)，結(jié)果造成表格指標(biāo)過(guò)多，難以在一個(gè)屏幕內(nèi)展示完全，需要橫向拉伸，降低了易讀性。在這個(gè)問(wèn)題上可以采用的方法是給默認(rèn)表格提供通用的字段指標(biāo)，然后用戶(hù)可根據(jù)自身所需添加或調(diào)整系統(tǒng)所提供的其它字段指標(biāo)，讓彈性化的表格滿(mǎn)足用戶(hù)的個(gè)性化需求。

這樣做首先可以讓用戶(hù)在表格上方看到所有的指標(biāo)名稱(chēng)，避免了原來(lái)需要橫向拖拽才能瀏覽到所有指標(biāo)的情況;其次，用戶(hù)可以根據(jù)自己的需要，自由選擇所要顯示的指標(biāo)，隱藏不必要指標(biāo)，減少干擾。有的表格除了自定義列，還允許自定義排序。

排序

通過(guò)排序可以快速發(fā)掘出用戶(hù)關(guān)注的信息，幫助用戶(hù)發(fā)現(xiàn)信息條目之間的關(guān)系，提高關(guān)鍵條目的優(yōu)先級(jí)。排序的列和不排序的列應(yīng)該有明顯區(qū)分，最好對(duì)某個(gè)重要列進(jìn)行默認(rèn)的排序。排序可以增加表格活力，一般有升序和降序兩種方式。比較常見(jiàn)的是上下空心箭頭表示默認(rèn)，上箭頭為升序，下箭頭為降序。這種方式占空間較少，但認(rèn)知有一定困難，且不適合排序方式較多的情況。排序方式較多時(shí)應(yīng)采用下拉選擇，因?yàn)檫@樣信息展示最直接有效，且能減少反復(fù)操作的次數(shù)。

滾動(dòng)與固定

隨著行和列的增加，用戶(hù)的瞬時(shí)記憶會(huì)達(dá)到極限，超過(guò)“7±2原則”的范圍，用戶(hù)需要依靠輔助信息去閱讀表格內(nèi)的數(shù)據(jù)，防止遺忘某列數(shù)據(jù)的意義。設(shè)計(jì)大數(shù)據(jù)量表格時(shí)，不得不通過(guò)拖拽橫向或縱向滾動(dòng)條來(lái)閱讀數(shù)據(jù)，此時(shí)，固定表格的表頭或行標(biāo)題列，可以幫助用戶(hù)在閱讀過(guò)程中清晰知曉單元格數(shù)據(jù)的屬性。

(1)表頭固定

固定表頭可以讓用戶(hù)明白當(dāng)前單元格內(nèi)信息的屬性和含義，體現(xiàn)界面友好性。當(dāng)數(shù)據(jù)列差異不大，用戶(hù)不能直觀(guān)的根據(jù)表格中的數(shù)據(jù)分辨出數(shù)據(jù)類(lèi)型時(shí)，尤其需要固定頂部表頭。當(dāng)然，表頭有操作時(shí)，固定表頭更能提升使用效率。

(2)首列固定

呈現(xiàn)大型數(shù)據(jù)時(shí)，橫向滾動(dòng)無(wú)法避免。固定屬性列(一般為第一列或前幾列)更方便信息的對(duì)比。

(3)自定義固定列

作為高級(jí)功能，可以對(duì)列進(jìn)行單獨(dú)鎖定，以便用戶(hù)將數(shù)據(jù)與多個(gè)錨定標(biāo)識(shí)符進(jìn)行比較。

(4)固定表尾和底欄

固定表尾和底欄可以避免頁(yè)面無(wú)數(shù)據(jù)時(shí)的空洞。

查看詳情

精簡(jiǎn)表格之后如何查看隱藏起來(lái)的次要信息呢?

(1)展開(kāi)行

展開(kāi)行(Expandable rows)允許用戶(hù)無(wú)需打開(kāi)新頁(yè)面即可查看附加信息，防止用戶(hù)迷失。

(2)表格組節(jié)

表格組節(jié)(Table sections)把相關(guān)的行組合在一起，并且能夠收縮和展開(kāi)，各組節(jié)層級(jí)要有樣式區(qū)別。如果有需要，在每個(gè)組節(jié)里可以顯示數(shù)據(jù)概要。

(3)彈窗

包括模態(tài)彈窗和非模態(tài)彈窗，模態(tài)彈窗可以打開(kāi)任一個(gè)條目進(jìn)行詳細(xì)查看，非模態(tài)彈窗可以同時(shí)打開(kāi)多個(gè)，并允許拖動(dòng)彈窗位置進(jìn)行信息對(duì)比。

(4)表格內(nèi)部側(cè)邊展開(kāi)

相比彈窗減少了頁(yè)面層級(jí)和隔離感。

(5)視圖切換

可以通過(guò)視圖切換查看更多細(xì)節(jié)，比如在“表格”和“左列表+右詳情”之間切換，或者提供“只看文本，看文本和縮略圖，只看縮略圖”幾種查看方式。

數(shù)據(jù)的選擇

數(shù)據(jù)的選擇包括單選、多選和全選，一般通過(guò)復(fù)選框?qū)崿F(xiàn)選擇條目并進(jìn)行批量操作。也可以進(jìn)行整行選擇，即點(diǎn)擊某一行的局部能讓整行被選中，這種做法可增大點(diǎn)擊區(qū)域減少界面的混亂。

單選時(shí)必須給出明確的選中樣式，而實(shí)際上純粹的單選很少見(jiàn)，使用單選按鈕的情況也很少，所以一般也可以使用復(fù)選框。多選自然是通過(guò)復(fù)選框?qū)崿F(xiàn)，具體設(shè)計(jì)時(shí)，可以按照數(shù)據(jù)類(lèi)型進(jìn)行選擇，如已讀、未讀等。全選時(shí)需要對(duì)數(shù)據(jù)范圍進(jìn)行限定，特別是遇到分頁(yè)時(shí)，要明確是當(dāng)頁(yè)全選還是整表全選。

復(fù)選框一般放在左側(cè)第一列，也有放在第二列(即序號(hào)之后)的，甚至放在右側(cè)最后一列(便于用戶(hù)在查看完一條數(shù)據(jù)后，決定是否勾選)。

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

操作項(xiàng)一般存在于條目最后，以及表頭位置，分別對(duì)應(yīng)單條操作與批量操作的場(chǎng)景。

(1)按操作對(duì)象分

單行操作和批量操作。對(duì)于單條數(shù)據(jù)操作頻繁的場(chǎng)景，操作項(xiàng)不多于三個(gè)時(shí)，操作項(xiàng)跟在條目后面，常見(jiàn)操作僅用ICON，不常見(jiàn)操作用ICON+文字，當(dāng)超過(guò)三個(gè)時(shí)，建議將操作折疊收起。對(duì)于數(shù)據(jù)批量操作頻繁的場(chǎng)景，建議將操作放到表格頂部，與勾選操作配合使用。

(2)按顯隱性分

顯性操作和隱性操作，顯性操作的選項(xiàng)顯示在行內(nèi)，直觀(guān)明顯。隱性操作一般在鼠標(biāo)懸停時(shí)或勾選后才顯示操作選項(xiàng)，界面簡(jiǎn)潔明快，可減輕空間壓力，減少干擾。

底欄的處理

底欄緊跟在表格正文之后，主要展示正文中的數(shù)據(jù)量以及單頁(yè)數(shù)據(jù)條目信息，同時(shí)，兼具一些導(dǎo)航的功能，指示當(dāng)前所在頁(yè)面以及跳轉(zhuǎn)到指定頁(yè)面。所以底欄最重要的元素就是分頁(yè)，分頁(yè)可以放在上部、下部或上下部均有，而分頁(yè)固定能省去用戶(hù)需要翻到頂部或底部進(jìn)行操作的麻煩。無(wú)限滾動(dòng)有時(shí)可以替代分頁(yè)，但更適用于發(fā)現(xiàn)型網(wǎng)站，但對(duì)于功能優(yōu)先的應(yīng)用程序未必合適。

分頁(yè)可分為整體頁(yè)碼平鋪式、全功能版、簡(jiǎn)易版等，需要根據(jù)不同的場(chǎng)景選擇最優(yōu)的設(shè)計(jì)方案，比如有的時(shí)候并不需要定點(diǎn)跳轉(zhuǎn)，因?yàn)橛脩?hù)怎么可能記住自己想要的數(shù)據(jù)在哪一頁(yè)。

分享標(biāo)題：web頁(yè)面中表格設(shè)計(jì)攻略
URL網(wǎng)址：http://www.muchs.cn/news19/163619.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、靜態(tài)網(wǎng)站、動(dòng)態(tài)網(wǎng)站、網(wǎng)站改版、微信公眾號(hào)、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)