JS 打印 data数据_数据表格 Data Table - 复杂内容的15个设计点
初次設計數據表格，建議閱讀 Material Design 關于 Data Tables 的內容，包含了對表格設計基礎而全面的指導。
Data tables?material.io1 系統化表格需求
我們在選擇信息的展示形式時，需要思考的是「用戶的需求」以及「不同交互模式的特點」。
除卻基本表格組織，根據用戶需求，表格需要增加一些額外的功能，例如標記預警/異常值（常見于數據監測系統）、展現數據變化趨勢的圖標（快速理解數據意義）等。
結合數據特征，我們可以梳理出一份包含數據內容、展現形式和交互的功能架構圖，便于指導表格設計和開發。
譯自參考鏈接1 有刪改2 信息組織
2.1 行
- 固定標題行
保證在垂直滾動時，能夠及時獲取數據的指標含義。
- 合理使用斑馬紋
斑馬紋強化了水平分割線的功能，特別在寬表格/行樣式復雜中，能夠引導閱讀視線，現今辦公軟件中的默認表格樣式也依舊采用了斑馬紋。但在大型結構化數據集中，斑馬紋帶來了額外的視覺負擔，且會與單元格背景色沖突。需要按照場景權衡是否使用斑馬紋。
斑馬紋表格 VS 水平分割線表格- 淺色分割線
分割線可以在更小縱向空間內將數據分隔開，需要注意分割線色值，防止干擾數據閱讀并造成版面視覺過重。
各大設計規范分割線色值- 減少重復的元素
常出現在數據單位和操作文案上，為了保證清晰簡潔，設計時考慮調整重復樣式和精簡交互文案。
2.2 列
- 「F型」 布局
在左→右閱讀習慣中，將數據維度按照重要性高低從左至右排列，遵循「F型」布局方便瀏覽時快速定位重要指標。
- 固定列
首列（或多列）一般為樣本身份標志（例如名稱、ID號），與固定首行相似，能夠方便用戶對應樣本名稱，理解數據含義（特別在存在水平滾動條時）。 可以使用陰影樣式和水平滾動條作為視覺線索。
- 列分割線
當表格的表頭和內容整潔對齊時，表格自然形成視覺秩序，合適的間距可以取代縱向分割線。相對地，當表格水平空間較小或是有著復雜表頭時，縱向分割線可以幫助數據識別。
- 對齊方式
定性內容左對齊，定量內容數位對齊，表頭應用該列對齊方式。在表格中使用無襯線字體減少視覺噪音；涉及數字時，注意使用表格字體（或等寬字體），保證數位對齊，能更方便閱讀數字和比較大小。
免費數字字體?blog.graphiq.com對齊方式- 可調節的列寬
當表格指標過多或內容過長時，我們會使用水平滾動條對實現信息隱藏。也可以通過可調節的列寬，在一屏寬中展示更多的數據指標指標。設置最小列寬時，以能顯示可辨識的指標內容的最小寬度為依據，當指標文本過長時，設計為兩行顯示或懸停顯示完整信息。
懸停顯示完整信息3 表格交互
- 篩選
篩選功能能夠根據用戶需要減少展示數據，一般分為搜索和條件兩種篩選方式。篩選區塊設置在表格頂部，內容過多時可以收起。
- 排序
可以根據某個指標維度對表格樣本進行重新排序。排序按鈕一般設置在指標名旁，在設計時，需要注意可點擊范圍。
可點擊范圍- 批量操作
當多行數據需要進行同一個操作時，設計表格時可以歸置為批量操作。
模態批量操作 ：當表格數據不全部滿足批量操作觸發條件時，可以使用模態批量操作。在點擊批量操作按鈕后，顯示多選框，不符合條件的數據處于禁用狀態，選擇后「確定」實現批量操作。
- 內聯操作
內聯操作即直接在單元格內進行編輯等操作，用戶可以通過雙擊單元格，或是點擊鼠標懸停后出現的功能按鈕完成操作。
- 分頁器
表格加載有分頁加載和漸進加載兩種方式。使用分頁加載能夠實現數據（頁面）直接跳轉，而不用依次加載全部數據。當表格高度超過一屏時，可以在表格上方和下方都設置分頁器，實現靈活瀏覽。
文章列舉了目前設計工作中常見的表格設計點，除此之外還有許多需要優化和權衡之處，例如鍵盤支持功能的優化，Web 端表格的右鍵菜單等。在持續積累之外，也歡迎各位的討論。
參考鏈接
總結
以上是生活随笔為你收集整理的JS 打印 data数据_数据表格 Data Table - 复杂内容的15个设计点的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 什么是python之禅_【Python面
- 下一篇： java403forbidden_jav