HA入门_篇8：HA主题UI设计：彩平图专题 - 雷泽智能知识库

# 凯文总结 > [!凯文说] > 由于内容较多，本期视频一共拆分为9期，通过完整的内容学习，相信你不仅可以收获一个好看的HomeAssistant平板中控界面，对于HA的理解也会更进一层 > # 视频教程（以下内容均在B站更新） - [课1: 框架原理与课程目录详解](https://www.bilibili.com/video/BV19dxxeDE9j/) - [课2: 用Procreate设计彩平图UI](https://www.bilibili.com/video/BV1YVxveGEzJ/) - [课3: 前端插件Button-Card详解](https://www.bilibili.com/video/BV1iv4GeQEM9/) - [课4: 万年历模块设计](https://www.bilibili.com/video/BV1JXxXeBEoz/) - [课5: 天气预报模块设计](https://www.bilibili.com/video/BV1kz1QYTEv5/?vd_source=bd65e6cb7d738b19d1eb961f62c8ca11) - [课6: 顶部菜单栏设计（一）](https://www.bilibili.com/video/BV1om1BYWEgw/) - [课7: 顶部菜单栏设计（二）](https://www.bilibili.com/video/BV1cB1BYhEgF/) - [课8: 人物头像卡片的应用](https://www.bilibili.com/video/BV1Fr1BY8E68/) - [课9: 图片元素的简单应用](https://www.bilibili.com/video/BV1ao1BYEEUJ/) # 相关代码 ==以下代码请进QQ群（556370761）的群文件下载，在线文档显示不全== - 课4: 隐藏菜单栏kiosk_mode.yaml - 课4: 万年历.yaml - 课4: 自动化：自动获取ical未来14天事件.yaml - 课4: 夜晚蒙版的代码.yaml - 课5: 天气预报模块.yaml - 课6: 顶部菜单栏（不含tap_action）.yaml - 课8: 人物头像卡片代码.yaml configuration.yaml相关 - sensor.yaml - template.yaml # 图文教程 <center data-spm-anchor-id="a213gs.26037848.0.i9.303a4831hBAk92"> <img align="absmiddle" src="https://weimage.rez-ti.com/images/homeassistant/wemedia/HA入门_篇8：HA主题UI设计：彩平图专题/1.png" style="max-width:100%;" /> <img align="absmiddle" src="https://weimage.rez-ti.com/images/homeassistant/wemedia/HA入门_篇8：HA主题UI设计：彩平图专题/2.png" style="max-width:100%;" /> <img align="absmiddle" src="https://weimage.rez-ti.com/images/homeassistant/wemedia/HA入门_篇8：HA主题UI设计：彩平图专题/3.png" style="max-width:100%;" /> <img align="absmiddle" src="https://weimage.rez-ti.com/images/homeassistant/wemedia/HA入门_篇8：HA主题UI设计：彩平图专题/4.png" style="max-width:100%;" /> <img align="absmiddle" src="https://weimage.rez-ti.com/images/homeassistant/wemedia/HA入门_篇8：HA主题UI设计：彩平图专题/5.png" style="max-width:100%;" /> <img align="absmiddle" src="https://weimage.rez-ti.com/images/homeassistant/wemedia/HA入门_篇8：HA主题UI设计：彩平图专题/6.png" style="max-width:100%;" /> <img align="absmiddle" src="https://weimage.rez-ti.com/images/homeassistant/wemedia/HA入门_篇8：HA主题UI设计：彩平图专题/7.png" style="max-width:100%;" /> <img align="absmiddle" src="https://weimage.rez-ti.com/images/homeassistant/wemedia/HA入门_篇8：HA主题UI设计：彩平图专题/8.png" style="max-width:100%;" /> <img align="absmiddle" src="https://weimage.rez-ti.com/images/homeassistant/wemedia/HA入门_篇8：HA主题UI设计：彩平图专题/9.png" style="max-width:100%;" /> <img align="absmiddle" src="https://weimage.rez-ti.com/images/homeassistant/wemedia/HA入门_篇8：HA主题UI设计：彩平图专题/10.png" style="max-width:100%;" /> <img align="absmiddle" src="https://weimage.rez-ti.com/images/homeassistant/wemedia/HA入门_篇8：HA主题UI设计：彩平图专题/11.png" style="max-width:100%;" /> <img align="absmiddle" src="https://weimage.rez-ti.com/images/homeassistant/wemedia/HA入门_篇8：HA主题UI设计：彩平图专题/12.png" style="max-width:100%;" /> <img align="absmiddle" src="https://weimage.rez-ti.com/images/homeassistant/wemedia/HA入门_篇8：HA主题UI设计：彩平图专题/13.png" style="max-width:100%;" /> <img align="absmiddle" src="https://weimage.rez-ti.com/images/homeassistant/wemedia/HA入门_篇8：HA主题UI设计：彩平图专题/14.png" style="max-width:100%;" /> <img align="absmiddle" src="https://weimage.rez-ti.com/images/homeassistant/wemedia/HA入门_篇8：HA主题UI设计：彩平图专题/15.png" style="max-width:100%;" /> </center>