儀表板設計

Dashboard 設計概念

Olga Scrivner, PhD

President, Scrivner Solutions Inc

為何設計很重要？

 

• Company: NASDAQ
• Needs: 向一般投資人傳達每日市場
• Solution: 時報廣場的即時單一數值顯示

 

為什麼走勢線不是最佳解？

 

¹ Brath, Richard & Michael Peters. (2004). Dashboard design: why design is important.

為何設計很重要？

 

• Company: NASDAQ
• Needs: 向一般投資人傳達每日市場
• Solution: 時報廣場的即時單一數值顯示

 

為什麼走勢線不是最佳解？

 

 

歷史洞見 vs. 即時指標

¹ Brath, Richard & Michael Peters. (2004). Dashboard design: why design is important.

設計元件

                受眾

• 誰會使用這個儀表板？
• 他們的需求是什麼？
• 何種格式適合受眾？
• 多久會被存取一次？

 

                        元件

• Purpose: 探索式 vs. 解說式
• Format: 橫向 vs. 直向
• Layout: 格狀 vs. 彈性
• Visuals: 數值、維度、形狀

 

儀表板目的

              探索式儀表板

探索式儀表板讓使用者自行探索資料。

                    解說式儀表板

解說式儀表板提供預先整理的洞見。

探索式儀表板

 

 

 

• 篩選器可自訂資料分段

¹ Baucke, Spencer. (2022). Dashboard design essentials.

探索式儀表板

 

 

 

• 篩選器可自訂資料分段
• 可自訂導覽面板

¹ Baucke, Spencer. (2022). Dashboard design essentials.

探索式儀表板

 

 

 

• 篩選器可自訂資料分段
• 可自訂導覽面板
• 向下鑽研以查看更細部視圖

¹ Baucke, Spencer. (2022). Dashboard design essentials.

探索式儀表板

 

 

 

• 篩選器可自訂資料分段
• 可自訂導覽面板
• 向下鑽研以查看更細部視圖
• 互動視覺（滑過、工具提示）

¹ Baucke, Spencer. (2022). Dashboard design essentials.

解說式儀表板

 

 

 

• 資料通常已先過濾
• 預先設計的敘事
• 用於向主管簡報
• 促使採取行動

¹ Baucke, Spencer. (2022). Dashboard design essentials.

儀表板尺寸

                  實體空間

• 螢幕尺寸－對角線長度

      桌機、筆電、平板、手機等裝置

儀表板尺寸

                      實體空間

• 螢幕尺寸－對角線長度
• 螢幕解析度－像素數與密度（寬 x 高）

                          格式

• 標準格式－矩形儀表板

  • 比例－16:9 比例
  • 所有元件皆在同一畫面可見
  • 無需捲動

• 長格式－橫向或直向

      桌機、筆電、平板、手機等裝置

                橫向（時間軸風格）

儀表板尺寸

                      實體空間

• 螢幕尺寸－對角線長度
• 螢幕解析度－像素數與密度（寬 x 高）

                          格式

• 標準格式－矩形儀表板

  • 比例－16:9 比例
  • 所有元件皆在同一畫面可見
  • 無需捲動

• 長格式－橫向或直向

      桌機、筆電、平板、手機等裝置

                直向（報紙欄位風格）

儀表板版面

                  格線系統

• 二維矩陣
• 平衡對稱
• 簡易導覽
• 大型彙總數（BAN）－置於頂列

                                視線焦點

¹ Baucke, Spencer. (2022). Dashboard design essentials.

一起來練習吧！

Dashboard 設計概念