設為首頁收藏本站
切換到窄版

 找回密碼
 立即註冊
惟家LINE群QRCODE
    惟家的智能論壇»論壇 › 惟家智能生活討論區 › Home Assistant 討論 › 儀表板設計：做一個家人真的會用的介面 ...
    返回列表 發新帖
    查看: 3|回覆: 0

    儀表板設計：做一個家人真的會用的介面

    [複製鏈接]
    charles

    !lvup!   100%

    363

    主題

    27

    回帖

    2200萬

    積分

    管理員

    積分
    22005752
    發表於 3 天前 | 顯示全部樓層 |閱讀模式
    你花三個月做的儀表板，家人用了三次就放棄 —— 為什麼？



    常見的錯誤


    • 一頁塞三十個卡片，找一個開關要滑半天
    • 顯示了一堆「你覺得酷」但沒人在乎的數據
    • 手機上看起來一團亂（做的時候用電腦）
    • 沒有「現在最需要的東西」


    核心原則：最常用的要最快按到

    先問自己：


    • 家人一天會用幾次？用來做什麼？
    • 通常在什麼情境下打開？
    • 他們手上拿著什麼？（通常是手機，單手操作）


    實際的答案通常是：


    • 開關客廳燈
    • 開關冷氣、調溫度
    • 看門有沒有鎖
    • 就這樣


    那儀表板第一頁就應該只有這幾樣。



    建議的結構
    1. 第一頁「常用」   ← 家人只會看這頁
    2.   - 目前狀態（一句話）
    3.   - 三到五個最常用的按鈕
    4.   - 溫度、天氣
    6. 第二頁「房間」
    7.   - 每個房間一個區塊
    8.   - 用 Sections 視圖排版
    10. 第三頁「監控」   ← 你自己看的
    11.   - 感測器數值、圖表
    12.   - 能源、網路
    14. 第四頁「系統」   ← 更你自己看的
    15.   - HA 的狀態、備份、更新
    16.   - 電池、離線裝置
    複製代碼

    用 Sections 視圖（現在的預設）

    HA 的 Sections 視圖比舊的 Masonry 好用很多：


    • 卡片會自動排成整齊的格子
    • 可以拖拉調整大小
    • 手機上會自動變成單欄
    • 每個 section 有自己的標題


    建立：編輯儀表板 → 新增視圖 → Sections

    標題列的按鈕（heading badges）

    HA 2026.2 之後，section 的標題可以加按鈕 ——
    直接在標題旁邊放「全部關燈」之類的動作，很省空間。

    Tile 卡片：現在最好用的卡片


    1. type: tile
    2. entity: light.客廳
    3. name: 客廳
    4. features:
    5.   - type: light-brightness
    6.   - type: light-color-temp
    7. vertical: false
    8. hide_state: false
    複製代碼

    為什麼好用：


    • 一眼看得出狀態（圖示會變色）
    • 點圖示直接切換，點名稱開詳細頁
    • features 可以加滑桿、按鈕
    • 手機上大小剛好


    常用的 features：
    1. light-brightness          亮度滑桿
    2. light-color-temp          色溫滑桿
    3. cover-open-close          窗簾開關按鈕
    4. cover-position            窗簾位置滑桿
    5. climate-hvac-modes        冷氣模式
    6. target-temperature        目標溫度
    7. fan-speed                 風速
    8. media-player-volume       音量
    9. vacuum-commands           掃地機器人指令
    10. lock-commands             門鎖
    11. alarm-modes               警報模式
    複製代碼

    一個好的第一頁長什麼樣
    1. type: sections
    2. sections:
    3.   # ---------- 狀態摘要 ----------
    4.   - type: grid
    5.     cards:
    6.       - type: markdown
    7.         content: >
    8.           ## {{ ['早安','午安','晚安'][
    9.                 0 if now().hour < 12 else
    10.                 1 if now().hour < 18 else 2] }}
    12.           現在 {{ states('sensor.客廳溫度') }} 度，
    13.           {{ states('weather.forecast_home') }}
    15.           {% set 開著的燈 = states.light
    16.              | selectattr('state','eq','on') | list | count %}
    17.           {% if 開著的燈 > 0 %}
    18.           有 {{ 開著的燈 }} 盞燈開著
    19.           {% else %}
    20.           所有燈都關了
    21.           {% endif %}
    23.   # ---------- 常用按鈕 ----------
    24.   - type: grid
    25.     cards:
    26.       - type: tile
    27.         entity: light.客廳
    28.         features:
    29.           - type: light-brightness
    30.       - type: tile
    31.         entity: climate.客廳
    32.         features:
    33.           - type: target-temperature
    34.       - type: tile
    35.         entity: lock.大門
    36.         features:
    37.           - type: lock-commands
    38.       - type: tile
    39.         entity: script.離家模式
    40.         name: 離家
    41.         icon: mdi:home-export-outline
    複製代碼



    條件式卡片：只在需要的時候出現

    這招讓儀表板不會塞爆。
    1.       - type: conditional
    2.         conditions:
    3.           - condition: state
    4.             entity: binary_sensor.有門窗開著
    5.             state: "on"
    6.         card:
    7.           type: markdown
    8.           content: >
    9.             ### ⚠️ 有門窗開著
    10.             {{ state_attr('binary_sensor.有門窗開著', '清單') | join('、') }}
    複製代碼

    適合用條件式的東西：


    • 警告訊息（門沒關、有裝置離線）
    • 只有某個情境才需要的控制（看電影模式的音響控制）
    • 季節性的（夏天顯示冷氣、冬天顯示暖氣）
    • 有人在家才顯示的


    還可以用 visibility 屬性（比 conditional 卡片更簡潔）：
    1.       - type: tile
    2.         entity: climate.客廳
    3.         visibility:
    4.           - condition: numeric_state
    5.             entity: sensor.客廳溫度
    6.             above: 26
    複製代碼

    每個卡片都可以設 visibility，
    不用外面包一層 conditional。

    也可以依使用者顯示：
    1.         visibility:
    2.           - condition: user
    3.             users:
    4.               - 你的_user_id
    複製代碼

    管理用的東西只有你看得到。

    手機優先的設計

    做儀表板的時候一定要用手機看一次。


    • 按鈕夠不夠大（拇指能準確按到嗎）
    • 最常用的在拇指範圍內嗎（螢幕下半部）
    • 需要橫向捲動嗎（不應該要）
    • 文字會不會太小


    實用技巧：用 HA App 的「側邊欄」


    • 在 App 裡長按側邊欄項目可以排序
    • 把不常用的隱藏起來
    • 每個使用者可以有自己的排序




    給家人專用的儀表板

    做法：


    • 新增一個儀表板，取名「簡易版」
    • 只放最基本的東西
    • 在儀表板設定裡限制「只有這些使用者看得到」
    • 或者用 visibility 控制


    給長輩用的設計：


    • 字要大（用 card-mod 調字級）
    • 按鈕要大
    • 顏色對比要強
    • 不要有滑桿（很難按準）—— 改成「亮」「暗」兩個按鈕
    • 不要有需要長按的操作


    給小孩用的：


    • 把危險的東西隱藏（門鎖、警報、熱水器）
    • 帳號設成非管理員


    值得裝的自訂卡片（HACS）


    • Mushroom Cards —— 漂亮、簡潔，很多人的首選
    • Bubble Card —— 手機優先的設計，彈出式控制
    • card-mod —— 用 CSS 改任何卡片的樣式
    • ApexCharts Card —— 功能強大的圖表
    • auto-entities —— 自動列出符合條件的實體
    • button-card —— 高度客製的按鈕


    但是：先把內建的用熟。
    現在的 Tile 卡片已經很好用，不一定需要自訂卡片。

    auto-entities 的一個超實用範例
    1. type: custom:auto-entities
    2. card:
    3.   type: entities
    4.   title: 需要注意的
    5. filter:
    6.   include:
    7.     - state: unavailable
    8.     - attributes:
    9.         battery_level: "< 20"
    10.   exclude:
    11.     - entity_id: sensor.*_linkquality
    12. show_empty: false
    複製代碼

    自動列出所有離線的、快沒電的裝置，
    沒問題的時候整個卡片消失。

    最後一個建議

    做完之後，拿給家人用，然後閉嘴在旁邊看。


    • 不要解釋
    • 看他們卡在哪裡
    • 那就是要改的地方


    自己覺得好用不算數。

    ---

    下一篇：攝影機與影像辨識 ——
    本地跑，不上雲，而且能認出是誰。
    回覆

    使用道具 舉報

    返回列表 發新帖
    高級模式
    B Color Image Link Quote Code Smilies
    您需要登入後纔可以回帖 登入 | 立即註冊

    本版積分規則

    Archiver|手機版|惟家的智能論壇

    GMT+8, 2026-9-24 12:21 , Processed in 0.085812 second(s), 24 queries .

    快速回覆 返回頂部 返回列表