表格設計全過程：這次給你講的明明白白
最近做了幾個後臺管理系統，表格在其中佔據著不可或缺的地位。在此對於表格的設計做一個整理，如有考慮不周之處，歡迎留言，共同學習進步~
表格：一種視覺化的資料交流模式，也是組織整理資料的一種手段，主要承載資料的 展示 、 對比 和 歸納 。
一、設計原則
易讀 ：表格應該是一目瞭然的，層級分明的。讓使用者的注意力集中在內容而不是表格的形式。
高效 ：表格頁應該是可互動的，幫助使用者更快來分類獲取資訊以他們習慣的方式。
二、表格結構
下圖展示的為最常見的表格，表格不僅可以包含資料還可以包含視覺化元素，比如：圖表。對於表格，最基本的元素就是表體，也就是資料部分。
- 容器：容器包含表格的所有內容。
- 搜尋/篩選區域：方便使用者快速查詢定位資料，一般位於表格上方。
- 功能性按鈕：一般位於表格上方，有時也可以位於表格下方。
- 表頭：起到對於資料內容的解釋以及可以附加篩選排序等。
- 表體：包含行和列資料以及一些操作（可選）。
- 底欄：底欄包含資料量以及總頁數和當前頁數以及每頁資料量和分頁，底欄資料也可以放置在表格頂部。
2.1 搜尋/篩選區域
在表格設計中，一般搜尋和篩選會同時出現，但是兩者一般很少同時使用來對資料進行定位。搜尋更多的是對單一或者包含某個欄位的的資料來進行定位，有更高的精確度；
不同於搜尋，篩選更多的是查詢一類資料，可以和一些功能相配合使用（匯出）。
根據搜尋和篩選的屬性，我們可以根據實際情況設計搜尋和篩選的表現形式。
根據MECE，我們可以歸納出以下的場景：
- 常用搜索少用篩選，若篩選項多，可以選擇隱藏篩選性，篩選少可以展示出來；
- 搜尋和篩選都常用，可以將搜尋和篩選都展示出來；
- 常用篩選少用搜索，篩選和搜尋同時展示；
- 篩選和搜尋都不常用，展示搜尋隱藏篩選。
搜尋
- 構成：標籤，輸入框，搜尋按鈕（可選）
- 輸入：通過輸入特定的欄位，來查詢單一的資料，在表格中有導航的作用。
- 查詢範圍：可以查詢單個數據型別，也可以查詢多個數據型別
- 搜尋結果：根據輸入的搜尋欄位，可能存在空狀態。對於搜尋結果的排序，可以根據資料的匹配度或者生成時間等排序。
根據 匹配方式 ，可以分為：精確搜尋和模糊搜尋。在大多數情況下，模糊搜尋有利於減輕使用者記憶負擔，但是在同一個輸入框搜尋具有相似度很高的內容（比如手機號和ID都包含數字）時，建議對於該內容使用精確搜尋或者分開兩個輸入框搜尋。
根據 搜尋時效性 ，又可將搜尋分為，實時搜尋和點選搜尋。實時搜尋，指的時在使用者輸入資料時便進行資料的搜尋，具有搜尋快速，搜尋結果實時顯示的好處，但是 僅適用於小資料搜尋 ；點選搜尋，指的是在輸入資料後，需要點選按鈕才能進行搜尋，該搜尋方式適用性強。
根據 表現形式 ，可以將搜尋分為,簡單搜尋和複雜搜尋。簡單搜尋，指的是單一搜索框的形式，視使用者對於搜尋的需求的強烈度，可以放置輸入框在篩選框前或後（注意保持所有頁面統一），簡單搜尋還可以加上標籤篩選，來搜尋不同的資料型別（圖書搜尋—作者，書名，編號等）；複雜搜尋，指的是多個搜尋框的形式，一般只展示一個最常用的輸入框，其餘的輸入框隱藏。
篩選
- 構成：選單項，單選/複選框（可選），搜尋框（可選），篩選按鈕（可選）
- 篩選：通過選擇特定的選項，來對現有的資料進行篩選，篩選項應該遵循MECE原則。
- 資料數量：對於資料篩選沒有交叉的情況，同時篩選項少於5項時，我們可以採用展開的形式（單選框，標籤的形式，頂部tab等形式）來進行篩選；對於超過5項少於25項的情況，我們可以採用下拉選單的形式；對於超過25項的內容，我們可以在下拉選單加上模糊搜尋，採用實時搜尋。
- 資料呈現：一般包含全部或者不限這一項，對於兩者的區別就如同all和any的區別。對於資料的呈現，我們可以根據使用者的行為設定預設值。
根據 觸發方式 ， 可分為：觸發篩選，實時篩選。一般情況下，篩選條件存在交叉時使用觸發篩選，不存在交叉時使實時篩選。也可以根據篩選條件的數量選擇合適的觸發方式，比如條件少時用實時篩選，條件多時用觸發篩選。
根據 篩選的位置 ，可以分為：標題篩選，表頭篩選。標題篩選指的是，在表格的標題處可以進行相關項的篩選，優點時可以節省空間，缺點是一次只能篩選一項；表頭篩選，指的時篩選框單獨呈現在表頭，形式可以是組合篩選（多個篩選條件）和單個篩選，同時視篩選的對使用者的重要程度可以選擇是展開還是隱藏顯示。
互動形式：點選選單呈現下拉框，滑鼠移到相應的項會有視覺區分，點選該項選中該項，外部顯示選中的項。日期篩選建議使用一次點選選擇日期範圍，而不是需要點選兩次來分別選擇，同時禁用無資料的日期。
2.2 功能性按鈕
常見的功能性按鈕有：匯出，建立，設定表格結構（定製表單，設定行高…）等（功能性按鈕在這裡指的是對於表格資料進行增刪改查等 ）。
根據人的閱讀習慣和人機工程，一般重要的按鈕(破壞性按鈕除外)放在左邊，次要的放在右邊，常用的按鈕放在左邊，不常用的按鈕放在右邊。
所以我們可以根據按鈕的重要程度和使用頻率來設計按鈕的放置位置。
匯出
形式：一般為填充主色彩的按鈕形式，有禁用/啟用/Hover/Focus/Press五種狀態。
互動：在未選中資料時（有複選框的形式），按鈕為禁用狀態，若設計為啟用狀態，可以在點選是出現toast提示；在選中資料時，點選匯出資料。
匯出資料：匯出的資料可以是部分資料也可以是全部資料，視實際情況而言。對於匯出檔案的名稱一般的處理為：當前頁面的名稱+當前日期（時間視情況而定）。不匯出表單的相關操作，只匯出資料。
建立資料
形式：一般為填充主色彩的按鈕形式，有禁用/啟用/Hover/Focus/Press五種狀態。
互動：一般點選建立按鈕，會出現包含建立專案資料的彈窗。彈窗一般包含：標題，建立專案表單，取消/建立按鈕（建立按鈕一般在必填資料未填寫時呈現禁用狀態）。
彈窗表單設計注意點：1.選擇合適的輸入方式 2.顯示必要的資料項以及預設的資料（預設的序號等） 3.能建立資料，一般就能刪除資料
自定義表單項
使用場景：由於一份資料報表，往往需要滿足各種不同的角色在不同情況下的需求，因而在資料內容上，一般採取寧多勿少的原則，即系統提供儘可能詳細的資料給用 戶，由此就造成了表格資料項過多，難以在一個螢幕內完整展示，導致需要橫向拉伸，極大的降低了表格的可讀性。
表現形式：一般有兩種形式，一種是將所有的資料項都展示在表格的上方（可以收起/展開）；另一種是點選按鈕出現彈窗進行選擇配置。
設計注意點：一般預設顯示最重要，最常見的幾個資料項，使用者可以根據自己的需求自定義資料項。
設定行高
使用場景：由於使用者閱讀表單的裝置的多樣性，一個統一的行高會導致在不同尺寸裝置上一屏顯示的資料的差異化，影響閱讀的效率。
設計注意點：設定行高為興奮需求，可以提高使用者的使用者體驗。所以我們可以視表格的具體情況來設計設定行高的形式，可以放置在設定按鈕裡，也可以在外部按鈕較少的情況下展示出來。
2.3 表頭
作用：解釋當前列資料。所以在資料有明顯的差異以及能自我表意的時候，甚至可以去掉表頭（郵箱），畢竟表頭也佔據一定的空間。
設計注意點：
- 表頭標題儘量簡約
- 表頭的UI表現區別於正文
- 表頭標題與資料對齊，完整顯示標題
根據表頭的構成，可以分為三類：
- 純文字表頭-僅起到解釋資料屬性的作用
- 多功能表頭-可以篩選、排序、搜尋相關資料
- 多級表頭-資訊分類層級較多的情況下使用
對於多功能表頭，常見的功能包含：全選複選框，篩選，搜尋，排序。
- 全選複選框： 對於全選，有兩種情況，一種是全選當前頁面的所有資料項，另一種是全選所有資料項。所以為了適應不同的場景需求，複選框可以進一步篩選是全選當前頁面所有資料還是所有資料，也可以篩選別的型別的資料（已讀、未讀、已標記、未標記等）。
- 篩選： 表頭篩選和單獨篩選相比，只能篩選一列資料，使用實時篩選，但是具有節省空間的作用。篩選不僅可以篩選單選或複選，還可以篩選日期。
- 搜尋： 我們還可以對於一列的資料在表頭進行搜尋，來節省空間。
- 排序： 設定檢視資料優先順序順序，快速發掘最關注的信。可以使用上下按鈕進行排序（只有兩種排序），還可以使用下拉選單進行排序（適用於多種排序）。同時我們可以根據使用者的認識來設計排序，比如對於銷量，我們可以只顯示從高到低的排序(使用者並不會對於低銷量的商品感興趣)。對於排序的方式，有按A-Z首字母升序/降序，也有按數值升序/降序。
對於 表頭的互動 ，可以將表頭分為固定表頭和隨資料一起滾動的表頭。固定表頭，一般標題的資料屬性相似或者資料很多或者需要橫向滾動表格時，固定表頭便於分辨記憶。對於滾動表頭，建議若資料之間差異大可以直接去掉表頭。
2.4 表體
表體的構成：資料，分割線，功能操作（可選）。
表體的佈局：
- 垂直佈局 —弱化了行，強化了列，用於行與行之間的資料對比，一般用於資料統計；
- 水平佈局 —強化了行，弱化了列，符合閱讀從左往右的順序，強調資訊的連貫性，多用於多資料的情況，使用較為廣泛；
- 矩形佈局 —每個資料被分割，適用於資料過多，沒有足夠的空間來區分資料的情況。
資料：
對於資料，根據表現形式可以分為行資料和列資料。行和列是包含資料的容器。
行：
一行資料一般都是同一主體的不同屬性（比如：同一使用者的相關資訊：ID、姓名、身份證、性別、年齡等。當然行資料也可以是對於列資料的統計。
互動：滑鼠移到一行資料一般有視覺區分（顏色或者是高度-陰影）。已點選閱讀的項有視覺區分（顏色弱化或者有標記）。
UI表現：為了加強行資料的聯絡，我們可以使用斑馬線（顏色差距不宜太大）或者是去除豎分割線的形式，來加強視覺引導，提高閱讀效率。
行高：行高通過資料的密度和一屏顯示的行數，來影響使用者提取資料的效率。考慮表格的行高時，我認為可以參考文字排版的常用做法，將整個表格的行高分成文字行高、文字與分割線間距離，即上下間距兩部分來考慮，文字行高可以設定為字號的1.2-1.8倍，文字與分割線間距離可以設定為字號的1-1.5倍。
行高因為使用者習慣和使用者裝置的不同，無法滿足所有使用者的需求，所以對於行高我們可以讓使用者去選擇合適的行高。
列：
一列資料指的是同一屬性的資料。根據7±2原理，建議最多展示9條列資料，同時少量的列資料也方便使用者瀏覽。建議 將重要的列資料居左放置， 表格只顯示重要的資料，對於次要的資料可以放入詳情頁。
UI表現：為了加強縱向資料的對比，可以使用兩種方式，1.縱向斑馬線，一般用於列與列之間的資料對比，用處有限；2.有時會使用不同粗細的縱向分割線對資訊進行區隔，增加同類資訊對比性。
列寬：
- 資料長度固定時，一般顯示完整資料，具有固定的列寬，比如手機號可以設定150px；
- 資料長度不固定時，首先我們應該瞭解使用者的輸入內容的情況，比如使用者個性簽名，我們設定了200字元，但是經過資料分析，發現大多使用者的簽名長度少於20，那我們可以設定列寬為20，從而保證大多數資料的完整；
- 較少情況下，我們設定的資料不能完整的顯示資料，但是資料對於使用者有比較的重要。那我們可以讓使用者手動拖拽調整列寬（不影響別的列寬，可能會出現橫向滑動的情況）。
互動形式：對於一些列資料我們可以加上超連結，比如ID，使用者稱號等。注意區分別的資料，比如可以使用顏色。
顯示：
（1）字型的選擇
表格資料一般包含文字和數字。字型的選擇，保證字型的可讀性。
對於文字，有以下幾點建議：
- 避免全大寫字型，因為它很難讀，需要轉化思維；
- 避免使用襯線字型，因為個性會產生閱讀噪音，不利於使用者對資料的理解和思考；
- 避免使用斜體，易引起視線疲勞，影響閱讀；
- 避免使用多種字型和選擇可讀性高的字型，保持風格統一。
對於數字，建議使用表格數字而非舊式字型和比例字。數字的單位，一般在表頭中顯示。
為了便於使用者資訊的提取，我們可以設計數值的格式。表格數字不是越精確越好，需要多少有效數字就顯示多少，不必太多。所以我們可以設定數字的格式 :
- 顯示數值，但是設定小數點位數，千分位和數值單位等；
- 顯示百分比，設定小數點位數。
對於數值，我們應該減少使用者的計算，通過對比分析資料，在原有的數值上給出差值，升降變化，總計值平均值等分析性資料結果，方便使用者的查閱。
（2）對齊很重要
對齊可以遵循以下3條原則：
- 數字右對齊；
- 文字資訊左對齊；
- 表頭與資料對齊。
數字是從右向左讀的：這是因為，我們對比數字時，首先看個位，然後十位、百位。多數人也是這麼學會算數的——從右邊開始，向左移動，在移動中傳遞數字。
文字資訊是從左向右讀：這是符合人們的閱讀習慣的，一般人們的閱讀方式是從左往右，從上往下。當然不同的區域有不同的閱讀習慣，比如阿拉伯就是從右往左的閱讀習慣。
通常，表頭應當符合資料的對齊方式。這能保持表格豎直方向整潔，營造一致性和上下文環境。
（3）資料顯示
在一個單元格資料顯示不完整時，我們可以截斷資料以…暗示資料的不完整。
對於截斷資料的展示，我們可以使用氣泡彈窗的形式（檢視靈活，操作成本低，但是影響檢視其他內容）或者是下拉檢視（適合檢視較多的內容，不會影響檢視其他內容，操作成本高）。
空單元，會給使用者帶來疑惑，到底是無資料還是數值為0？
對於數值為0的資料，我們應顯示0，數值格式的處理和其他數值相同（小數點等），方便檢視；對於無資料，我們可以使用“-”來顯示。
（4）分割線
如果對錶格中的資料使用了合適的對齊方式，分隔線就會很多餘。使用分隔線的首要好處是可以縮小元素間的空間，但仍可以區分各元素。即便要使用分隔線，也應該把顏色儘量減淡，不能妨礙快速瀏覽所以建議採用相同顏色的具有一定透明度的分割線，減少視覺噪音。
水平分隔線的用處是最大的，因為它可顯著減輕長表格佔用的垂直方向的視覺重心，加快大量資料的對比工作，以及隨著時間看清趨勢。
（5）功能性操作
表體的功能操作根據針對的物件，可以分為：
- 單個數據—可以針對單個數據進行編輯，形式可以是框內編輯（不適合長內容），可以浮層編輯，也可以彈窗編輯（會覆蓋資訊）；
- 整行資料—一般操作放置在表格的最後一列，建議超過兩個的操作，次要操作彈窗顯示（節省水平空間，防止誤操作），在滑鼠hover狀態時顯示彈窗；
- 在針對資料操作過多時，我們可以在選中該條資料時顯示針對資料的操作（Gmail）。
（6）操作按鈕的顯示
- 圖示（和文字相比佔據更少的空間，但是要注意其表意性）；
- 圖示+標籤（佔據更多的水平空間，但是視覺化程度更高，適用於單個操作的情況）；
- 文字連結（表意性強，但是可能存在文字過長的問題，建議在只有少於3個按鈕的時候使用，或者在下拉選單中使用）。
對於單條資料的編輯修改，如果資料內容固定且只有幾項，則可以使用下拉選單的形式；若資料內容不固定，但是資料長度短，可以在單元格內修改；若資料長度不固定，這可以使用彈窗的形式來進行編輯。
2.5 底欄
底欄同樣可以放置在表頭的上方。
底欄一般包含以下幾個部分：
- 當前頁面資料的條數設定（可固定配置也可使用者手動設定）以及總的資料條數；
- 總頁數以及當前處於的頁數顯示；
- 前後翻頁功能（前一頁,後一頁，首頁，尾頁）；
- 跳轉功能（對於很多頁數的表格尤其適用）。
對於分頁器可以分為以下幾類：
- 複雜分頁器：可以設定每頁的顯示條數，適合大資料量。使用者可以根據自己的顯示屏調整顯示條數以提 高資料處理效率。對於條數的設定，可以選擇已設定的條數，也可以手動輸入設定條數。
- 簡單的分頁器：不可以設定每頁條數,甚至沒有跳轉功能
分頁器的功能就是載入資料，該功能還有一種方式可以取代分頁器，那就是 載入更多。
但是 載入更多 只適合小資料量，它具有節省空間，同時能給使用者一種沉浸式體驗。但是這種模式，對於資料量難以把握，操作不靈活。
本文由 @Day_1 原創釋出於人人都是產品經理。未經許可，禁止轉載。
題圖來自 Pexels ，基於 CC0 協議