# 設計視覺化的最佳做法

## 精簡您的應用程式

應用程式中的資訊太多會令人難以抓住重點。如今，現代化的使用者介面在設計風格上更加傾向於清爽、簡潔、扁平化。簡潔的設計會對讀者產生微妙的引導力，讓他們的注意力更為集中。

#### 少即是多

使用者經常在一個應用程式中嘗試納入過多的資訊。如果折線圖中包含幾個量值，會產生混亂不清、難以解讀的結果。嘗試建立幾個較小的視覺化，在頁面上分散排佈這些資訊。這還可讓讀者對並排的視覺化進行有效的比較和對照。 您還可使用替代的維度和量值以便讀者在不同量值之間快速切換，從而避免在視覺化中包含過多內容。如需詳細資訊，請參閱 [變更視覺化資料](https://help.qlik.com/zh-TW/sense/November2024/Subsystems/Hub/Content/Sense_Hub/Visualizations/change-data-of-visualization.htm)。

有一些不同的方式可以改善應用程式的美感和功能。視乎您的受眾及您想醒目提示的資料，設計視覺化的方法可能對讀者解讀資料產生重大影響。

#### 知道您的限制

視覺化的取用者可能使用有限的螢幕空間或解析度來處理。Qlik Sense 使用回應設計，以解決這些限制。不過，若螢幕空間或解析度過度受限，有必要採用特定設計。這包括：

* 目前顯示在橫條圖和折線圖中的資料子集。當維度值的數目超出視覺化的寬度時，會顯示具有捲動列的迷你圖表。
* 用於選取資料篩選條件的摺疊功能表。維度值的數量超過篩選窗格的可用空間時，功能表會摺疊。應用程式取用者必須按一下篩選窗格標題中的維度名稱，以開啟新的窗格。隨後即可在新的窗格中進行選取。此外，當空間有限時，維度名稱可能會以省略方式顯示在篩選窗格標題中。應用程式取用者必須按一下省略名稱，以檢視篩選窗格的名稱。
* 圖表圖例中已截斷的名稱。會截斷維度和量值可用空間中太長的名稱。省略符號會新增至截斷名稱的末尾。應用程式取用者可以將滑鼠指標暫留在截斷名稱上，以檢視完整名稱。
* 遺失的圖例、標籤和標題。

應用程式取用者可以展開視覺化，以解決某些問題。不過，建議您在可能取用應用程式的裝置上測試應用程式。您也可以使用各種測試工具，例如 Firefox 中的回應設計模式 (Ctrl + Shift + M)。如有必要，您可以將視覺化移至新的工作表，減少視覺化中顯示的資料量等。

## 顏色可用性

對於色彩性視覺障礙者，色彩頻譜的範圍較窄。這些人對於視覺化的詮釋方式，會與您的意圖不同。

例如，對於某些人，紅色和綠色看起來更像黃色或棕色。這種紅綠色視覺缺陷最為常見。這個問題值得注意，因為紅色在資料視覺化中通常代表不好的含義，尤其是在財務方面。

紅色或綠色的 KPI 狀態可能會讓人混淆。您可以使用不同的形狀和顏色作為績效指標，以使您的設計更加易於理解。例如，您可以使用紅色空心圈來指示不良資訊，使用綠色實心圈來指示良好資訊，以及新增三角形作為警告符號，只在 KPI 狀態處於不可接受的水平時顯示。

當顏色被扭曲時，折線、長條和圓扇可能會變得難以區分。

如需詳細資訊，請參閱 [變更視覺化外觀](https://help.qlik.com/zh-TW/sense/November2024/Subsystems/Hub/Content/Sense_Hub/Visualizations/change-appearance-of-visualization.htm)。

## 篩選器和圖示排版

篩選器和圖示是資料視覺化的重要組成部分，但您可能不清楚應該將它們放置在哪裡以及如何排序。通常，您可以根據幾條成熟的設計原理來預測使用者將從哪裡開始讀起。

### 靠左排版

很多熱門網站的導覽圖標和篩選器都是靠左放置的。這是因為許多語言的閱讀方式都是由左到右。因此，畫面左側是這些讀者最常看到的地方。瀏覽內容的使用者傾向於在螢幕左側往下深入探索。物件的位置越往右，越少使用者會關注它們。如果您將所有篩選器和圖示垂直堆疊在左側，則賦予了它們同等的重要性。

此外，對於文字採用從右至左的書寫順序的語言，則應與此相反。若您的應用程式翻譯為這些語言，應記住這點。

### 頂部排版

另一項常見的圖示和篩選器放置選項是沿著應用程式頂端。不將篩選器或圖示放在左側，便可以為帶有會分散讀者注意力之功能表的較大視覺化留有更多空間。如果將篩選器和圖示放在視覺化上方，在讀者看來會像與下面的內容分離。這有助於向讀者展示您要將這些篩選器或圖示排放在首位。如果所有篩選器和圖示並排放在頂部，左側最盡頭的一個會具有更多的重要性，並且是讀者的優先項。

如需詳細資訊，請參閱 [使用工作表組織應用程式](https://help.qlik.com/zh-TW/sense/November2024/Subsystems/Hub/Content/Sense_Hub/Sheets/create-sheets-for-structure.htm)。

### 資訊階層

有時您希望讀者優先閱讀特定視覺化，而非其他項目。您可以使用幾個關鍵的設計最佳實踐來顯示資訊的階層。例如，您可採用不同的大小來強調某些視覺化。面積較大的資訊通常被認為更加重要：透過增加字型或圖表的大小，可以向讀者指示首先要關注的地方。

頁面排版在資訊階層中同樣也發揮重要作用。位於頁面頂部的資訊會被認為比位於頁面底部的資訊更重要，因為讀者會最先讀到這些資訊。位於第一頁的資訊會被認為比位於最後一頁的資訊更加重要。

## 新增背景至 KPI

在應用程式內部傳達重大想法時，KPI 是很棒的方式，但是 KPI 值不為幕後出現的數字和計算提供任何背景。KPI 旁邊的綠燈不能告訴讀者是勉強達到了目標，還是大大超過了目標。

為了在您的 KPI 中加入背景，請以較小的文字在數值旁邊添加支援性資訊。例如，您可以對比目前的 KPI 值與去年的數值。您還可新增不帶軸或數值的小型條形圖，以提供關於當前趨勢的資訊。

## 避免資料視覺化的易犯錯誤

若要體驗到資料視覺化的優勢，您必須避免易犯錯誤。以下是一些常見事項：

### 濫用色彩

請勿過多使用色彩。請注意，在錯誤位置使用錯誤色彩可能會造成混亂，而不能令其清晰化。此外，在世界其他地區，相同的色彩可能代表不同的事項。

### 誤用圓形圖

避免將圓形圖並排進行比較。盡量不要將過多資訊壓縮在圓形圖內。

### 視覺混亂

資訊過多會影響明確性。最多使用九個 KPI，消除所有視覺混亂的情況。

### 樣式重於實質

漂亮的視覺化未必最有效。請始終使用最佳的設計做法。

### 不良資料

顯示資料之前，檢查並解決其中的問題。切勿讓不良資訊影響您的視覺化。