超多列表格的終極解決方案
相信大多數設計師都會遇到一個非常頭疼的需求,那就是在表格設計中,要展示超多列(超多10列)的數據,一般都會超過橫向屏幕展示的空間。解決方案一般是:
1.增加滾動條,通過觸摸板或者移動鼠標,左右滾動表格看到更多列。
2.把長字段折疊,一行字段變兩行;或者字段省略(用"..."省略長字段的后部分)爭取不用滾動條可以展示全部信息。
看下面兩個目前我覺得比較好的解決方案:
3. 讓用戶自定義配置表格顯示列。
人一般的注意力有限,在有限的時間和空間內,眼睛能攝入的信息也有限。所以這也是為什么設計師經常要做的事情就是把信息排優先級/按次重點設計排版。
在這種解決方案中,出發點在于只有用戶自己本身才知道哪些信息對他來說是重要的。用戶會自己配置對他來說最重要的表格列在當前有限的屏幕空間展示。從而極有可能省去了左右滑動的麻煩,和長字段被折疊導致的視覺凌亂。
4.信息歸類,把相關的信息放在一個格子展示,一列展示多組數據
這是我在一個銀行對賬的內部系統看到的案例。上圖每個格子展示的都是兩個相關的數據,如果按照常規的做法,每一列展示一個數據,那么橫向的空間將需要多一倍。
如果說你的用戶每天都要面對大量的數據,不希望數據被折疊被隱藏,想一覽無遺,在一個表格里面,按列展示的話,可能超過20列。那么可以換個思路,能不能兩個信息放在一個格子展示,這樣相當于列數減半了,變成10列,剛好是一般橫向屏幕可以支持展示的表格。
能這么設計的一個關鍵點在于,這個表格的大部分信息都是互相有聯系,可以歸類的。比如Amount/Currency(數額/幣種),在一起展示(例如:900 RMB)不但不會分散注意力,反而能幫助用戶理解。再比如,身份證號和姓名,放在一個格子展示,人就會很自然地把這兩組數據當作一個實體來進行縱向對比。一切皆因姓名和身份證號是緊密關聯的一組數據。
一列展示2-3組數據我覺得已經是極限了,不要過于貪心哦。