2021-5-12 高勁
表格和網格一直是產品和后臺面板的重要UI組件。然而，即使到了今天，也很容易找出設計不當或用戶體驗不好的數據表。
今天我們邀請了 Gil Bouhnick ，來跟大家一起聊一聊「如何設計出一個可觀的數據表」。
接下來，就進入正題吧～
我使用過 30 多種 SaaS 工具和 SDK ，經常用它們的后臺面板看數據，觀察到了一些問題并做了反饋。實話說，它們在UI設計和基本功能上，對表格的展現形式還挺糟糕的（雖然它們都是很好的Saas產品）。
鑒于我開發使用表格 20 年的經驗，決定為大家來總結一下最基本的處理表格的UI / UX規則了。
本文將從功能、UI設計和美觀性，這三個方面來闡述。
1.從排序和篩選開始：
是的，我也知道排序和篩選很煩人，我也討厭他們，但必須先說它們。除非你打算做一個不到十條記錄或者類似情況的精美表格。
排序和篩選不僅是可用性或易用性的功能，更是摘要數據的關鍵：了解趨勢，比較記錄，查找特定值，沒有排序和篩選就無法完成這些工作。
如果添加基于列的篩選（如日期，布爾值，字符串等元數據）成本太高，那么可以從更基本的內容開始篩選，例如現代搜索框或一些常用的硬編碼。
2.確保列的大小可調整
這是一種查看信息的方法，無需深入研究每條記錄。
不管你的列寬有多大，也不要將列表固定住，因為有時候用戶需要進一步擴展。
3.允許列重新排序
對于大型表格，不能一種大小適用于所有情況。
通過重新排序列，用戶可以設置符合它們特定需求的表格。這個相對小的功能可以減少混亂，并節省一些來回滾動。
這時，列的名稱體現了大量信息。重新排序列能夠使用戶可以專注于特定區域并理解小塊信息。
4.內聯的編輯
有許多用于編輯單元格的UI解決方案：內聯框，彈出窗口，可擴展節等。
我不認為上面的方案是最佳的，因為它依賴于功能、數據類型、使用案例。從用戶角度出發，我最喜歡的方案是側視圖（快速視圖）。
一旦選擇一個項目，它就會從側面彈出的方法。
這個方案，我最喜歡的是它可以保持上下文（與彈出窗口不同），易于使用，即使是在垂直滾動視圖中顯示大量字段的情況下也效果良好。
5.小屏幕設計
當然，大顯示器看表格，設計和開發都會很爽，但是還是有人在用筆記本電腦或iPad！他們又做錯了什么！/手動狗頭
不停的滾動、縮小的列、隱藏的文本，這些都會干擾用戶體驗，所以一定要在小屏幕上驗證你的設計，并且盡可能使用上一段時間去切實體驗用戶使用情況（而不是隨意測試）。
如果確實很糟糕，你可能需要在解決問題上發揮自主創造力，不過前提是你很了解它。
6.彩色交替行
使用大型數據表時，很容易丟失。
斑馬紋的表格可以幫助用戶保持其位置，但是彩色的行必須非常淺，否則會引起誤導，看起來像選定的行。
使用淺色時，應該將所有內容設置為淺灰色，避免使用黑色線條和深色邊框。
7.使用固定表頭和“凍結”列錨定一些標識符
我認為在任何屏幕上顯示大量數據時，表格都應該能正常瀏覽。
要瀏覽數據，用戶就需要經常滾動，這意味著需要一些錨點來輔助：
向下滾動時，列標題必須固定（這是最基本的）
第一列應該被鎖定（MS Excel和Google Sheets稱其為“凍結”），因為，當你水平滾動時，需要該行聯系上下文。
一個全行選擇選項，用于在水平滾動時標記重要行。
8.設置固定的行高
表格和網格是體現結構化信息的，但是，當表格的列寬、行高不同時，就會變得混亂，信息也就會變得沒有體系。
因此，為了整體的可用性和美觀性，我覺得不管內容如何，所有行都應具有完全相同的高度。
為了更好地支持多行文本塊，請考慮以下事項：
用換行替換為空格，并將整個文本變成一行（通過調整列寬的大小）
將（所有行的）行高設置為2行而不是1行（可以解決某些情況）
使用工具提示（可以用，但是最好不要用）
通過單擊行來展開/折疊（剛需）
采用浮動側視圖顯示所選行的詳細信息。
美學設計可以帶來更好的使用感。
以下是通過簡單的UI設計修改來消除雜亂并提高內容可讀性的幾種方法：
9.增加單元格填充
使用空格。
加載信息的表，正是用戶想要看到更多空白的地方，即使這會花費他們一些額外的滾動時間。
10.消除不必要的邊框
一旦數據結構良好并且留有空白，就該擺脫那些多余的邊框，或者讓邊框線條變得超細且顏色淺。
文章來源：優設網 推薦：墨刀_MockingBot
藍藍設計( www.izc.net.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務