这套智能家居App设计先用Work Room照片说明当前空间,再把读数和星期卡叠到前景。设置页换成蓝色时间环,介绍网站继续展示同样组件。它的整体感很强,更值得看的是房间、参数和安排如何各自有明确身份。

核心结论

  • 房间照片与参数卡分工,空间身份先于设备型号。
  • 时间环配精确起止,网站继续用界面说明产品任务。

房间照片让设备有了日常位置

手机首页的台灯、桌面和绿植构成工作房间,Work Room大字在上,Noize与Light卡在左,星期和时长在右。照片是场景,参数卡是任务,底部房间图标又为切换留出位置。

这样的智能家居首页适合按空间组织设备,读者不用先记一串型号。蓝色Light卡和黄色星期选中让重点容易找到,玻璃感灰卡则融进照片。借鉴时应明确Light属于一盏灯、整个房间还是读数汇总,照片不能替文字定义对象。

Noize与Light的图标外形接近,数值却分别配dB和lx。继续打磨可以先核对名称、图标与单位,让人不必靠单位纠正刚才的图形理解。界达设计更看重这一层准确,再看卡片透明度。

Aqara Work Room照片上的Noize 12 dB、Light 400 lx、星期8h列表与底部房间图标
房间页照片前景与右侧|参数和星期同屏,房间场景之外仍需说明设备对象。

时间环给整体,起止文字给核对

设置页采用大面积蓝底,黄色弧与两个端点标出范围,中央写时长,下方另有7 am–5 pm。图形可以让人快速看一段区间,精确起止仍通过文字确认,这是很好的互补。

顶部勾号与返回分居两侧,下面又有参数卡。保存时应带上当前房间、设备和星期,说明究竟更新哪项安排。首页时长与设置页不同,不能从两张展示图推断已经发生过修改。

界达设计会检查跨天、重复日与未保存状态。当前读数和预设值也应各有标签,保存安排不一定立即改变读数,页面需要解释这两种内容。时间环可以继续简洁,精确文字不宜省去。

Aqara蓝色Settings页的黄色时间区间、10h Work Time、7 am–5 pm和下方参数卡
时间设置中央到下部|弧形提供区间感,起止文字核对精确时段,参数留在同一设置范围。

网站用真实界面把介绍接到产品

Control Your Home下方放倾斜手机,Smart Home Widgets继续展示灰蓝参数与星期组件。桌面和移动网站都用黑底和蓝色下载,看到网站后很容易认出App里的布局。

产品截图比另做一套抽象图更接近使用内容。介绍可以围绕选房间、确定对象、调整时间和核对结果展开,让下载之前就能理解一次具体设置。设备范围与支持条件则应来自实际资料。

界达设计认为,网站和App可以共享颜色与组件,说明仍按阅读任务安排。外观连续是一层,动作能被复述是另一层;把读数与设定讲清,会比再增加一张设备渲染更有价值。

Aqara桌面和移动介绍页的Control Your Home、Work Room手机和Smart Home Widgets模块
介绍页首屏与组件区|真实界面结构重复出现,产品说明可继续接到一个具体任务。

常见问题

家居App怎样区分读数和设定?

给实时值、目标值和定时安排各自标签,保存时说明对象与生效范围。相似卡片不能默认同一含义。

设计检查清单

  • 对齐参数名称图标单位。
  • 保存前复述房间设备星期与时段。

整理房间控制与设置反馈

如果你的智能家居或设备App需要梳理场景首页、参数和时间安排,可带着设备对象与状态来讨论。

界达设计工作室(JVDS)提供UI/UX设计与网站设计、开发服务,可一起梳理页面内容、界面结构与实现需求。

联系界达设计,聊聊你的项目