2021-9-16 ui設計分享達人
提起中后臺，除了高效、靈活和強大之外，不可忽視的還有它的海量數據。海量數據的篩選與呈現，直接決定決策人員的效率高低。我這邊主要是結合自己在實際工作中遇到的表格設計問題，針對Web端數據呈現方式之一，表格的設計進行探討。
首先了解下表格的構成：頂欄、表格主體、底欄
頂欄： 對表格信息進行概括，包含標題、篩選、搜索、操作按鈕等功能
表格主體：承載數據內容，由 行 和 列 構成
底欄：主要用于設置當頁條數及放置分頁器
關于表格的文章有很多，這邊我僅僅針對表格內部（即表格主體）與大家探討需考慮哪些問題才能讓表格整體的閱讀體驗更好！
“優秀的設計需要用心、規劃、思考和理解人們的行為方式”
的確，表格作為中后臺海量數據呈現的載體，能夠【幫助用戶快速“閱讀數據”，獲取有效信息，提高決策效率】，但是實際業務中，很多設計師往往沒能夠結合產品和業務場景，找到一個合適的方案。所以我結合了自己在實際工作中遇到的表格設計問題，總結出以下幾點：
自我解釋的最終目的就是讓人看懂你，試想下用戶面對一整張表格中數據卻不知道表達什么意思，這極容易給用戶帶來閱讀壓力最終放棄。因為很多B端產品的數據面向的用戶角色及場景都存在差異，所以在設計表格的時，我們首先需要對表格的表頭（列）進行合理的排列。
如：管理員與普通用戶所展示的數據內容就可能存在差異，所以需要根據閱讀重點來定義表格 列的展示順序（依據信息重要程度從左到右放置），且思考每列間的數據關系，來引導用戶。
案例：運用同學常見的拉新數據，其中的數據包含：日期、渠道、新增用戶數、活躍用戶數、用戶啟動次數、累計用戶數、版本信息等。
首先我們應思考運營同學關注點是什么？作為運營方案的成果數據，他們肯定最想知道是否完成KPI「是否有效獲取到用戶？這些用戶活躍情況？哪幾天拉新效果最好等」。如果我們不考慮用運營同學特定的目的，隨便排列，就容易導致用戶第一時間很難獲取到自己想要的有效信息，極大影響閱讀效率。但如果抓住了這個主要目的，對指標進行排列，那么我們表格的邏輯性便會更強，更清晰，也更加貼合業務述求。
表頭不僅僅有解釋當前數據內容，還可以集成：批量操作、排序篩選、解釋說明、分組、固定等查看操作，而這些功能均不是必要元素，需根據用戶查看數據的需要（如：用戶想快速找到拉新用戶數最多的某天等），適當的選配。
在展示信息的同時，可以對表格主體內容中的數據進行刪除、下載等操作，幫助用戶批量操作，提高效率。如：QQ郵箱我們批量刪除郵件。
排序能讓用戶可以改變數據的排序，篩選則可以改變數據展示的類型，幫助用戶更好的觀察數據，發現數據規律。有兩種形式，一種是使用上下按鈕進行排序（正序與倒序），另一種是使用下拉菜單進行排序（適用于多種排序及篩選）。
表頭的字段名稱理應簡潔明了，但有時精簡后的名稱用戶還是看不懂，這時就需要跟一個釋義標識，鼠標懸停時出現該字段的詳細解釋，同時滿足不同用戶的需求。
有時候寬度不夠，文字會溢出，則需要懸停時出現完整的字段名稱。
適用于多種所屬關系的信息展示（如：地址>街道>街區>樓號>門牌號）
固定不光可以固定 行，也可以固定 列，特殊情況可以同時固定 行 和 列。一般數據較多時，幫助用戶在滾動過程中可以實時看到 行 和 列 對應的內容，提高閱讀效率。
合適的對齊方式，能夠讓用戶閱讀時更加舒服。由于表格中的數據類型比較多，需根據數據內容選用合適的對齊方式。
數字：右對齊，有小數點的數值需按照小數點對齊，且數值較大時需每隔三位數使用 ， 隔開，便于用戶閱讀與對比數值。
文字：左對齊，符合人們從左到右的閱讀習慣。
混合型文本：左對齊（混合型內容包含圖片，進度，狀態標簽，人物頭像，鏈接等）。
多選操作：居中對齊。
！！表頭的對齊方式與數據展示的對齊方式必須保持一致，這樣能夠統一整個表格的表格對齊方式，便于提升閱讀與對比的效率。
數字：數值、金額、比率
文本對齊：純文本
文本：判斷性文本
文本：時間日期
混合型文本：狀態標簽、進度條
混合型文本：人員（單人、多人樣式）
混合型文本：操作
混合型文本：顯示/隱藏
混合型文本：評價
可操作：多選
在復雜的表格中，由于數據量較多，并且數據有層級關系，所以會對數據表格進行分層處理，優先展示第一層級的數據內容，將二三層級的數據隱藏起來，用戶點擊后再展示（如：教育類產品中題目設置 章節信息編輯 知識點編輯）
支持直接點擊內容，出現輸入框后進行編輯
方便用戶快速了解總數
表格行列的分割方式有：
網格式：類似excel，這樣的方式很好的所有 行 和 列 進行分割，但是網格很容易給人造成視覺疲勞。
水平線：僅對 行 進行分割，通過間距與對齊的方式對 列 進行視覺上的分割，這樣的方式可以很好的對數據進行劃分，便于閱讀。
斑馬條紋：通過低飽和度的顏色交替的對 行 進行分割，同樣很好的對數據進行劃分，便于閱讀。
留白，不分割：直接留白，通過間距來劃分，不建議使用這樣的方式，因為數據較多的時候，用戶十分容易將行對應錯，容易造成混亂。
5.1、表格中經常會出現空數據或無數據的情況，留白處理會給用戶造成一定的困惑和誤解，是系統沒有加載出來嗎或誤以為出現了bug？明智的做法，是無數據時用「-」來填充顯示，數據為零時與上下數據單位、小數點相同的0來顯示。
5.2、表格無內容
沒有創建訴求的，數據是系統產生的，不是由用戶創建的，直接告之暫無數據。
是用戶有創建訴求，數據是由用戶或系統產生的則直接示意用戶創建數據
通過合理的組織架構和呈現方式，使原本枯燥的數據呈現出生命力，這是一件很神奇的事。而用心、規劃、思考和理解人們的行為方式，圍繞用戶目的與實際使用場景，提供易讀性高且規范表格更是需要設計師反復思考的事情！
最后感謝您看到最后，希望通過本篇文章的講述，能對大家有所啟示~~~~~~~
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務