中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導語：在B端產品設計中，越來越多的設計師需要和數據打交道。表格作為一種常見的信息組織整理手段以及web頁面的基礎設施之一，其重要性不容忽視。本文作者結合最近做的幾個項目和相關設計經驗并且參考了相關文檔，為大家梳理一個表格設計框架，能夠對你的設計有所幫助。

1. 表格的定義與用途

1.1 什么是表格

表格：既是一種可視化交流模式，又是一種組織整理數據的手段。一般來說，由行、列分割而成的單元格是構成表格的基本元素。

表格的行、列之間相互獨立又相互關聯，充滿變化。行與列形成了單元格的長與高，不同的長高有著疏密之別，進而使表格產生充實或透氣之感。

經典的表格：水平和垂直邊框清晰可見，表頭與包含內容的單元格分開。

1.2 表格的用途

表格是常見的信息組織手段，是web頁面布局的重要組成部分，可用于保存和展示少量或大量結構化、靜態(tài)化及處于變化中的數據。

大量使用表格，這可能是效率最高的信息展示方式了。表格可以高效組織信息和數據，讓用戶方便閱覽、對比和分析。

具體說來，表格結構簡單，分隔明確，可保證信息可讀性，易于用戶快速掃描瀏覽并獲取內容；

• 視覺方面，數據經過歸納整理和合理布局后，更易于用戶感知及分辨其中的關聯與區(qū)別，并進行對比分析；
• 交互方面，用戶可以對數據信息進行排序、搜索、篩選、分析、分類等相關業(yè)務的復雜操作。

2. 表格的構成

一般來說，表格有水平型、垂直型和矩陣型三種布局。

1. 水平布局會弱化列的存在，強調信息的連貫性，保證用戶閱讀信息時視覺流是從左到右的，然后自上而下逐條掃描，適合大量信息的瀏覽。
2. 垂直布局是在行分割的基礎上，通過強化列的視覺特征來突出行間信息的對比。
3. 矩形布局的表格有均勻而明顯的分割線，邊框單元格比較明顯，適用于列信息較多而沒有足夠空間用留白來分割信息時。

從視覺結構的表現角度，將“表格”的構成分為六大類：

1. 標題
2. 篩選操作區(qū)
3. 表頭
4. 表體
5. 表尾
6. 底欄

由表頭、表體、表尾構成內部區(qū)域，由標題、篩選操作、底欄構成外部區(qū)域。

2.1 標題

標題是對表格信息內容的整體概括，可包含數據來源及屬性(日期、地區(qū)等)，以便用戶對表格內容有整體認知。

給數據表格起一個清晰簡明的標題，與其他的設計同等重要。有了好的標題，表格就可以獨立使用，它們可以用于許多不同場合中，也可以由外部來引用。

2.2 篩選操作區(qū)域

篩選操作區(qū)域是位于表頭的上方，包含篩選，操作按鈕等其他操作。

篩選區(qū)包含模糊搜索和條件篩選，按鈕區(qū)的按鈕可分為增刪改和其它業(yè)務處理操作。合理設計篩選區(qū)可以大大提高用戶的效率。

2.3 表頭

表頭對一些問題的性質的歸類，每張表按慣例要對數據的簡況做出反映，如：被調查者的性別、年齡、學歷、收入、家庭成員組成、政治背景、經濟狀況等。

表頭的字段名稱應當符合用戶思維習慣，保證用戶理解。如果有需要解釋，則在字段名稱旁邊加說明小圖標。表頭在這里也指列行標簽，是對所屬行或列數據的描述。

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

2.4 表體

表體是表格的主體內容，具體內容的填充區(qū)域，由一個個基礎的單元格組成。

包含數據，分割線，背景，也可進行操作，如鏈接跳轉(項目或者商品)。

2.5 表尾

表尾一般是統計信息，例如總計、平均數等。

2.6 底欄

底欄緊跟在表格正文之后，主要展示正文中的數據量以及單頁數據條目信息，底欄一般放統計信息、分頁、備注、加載按鈕等內容。

底欄最常見的元素就是分頁，分頁可以放在上部、下部或上下部均有，而分頁固定能省去用戶需要翻到頂部或底部進行操作的麻煩。

無限滾動可以替代分頁，但對于功能優(yōu)先的應用未必適用。

下圖為加載按鈕，比較少見：

分頁可分為：整體頁碼平鋪式、全功能版、簡易版等，需要根據不同的場景選擇最優(yōu)的設計方案，比如有的時候并不需要定點跳轉。

3. 表格的視覺

3.1 視覺標準

3.1.1 填充與邊距

合適的填充和邊距對于視覺設計至關重要，既包括保證數據單元格之間的留白，又包括單元格內部留白，以保證易讀性。

當創(chuàng)建表格設計規(guī)范并嚴格遵循后，團隊在執(zhí)行其它項目時，都可以創(chuàng)建視覺一致的表。

3.1.2 對齊方式

合適的對齊方式能夠提升數據的瀏覽效率。表格內信息的縱向列對齊能夠很好的形成視覺引導線。

通過對齊，會讓表格更加規(guī)范易理解，給用戶視覺上的統一感，視線流動更順暢，讓用戶快速的捕捉到所需內容。

可以遵循3條半對齊原則：

1. 數字應該右對齊
2. 文字信息左對齊
3. 表頭與數據對齊
4. 不要使用居中對齊

數字是從右向左讀的——這是因為我們對比數字時，首先看個位，然后十位、百位。

當個位數值對齊時，我們就可以快速查看前面的數值，比較多個數據的大小。

因此，表格的數字應當右對齊。因為我們閱讀文字信息是從左向右讀，所以不采用左對齊，會降低瀏覽文字的效率。

表頭應當同數據的對齊方式一致，這能保持表格豎直方向整潔，營造一致性。

居中對齊會導致表格的行參差不齊，瀏覽數據會更難，常常需要額外的分隔物。固定的內容居中對齊，如狀態(tài)文字(成功，失敗等)，這樣的話信息呈現會更加突出，并能節(jié)省表格空間。

跨列合并單元格時，內容頂對齊。多行的數據表，用戶從上往下閱讀時往往搞不清楚對應的數據列內容。

跨行合并時，靈活處理，一般指多級表頭，采用居中對齊，相應的未合并的表頭頁簽也要居中對齊。如：日期之類的數字應采用始終相同的長度進行格式化，如：2020/07/19而不是2020/7/19。

3.1.3 色彩

表格具有的顏色盡可能少，顏色和可讀性是密切相關的，要合理的使用顏色，盡量使用簡單的背景色和點綴色。

背景色方面，除了行/列交替顏色(可以區(qū)隔內容，引導視線)、懸停高亮底色(便于準確辨別光標所在行)等處理方法，還可以對表頭表尾進行視覺區(qū)分。但不能增加過多顏色以引起混亂。

邊框顏色不能為黑色。當字體選擇深灰色，邊框選擇淺灰色，就可以減少我們視覺疲勞，不會使表格看起來令人生畏。

3.2 表頭的優(yōu)化

表頭標簽應該簡煉準確，以達到節(jié)省表頭空間和減輕視覺壓力的作用，讓用戶注意力聚焦在數據本身。對于B端產品而言，先能把事情說清楚，然后再考慮文字的簡潔性。

數據結構比較復雜的時候，使用多級表頭來體現數據的層次關系，如下圖：

3.3 行的優(yōu)化

3.3.1 默認排序

常以創(chuàng)建時間進行排序，即最新創(chuàng)建的排在最前面。

3.3.2 合適的行高

行高是非常重要的參數，直接影響著閱讀體驗。

較小的行高承載更多信息，讓用戶無需滾動鼠標即可看到更多數據，但會降低掃描效果，導致視覺解析錯誤。適宜的行高使得數據更易于被閱讀，但這不代表行高越大越利于閱讀。

行高的大小應該是與字體成比例的，在單行文字的情況下表格間距一般在字符大小的三倍以內。

設置行高的原則：

• 單行數據顯示時，數據顯示緊湊、有序。
• 多行數據顯示時，弱化表格形式，提供豐富的視覺展現。

因此對于單行顯示的表格，建議行高為字體高度的2.5倍到3倍；對于多行顯示的表格，建議內容區(qū)到上下邊框的距離略小于文字高度。

當然，也可以提供切換按鈕讓用戶自己控制顯示密度。

3.3.3 橫向斑馬線

斑馬線又稱作間行換色、隔行變色、行交替樣式。

它能讓行間界限更為明顯，同時加強視覺流的橫向引導，避免在閱讀過寬表格時出現錯行、迷失的情況，要注意兩種顏色不能反差過大。

另外，可以根據實際情況選擇是否與邊框同時使用。

3.3.4 行的強調

有時為了強調行內信息的連續(xù)性，可去掉單元格的縱向分割線，僅使用橫向分割線和底色分割，使橫向信息更加連續(xù)通暢，以提升閱讀效率。

此時，可以對行內信息進行擴充，進一步弱化表格形式，豐富各類信息的視覺呈現，同時兼顧行與行之間的關鍵信息的對比。

3.4 列的優(yōu)化

3.4.1 列的選擇

盡量減少列的數量，關注用戶需要的必要信息，避免出現用戶不需要的數據，同時要避免數據缺失，用戶需要的非重點、輔助性信息可以通過次級入口來解決。

在表格數據可以自我解釋的情況下，列標簽就不是必須的了，如電子郵件的表格，就不需要列標簽，因為發(fā)件人和郵件主題以及時間的區(qū)分度比較高。

3.4.2 合適的列寬

列寬的處理有三種方式：

1. 通過柵格，由列的數量決定列寬；
2. 可以固定部分列的寬度，其余列則按百分比處理；
3. 在固定寬度的基礎上，允許用戶自由拖動調整列寬的大?。ó斎晃矣X得不要太拘泥與這個，合適就好）。

3.4.3 列的強調

一般列的強調是配合表格列排序功能使用的，如點擊率、訪問量的排序。

有時會使用不同粗細的縱向分割線對信息進行區(qū)隔，增加同類信息的對比性。也可以任意指定數據列強調顯示，表示當前的操作結果。

如下圖，表示目前日期正在降序排列：

為便于用戶對數據進行對比分析，可以在原始數據的基礎上給出差值、升降變化、平均值、總計等數據處理結果，減少用戶心算和再做數據加工的過程，使重要信息突出，提高用戶的閱讀速度，幫助用戶快速定位和了解重點信息。

3.5 單元格數據展示

3.5.1 度量單位的使用

其中的關鍵區(qū)別在于數字的大小，為了更好對齊和對比，建議使用等寬的表格字體。數據的度量單位無需重復，只需要在表頭標識清楚即可。

3.5.2 空白單元格處理

一般指空數據或零數據的情況，空白單元格容易造成用戶困惑甚至誤解，用戶會搞不清楚到底是沒有數據，還是數值為零。

正確做法是，對于數據為零的單元格，要填上0，且小數點后位數、單位，都要與上下單元格保持一致。

對于沒有數據的單元格，通常是用“－”表示。

B端后臺數據類型較多，最好能為空數據做出釋義，可以加在“列標簽”的解釋文案中。

3.5.3 減少用戶的計算

對于進行對比分析的數據，在原始數據的基礎上可以給出差值、升降變化、總計值、平均值等分析性的數據處理結果，直達用戶獲取信息的目標(需要明確用戶目標)，而盡量減少用戶心算或者線下處理的過程。

如：股票數據變化，音樂排行榜等，能顯著提升信息的閱讀和理解效率。

下圖表尾對數據的總計值：

3.5.4 關鍵屬性標識

比如用戶重點關注數據狀態(tài)、某些數據的上升和下降等，可以用符號進行標識，幫助用戶快速定位到目標信息。

下圖音樂排行榜用帶顏色升降小圖標示意當前歌曲排行狀態(tài)，紅色為上升、綠色為下降：

3.6 分隔線

水平分隔線，能顯著減輕表格在垂直方向的視覺重量，提升用戶進行大量數據對比時的速度。

垂直分隔線，在表格中使用適合的對齊方式后，那么就可以省略；數據量級比較大的表格，建議保留，可以使用較淡的分隔線，提升瀏覽速度。

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

如果在表格中使用適合的對齊方式，分隔線就是多余的。但由于數據量級不同，即使要用，分隔線也要淡，不能妨礙快速瀏覽。

3.7 分頁及翻頁

用戶一般是能不用翻頁就不會用翻頁功能，涉及到跨頁的數據操作時，分頁會帶來不便。

但受限于數據加載的壓力，在WEB端、手機端等需要實時下載數據的終端，通常需要分頁展示數據來緩解服務器的壓力，因此用戶需要分頁查看和操作。

而在客戶端，數據已下載到了本地，就可以采用無限滾動的方式呈現數據，不需要分頁展示，這樣用戶操作的成本更低。

在WEB端，表格的的數據內容超過一定“數量”時需要提供翻頁功能，這個“數量”由表頭的數據的高度、表格的行間距、目標用戶群體的顯示設備的配置等因素來決定。

原則是不要超過一屏，考慮到每個用戶的使用習慣，可以讓用戶自定義每頁的顯示的數量，相比于跨屏翻頁而言，向下滾屏會更便利。

翻頁控件內容 ：用戶自定義每頁顯示的數量，當前頁碼(行數)，全部數據的頁數(行數)，向前翻頁，向后翻頁，到達第一頁，到達最后一頁等。

注意:

1. 當前用戶的數據未超過一頁時，無須展示翻頁控件。
2. 對于B端后臺的用戶而言，告之當面數據的行數比當前的頁數更有用。
3. 翻頁按鈕不可用時，須給出置灰態(tài)。

翻頁控件做為篩選數據的一種方式，通常會結合日歷、排序、篩選等其它控件一起使用，來提升用戶的操作效率。

如：網易的郵箱，翻頁與日歷結合一起使用，對于有大量郵件數據的用戶來說，查閱郵件的效率更高。

無限滾動/延遲加載呢？

許多應用程序已完全擺脫了分頁，如：直接鼠標滾動或點擊“加載更多”按鈕以查看更多數據。

這只會加載當前視圖中適合的內容，并且如果用戶有意識地采取行動以加載更多內容，則將加載更多項目。

3.8 全屏查閱

減少與表格無關的視覺干擾，提供表格的沉浸式閱讀體驗，可提供全屏表格的入口，但應注意可以讓用戶便捷的退出。

全屏模式可直接屏蔽掉上方的報表區(qū)域和左側及頂部的導航欄，用戶通過ESC鍵可隨時退出全屏模式，學習成本較低。

3.9 降低視覺噪音

信息內容的有效傳達是表格設計的本質，就表格本身而言應該是隱藏的，應該讓用戶注意力聚焦在核心內容上。

所以，做減法設計就顯得可貴了。

3.9.1 減少分隔線

這必須是在數據允許的情況下。水平分隔線能顯著減輕長表格在垂直方向的視覺重量，加快大量數值的對比工作。

但如果在表格中使用適合的對齊方式，豎直分隔線就完全是多余的。它們最大的貢獻就是縮減元素之間的距離后，即使要用垂直分割線，也要非常淡，不能妨礙快速瀏覽。

不使用斑馬線，使用不同底色區(qū)分指示不同類型的數據（如總和、平均值）是有必要的，但是斑馬線在很多時候又是沒有必要的，因為它們是同一類數據，而且水平分割線就已經明顯區(qū)隔了。

省去所有分隔線，對于較小的，動態(tài)性較小的表，可以省去所有分隔線，并獲得醒目的外觀。當然，這更多是數據量不大的情況。

3.9.2 盡量以黑白為主

運用彩色表達組織或含義可能會增加誤解，并且引發(fā)視覺障礙者的易用性問題。

3.9.3減少其他圖形元素的使用

其他圖形元素，如星號，三角，圓點，對勾，叉等，雖然能夠幫助組織數據、更直觀的傳達信息，但物極必反，少即是多，要注意克制這些元素的使用。

3.10 其他樣式

3.10.1 圖表的使用

除了在單元格中引用圖表之外，很多時候都會提供圖表/表格視圖切換，便于用戶從圖形角度查看、分析自己關注的數據。

有時也會有“圖表+表格”的形式，這時候，表格往往只作為明細放在頁面底部。大量的表格也會導致視覺的單調。

3.10.2 卡片的使用

在信息量較少或特別多的情況下可以用卡片的形式來展示信息，將信息以組的概念呈現，單張卡片內的信息按優(yōu)先級進行排列。

此外，卡片彼此之間又形成一個整體。

4. 表格的交互

4.1 篩選與搜索

4.1.1 表上方

當表格的數據量較大時，可增加搜索功能和對數據的分類來提升用戶查找數據的效率，提供多維的篩選和排序，減少用戶尋找信息的時間。

輸入框可以輸入用戶關心的內容，下面可以做到實時篩選，也可以觸發(fā)點擊。但是必須支持模糊查詢，否則用戶必須記住所有內容，才能查出要找的內容項，這樣的成本太高了。

也有特殊情況，比如查詢保密性較高的賬號密碼列表時，需要精確輸入。

面對手動查詢還是自動查詢，如果常用的查詢條件是組合幾個條件，那么這種情況下，一般是填好全部條件再讓用戶點擊查詢按鈕。

因為如果用戶要查詢的某類個體具有多個屬性，組合條件的查詢顯然是更合理的。

如下圖所示：

如果篩選操作通常是單個條件獨立查詢，各個篩選條件都是相互獨立的，那么一般設計是填好一個條件便自動查詢。面對單選框還是下拉框，篩選條件有些需要匯總數據的，有些只需看單一條件下的數據。

比如狀態(tài)包含“已發(fā)布、未發(fā)布和待審核”，除了需要統計各狀態(tài)的數據，還需匯總數據，此時則是做成單選框比較好，如下圖所示。

如果不需要匯總數據，則可以是下拉框或者Tab顯示，如下圖：

我認為如果篩選值少于6個，可以用Tab顯示；多于6個，則是下拉框比較好。

4.1.2 表頭

放置在列標簽上的篩選，受“表格列”內容的限制，僅能做單次單列的篩選。表頭篩選是一種復雜篩選的形式。

點擊表單的篩選按鈕，可以將表頭的篩選字段直接帶入，方便用戶。

可以通過對表頭的點擊，使用戶更快捷進入到自己的篩選條件，在通常情況下，在表單越左的數據顯然是越重要的，也是使用篩選去篩頻率最高的，因此高頻的篩選場景基本還是得到滿足。

4.2 滾動與固定

4.2.1 固定表頭

固定表頭可以讓用戶明白當前單元格內信息的屬性和含義，體現界面友好性。當數據列差異不大，用戶不能直觀的根據表格中的數據分辨出數據類型時，尤其需要固定頂部表頭。

當然，表頭有操作時，固定表頭更能提升使用效率。

4.2.2 首列固定

呈現大量數據時，橫向滾動無法避免，第一列(前幾列)或操作列屬性固定更方便信息的對比與操作。

4.2.3 自定義固定列

作為高級功能，可以對列進行單獨鎖定，以便用戶將數據與多個錨定對象進行比較。

4.2.4 固定表尾和底欄

固定表尾和底欄可以避免頁面無數據時的空洞。

4.3 排序

4.3.1 拖曳排序

常用于數據量較小，有拖曳排序需求的場景。又可以運用在多個表一起的情況，從某一表中拖拽行至另外表。

4.3.2 表頭排序

可以輔助用戶快速挖掘出關注的信息，發(fā)現數據信息之間的關系，一般可按數字大小、文字拼音順序、字母順序、數據的特征等進行排序。

如果表格中不是所有數據都能排序，則需要標識出可排序的列，一般采用箭頭做為標識，每次單擊順序相反，實時反饋當前排序中的狀態(tài)。

4.4 控制表內容

4.4.1 可伸縮列

由于可能有多個數據的標題和列，因此有時我們只能根據表格的寬度來顯示內容。

在某些情況下，表格可以允許用戶選擇并選擇他們想要查看的列。在固定寬度的基礎上，允許用戶自由拖動調整列寬的大?。缮炜s列）。

4.4.2 自定義選擇列

由于一份數據報表，往往需要滿足各種不同的角色在不同場景下的需求，因而在數據內容上，一般采取寧多勿少的原則——即系統提供盡可能詳細的數據給用戶。

由此可能就造成了數據指標過多，難以在一個屏幕內完整的展示，導致需要橫向拉伸，極大的降低了表格的可讀性。

在這個問題上，采取的方法應該是將所有的指標名稱羅列在表格上方，并提供復選框選擇，在默認情況下僅展示最常用、最重要的幾個指標（如下圖）。

這樣做的好處是用戶能在表格上方看多所有的指標名稱，避免了原來需要橫向拖拽才能瀏覽到所有指標的情況。

其次，用戶可以根據自己的需要，自由的選擇顯示所需指標，隱藏不必要指標，減少干擾。

B端后臺通常會對應不同的角色及不同的需求，可讓用戶根據自己的需求來定義表格的展示列及列的順序。

注意：系統應記住用戶上一次自定義列的設置。

4.4.3 控制顯示密度

較小的行高讓用戶無需滾動頁面就能查看到更多的數據。但可掃描性的效果導致視覺解析錯誤。這就是為什么許多成功的數據表設計包含了控制顯示密度的功能。

4.5 查看詳情

在全面了解實際業(yè)務需求的基礎上進行靈活設計。對表格內容的取舍要建立在對業(yè)務的了解之上，盡量精簡指標，隱藏不必要信息，減少干擾，避免無主次的鋪出所有信息。

不要讓用戶一次性接收過于龐大的信息量，尤其不要超出用戶的視線范圍，避免通過拖拽的方式查看信息。

建議默認只展示用戶所必須的信息，其他次要信息通過展開下拉等方式展示，為輔助信息提供深層入口。

4.5.1 展開行

展開行允許用戶無需打開新頁面即可查看附加信息，防止用戶迷失。

4.5.2 表格組節(jié)

表格中打開表格，表格組節(jié)把相關的行組合在一起，并且能夠收縮和展開，各組節(jié)層級要有樣式區(qū)別。如果有需要，在每個組節(jié)里可以顯示數據概要。

4.5.3 彈窗

包括模態(tài)彈窗和非模態(tài)彈窗，模態(tài)彈窗可以打開任一個條目進行詳細查看，非模態(tài)彈窗可以同時打開多個，并允許拖動彈窗位置進行信息對比。

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

多模態(tài)功能對于主動使用的用戶來說很有用，他可以通過一系列操作，比較不同項目的細節(jié)：

4.5.4 表格內部側邊展開

相比彈窗減少了頁面層級和隔離感。單擊行鏈接將表格轉換為左側的列表項目視圖和右側的其他詳細信息。

這讓用戶能夠解析大型數據集，而且在涉及到許多項目時也不會丟失它們的位置。

4.5.5 視圖切換

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

4.6 數據的編輯操作

操作項一般存在于行數據最后，以及表頭位置，分別對應單條操作與批量操作的場景。

4.6.1 單行操作和批量操作

對于單條數據操作頻繁的場景，操作項不多于三個時，操作項跟在條目后面：

• 當超過三個時，建議將操作折疊收起，點擊icon彈出多個操作選項；
• 當僅用操作時，應致灰，鼠標選中可顯示原因。

對于數據批量操作頻繁的場景，建議將操作放到表格頂部，與勾選操作配合使用。文字按鈕傳達更加明確，辨識度強。

4.6.2 單選、多選和全選

單選、多選和全選，一般通過復選框實現選擇條目并進行批量操作。也可以進行整行選擇，即點擊某一行的局部能讓整行被選中，這種做法可增大點擊區(qū)域減少界面的混亂。

單選時必須給出明確的選中樣式，而實際上純粹的單選很少見，所以一般也可以使用復選框。多選是通過復選框實現，具體設計時，可以按照數據類型進行選擇，如郵件已讀、未讀等。

告知用戶已選多少條數據，是否允許跨頁選擇。全選時需要對數據范圍進行限定，特別是遇到分頁時，只能選擇當前視圖中的所有項目還是選擇完整列表中的所有項目。

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

針對于需要進行數據編輯的表格：

4.6.3.1 表格編輯

選中一編輯按鈕時，當前表格所有可編輯的數據單元格內顯示文本修改框。這一功能基本用于大面積需要填寫和修改的時，

如：填寫報表，由于數據修改多，這種方法的另一個問題是容易填錯單元格。想象單元格的密集，用戶意外編輯錯誤的單元格比較容易。這樣的話需要編輯/暫存/提交三個操作。

如果發(fā)現編輯的內容報錯可被更正，應直接引導用戶更正；如果報錯內容不可被更正，則告知用戶原因。

4.6.3.2 行編輯

針對同一行標簽下的數據編輯。新增數據行后，視圖定位到新增的行并高亮顯示，讓用戶快速聚焦。

4.6.3.3 單元格編輯

哪些是可編輯的，哪些不是可編輯十分明確，適于較少的數據編輯時。

4.6.4 懸停(操作/選中表格/放大）

當鼠標懸停時，可對當前行背景作出區(qū)分，辨別光標所在行，或放大懸停行區(qū)域，達到醒目的效果。

當提出額外的操作時，用戶懸?？梢允褂脩艟劢褂诋斍安僮鳌Ｈ绻雀栲]箱：

4.7 空表

在表格的空白內容處加入創(chuàng)建的快捷入口，引導用戶新建表格，或者父級頁面提示倒入數據。

如下圖郵箱已發(fā)送郵箱為空時：

沒有創(chuàng)建訴求的，直接告之暫無數據。如數據是系統產生的，不是由用戶創(chuàng)建的，直接告之暫無數據，話術的表述則需與后臺文案的整體風格保持一致。

關于表格設計就大概講完了，在總結歸納中也發(fā)現了自己平常設計表格中的其他問題。個人感覺還是有很多漏洞，說的不正確的，歡迎大家指正。

參考文獻鏈接

1.web表格設計攻略http://www.aharts.cn/ucd/714641.html

2.數據表的用戶界面最佳設計http://www.aharts.cn/pd/661699.html

3.設計表格的可重用性https://uxdesign.cc/designing-tables-for-reusability-490a3760533

本文由 @小龍 原創(chuàng)發(fā)布于人人都是產品經理，未經許可，禁止轉載

題圖來自 Unsplash，基于 CC0 協議