一個好用的儀表板該長什麼樣：三頁法則

charles · 發表於 3 天前

技術講完了，這篇講設計。

這是最多人做不好的部分 ——
不是因為不會寫，是因為沒想清楚要給誰看。

先講最常見的三個問題

問題一：什麼都放上去

一頁三十張卡片，要捲五次。

結果：真正常用的那三個功能藏在中間某個地方，
每次都要找。

問題二：為了好看而做

花一個週末調出很漂亮的版面，
但每天只用其中兩張卡片。

問題三：只有自己看得懂

用了一堆縮寫和自訂名稱，
家人打開來完全不知道要點哪裡。

三頁法則

我用了兩年下來，最穩定的結構是三頁：

第一頁：現在（Home）

回答一個問題：現在家裡怎麼樣？

放什麼：

異常提示（沒異常就不顯示）
室內溫濕度（一兩個最重要的房間）
現在開著的東西（用 auto-entities 之類的動態清單）
三到五個最常用的按鈕

不放什麼：

所有裝置的完整清單
歷史圖表
系統狀態

判斷標準：一個螢幕看完，不用捲。

第二頁：全部（Rooms）

回答：我要控制某個特定的東西。

按房間分區塊
每個房間一個標題卡片 + 幾張 tile
這頁可以長，因為你是「有目的地來找東西」

第三頁：狀態（System）

回答：系統健康嗎？

電池電量低的裝置
離線的實體
資料庫大小、HA 運行時間
備份狀態
自動化最後觸發時間

這頁通常一個月看一次，但沒有的話你永遠不會發現東西壞了。

為什麼是三頁

一頁 → 一定會太擠
兩頁 → 系統狀態會混進日常頁面
三頁 → 剛好對應三種不同的意圖
四頁以上 → 你自己都會忘記第四頁有什麼

第一頁的設計原則（最重要的一頁）

原則一：異常優先

最上面放一個只在有問題時才出現的區塊。

sections:
- type: grid
visibility:
- condition: state
entity: binary_sensor.home_has_problem
state: "on"
cards:
- type: heading
heading: ⚠ 需要注意
heading_style: title
- type: entities
entities:
- binary_sensor.any_door_open
- binary_sensor.any_leak
- sensor.low_battery_count

複製代碼

整個區塊都有可見性條件 —— 沒問題的時候完全不存在。

原則二：動態清單比固定清單好

「現在開著的燈」用動態清單，不要列出所有燈。

用 HACS 的 auto-entities：

type: custom:auto-entities
card:
type: entities
title: 現在開著的
filter:
include:
- domain: light
state: "on"
- domain: switch
state: "on"
- domain: fan
state: "on"
exclude:
- entity_id: "*_led"
- entity_id: "*_child_lock"
show_empty: false
sort:
method: friendly_name

複製代碼

show_empty: false —— 什麼都沒開的時候，這張卡片會消失。

這個一張卡片取代了「列出二十盞燈」的做法。

原則三：最常用的放最上面

怎麼知道哪些最常用：

回想一下你昨天用 HA 做了什麼
或者看 logbook，哪些實體最常被手動操作

我自己的前三名是：

關客廳的燈
開／關除濕機
看室內溫度

所以這三個放最上面。

原則四：給家人看的，不是給自己看的

這是最關鍵的一條。

三個檢查點：

名稱是不是人話 —— 「客廳燈」不是「LR_Main_Light」
圖示看得懂嗎 —— 不要用太抽象的
點下去會發生什麼，直覺嗎

最好的測試方法：

把手機拿給家人，說「幫我關客廳的燈」，然後不要出聲。

五秒內找到 → 設計成功
要問你 → 要改

我第一版被太太問了三次「這個是什麼」，
砍掉重做之後才變成她會主動用的東西。

手機、平板、電腦的差別

同一個儀表板在三種裝置上看起來會很不一樣。

手機 —— 只看得到第一個區塊，其他都要捲。字要大、按鈕要大
平板 —— 兩三個區塊並排，最舒服的尺寸
電腦 —— 很寬，卡片會被拉得很長

三個對策：

對策一：設定 max_columns

type: sections
max_columns: 3

複製代碼

限制最多三欄，在超寬螢幕上就不會散開。

對策二：用可見性條件做裝置區分

可見性條件裡有「螢幕」這個選項，
可以設定「只在手機顯示」或「只在桌面顯示」。

對策三：做兩個儀表板

一個給手機（簡化版）
一個給平板（完整版）

我自己是用這個做法，因為兩種使用情境差太多了。

一份自我檢查清單

做完儀表板之後，問自己：

第一頁能不能一個螢幕看完？（手機上）
最常用的三個功能在不在最上面？
有沒有「只是因為做得到就放上去」的東西？
家人不用問就會用嗎？
出問題的時候，我看得出來嗎？
有沒有卡片是我一個月沒點過的？

最後一項最有用。

我每季會做一次「刪卡片」 ——
想不起來上次點是什麼時候的，就刪掉。

刪完之後儀表板會變得好用很多。

一個反直覺的心得

最好的儀表板，是你越來越少打開的那一個。

因為：

該自動的都自動了
需要你介入的事情變少了
真的要看的時候，一眼就找到

我現在打開 HA App 的頻率比一年前低很多，
但家裡運作得比以前好。

那才是目標。

---

儀表板系列到這裡。

下一篇開始講 ESPHome ——
自己做感測器，這是另一個完全不同的世界。

		自動登入	找回密碼
密碼			立即註冊

一個好用的儀表板該長什麼樣：三頁法則

瀏覽過的版塊