2024-10-30 藍藍小助手
哈嘍 大家好呀 今天帶來了工作中對于表格的小的沉淀 梳理一些表格的常見問題 歡迎大家一起交流
在B端界面中，通常大量使用表格來展示結構化的數據，合理的設計表格，能給用戶帶來高效的信息獲取率，我們一起來瞧瞧普通但不平凡的表格有哪些設計要點。
表格常用于信息收集（展示）、數據分析、歸納整理、等活動中，在互聯網產品應用中，非常適合于：
1. 需要組織和展示大量數據信息
表格結構簡單，分隔歸納明確，特別適合組織和展示大量的信息內容，且易于用戶瀏覽和獲取信息。
2. 當數據信息需要進行多種復雜操作時
需要對信息進行排序、搜索、篩選、分頁、自定義選項等操作。
3. 信息上下間的對比
表格的歸納與分類，使信息之間易于對比，便于用戶快速查詢其中的差異與變化、關聯和區別。比如：金額 百分比 數據升降展示
首先我們了解下表格的構成：頂欄、表格主體、底欄
·頂欄標題
頂欄標題不僅是起到內容的總覽作用，也是區分不同模塊內容的標識，通過對標題層級的凸顯，讓用戶感知到模塊內容已切換。
在設計的時候會有兩種情況：
（1）包含在卡片內，作為最高層級凸顯。在功能模塊較多時采用居多，強調不同的模塊內容
（2）標題在卡片外，作為內容的描述。在功能單一時靠呼吸感區分，主要是凸顯內容側
·主體
表頭一般指列標簽，這里也指首列行標簽，是對所屬行或列信息的描述。
表體—表格的主體，承載著內容信息數據，由單元格組成。
·分頁
「迷你型」展示：當數據當分頁數量較少時，在7頁以內時，可采用。
「精簡型」展示：當「頁面空間不足」或降低分頁的「視覺影響」時，可采用該類型。
「完整型」展示：當表格數據較多，為滿足各種功能需求，可采用該類型。
·表格中的字體/行高
常用的文字大小：表頭14PX，列文字：13PX
在具體設定表格行高時，表格中以文字信息為主，可以參考文字排版的常用做法，將整個表格的行高分成文字行高、文字與分割線間距離，即上下間距兩部分來考慮。文字行高可以設定為字號的1.2~1.8倍，文字與分割線間距離可以設定為字號的1~1.5倍。分為這樣的兩部分也比較符合開發同學寫代碼時的習慣（多行行高同理去設定）。
·對齊方式
表格中的對齊一直是讓人比較糾結的事情，不同的類別對應不用的對齊方式，常見的對齊樣式有如下幾種
數字信息右對齊， 包含金額、長寬高等需要關聯比較的字段，這是因為我們在對比數字時，首先看個位，然后十位、百位等。
文字信息左對齊，符合正常的心智模型，一般人們的閱讀方式是從左往右，從上往下。
固定字段居中對齊 ，比如日期（2020-11-11），狀態文字（未審核、已收款等）或者存在布爾關系的文本（是/否、男/女等），這能更好的信息呈現及表格空間的節省。
表頭與數據信息對齊， 這能保持表格豎直方向整潔，營造一致性和上下文環境。
·數據多層級
除了常規的表格樣式之外還會出現特殊的表格樣式，在復雜的表格中，由于數據量較多，并且數據有層級關系，所以會對數據表格進行分層處理，優先展示第一層級的數據內容，將二三層級的數據隱藏起來，用戶點擊后再展示。
·數據修改
表格的編輯通常有兩種，一種是在彈窗或者新頁面進行內容編輯。常用在數據較多、內容較復雜的情況。
另外一種是當前表格編輯，表格編輯又分：帶單元格編輯功能的表格、帶行編輯功能的表格。常用在表格數據較少，沒有更多詳情，表格已經展示全部內容。當前表格編輯，比較方便用戶操作，讓用戶能直觀的查看編輯單元格。
·數據操作
數據操作主要是針對表格數據的增、刪、改，從控制范圍可分為：單行操作、批量操作、全局操作；
單行操作也稱行內操作，常見的顯性與隱性兩種方式。顯性操作，操作項顯示在行內，直觀明了；隱性操作，鼠標懸停時才顯示操作項，界面簡潔，留更多的空間給需要查看的數據內容，減輕空間壓力，減少干擾；
顯性操作，文字按鈕操作項一般不多于三個，圖標按鈕不多于四個時，操作項跟在行條目后面；當超過時，建議將相對低頻操作選項折疊收起，點擊"更多"或“...”下拉顯示。操作按鈕致灰時，鼠標選中可顯示原因。
在日常的工作環境中會遇到很多情況，這時候就需要用到一些方法來處理數據
·關于分割線
表格行列的分割方式有：
網格式：類似excel，這樣的方式很好的所有行和列進行分割，但是網格很容易給人造成視覺疲勞。
水平線：僅對行進行分割，通過間距與對齊的方式對列進行視覺上的分割，這樣的方式可以很好的對數據進行劃分，便于閱讀。
斑馬條紋：通過低飽和度的顏色交替的對 行 進行分割，同樣很好的對數據進行劃分，便于閱讀。
留白，不分割：直接留白，通過間距來劃分，不建議使用這樣的方式，因為數據較多的時候，用戶十分容易將行對應錯，容易造成混亂。
關于空數據
表格中經常會出現空數據或無數據的情況，留白處理會給用戶造成一定的困惑和誤解，是系統沒有加載出來嗎或誤以為出現了bug？明智的做法，是無數據時用「-」來填充顯示，數據為零時與上下數據單位、小數點相同的0來顯示。
表格無內容且沒有創建訴求的，數據是系統產生的，不是由用戶創建的，直接告之暫無數據
用戶有創建訴求，數據是由用戶或系統產生的則直接示意用戶創建數據
表格篇的總結到此結束啦~ 設計師在具體的項目中根據用戶和產品的需求進行調整，合理使用表格，表格能承載更多的內容信息，圖片，文本，文件等格式都能在表格中被包容，此次分享暫時只分享到了文字類的表格內容，謝謝觀看
藍藍設計(www.newchinaweekly.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內外優秀的設計，有興趣請加入一起學習成長，咨詢及進群請加藍小助微信ben_lanlan。
關鍵詞：UI咨詢、UI設計服務公司、軟件界面設計公司、界面設計公司、UI設計公司、UI交互設計公司、數據可視化設計公司、用戶體驗公司、高端網站設計公司、銀行金融軟件UI界面設計、能源及監控軟件UI界面設計、氣象行業UI界面設計、軌道交通界面設計、地理信息系統GIS UI界面設計、航天軍工軟件UI界面設計、醫療行業軟件UI界面設計、教育行業軟件UI界面設計、企業信息化UI界面設計、軟件qt開發、軟件wpf開發、軟件vue開發