典型表格設計之數據查看(上篇)

典型表格設計之數據查看(上篇)

典型表格設計之數據查看(上篇),教程,最多三分糖,原創文章站酷網,中國設計師互動平台。

平時工作中都會記錄一些遇到的疑難問題並進行摸索,現在想把遇到的問題總結下來,當做一次沉澱,也希望對於同行同學有些幫助。 (因篇幅較長,本文針對“數據查看”進行探討,“數據過濾”以及“數據操作”將放入下篇文章,等待出爐~)

什麼是表格?

表格頁是公認為展示數據最為清晰和高效的形式,它的信息密度極高,就像是一個家庭衣櫃,裡面很多抽屜,我們需要把衣物整潔擺放收納,提高空間利用率。

表格頁由三個部分,如下圖所示:

一、數據查看

數據查看可通過四個維度去自檢設計是否合理,分別為信息降噪、呼吸適中、高效易讀、詳情查看。

1、信息降噪-內容

通過對錶頭內容的刪減,我們一眼就可以看到表格的重要信息,從而幫助用戶能快速進行數據決策。因此,列數控制在7+-2,列表表頭展示更為關注的數據,更多信息在詳情中展示。

如果不同用戶想看到的信息側重不同,我們還可以做自定義設置項,讓用戶自己去選擇想要看到的表格內容。

用最少字數給表頭做精簡,精簡到少一字不可。

另外,當遇到少一字都不可的長標題,我們可以定義專有名詞,並且給一個解釋專有名詞的icon,便於第一次使用的用戶易於理解。

2、 信息降噪-視覺

去掉不必要的分割線和斑馬紋,用對齊和間距來區分列和行,可以鼠標滑上去給斑馬紋,增強交互體驗。

分割線的樣式盡量輕盈,不要搶視覺,突出內容。

去掉不必要的裝飾和顏色,為了防止視覺負擔,少用面性圖標,使用顏色保持克制,刪除如果不是點擊即可刪除,可以不用預警色。

不要出現襯線字體,比如宋體,保持字體統一。

3、 呼吸適中-單元格

定義單元格高度。字號、行高、上下間距進行規範,這裡有一個比較常見的規範,將字號設為N,那文字行高就是

1.5N,上下間距為1.2N,單元格高度=內容高度+上間距+下間距。

4、 呼吸適中-列寬

我們將首列和尾列定義為N1,列與列之間定義為N2,隨著頁面收縮和拉伸,N1保持不變,N2自適應變寬變窄,這樣頁面會看起來會更均衡,這樣會顯得有呼吸感。一般定義一個最小值,當表格寬度大於頁面寬度時候,固定首尾列,左右滑動。

5、 高效易讀-對齊方式

標題和內容一般採用左對齊,更高效的瀏覽順序,有長短不一的數字時,右對齊方便比較。操作項一般放在尾列右對齊。

6、高效易讀-不做無意義留白

當數據為零時就寫上“零”,當沒有數據時候就寫上“-”。比如開發取不到的後台數據,我們就可以給“-”作為顯示,如果得到的數據就是零,我們也要讓它顯示出來。

7、高效易讀-選擇合適的翻頁器

選擇合適的翻頁器,利用分頁可以緩解服務器的加載壓力。無限瀏覽如果數據過多很容易使頁面崩掉,使用功能較為強大的翻頁器,每一頁默認10行以上,減少翻頁次數,增強用戶體驗,給出默認行數後,可以讓用戶自定義每頁行數,相比跨屏翻頁,向下滑動更便利。

8、高效易讀-收起低頻操作項

超過四項操作項收起來,可以用圖標指引下一步操作。關於哪些可以操作項可以折疊起來,可以與產品經理溝通收起低頻鏈接,或者埋點一個月時間查看點擊量也可以做出決策。

9、高效易讀-默認行數

當單元格內容長度不固定的時候,定義好內容的寬度和行數以及字數,超出顯示的字數可以用省略號代替。

10、高效易讀-行的排序

默認最近創建的在表格中第一行顯示,使用戶感知最新情況。也可以帶排序的表頭,讓用戶自定義排序。

11、詳情查看-入口

入口可以在操作裡加詳情,也可以把發起人做成可以點擊樣式,跳轉詳情,並且可以避免視覺干擾,也就是降噪,當鼠標Hover上去時候,發起人才顯示出跳轉色,提示可點擊狀態。

12、詳情查看-交互方式

第一種是用彈窗的形式。第二種是第一種的延伸,當內容過多時候可以考慮抽屜樣式。這些交互的共同有點就是沒有脫離原頁面。當詳情內容較多且需要編輯時候,我們就考慮跳新頁面,使用新頁面進行承載。 (這裡有個細節,新開tab頁可以打開多個詳情頁,如果覆蓋原頁面則只能打開一個詳情頁,並且不能同時查看原頁面和詳情頁。所以我們要根據具體場景、業務需求去設計)

後記

上述內容百分之八十是實踐中遇到過,B端設計背後更推崇實踐場景的運用,不只是是美觀好看,不同場景它的設計思路就會有所不同,規範只是相對的,在你沒有思路時候可以參考作為一個標準。

歡迎留言糾正,感謝閱讀~

<!--

- 位站酷推荐设计师推荐 -

-->

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。