糟糕的數據表格設計,它們到底問題出在哪里?
表格在互聯網早期是基礎設施之一,之后許多設計師用更新更時髦的布局取而代之。雖然在如今的互聯網上很少露面,但是表格在我們基礎日常生活中,仍然為我們收集組織了許多信息。
例如,我覺得有一份表格可以稱之為表格之母:美國的“協調關稅表”,長達3550頁的表格,列出了每一種可以進口到美國的商品,包括多如牛毛的條目,例如“男士或男孩的大衣、短大衣、披肩、斗篷、厚夾克(包括滑雪衫)、防風服、和類似物品(包括帶襯里的、無袖的夾克)”。
不過短大衣到底是什么?
數據表格容易使人發火,毫無疑問這要歸咎于它們粗糙的設計,看起來糟糕透了。設計是表格的關鍵:如果處理得當,就能使復雜的數據能夠輕松瀏覽和比較。如果處理不善,它能讓信息完全無法理解。
我們當然要處理得當,是吧?
了解數字
數字生來并不等同。我不是指π和∞(雖然我在派對上經常用);我是指數字有的是表格數字,有的是舊體數字,有的是等高數字,有的是比例數字。
下圖簡明地闡述了舊體數字和等高數字之間的區別。
舊體數字與等高數字
舊體數字在句子中表現很好,在句子當中它們更匹配小寫字母的尺寸和間距;等高數字更加統一,強調了一種網格式的表格結構。
比例數字和表格數字之間的區別不是那么明顯:
比例數字和表格數字
比例數字的設計初衷是保持黑白協調——也就是說字體的尺寸和間距大致相同。相反,表格數字每一個尺寸都相對獨立,數字就能縱向對齊。雖然在一兩行的情況下,兩者區別似乎不大。但使用表格數字,能讓大型表格瀏覽起來更輕松,不易出錯。
使用等高表格數字的技巧
設計時,你需要花點精力,確保用對了數字的類別(等高表格數字并不是默認的)。Adobe產品有一個“opentype”面板,可以對數字進行適當設置,CSS也提供了一種slightly-cryptic語法用來開啟這個功能。除此之外,稍微搜索一下你就能找到方向。
但也有個壞消息:并非所有字體都包含可用的等高表格數字。那些漂亮的非常貴。有少數例外:優秀的Work Sans字體是一款帶有等高表格數字的免費字體。
如果找不到合適的帶有等高表格數字的字體,可以退而求其次使用等寬字體——它們看起來更像“代碼”,總是很適合在表格中展示數字。而且,新的Apple系統默認字體——舊金山字體,就包含優秀的等高表格數字,并且在小字號情況下表現良好。
對齊很重要
可以遵循3條半原則:
- 1. 數字應該右對齊
- 2. 文字信息左對齊
- 3. 表頭與數據對齊
- 不要使用居中對齊
美國各州歷年人口統計——維基百科
數字是從右向左讀的;這是因為,我們對比數字時,首先看個位,然后十位、百位。多數人也是這么學會算數的——從右邊開始,向左移動,在移動中傳遞數字[1]。因此,表格的數字應當右對齊。
文字信息是從左向右讀(至少在英文中如此)。比較文本元素通常是靠字母表順序排列:如果兩個條目首字母相同,就對比第二個字母,以此類推。如果不采用左對齊,嘗試快速瀏覽文字會使人抓狂。
通常,表頭應當符合數據的對齊方式。這能保持表格豎直方向整潔,營造一致性和上下文環境。
居中對齊會導致表格的行“參差不齊”,瀏覽條目就會更難,常常需要額外的分隔物或圖形元素。
最小數位一致 = 更好的對齊
有個簡單辦法能使表格正確對齊,保持數字的最小數位一致——通常是指小數部分的數位——每一列保持統一。數位展開來講可以寫一整篇文章,那么我在此就簡單總結:數位用的越少越好。
短小精悍的標簽
使用標簽來配合數據至關重要。這些搭配的內容能讓表格被更多讀者理解,適用于更多的情況。
密西西比河洪水預報——NOAA
標題
雖然是老生常談,但給數據表格起一個清晰簡明的標題,與其他的設計決策同等重要。有了好的標題,表格就可以獨立使用:它們可以用在許多不同場合中,也可以由外部來源引用。
單位
表格中最常用的標簽,是數據的度量單位;通常,每條數據都會重復加上單位。其實不該如此,應該只在每列的第一條數據加上單位。
表頭
表頭盡可能短;數據表格的設計,應當使注意力集中在數據本身,而且長表頭標簽會占用過多的視覺空間。
盡可能少著墨
考慮如何裝飾表格中的圖形元素時,目標應當始終為削弱表格的痕跡,同時精確保持表格的結構。盡可能少“著墨”,就能做到這一點——也就是說,盡可能不給元素加裝飾。
2016年美國棒球聯盟擊球統計——BaseballReference
分隔線
如果在表格中使用適合的對齊方式,分隔線就是多余的。它們最大的貢獻,就是讓你縮減元素之間的距離,但仍能區分不同元素。即使要用,分隔線也要非常淡,不能妨礙快速瀏覽。
水平分隔線最有用,因為它們能顯著減輕長表格在垂直方向的視覺重量,加快大量數值的對比工作,或者從時間中發現趨勢。
關于分隔線,我有一條未經證實的觀念,間隔條紋很不好。真的非常糟糕,信不信由你。
背景
在指示不同領域的數據時,背景是最有用的:例如從單條數據轉為總和或平均值。
突出顯示數據,為數據增加額外信息,或者用于指明與前一時期相比有變化的數據。達成這些目的,不用背景也行。單單用一些圖形元素,例如?、?(我的最愛之一)或?。
而且,表格應當是黑白的。運用彩色來提供組織性或增加含義,也會增加誤解或錯誤的可能,并且引發視覺障礙者的易用性問題。
結論
表格或許很枯燥,但它們是數據豐富的文檔的主要元素,值得我們投入每一絲每一毫的設計思考。設計更有效、簡潔、易用的表格,可以極大改善分析理解大量數據時的痛苦體驗。
原文鏈接:https://medium.com/mission-log/design-better-data-tables-430a30a00d8c#.9hag7vx1g
#專欄作家#
可樂橙,微信公眾號:可樂橙(colachangreen)。人人都是產品經理專欄作家,UI/UX設計師,關注互聯網,關注科技?,F居杭州,與小伙伴們正在創業途中?;蛟S不是一名優秀的設計師,至少是個快樂的設計師。
本文原創發布于人人都是產品經理,未經許可,不得轉載。
- 目前還沒評論,等你發揮!