WWDC22:蘋果設計師怎麼做資料視覺化？

例行宣傳一下群:arrow_down:

01

你不會還沒看WWDC吧？

互動設計行業每年都有許多行業會議，比如現在很多人都準備去的阿里UCAN就是其中一個。類似的，蘋果的全球開發者大會（WWDC）也是一個非常值得作為互動設計師的你關注的年度會議。這個大會每年6月舉行，在會議上蘋果會展示iOS/MacOS等各端最新版本的功能特性、講解一些設計趨勢，甚至推出新的產品。因為疫情原因2022年的WWDC改成了線上舉行，因此所有的會議影片都可以直接在蘋果開發者官網上看到，非常方便。

網址：http://developer.apple.com/videos/wwdc2022/

推薦重點關注App Service，Design兩個分類下的影片

大多數蘋果產品發燒友會比較關注WWDC上硬體產品的更新。但實際上WWDC還會詳細介紹蘋果的設計、功能上的迭代，這些東西不僅對日常設計工作有啟發，也一定程度上是未來一年互動設計的趨勢風向。本次咱們就摘取其中資料視覺化相關的兩個影片來看看蘋果設計師的設計思路。

原網址放在下面，喜歡看影片的同學可以自行觀看（英文）

Design app experiences with charts

http://developer.apple.com/videos/play/wwdc2022/110342/

Design an effective chart

http://developer.apple.com/videos/play/wwdc2022/110340/

02

圖表在App上的應用

圖表可以很好地傳遞複雜資訊，在蘋果的很多產品中都可以看到圖表的身影。比如蘋果的內建應用健康App用圖表來展示人的身體健康情況資料、健身（又稱活動）App用三個圓環構成的圖表來提醒使用者每天都要運動，而天氣App則用圖表來表示預測降水量，幫助使用者提前進行出行決策。

除了蘋果的內建應用，市面上很多產品也都在創造性地應用圖表。比如跑步/騎行記錄應用Strava用圖表來記錄每日的運動資料；語言學習應用Duolingo用圖表來展示使用者和朋友們的學習經驗值變化。

經過設計的圖表不僅能精準地體現資料中的難以用文字表述的重要細節，還能為應用增加UI風格上的識別度。在開始設計圖表之前，我們需要了解幾件事情：

• 什麼時候使用圖表

• 圖表的組成部分

• 使用圖表的技巧

• 圖表的設計系統

03

什麼時候使用圖表

一般而言，圖表有3種使用場景。

體現變化 ：展示歷史資料、或預測資料將來的走勢時，使用圖表能夠生動地展示資料的變化。

體現比例 ：展示一個總體內部各個部分的佔比時，使用圖表能夠清晰地表示完成度、進度。

方便比較 ：對比不同的事物時，使用圖表能夠方便地比較其數值孰高孰低。

製作圖表的第一步，是思考當下的設計目標是什麼，而圖表又能如何支援設計目標的實現。在設計中，一個頁面上可以視覺化的東西有很多， 但只有最重要的資訊值得被提煉成為圖表 。對於使用者來說圖表是一個很強的視覺訊號，它代表設計師希望使用者重點關注這些資訊。

確定了需要被視覺化的資訊後，還要明確使用者到底想要了解這些資訊的哪些方面。是資料的變化趨勢、資料的範圍、還是某個具體的值，又或者是對比幾個值？是想看到最大/最小值，還是離群值？確定了圖表的核心意圖，才能科學地設計圖表。

04

圖表的組成部分

典型的圖表由5個部分組成：影象標記（marks）、座標軸（axes）、文字說明（descriptions）、圖表的互動（interaction）、顏色。

1. 影象標記

影象標記是代表資料的視覺元素，比如柱狀圖中的柱子、折線圖中的線、散點圖中的點。

同一種影象標記形式下有不同的表達資料的方式。以柱狀圖中的柱子為例，我們可以將它橫向排列，來表示資料隨時間變化。也可以將幾個小柱子堆疊成一個大柱子，來表示不同分類的佔比。或者我們可以將不同顏色的柱子並排排列來表示資料的對比。

為了提供無障礙服務以方便視障人群使用， 圖表中所有以視覺形式呈現的的影象標記都要能夠通過非視覺的形式表達。 比如蘋果提供了一個叫做voiceover的語音輔助程式，當用戶使用特定手勢、或點選特定區域時，voiceover可以將圖表中的元素讀出來。

2. 座標軸

使用者需要參考座標軸來讀取圖表中的值。座標軸可能是動態的也可能是靜態的。

靜態座標軸 ：比如體現電池電量變化的圖表以電量百分比為縱軸，因此最大也不可能超過100%。

動態座標軸 ：健身app中每日步數圖表的縱軸高度就是動態變化的，因為一個人每天走的路程是不一定的。動態變化的縱軸也能更有效地利頁面上的縱向空間。

需要注意的是，縱軸的動態變化一般指縱軸的上限隨資料集中最大的數值變化，但 縱軸的下限總是為0 。這樣做的好處是，柱狀圖的高度永遠是有意義的，一個柱子看起來是另一個柱子的兩倍高，那麼它代表的值也的確就是另一個柱子代表的值的2倍。

為了能夠讓使用者準確估算圖表中的值，一般我們還會在圖表中增加網格線（grid lines）。當然表格線過多，視覺干擾性會過強，設計師需要找到一個合適的度。

3. 文字說明

一張沒有說明的圖表肯定是不完整的，我們需要一個圖表標題來體現這個圖表代表的事物。但只有圖表標題，我們仍然無法瞭解這個圖表要說明的重點，因此圖表需要增加 獨立的文字說明 來方便使用者快速獲取重點資訊，而圖示的部分則用來提供補充資訊。假如碎片化的文字說明難以理解，我們還可以將其寫成一個完整的句子來方便使用者閱讀。

除此之外，我們還可以提供對資料的進一步解讀來方便使用者理解。比如可以告訴使用者當前的資料算高還是算低？趨是在上升還是在下降？當用戶不太熟悉資料時，提供這樣的解讀能幫助使用者更好地理解當前情況。

4. 圖表互動

我們可以為圖表新增互動操作，來方便使用者更加深刻地理解資料。比如說當用戶點選圖表時可以展示對應的詳細資料。圖表的互動操作不限於滑鼠點選、手指點按，我們需要考慮支援多種輸入形式，包括鍵盤、語音、開關（switch control，蘋果提供的一種無障礙操作方式）等等。

5. 顏色

顏色可以用於區分圖表中的 不同的類別 。比如“運動”app中用3種顏色代表3種不同的行為。顏色還可以用來表示 強度 ，比如在“天氣”app中顏色表示一天的溫差變化。

你可以將圖表中的顏色去掉，來強調某些特別的資料點。比如健康App中的心率圖表-心率範圍就通過顏色強調一天中的心率最高點和最低點。

除此之外，顏色還可以帶有特殊含義。比如電池App中，紅色代表低電池電量，而綠色代表電池電量充足。國家文化對顏色含義也有影響。比如股票App中，美國版使用綠色代表漲勢，而中國版使用紅色代表漲勢。

05

使用圖表的技巧

1. 多維度展示資料

當我們想要著重強調某個類別的資料或某個資料點時，我們可以製作多維度的圖表。以某煎餅攤的煎餅銷量圖表為例，我們可以從以下維度去展示這份銷售資料：

從 巨集觀 的角度來說，我們可以展示整個資料集的特徵，比如說銷量總額、平均值。

從 中觀 的角度來說，我們可以將資料總體拆分成幾個資料子集，來對比不同子集的銷售額差異。比如將銷售日期分成“工作日”和“週末”、“上午”和“下午”這兩個時間維度上的子集。或者也可以按銷售的煎餅品類、售賣地點為維度來拆分展示。

從 微觀 角度上來說，我們可以著重強調某個資料個例。比如每天最後一單銷售的時間、客單價最高的一單佔總體銷售額的比例，都是商家可能關注的微觀資料，因此都值得在圖表中進行體現。

以上提到的資料維度可能都有助於煎餅攤商家進行各種決策，比如進貨的比例、銷售地點等等。那麼如何能讓使用者根據當下需求，切換並檢視不同維度的資料呢？

我們可以在總體資料的下方設定幾行不同維度的彙總資料，當用戶點按時，上方的圖表就會展示對應維度的資訊。

當然，圖表功能越多、展示的資訊越多，佔用的空間就越大。所以我們在設計圖表時也要注意考慮圖表的尺寸大小。

縮略圖表 一般來說是靜態的，比如說健康App卡片上的圖表、Apple Watch錶盤上的圖表、股票App列表裡的小圖表。縮略靜態圖表很少單獨出現，它們一般是另一個頁面裡的完整圖表的預覽。也因為他們尺寸小，使用者看見這種圖表的心理預期是 點按進入下一頁才能看見完整圖表 ，所以縮略圖表不需要新增網格線或者文字標籤。

可互動圖表尺寸比靜態的縮略圖表更大，也因此能展示更多的資料細節。比如股票App中的股票走勢圖表、健康App中的步數圖表。一般可互動圖表的寬度會佔滿整個檢視（view），但高度可以調節。

為了使用者能夠了解數值大小，可互動列表需要增加橫軸/縱軸線、文字標籤。

在這種尺寸較大的圖表中一般會增加互動功能來方便使用者更全面地瞭解資料，比如點按某個點時能看精確的資料值、可以改變時間範圍（比如檢視上一週的資料）和計時單位（比如切換年/月/日維度）。

2. 循序漸進地展示圖表

最複雜的可互動圖表可支援深度資料調查，但對應的也佔用最多的縱向空間。因此我們可以為同一份資料製作不同詳略程度的圖表，這樣使用者就能根據需要檢視不同大小的圖表、瞭解不同詳細程度的資料。

比如說我們可以先展示核心文字說明和簡略圖表，並且提供一個檢視詳細圖表的入口，使用者進入這個入口後，可以看到之前圖表的詳細版本。注意當用戶對一個圖表表示出興趣時，他們總是希望在 已經看到的資訊 的基礎上增加展示更詳細的資訊，因此這幾個不同版本的圖表需要在展示形式上保持統一，並且 在簡略圖表上出現的資料一定要保留在複雜圖表中。

06

圖表設計系統

當一個App裡存在多個圖表時，我們就建立了一個圖表設計系統。對於圖表設計系統，我們需要注意以下幾點。

1. 使用具有一致性的的圖表樣式

具有一致性的常見圖表樣式能夠幫助使用者更好地理解圖表展示的資訊。比如當我們使用採用日常比較常見的柱狀圖、折線圖時，使用者會會比較容易理解圖表。但假如我們採用日常生活中比較不常見的散點圖，就很可能需要額外的引導來幫助使用者正確地理解其中資訊。

假如你想做特殊的圖表樣式設計，那麼一定要清晰地向用戶介紹這種圖表該怎麼解讀。比如說蘋果的健身App採用了類似旭日圖的、非常少見的圖表樣式設計，因此做了一整套帶動畫、文字說明的新手引導來幫助使用者理解每個圓環代表什麼。

理想情況下，相比補充性資訊，App的核心資訊更適合採用新圖表樣式來做視覺化。因為使用者更願意去探索、理解放在核心位置的圖表的作用，比如下圖中的環形圖。而對於補充資訊來說，因為它們不會佔用頁面的核心位置，所以更適合採用使用者熟悉圖表樣式來做視覺化，比如下圖中的柱狀圖。

2. 體現不同圖表的差異

當圖表的主題、物件、時間範圍等產生變化時，設計師需要在視覺上做出足夠的差異，來讓使用者意識到這一點。

還是拿我們的煎餅攤銷售圖表舉例，左圖展示過去30天的煎餅銷量，而右圖展示過去12個月的煎餅銷量，為了讓使用者意識到這兩個表展示的資訊不同，我們只要修改文字說明和圖形就行了。

那假如左圖是過去30天的煎餅銷量，右圖是過去12個月的鹹菜銷量呢？這樣光改變文字和柱子，可能就不太容易讓使用者意識到這是兩個不同主題的圖表。

所以我們更改柱子的顏色，來方便使用者理解。

最後，假如右圖不是過去12個月的鹹菜銷量，而是過去12個月的日銷量範圍區間，我們應該如何展示？此時不僅文字要變化，柱狀圖的y軸也不再以0作為起點，而是當月最少的日銷量為起點。

因此，為了進一步區別銷量和銷量範圍區間這兩種不同的圖表，我們可以改變柱狀圖裡柱子的形狀，讓使用者意識到這兩張圖主題有差異。