1. 表格的定義與用途1.1 什么是表格表格：既是一種可視化交流模式，又是一種組織整理數(shù)據(jù)的手段。一般來說，由行、列分割而成的單元格是構(gòu)成表格的基本元素。 表格的行、列之間相互獨立又相互關(guān)聯(lián)，充滿變化。行與列形成了單元格的長與高，不同的長高有著疏密之別，進而使表格產(chǎn)生充實或透氣之感。 經(jīng)典的表格：水平和垂直邊框清晰可見，表頭與包含內(nèi)容的單元格分開。
1.2 表格的用途表格是常見的信息組織手段，是web頁面布局的重要組成部分，可用于保存和展示少量或大量結(jié)構(gòu)化、靜態(tài)化及處于變化中的數(shù)據(jù)。 大量使用表格，這可能是效率最高的信息展示方式了。表格可以高效組織信息和數(shù)據(jù)，讓用戶方便閱覽、對比和分析。 具體說來，表格結(jié)構(gòu)簡單，分隔明確，可保證信息可讀性，易于用戶快速掃描瀏覽并獲取內(nèi)容；
2. 表格的構(gòu)成一般來說，表格有水平型、垂直型和矩陣型三種布局。
從視覺結(jié)構(gòu)的表現(xiàn)角度，將“表格”的構(gòu)成分為六大類：
由表頭、表體、表尾構(gòu)成內(nèi)部區(qū)域，由標題、篩選操作、底欄構(gòu)成外部區(qū)域。 2.1 標題標題是對表格信息內(nèi)容的整體概括，可包含數(shù)據(jù)來源及屬性(日期、地區(qū)等)，以便用戶對表格內(nèi)容有整體認知。 給數(shù)據(jù)表格起一個清晰簡明的標題，與其他的設(shè)計同等重要。有了好的標題，表格就可以獨立使用，它們可以用于許多不同場合中，也可以由外部來引用。 2.2 篩選操作區(qū)域篩選操作區(qū)域是位于表頭的上方，包含篩選，操作按鈕等其他操作。 篩選區(qū)包含模糊搜索和條件篩選，按鈕區(qū)的按鈕可分為增刪改和其它業(yè)務(wù)處理操作。合理設(shè)計篩選區(qū)可以大大提高用戶的效率。
2.3 表頭表頭對一些問題的性質(zhì)的歸類，每張表按慣例要對數(shù)據(jù)的簡況做出反映，如：被調(diào)查者的性別、年齡、學(xué)歷、收入、家庭成員組成、政治背景、經(jīng)濟狀況等。 表頭的字段名稱應(yīng)當符合用戶思維習(xí)慣，保證用戶理解。如果有需要解釋，則在字段名稱旁邊加說明小圖標。表頭在這里也指列行標簽，是對所屬行或列數(shù)據(jù)的描述。 除了容納行/列標簽之外，表頭也可以包含排序、搜索、篩選等功能。
2.4 表體表體是表格的主體內(nèi)容，具體內(nèi)容的填充區(qū)域，由一個個基礎(chǔ)的單元格組成。 包含數(shù)據(jù)，分割線，背景，也可進行操作，如鏈接跳轉(zhuǎn)(項目或者商品)。
2.5 表尾表尾一般是統(tǒng)計信息，例如總計、平均數(shù)等。
2.6 底欄底欄緊跟在表格正文之后，主要展示正文中的數(shù)據(jù)量以及單頁數(shù)據(jù)條目信息，底欄一般放統(tǒng)計信息、分頁、備注、加載按鈕等內(nèi)容。 底欄最常見的元素就是分頁，分頁可以放在上部、下部或上下部均有，而分頁固定能省去用戶需要翻到頂部或底部進行操作的麻煩。 無限滾動可以替代分頁，但對于功能優(yōu)先的應(yīng)用未必適用。 下圖為加載按鈕，比較少見：
分頁可分為：整體頁碼平鋪式、全功能版、簡易版等，需要根據(jù)不同的場景選擇最優(yōu)的設(shè)計方案，比如有的時候并不需要定點跳轉(zhuǎn)。
3. 表格的視覺3.1 視覺標準3.1.1 填充與邊距 合適的填充和邊距對于視覺設(shè)計至關(guān)重要，既包括保證數(shù)據(jù)單元格之間的留白，又包括單元格內(nèi)部留白，以保證易讀性。 當創(chuàng)建表格設(shè)計規(guī)范并嚴格遵循后，團隊在執(zhí)行其它項目時，都可以創(chuàng)建視覺一致的表。
3.1.2 對齊方式 合適的對齊方式能夠提升數(shù)據(jù)的瀏覽效率。表格內(nèi)信息的縱向列對齊能夠很好的形成視覺引導(dǎo)線。 通過對齊，會讓表格更加規(guī)范易理解，給用戶視覺上的統(tǒng)一感，視線流動更順暢，讓用戶快速的捕捉到所需內(nèi)容。 可以遵循3條半對齊原則：
數(shù)字是從右向左讀的——這是因為我們對比數(shù)字時，首先看個位，然后十位、百位。 當個位數(shù)值對齊時，我們就可以快速查看前面的數(shù)值，比較多個數(shù)據(jù)的大小。 因此，表格的數(shù)字應(yīng)當右對齊。因為我們閱讀文字信息是從左向右讀，所以不采用左對齊，會降低瀏覽文字的效率。
表頭應(yīng)當同數(shù)據(jù)的對齊方式一致，這能保持表格豎直方向整潔，營造一致性。 居中對齊會導(dǎo)致表格的行參差不齊，瀏覽數(shù)據(jù)會更難，常常需要額外的分隔物。固定的內(nèi)容居中對齊，如狀態(tài)文字(成功，失敗等)，這樣的話信息呈現(xiàn)會更加突出，并能節(jié)省表格空間。 跨列合并單元格時，內(nèi)容頂對齊。多行的數(shù)據(jù)表，用戶從上往下閱讀時往往搞不清楚對應(yīng)的數(shù)據(jù)列內(nèi)容。 跨行合并時，靈活處理，一般指多級表頭，采用居中對齊，相應(yīng)的未合并的表頭頁簽也要居中對齊。如：日期之類的數(shù)字應(yīng)采用始終相同的長度進行格式化，如：2020/07/19而不是2020/7/19。 3.1.3 色彩 表格具有的顏色盡可能少，顏色和可讀性是密切相關(guān)的，要合理的使用顏色，盡量使用簡單的背景色和點綴色。 背景色方面，除了行/列交替顏色(可以區(qū)隔內(nèi)容，引導(dǎo)視線)、懸停高亮底色(便于準確辨別光標所在行)等處理方法，還可以對表頭表尾進行視覺區(qū)分。但不能增加過多顏色以引起混亂。 邊框顏色不能為黑色。當字體選擇深灰色，邊框選擇淺灰色，就可以減少我們視覺疲勞，不會使表格看起來令人生畏。
3.2 表頭的優(yōu)化表頭標簽應(yīng)該簡煉準確，以達到節(jié)省表頭空間和減輕視覺壓力的作用，讓用戶注意力聚焦在數(shù)據(jù)本身。對于B端產(chǎn)品而言，先能把事情說清楚，然后再考慮文字的簡潔性。 數(shù)據(jù)結(jié)構(gòu)比較復(fù)雜的時候，使用多級表頭來體現(xiàn)數(shù)據(jù)的層次關(guān)系，如下圖：
3.3 行的優(yōu)化3.3.1 默認排序 常以創(chuàng)建時間進行排序，即最新創(chuàng)建的排在最前面。
3.3.2 合適的行高 行高是非常重要的參數(shù)，直接影響著閱讀體驗。 較小的行高承載更多信息，讓用戶無需滾動鼠標即可看到更多數(shù)據(jù)，但會降低掃描效果，導(dǎo)致視覺解析錯誤。適宜的行高使得數(shù)據(jù)更易于被閱讀，但這不代表行高越大越利于閱讀。 行高的大小應(yīng)該是與字體成比例的，在單行文字的情況下表格間距一般在字符大小的三倍以內(nèi)。
設(shè)置行高的原則：
因此對于單行顯示的表格，建議行高為字體高度的2.5倍到3倍；對于多行顯示的表格，建議內(nèi)容區(qū)到上下邊框的距離略小于文字高度。 當然，也可以提供切換按鈕讓用戶自己控制顯示密度。 3.3.3 橫向斑馬線 斑馬線又稱作間行換色、隔行變色、行交替樣式。 它能讓行間界限更為明顯，同時加強視覺流的橫向引導(dǎo)，避免在閱讀過寬表格時出現(xiàn)錯行、迷失的情況，要注意兩種顏色不能反差過大。 另外，可以根據(jù)實際情況選擇是否與邊框同時使用。
3.3.4 行的強調(diào) 有時為了強調(diào)行內(nèi)信息的連續(xù)性，可去掉單元格的縱向分割線，僅使用橫向分割線和底色分割，使橫向信息更加連續(xù)通暢，以提升閱讀效率。 此時，可以對行內(nèi)信息進行擴充，進一步弱化表格形式，豐富各類信息的視覺呈現(xiàn)，同時兼顧行與行之間的關(guān)鍵信息的對比。
3.4 列的優(yōu)化3.4.1 列的選擇 盡量減少列的數(shù)量，關(guān)注用戶需要的必要信息，避免出現(xiàn)用戶不需要的數(shù)據(jù)，同時要避免數(shù)據(jù)缺失，用戶需要的非重點、輔助性信息可以通過次級入口來解決。 在表格數(shù)據(jù)可以自我解釋的情況下，列標簽就不是必須的了，如電子郵件的表格，就不需要列標簽，因為發(fā)件人和郵件主題以及時間的區(qū)分度比較高。
3.4.2 合適的列寬 列寬的處理有三種方式：
3.4.3 列的強調(diào) 一般列的強調(diào)是配合表格列排序功能使用的，如點擊率、訪問量的排序。 有時會使用不同粗細的縱向分割線對信息進行區(qū)隔，增加同類信息的對比性。也可以任意指定數(shù)據(jù)列強調(diào)顯示，表示當前的操作結(jié)果。 如下圖，表示目前日期正在降序排列：
為便于用戶對數(shù)據(jù)進行對比分析，可以在原始數(shù)據(jù)的基礎(chǔ)上給出差值、升降變化、平均值、總計等數(shù)據(jù)處理結(jié)果，減少用戶心算和再做數(shù)據(jù)加工的過程，使重要信息突出，提高用戶的閱讀速度，幫助用戶快速定位和了解重點信息。 3.5 單元格數(shù)據(jù)展示3.5.1 度量單位的使用 其中的關(guān)鍵區(qū)別在于數(shù)字的大小，為了更好對齊和對比，建議使用等寬的表格字體。數(shù)據(jù)的度量單位無需重復(fù)，只需要在表頭標識清楚即可。
3.5.2 空白單元格處理 一般指空數(shù)據(jù)或零數(shù)據(jù)的情況，空白單元格容易造成用戶困惑甚至誤解，用戶會搞不清楚到底是沒有數(shù)據(jù)，還是數(shù)值為零。 正確做法是，對于數(shù)據(jù)為零的單元格，要填上0，且小數(shù)點后位數(shù)、單位，都要與上下單元格保持一致。 對于沒有數(shù)據(jù)的單元格，通常是用“－”表示。
B端后臺數(shù)據(jù)類型較多，最好能為空數(shù)據(jù)做出釋義，可以加在“列標簽”的解釋文案中。 3.5.3 減少用戶的計算 對于進行對比分析的數(shù)據(jù)，在原始數(shù)據(jù)的基礎(chǔ)上可以給出差值、升降變化、總計值、平均值等分析性的數(shù)據(jù)處理結(jié)果，直達用戶獲取信息的目標(需要明確用戶目標)，而盡量減少用戶心算或者線下處理的過程。 如：股票數(shù)據(jù)變化，音樂排行榜等，能顯著提升信息的閱讀和理解效率。 下圖表尾對數(shù)據(jù)的總計值：
3.5.4 關(guān)鍵屬性標識 比如用戶重點關(guān)注數(shù)據(jù)狀態(tài)、某些數(shù)據(jù)的上升和下降等，可以用符號進行標識，幫助用戶快速定位到目標信息。 下圖音樂排行榜用帶顏色升降小圖標示意當前歌曲排行狀態(tài)，紅色為上升、綠色為下降：
3.6 分隔線水平分隔線，能顯著減輕表格在垂直方向的視覺重量，提升用戶進行大量數(shù)據(jù)對比時的速度。 垂直分隔線，在表格中使用適合的對齊方式后，那么就可以省略；數(shù)據(jù)量級比較大的表格，建議保留，可以使用較淡的分隔線，提升瀏覽速度。 下圖采用了同時采用了水平和垂直分隔線：
如果在表格中使用適合的對齊方式，分隔線就是多余的。但由于數(shù)據(jù)量級不同，即使要用，分隔線也要淡，不能妨礙快速瀏覽。 3.7 分頁及翻頁用戶一般是能不用翻頁就不會用翻頁功能，涉及到跨頁的數(shù)據(jù)操作時，分頁會帶來不便。 但受限于數(shù)據(jù)加載的壓力，在WEB端、手機端等需要實時下載數(shù)據(jù)的終端，通常需要分頁展示數(shù)據(jù)來緩解服務(wù)器的壓力，因此用戶需要分頁查看和操作。 而在客戶端，數(shù)據(jù)已下載到了本地，就可以采用無限滾動的方式呈現(xiàn)數(shù)據(jù)，不需要分頁展示，這樣用戶操作的成本更低。 在WEB端，表格的的數(shù)據(jù)內(nèi)容超過一定“數(shù)量”時需要提供翻頁功能，這個“數(shù)量”由表頭的數(shù)據(jù)的高度、表格的行間距、目標用戶群體的顯示設(shè)備的配置等因素來決定。 原則是不要超過一屏，考慮到每個用戶的使用習(xí)慣，可以讓用戶自定義每頁的顯示的數(shù)量，相比于跨屏翻頁而言，向下滾屏?xí)憷?/p> 翻頁控件內(nèi)容 ：用戶自定義每頁顯示的數(shù)量，當前頁碼(行數(shù))，全部數(shù)據(jù)的頁數(shù)(行數(shù))，向前翻頁，向后翻頁，到達第一頁，到達最后一頁等。 注意:
翻頁控件做為篩選數(shù)據(jù)的一種方式，通常會結(jié)合日歷、排序、篩選等其它控件一起使用，來提升用戶的操作效率。 如：網(wǎng)易的郵箱，翻頁與日歷結(jié)合一起使用，對于有大量郵件數(shù)據(jù)的用戶來說，查閱郵件的效率更高。 無限滾動/延遲加載呢？ 許多應(yīng)用程序已完全擺脫了分頁，如：直接鼠標滾動或點擊“加載更多”按鈕以查看更多數(shù)據(jù)。
這只會加載當前視圖中適合的內(nèi)容，并且如果用戶有意識地采取行動以加載更多內(nèi)容，則將加載更多項目。 3.8 全屏查閱減少與表格無關(guān)的視覺干擾，提供表格的沉浸式閱讀體驗，可提供全屏表格的入口，但應(yīng)注意可以讓用戶便捷的退出。 全屏模式可直接屏蔽掉上方的報表區(qū)域和左側(cè)及頂部的導(dǎo)航欄，用戶通過ESC鍵可隨時退出全屏模式，學(xué)習(xí)成本較低。 3.9 降低視覺噪音信息內(nèi)容的有效傳達是表格設(shè)計的本質(zhì)，就表格本身而言應(yīng)該是隱藏的，應(yīng)該讓用戶注意力聚焦在核心內(nèi)容上。 所以，做減法設(shè)計就顯得可貴了。 3.9.1 減少分隔線 這必須是在數(shù)據(jù)允許的情況下。水平分隔線能顯著減輕長表格在垂直方向的視覺重量，加快大量數(shù)值的對比工作。 但如果在表格中使用適合的對齊方式，豎直分隔線就完全是多余的。它們最大的貢獻就是縮減元素之間的距離后，即使要用垂直分割線，也要非常淡，不能妨礙快速瀏覽。
不使用斑馬線，使用不同底色區(qū)分指示不同類型的數(shù)據(jù)（如總和、平均值）是有必要的，但是斑馬線在很多時候又是沒有必要的，因為它們是同一類數(shù)據(jù)，而且水平分割線就已經(jīng)明顯區(qū)隔了。
省去所有分隔線，對于較小的，動態(tài)性較小的表，可以省去所有分隔線，并獲得醒目的外觀。當然，這更多是數(shù)據(jù)量不大的情況。
3.9.2 盡量以黑白為主 運用彩色表達組織或含義可能會增加誤解，并且引發(fā)視覺障礙者的易用性問題。 3.9.3減少其他圖形元素的使用 其他圖形元素，如星號，三角，圓點，對勾，叉等，雖然能夠幫助組織數(shù)據(jù)、更直觀的傳達信息，但物極必反，少即是多，要注意克制這些元素的使用。 3.10 其他樣式3.10.1 圖表的使用 除了在單元格中引用圖表之外，很多時候都會提供圖表/表格視圖切換，便于用戶從圖形角度查看、分析自己關(guān)注的數(shù)據(jù)。 有時也會有“圖表+表格”的形式，這時候，表格往往只作為明細放在頁面底部。大量的表格也會導(dǎo)致視覺的單調(diào)。
3.10.2 卡片的使用 在信息量較少或特別多的情況下可以用卡片的形式來展示信息，將信息以組的概念呈現(xiàn)，單張卡片內(nèi)的信息按優(yōu)先級進行排列。 此外，卡片彼此之間又形成一個整體。
4. 表格的交互4.1 篩選與搜索4.1.1 表上方 當表格的數(shù)據(jù)量較大時，可增加搜索功能和對數(shù)據(jù)的分類來提升用戶查找數(shù)據(jù)的效率，提供多維的篩選和排序，減少用戶尋找信息的時間。 輸入框可以輸入用戶關(guān)心的內(nèi)容，下面可以做到實時篩選，也可以觸發(fā)點擊。但是必須支持模糊查詢，否則用戶必須記住所有內(nèi)容，才能查出要找的內(nèi)容項，這樣的成本太高了。 也有特殊情況，比如查詢保密性較高的賬號密碼列表時，需要精確輸入。
面對手動查詢還是自動查詢，如果常用的查詢條件是組合幾個條件，那么這種情況下，一般是填好全部條件再讓用戶點擊查詢按鈕。 因為如果用戶要查詢的某類個體具有多個屬性，組合條件的查詢顯然是更合理的。 如下圖所示：
如果篩選操作通常是單個條件獨立查詢，各個篩選條件都是相互獨立的，那么一般設(shè)計是填好一個條件便自動查詢。面對單選框還是下拉框，篩選條件有些需要匯總數(shù)據(jù)的，有些只需看單一條件下的數(shù)據(jù)。 比如狀態(tài)包含“已發(fā)布、未發(fā)布和待審核”，除了需要統(tǒng)計各狀態(tài)的數(shù)據(jù)，還需匯總數(shù)據(jù)，此時則是做成單選框比較好，如下圖所示。 如果不需要匯總數(shù)據(jù)，則可以是下拉框或者Tab顯示，如下圖： 我認為如果篩選值少于6個，可以用Tab顯示；多于6個，則是下拉框比較好。
4.1.2 表頭 放置在列標簽上的篩選，受“表格列”內(nèi)容的限制，僅能做單次單列的篩選。表頭篩選是一種復(fù)雜篩選的形式。 點擊表單的篩選按鈕，可以將表頭的篩選字段直接帶入，方便用戶。 可以通過對表頭的點擊，使用戶更快捷進入到自己的篩選條件，在通常情況下，在表單越左的數(shù)據(jù)顯然是越重要的，也是使用篩選去篩頻率最高的，因此高頻的篩選場景基本還是得到滿足。
4.2 滾動與固定4.2.1 固定表頭 固定表頭可以讓用戶明白當前單元格內(nèi)信息的屬性和含義，體現(xiàn)界面友好性。當數(shù)據(jù)列差異不大，用戶不能直觀的根據(jù)表格中的數(shù)據(jù)分辨出數(shù)據(jù)類型時，尤其需要固定頂部表頭。 當然，表頭有操作時，固定表頭更能提升使用效率。
4.2.2 首列固定 呈現(xiàn)大量數(shù)據(jù)時，橫向滾動無法避免，第一列(前幾列)或操作列屬性固定更方便信息的對比與操作。
4.2.3 自定義固定列 作為高級功能，可以對列進行單獨鎖定，以便用戶將數(shù)據(jù)與多個錨定對象進行比較。 4.2.4 固定表尾和底欄 固定表尾和底欄可以避免頁面無數(shù)據(jù)時的空洞。 4.3 排序4.3.1 拖曳排序 常用于數(shù)據(jù)量較小，有拖曳排序需求的場景。又可以運用在多個表一起的情況，從某一表中拖拽行至另外表。
4.3.2 表頭排序 可以輔助用戶快速挖掘出關(guān)注的信息，發(fā)現(xiàn)數(shù)據(jù)信息之間的關(guān)系，一般可按數(shù)字大小、文字拼音順序、字母順序、數(shù)據(jù)的特征等進行排序。 如果表格中不是所有數(shù)據(jù)都能排序，則需要標識出可排序的列，一般采用箭頭做為標識，每次單擊順序相反，實時反饋當前排序中的狀態(tài)。
4.4 控制表內(nèi)容4.4.1 可伸縮列 由于可能有多個數(shù)據(jù)的標題和列，因此有時我們只能根據(jù)表格的寬度來顯示內(nèi)容。 在某些情況下，表格可以允許用戶選擇并選擇他們想要查看的列。在固定寬度的基礎(chǔ)上，允許用戶自由拖動調(diào)整列寬的大?。缮炜s列）。
4.4.2 自定義選擇列 由于一份數(shù)據(jù)報表，往往需要滿足各種不同的角色在不同場景下的需求，因而在數(shù)據(jù)內(nèi)容上，一般采取寧多勿少的原則——即系統(tǒng)提供盡可能詳細的數(shù)據(jù)給用戶。 由此可能就造成了數(shù)據(jù)指標過多，難以在一個屏幕內(nèi)完整的展示，導(dǎo)致需要橫向拉伸，極大的降低了表格的可讀性。 在這個問題上，采取的方法應(yīng)該是將所有的指標名稱羅列在表格上方，并提供復(fù)選框選擇，在默認情況下僅展示最常用、最重要的幾個指標（如下圖）。 這樣做的好處是用戶能在表格上方看多所有的指標名稱，避免了原來需要橫向拖拽才能瀏覽到所有指標的情況。 其次，用戶可以根據(jù)自己的需要，自由的選擇顯示所需指標，隱藏不必要指標，減少干擾。
B端后臺通常會對應(yīng)不同的角色及不同的需求，可讓用戶根據(jù)自己的需求來定義表格的展示列及列的順序。 注意：系統(tǒng)應(yīng)記住用戶上一次自定義列的設(shè)置。 4.4.3 控制顯示密度 較小的行高讓用戶無需滾動頁面就能查看到更多的數(shù)據(jù)。但可掃描性的效果導(dǎo)致視覺解析錯誤。這就是為什么許多成功的數(shù)據(jù)表設(shè)計包含了控制顯示密度的功能。
4.5 查看詳情在全面了解實際業(yè)務(wù)需求的基礎(chǔ)上進行靈活設(shè)計。對表格內(nèi)容的取舍要建立在對業(yè)務(wù)的了解之上，盡量精簡指標，隱藏不必要信息，減少干擾，避免無主次的鋪出所有信息。 不要讓用戶一次性接收過于龐大的信息量，尤其不要超出用戶的視線范圍，避免通過拖拽的方式查看信息。 建議默認只展示用戶所必須的信息，其他次要信息通過展開下拉等方式展示，為輔助信息提供深層入口。 4.5.1 展開行 展開行允許用戶無需打開新頁面即可查看附加信息，防止用戶迷失。
4.5.2 表格組節(jié) 表格中打開表格，表格組節(jié)把相關(guān)的行組合在一起，并且能夠收縮和展開，各組節(jié)層級要有樣式區(qū)別。如果有需要，在每個組節(jié)里可以顯示數(shù)據(jù)概要。
4.5.3 彈窗 包括模態(tài)彈窗和非模態(tài)彈窗，模態(tài)彈窗可以打開任一個條目進行詳細查看，非模態(tài)彈窗可以同時打開多個，并允許拖動彈窗位置進行信息對比。 模態(tài)允許用戶留在表格視圖中，且更多地關(guān)注附加信息和操作：
多模態(tài)功能對于主動使用的用戶來說很有用，他可以通過一系列操作，比較不同項目的細節(jié)：
4.5.4 表格內(nèi)部側(cè)邊展開 相比彈窗減少了頁面層級和隔離感。單擊行鏈接將表格轉(zhuǎn)換為左側(cè)的列表項目視圖和右側(cè)的其他詳細信息。 這讓用戶能夠解析大型數(shù)據(jù)集，而且在涉及到許多項目時也不會丟失它們的位置。
4.5.5 視圖切換 可以通過視圖切換查看更多細節(jié)，比如在“表格”和“左列表+右詳情”之間切換，或者提供“只看文本，看文本和縮略圖，只看縮略圖”幾種查看方式。 4.6 數(shù)據(jù)的編輯操作操作項一般存在于行數(shù)據(jù)最后，以及表頭位置，分別對應(yīng)單條操作與批量操作的場景。 4.6.1 單行操作和批量操作 對于單條數(shù)據(jù)操作頻繁的場景，操作項不多于三個時，操作項跟在條目后面：
對于數(shù)據(jù)批量操作頻繁的場景，建議將操作放到表格頂部，與勾選操作配合使用。文字按鈕傳達更加明確，辨識度強。 4.6.2 單選、多選和全選 單選、多選和全選，一般通過復(fù)選框?qū)崿F(xiàn)選擇條目并進行批量操作。也可以進行整行選擇，即點擊某一行的局部能讓整行被選中，這種做法可增大點擊區(qū)域減少界面的混亂。 單選時必須給出明確的選中樣式，而實際上純粹的單選很少見，所以一般也可以使用復(fù)選框。多選是通過復(fù)選框?qū)崿F(xiàn)，具體設(shè)計時，可以按照數(shù)據(jù)類型進行選擇，如郵件已讀、未讀等。 告知用戶已選多少條數(shù)據(jù)，是否允許跨頁選擇。全選時需要對數(shù)據(jù)范圍進行限定，特別是遇到分頁時，只能選擇當前視圖中的所有項目還是選擇完整列表中的所有項目。
4.6.3 單元格編輯、行編輯與表格編輯 針對于需要進行數(shù)據(jù)編輯的表格： 4.6.3.1 表格編輯 選中一編輯按鈕時，當前表格所有可編輯的數(shù)據(jù)單元格內(nèi)顯示文本修改框。這一功能基本用于大面積需要填寫和修改的時， 如：填寫報表，由于數(shù)據(jù)修改多，這種方法的另一個問題是容易填錯單元格。想象單元格的密集，用戶意外編輯錯誤的單元格比較容易。這樣的話需要編輯/暫存/提交三個操作。 如果發(fā)現(xiàn)編輯的內(nèi)容報錯可被更正，應(yīng)直接引導(dǎo)用戶更正；如果報錯內(nèi)容不可被更正，則告知用戶原因。 4.6.3.2 行編輯 針對同一行標簽下的數(shù)據(jù)編輯。新增數(shù)據(jù)行后，視圖定位到新增的行并高亮顯示，讓用戶快速聚焦。
4.6.3.3 單元格編輯 哪些是可編輯的，哪些不是可編輯十分明確，適于較少的數(shù)據(jù)編輯時。
4.6.4 懸停(操作/選中表格/放大） 當鼠標懸停時，可對當前行背景作出區(qū)分，辨別光標所在行，或放大懸停行區(qū)域，達到醒目的效果。 當提出額外的操作時，用戶懸?？梢允褂脩艟劢褂诋斍安僮?。如谷歌郵箱：
4.7 空表在表格的空白內(nèi)容處加入創(chuàng)建的快捷入口，引導(dǎo)用戶新建表格，或者父級頁面提示倒入數(shù)據(jù)。 如下圖郵箱已發(fā)送郵箱為空時：
沒有創(chuàng)建訴求的，直接告之暫無數(shù)據(jù)。如數(shù)據(jù)是系統(tǒng)產(chǎn)生的，不是由用戶創(chuàng)建的，直接告之暫無數(shù)據(jù)，話術(shù)的表述則需與后臺文案的整體風(fēng)格保持一致。
關(guān)于表格設(shè)計就大概講完了，在總結(jié)歸納中也發(fā)現(xiàn)了自己平常設(shè)計表格中的其他問題。個人感覺還是有很多漏洞，說的不正確的，歡迎大家指正。 參考文獻鏈接1.web表格設(shè)計攻略http://www.woshipm.com/ucd/714641.html 2.數(shù)據(jù)表的用戶界面最佳設(shè)計http://www.woshipm.com/pd/661699.html 3.設(shè)計表格的可重用性https:///designing-tables-for-reusability-490a3760533 本文由 @小龍 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理 題圖來自 Unsplash，基于 CC0 協(xié)議 |
|
|
