在后臺管理系統(tǒng)、數(shù)據(jù)類產(chǎn)品等的設(shè)計中，表格作為一種常見的信息組織整理手段，甚至是web頁面的基礎(chǔ)設(shè)施之一，其重要性不言自明。結(jié)合最近做的幾個項(xiàng)目和相關(guān)設(shè)計經(jīng)驗(yàn)總結(jié)，特此整理出這樣一篇設(shè)計攻略，希望能夠?qū)δ愕脑O(shè)計有所幫助。
表格的定義
表格是用來收集、整理、組織、分析數(shù)據(jù)的二維矩陣。一般來說，由行、列分割而成的單元格是構(gòu)成表格的基本元素。表格的行、列之間相互獨(dú)立又相互關(guān)聯(lián)，充滿變化。行與列形成了單元格的長與高，不同的長高有著疏密之別，進(jìn)而使表格產(chǎn)生充實(shí)或透氣之感。
表格的用途
表格是常見的信息組織手段，是web頁面布局的重要組成部分，可用于保存和展示少量或大量結(jié)構(gòu)化數(shù)據(jù)、靜態(tài)數(shù)據(jù)以及處于變化中的數(shù)據(jù)。具體說來，表格結(jié)構(gòu)簡單，分隔明確，可保證信息可讀性，易于用戶快速掃描瀏覽并獲取所需;數(shù)據(jù)經(jīng)過歸納整理和合理布局后，更易于用戶感知分辨其中的差異與變化、關(guān)聯(lián)與區(qū)別，并進(jìn)行對比分析;交互層面，用戶可以對數(shù)據(jù)信息進(jìn)行排序、搜索、篩選、以及相關(guān)業(yè)務(wù)處理等復(fù)雜操作。
表格的構(gòu)成
1、內(nèi)部構(gòu)成元素
內(nèi)部構(gòu)成元素包括標(biāo)題、表頭、表體、表尾等。標(biāo)題是對表格信息內(nèi)容的整體概括，可包含數(shù)據(jù)來源及屬性(日期、地區(qū)等)，以便用戶對表格內(nèi)容有整體認(rèn)知。表頭一般指列標(biāo)簽，這里也指首列行標(biāo)簽，是對所屬行或列信息的描述。表尾一般是統(tǒng)計信息，例如總計、平均數(shù)等。
2、外部相關(guān)元素
外部相關(guān)元素包括篩選區(qū)、按鈕區(qū)、底欄等。篩選區(qū)包含模糊搜索和條件篩選。按鈕區(qū)的按鈕可分為增刪改操作和業(yè)務(wù)處理操作。底欄一般放統(tǒng)計信息、分頁等內(nèi)容。
表格的基本布局
一般來說，表格有水平型、垂直型和矩陣型三種布局。水平布局會弱化列的存在，強(qiáng)調(diào)信息的連貫性，保證用戶閱讀信息時視覺流是從左到右的，然后自上而下逐條掃描，適合大量信息的瀏覽。垂直布局是在行分割的基礎(chǔ)上，通過強(qiáng)化列的視覺特征來突出行間信息的對比。矩形布局的表格有均勻而明顯的分割線，邊框單元格比較明顯，適用于列信息較多而沒有足夠空間用留白來分割信息時。
表格的設(shè)計集中體現(xiàn)在可視化(可讀性)和易操作兩個方面，好的數(shù)據(jù)表格允許用戶對信息進(jìn)行快速的掃描、查詢、過濾、分析等操作，以獲取深刻認(rèn)知并快速準(zhǔn)確完成目標(biāo)任務(wù)。其基本設(shè)計原則是“全面整合并呈現(xiàn)業(yè)務(wù)數(shù)據(jù)，提供順暢閱讀體驗(yàn)，便于用戶發(fā)掘重要信息，進(jìn)行便捷操作”，簡而言之，即“滿足業(yè)務(wù)需求+符合用戶心智模型”。
如果處理得當(dāng)，復(fù)雜的數(shù)據(jù)也能讓用戶輕松瀏覽和比較;處理不善，簡單的表格也會令用人難以理解。要平衡用戶的瀏覽目的和設(shè)計者的傳達(dá)目的，對部分信息進(jìn)行強(qiáng)調(diào)或弱化處理。其中，如何讓表格在表現(xiàn)層傳達(dá)更好，考驗(yàn)UI的視覺表現(xiàn)功底;如何讓表格在結(jié)構(gòu)層更合理、在操作層更易用，則考驗(yàn)交互設(shè)計師的數(shù)據(jù)整合功力。
表格是為可讀性而生的，一個結(jié)構(gòu)清晰的布局能大大提升用戶對信息的接收速度和理解程度。因此，設(shè)計易讀，易掃視，易比較，易操作的表格結(jié)構(gòu)是表格設(shè)計的首要目標(biāo)。
設(shè)計技巧：視覺篇
精簡數(shù)據(jù)，明確信息優(yōu)先級
雖然終極技巧是“在全面了解實(shí)際業(yè)務(wù)需求的基礎(chǔ)上進(jìn)行靈活設(shè)計”，但對于不熟悉業(yè)務(wù)的交互設(shè)計師而言，數(shù)據(jù)的取舍和處理卻是最難的。對表格內(nèi)容的取舍要建立在對業(yè)務(wù)的了解之上，盡量精簡指標(biāo)，隱藏不必要信息，減少干擾，避免無主次的鋪出所有信息。不要讓用戶一次性接收過于龐大的信息量，尤其不要超出用戶的視線范圍，避免通過拖拽的方式查看信息。建議默認(rèn)只展示用戶所必須的信息，其他次要信息通過展開下拉等方式展示，為輔助信息提供深層入口。
表頭的優(yōu)化
(1)精簡表頭信息
表頭標(biāo)簽應(yīng)該簡煉準(zhǔn)確，以達(dá)到節(jié)省表頭空間和減輕視覺壓力的作用，讓用戶注意力聚焦在數(shù)據(jù)本身。如果精簡后的生僻字段難以自我解釋，可以跟一個釋義標(biāo)識，鼠標(biāo)懸停時出現(xiàn)該字段的詳細(xì)解釋，同時滿足新手用戶、普通用戶以及專家用戶的需求。
(2)情況允許時，去掉表頭
如果表格數(shù)據(jù)可以自我解釋，表頭就不是必須的。
(3)采用多級表頭整合信息
數(shù)據(jù)結(jié)構(gòu)比較復(fù)雜的時候，可使用多級表頭來體現(xiàn)數(shù)據(jù)的層次關(guān)系。
(4)功能復(fù)合型表頭
除了容納行標(biāo)簽之外，表頭也可以包含排序、搜索、篩選等功能。
行的優(yōu)化
(1)合適的行高
行高是非常重要的參數(shù)，直接影響著閱讀體驗(yàn)。較小的行高能承載更多信息，讓用戶無需滾動鼠標(biāo)即可看到更多數(shù)據(jù)，但會降低掃描效果，導(dǎo)致視覺解析錯誤。適宜的行高使得頁面更透氣，但并不是越大越好。設(shè)置行高的原則是：A.單行顯示時，數(shù)據(jù)顯示緊湊、有序。B.多行顯示時，弱化表格形式，提供豐富的視覺展現(xiàn)。因此，對于單行顯示的表格，建議行高為字體高度的2.5倍到3倍;對于多行顯示的表格，建議內(nèi)容區(qū)到上下邊框的距離略小于文字高度。當(dāng)然，也可以提供切換按鈕讓用戶自己控制顯示密度。
(2)橫向斑馬線
斑馬線又稱作間行換色、隔行變色、行交替樣式。它能讓行間界限更為明顯，同時加強(qiáng)視覺流的橫向引導(dǎo)，避免在閱讀過寬表格時出現(xiàn)錯行、迷失的情況，要注意兩種顏色不能反差過大。另外，可以根據(jù)實(shí)際情況選擇是否與1像素邊框同時使用。
(3)行的強(qiáng)調(diào)
有時為強(qiáng)調(diào)行內(nèi)信息的連續(xù)性(此時不強(qiáng)調(diào)行間數(shù)據(jù)的對比)，可去掉單元格的縱向分割線，僅使用橫向分割線和底色分割，使橫向信息更加連續(xù)通暢，以提升閱讀效率。此時，可以對行內(nèi)信息進(jìn)行擴(kuò)充(例子：淘寶商品頁)，進(jìn)一步弱化表格形式，豐富各類信息的視覺呈現(xiàn)，同時兼顧行與行之間的關(guān)鍵信息的對比。
列的優(yōu)化
(1)合適的列寬
列寬的處理有三種方式。第一，可以按字段類型和內(nèi)容給出固定寬度，如姓名100px，手機(jī)號150px，地址200px;第二，可以固定部分列的寬度，其余列則按百分比處理;第三，在固定寬度的基礎(chǔ)上，允許用戶自由拖動調(diào)整列寬的大小。
(2)縱向斑馬線
即間列換色，是垂直版的隔行變色，用于強(qiáng)化列與列之間的差異，用處有限。
(3)列的強(qiáng)調(diào)
一般列的強(qiáng)調(diào)是配合表格列排序功能使用的，如點(diǎn)擊率、訪問量的排序。有時會使用不同粗細(xì)的縱向分割線對信息進(jìn)行區(qū)隔，增加同類信息對比性。
分割線的處理
正確使用分割線可以實(shí)現(xiàn)對表格行與列的強(qiáng)調(diào)。首先，做純粹客觀的數(shù)據(jù)展示時會使用同樣顏色和透明度的橫縱分割線或斑馬線，此時不強(qiáng)調(diào)單個數(shù)據(jù)或者數(shù)據(jù)之間的關(guān)系，避免帶來錯誤的引導(dǎo)。其次，展示獨(dú)立數(shù)據(jù)時需要弱化縱向分割線，會采用斑馬線和懸浮高亮底色的方式以體現(xiàn)一條數(shù)據(jù)的完整性。
最后，處理具有明確類別指向的數(shù)據(jù)時，在橫線均勻分割的基礎(chǔ)上，往往會用不同的縱向分隔線對數(shù)據(jù)進(jìn)行分類區(qū)隔，以表達(dá)數(shù)據(jù)之間的類別關(guān)系。
對齊規(guī)則
合適的對齊方式能夠提升數(shù)據(jù)的瀏覽效率。表格內(nèi)信息的縱向列對齊(符合格式塔心理學(xué)中相近原則)能夠很好的形成視覺引導(dǎo)線。通過對齊，會讓表格更加規(guī)范易理解，給用戶視覺上的統(tǒng)一感，視線流動更順暢，讓用戶快速的捕捉到所需內(nèi)容。
(1)按字符長度定義：
(2)按數(shù)據(jù)類型定義：
(3)其他特殊規(guī)則：
數(shù)字的處理
(1)數(shù)字和單位的使用
對數(shù)字字體而言，從高度上看可分為舊體數(shù)字與等高數(shù)字(舊體數(shù)字能很好匹配小寫字母)，從寬度上看可分為比例數(shù)字和表格數(shù)字(表格數(shù)字的每一個尺寸都相對獨(dú)立，方便縱向?qū)R)。其中的關(guān)鍵區(qū)別在于數(shù)字“1”，為了更好對齊和對比，建議使用等寬的表格字體。數(shù)據(jù)的度量單位無需重復(fù)，只需要在表頭標(biāo)識清楚即可。
(2)減少用戶計算
對于進(jìn)行對比分析的數(shù)據(jù)，在原始數(shù)據(jù)的基礎(chǔ)上給出差值、升降變化、總計值、平均值等分析性的數(shù)據(jù)處理結(jié)果，直達(dá)用戶獲取信息的目標(biāo)(需要明確用戶目標(biāo))，而盡量減少用戶心算或者線下處理的過程，如股票數(shù)據(jù)變化，音樂排行榜等，能顯著提升信息的閱讀和理解效率。
(3)空白單元格處理
一般指空數(shù)據(jù)或零數(shù)據(jù)的情況，空白單元格容易造成用戶困惑甚至誤解，用戶會搞不清楚到底是沒有數(shù)據(jù)，還是數(shù)值為零。正確做法是，對于不存在的數(shù)據(jù)，單元格不能空置，要用短橫線代替，表示該項(xiàng)數(shù)據(jù)不存在，給用戶明確指示;對于數(shù)據(jù)為零的單元格，要填上0，且小數(shù)點(diǎn)后位數(shù)、單位，都要與上下單元格保持一致。
設(shè)計視覺層級，高亮重點(diǎn)信息，引導(dǎo)讀者視線
(1)顏色的使用
顏色和可讀性是密切相關(guān)的，所以要合理的使用顏色，盡量使用簡單的背景色和點(diǎn)綴色。背景色方面，除了行/列交替顏色(可以區(qū)隔內(nèi)容，引導(dǎo)視線)、懸停高亮底色(便于準(zhǔn)確辨別光標(biāo)所在行)等處理方法，還可以對表頭表尾進(jìn)行視覺區(qū)分。
(2)足夠的留白
既包括保證數(shù)據(jù)單元格之間的留白，又包括單元格內(nèi)部(padding)留白，以保證易讀性。
(3)其他視覺突出手段
通過調(diào)整背景顏色、放大局部元素、顏色區(qū)分、icon點(diǎn)綴等手段，以及高亮強(qiáng)調(diào)重要的行和列，使重要信息突出，提高用戶的閱讀速度，幫助用戶快速定位重點(diǎn)信息。
(4)層級處理方法
通過調(diào)整標(biāo)題、標(biāo)簽的字體，邊框線的設(shè)計，底色的運(yùn)用等，區(qū)分不同的功能模塊，從而設(shè)計出合理的視覺層級，活躍表格氛圍，引導(dǎo)用戶的視線流動。
減少裝飾元素，降低視覺噪音
信息內(nèi)容的有效傳達(dá)是表格設(shè)計的本質(zhì)，就表格本身而言應(yīng)該是隱型的，應(yīng)該讓用戶注意力聚焦在核心內(nèi)容上。所以，做減法設(shè)計就顯得尤為可貴。
(1)減少分隔線
水平分割線能顯著減輕長表格在垂直方向的視覺重量，加快大量數(shù)值的對比工作。但如果在表格中使用適合的對齊方式，豎直分隔線完全是多余的。它們最大的貢獻(xiàn)就是縮減元素之間的距離后也能區(qū)分不同元素。即使要用，也要非常淡，不能妨礙快速瀏覽。
(2)不使用斑馬線
使用不同底色區(qū)分指示不同類型的數(shù)據(jù)(如總和、平均值)是有必要的，但是斑馬線在很多時候是沒有必要的，因?yàn)樗鼈兪峭活悢?shù)據(jù)，而且水平分割線就已經(jīng)能夠明顯區(qū)隔。
(3)盡量以黑白為主
運(yùn)用彩色表達(dá)組織或含義可能會增加誤解，并且引發(fā)視覺障礙者的易用性問題。
(4)減少其他圖形元素的使用
其他圖形元素，如星號，三角，圓點(diǎn)，對勾，叉等，雖然能夠幫助組織數(shù)據(jù)、更直觀的傳達(dá)信息，但物極必反，少即是多，要注意克制這些元素的使用。
可視化趨勢
(1)圖表的使用
除了在單元格中引用圖表之外，很多時候都會提供圖表/表格視圖切換，便于用戶從圖形角度查看、分析自己關(guān)注的數(shù)據(jù)。有時也會有“圖表+表格”的形式，這時候，表格往往只作為明細(xì)放在頁面底部。
(2)卡片的使用
在信息量較少或特別多的情況下可以用卡片的形式來展示信息，將信息以組的概念呈現(xiàn)，單張卡片內(nèi)的信息按優(yōu)先級進(jìn)行排列。此外，卡片彼此之間又形成一個整體。
關(guān)鍵字搜索
用戶可以通過輸入特殊條件進(jìn)行搜索，從而快速定位到所需的目標(biāo)數(shù)據(jù)條目。搜索輸入框盡量采用模糊搜索，不要讓用戶去辨認(rèn)、識別要輸入的內(nèi)容。模糊搜索一般單獨(dú)使用，或者和篩選區(qū)進(jìn)行明顯隔離后使用。篩選為主要場景時，搜索框可以作為篩選條件之一。搜索為主要場景時，篩選區(qū)可看做高級搜索隱藏起來。個人認(rèn)為搜索和篩選同時使用在大多數(shù)情況下都是多余的，因?yàn)樗殉鰜淼慕Y(jié)果已經(jīng)比較明確了，而篩選一般有比較明確的業(yè)務(wù)目的。而關(guān)鍵的沖突在于觸發(fā)方式的不同，篩選有“實(shí)時篩選”和“點(diǎn)擊查詢按鈕觸發(fā)篩選”兩種，而搜索大部分是“觸發(fā)搜索”，實(shí)時的比較少。
在樣式上，搜索可以分為簡單搜索、標(biāo)簽搜索、列標(biāo)簽搜索、高級搜索等四類。簡單搜索由一個搜索框和一個按鈕組成，搜索框內(nèi)有提示語告訴用戶可以輸入哪些內(nèi)容，支持模糊查詢，可以實(shí)時搜索或觸發(fā)點(diǎn)擊搜索。特殊情況下，可以輸入多個條件同時篩選，取并集或取交集。標(biāo)簽搜索指的是先選擇搜索種類，再輸入內(nèi)容，由于每次只能對單一條件進(jìn)行搜索，因此準(zhǔn)確性更高。列標(biāo)簽搜索是指在一些特定標(biāo)簽上加上搜索框。高級搜索即點(diǎn)擊更多展開更多篩選條件，減少了更多條件對用戶的干擾，但降低了易發(fā)現(xiàn)性。
條件篩選
篩選按照觸發(fā)方式可分為觸發(fā)篩選和實(shí)時篩選，一般情況下，篩選條件存在交叉時使用觸發(fā)篩選，不存在交叉時使實(shí)時篩選。但是在后臺條件允許的情況下，發(fā)現(xiàn)型網(wǎng)站一般建議實(shí)時篩選，也可以根據(jù)篩選條件的數(shù)量選擇合適的觸發(fā)方式，比如條件少時用實(shí)時篩選，條件多時用觸發(fā)篩選。
對于篩選條件有交叉的場景，建議采用展開形式，并手動觸發(fā)刷新。對于篩選條件沒有交叉的場景，當(dāng)條件少于五個，采用tab切換;超過五個少于二十個，采用下拉選擇;多于二十五個，為下拉選擇添加模糊匹配，并且實(shí)時刷新。
其中，tab切換適合沒有交集的內(nèi)容，需要按照特定順序分類，并保證分類覆蓋所有情況，也不宜過多。對于需輸入篩選條件的場景，如日期篩選條件，展示出來。下拉選擇比tab占的空間小，但建議把重要項(xiàng)默認(rèn)顯示，下拉列表內(nèi)也可以加入單選按鈕或者復(fù)選框。表頭篩選更節(jié)省空間，不過一次只能篩選一類條件。全部顯示篩選項(xiàng)適用于輸入項(xiàng)相對很少的情況。
提供自定義列
為了滿足多個角色在不同情況下的業(yè)務(wù)需求，系統(tǒng)往往采取寧多勿少的原則盡可能提供詳細(xì)的數(shù)據(jù)給用戶，結(jié)果造成表格指標(biāo)過多，難以在一個屏幕內(nèi)展示完全，需要橫向拉伸，降低了易讀性。在這個問題上可以采用的方法是給默認(rèn)表格提供通用的字段指標(biāo)，然后用戶可根據(jù)自身所需添加或調(diào)整系統(tǒng)所提供的其它字段指標(biāo)，讓彈性化的表格滿足用戶的個性化需求。
這樣做首先可以讓用戶在表格上方看到所有的指標(biāo)名稱，避免了原來需要橫向拖拽才能瀏覽到所有指標(biāo)的情況;其次，用戶可以根據(jù)自己的需要，自由選擇所要顯示的指標(biāo)，隱藏不必要指標(biāo)，減少干擾。有的表格除了自定義列，還允許自定義排序。
排序
通過排序可以快速發(fā)掘出用戶關(guān)注的信息，幫助用戶發(fā)現(xiàn)信息條目之間的關(guān)系，提高關(guān)鍵條目的優(yōu)先級。排序的列和不排序的列應(yīng)該有明顯區(qū)分，最好對某個重要列進(jìn)行默認(rèn)的排序。排序可以增加表格活力，一般有升序和降序兩種方式。比較常見的是上下空心箭頭表示默認(rèn)，上箭頭為升序，下箭頭為降序。這種方式占空間較少，但認(rèn)知有一定困難，且不適合排序方式較多的情況。排序方式較多時應(yīng)采用下拉選擇，因?yàn)檫@樣信息展示最直接有效，且能減少反復(fù)操作的次數(shù)。
滾動與固定
隨著行和列的增加，用戶的瞬時記憶會達(dá)到極限，超過“7±2原則”的范圍，用戶需要依靠輔助信息去閱讀表格內(nèi)的數(shù)據(jù)，防止遺忘某列數(shù)據(jù)的意義。設(shè)計大數(shù)據(jù)量表格時，不得不通過拖拽橫向或縱向滾動條來閱讀數(shù)據(jù)，此時，固定表格的表頭或行標(biāo)題列，可以幫助用戶在閱讀過程中清晰知曉單元格數(shù)據(jù)的屬性。
(1)表頭固定
固定表頭可以讓用戶明白當(dāng)前單元格內(nèi)信息的屬性和含義，體現(xiàn)界面友好性。當(dāng)數(shù)據(jù)列差異不大，用戶不能直觀的根據(jù)表格中的數(shù)據(jù)分辨出數(shù)據(jù)類型時，尤其需要固定頂部表頭。當(dāng)然，表頭有操作時，固定表頭更能提升使用效率。
(2)首列固定
呈現(xiàn)大型數(shù)據(jù)時，橫向滾動無法避免。固定屬性列(一般為第一列或前幾列)更方便信息的對比。
(3)自定義固定列
作為高級功能，可以對列進(jìn)行單獨(dú)鎖定，以便用戶將數(shù)據(jù)與多個錨定標(biāo)識符進(jìn)行比較。
(4)固定表尾和底欄
固定表尾和底欄可以避免頁面無數(shù)據(jù)時的空洞。
查看詳情
精簡表格之后如何查看隱藏起來的次要信息呢?
(1)展開行
展開行(Expandable rows)允許用戶無需打開新頁面即可查看附加信息，防止用戶迷失。
(2)表格組節(jié)
表格組節(jié)(Table sections)把相關(guān)的行組合在一起，并且能夠收縮和展開，各組節(jié)層級要有樣式區(qū)別。如果有需要，在每個組節(jié)里可以顯示數(shù)據(jù)概要。
(3)彈窗
包括模態(tài)彈窗和非模態(tài)彈窗，模態(tài)彈窗可以打開任一個條目進(jìn)行詳細(xì)查看，非模態(tài)彈窗可以同時打開多個，并允許拖動彈窗位置進(jìn)行信息對比。
(4)表格內(nèi)部側(cè)邊展開
相比彈窗減少了頁面層級和隔離感。
(5)視圖切換
可以通過視圖切換查看更多細(xì)節(jié)，比如在“表格”和“左列表+右詳情”之間切換，或者提供“只看文本，看文本和縮略圖，只看縮略圖”幾種查看方式。
數(shù)據(jù)的選擇
數(shù)據(jù)的選擇包括單選、多選和全選，一般通過復(fù)選框?qū)崿F(xiàn)選擇條目并進(jìn)行批量操作。也可以進(jìn)行整行選擇，即點(diǎn)擊某一行的局部能讓整行被選中，這種做法可增大點(diǎn)擊區(qū)域減少界面的混亂。
單選時必須給出明確的選中樣式，而實(shí)際上純粹的單選很少見，使用單選按鈕的情況也很少，所以一般也可以使用復(fù)選框。多選自然是通過復(fù)選框?qū)崿F(xiàn)，具體設(shè)計時，可以按照數(shù)據(jù)類型進(jìn)行選擇，如已讀、未讀等。全選時需要對數(shù)據(jù)范圍進(jìn)行限定，特別是遇到分頁時，要明確是當(dāng)頁全選還是整表全選。
復(fù)選框一般放在左側(cè)第一列，也有放在第二列(即序號之后)的，甚至放在右側(cè)最后一列(便于用戶在查看完一條數(shù)據(jù)后，決定是否勾選)。
數(shù)據(jù)的編輯操作
操作項(xiàng)一般存在于條目最后，以及表頭位置，分別對應(yīng)單條操作與批量操作的場景。
(1)按操作對象分
單行操作和批量操作。對于單條數(shù)據(jù)操作頻繁的場景，操作項(xiàng)不多于三個時，操作項(xiàng)跟在條目后面，常見操作僅用ICON，不常見操作用ICON+文字，當(dāng)超過三個時，建議將操作折疊收起。對于數(shù)據(jù)批量操作頻繁的場景，建議將操作放到表格頂部，與勾選操作配合使用。
(2)按顯隱性分
顯性操作和隱性操作，顯性操作的選項(xiàng)顯示在行內(nèi)，直觀明顯。隱性操作一般在鼠標(biāo)懸停時或勾選后才顯示操作選項(xiàng)，界面簡潔明快，可減輕空間壓力，減少干擾。
底欄的處理
底欄緊跟在表格正文之后，主要展示正文中的數(shù)據(jù)量以及單頁數(shù)據(jù)條目信息，同時，兼具一些導(dǎo)航的功能，指示當(dāng)前所在頁面以及跳轉(zhuǎn)到指定頁面。所以底欄最重要的元素就是分頁，分頁可以放在上部、下部或上下部均有，而分頁固定能省去用戶需要翻到頂部或底部進(jìn)行操作的麻煩。無限滾動有時可以替代分頁，但更適用于發(fā)現(xiàn)型網(wǎng)站，但對于功能優(yōu)先的應(yīng)用程序未必合適。
分頁可分為整體頁碼平鋪式、全功能版、簡易版等，需要根據(jù)不同的場景選擇最優(yōu)的設(shè)計方案，比如有的時候并不需要定點(diǎn)跳轉(zhuǎn)，因?yàn)橛脩粼趺纯赡苡涀∽约合胍臄?shù)據(jù)在哪一頁。
以上就是上海網(wǎng)站制作公司——海淘科技為你推出《web表格設(shè)計攻略》的全部內(nèi)容。想看更多的內(nèi)容，可點(diǎn)擊：企業(yè)微博營銷注意事項(xiàng)，于此同時，海淘科技還提供了網(wǎng)站建設(shè)案例，可點(diǎn)擊：金融公司網(wǎng)站建設(shè)案例
