智能家居 App 设计:首页改版前后对比

智能家居 App 的首页只有一个任务:告诉你身处哪个房间,并让你一键改变开着的东西。下面的初稿功能一个不少,但它列出八行一模一样的设备,状态文字小得可怜,房间藏在带下划线的文字里,场景则被扔到最后,变成六个小按钮。它看起来像设置页,所以用起来像在配置,而不是在生活。

修复版保留了每一项功能,只改变展示方式。房间排在最前面,设备变成开启时会亮起的卡片,场景变成拇指够得着的胶囊。

整个屏幕,改版前后

新手初稿

修复后

左边没有任何重点。标题栏、统计条、六个链接、照片横幅、八行设备和六个按钮全都是同样的分量。设备行是最大的一块,而且每一行一样大,所以关着的电视看起来和正在加热的恒温器一样重要。

右边的屏幕按顺序回答两个问题:我在哪,什么开着。照片就是房间本身,而不是一张宣传 App 的横幅。状态由颜色承载,用户一眼就能读懂整个网格。

改了什么,量化对比

修复 1:先说房间,再说开着什么

之前

之后

一个标题栏,有菜单图标、My Home、加号、设置和带红点的铃铛,一条天气信息写着 18°C 多云、室内 22°C、湿度 44%、用电 3.2 kWh,六个带下划线的房间链接和一个写着 Haven 的照片横幅;对比之下,是 Living Room 大号粗体,下面写着 22° · 3 盏灯开着,背景是房间照片,带加号和三点菜单。

初稿的标题栏想当控制面板。它带着三个操作、一行由四部分组成的天气信息,还有一句说家里“运行顺畅”的问候,而这根本不算信息。用户早就知道没出问题,因为没有任何东西在闪。

修复版给屏幕定了主题。“Living Room”是标题,下面一行放着人们真正会查看的两个事实:温度和开着几盏灯。这三盏灯就是初稿里开着的 Floor Lamp、Ceiling Light 和 Shelf Light,所以没有凭空编造。天气、湿度和用电从三点菜单里打开,铃铛和齿轮移到“我的”页面。

这是 Apple Home 使用的模式:顶部是房间名和它的实时状态。

可复用的规则:地点放最前,下面一行实时状态,其余的收进菜单。

修复 2:朴素、可滑动的房间标签

之前

之后

一行六个带下划线的链接:Living Room、Bedroom、Kitchen、Bath、Garage、Office;对比之下,Living Room 为粗体白色,Bedroom、Kitchen 和 Bathroom 为灰色,一直延伸出右侧边缘。

带下划线的文字在段落里是链接,而不是房间之间的选择。六个还把整个宽度占满,用户分不清哪个房间是打开的。下划线是页面上最响亮的工具,却被用在最安静的元素上。

朴素标签同时解决了这两个问题。选中的房间是白色,其他是灰色,所以当前房间是唯一亮的。这一行故意延伸出右侧边缘,表明可以滑动,也让房间超过六个时无需换布局。Bathroom 和 Office 只需滑一下,Garage 则从点点菜单里打开。

可复用的规则:用颜色而不是下划线表示选中,让一排选项延伸出边缘。

修复 3:用卡片代替列表行

之前

之后

八行相同的列表,每行有图标、名称、灰色状态文字如 On、80%、Warm White,右侧是一个小小的琥珀色或灰色开关;对比之下,是双列宽圆角卡片:Floor Lamp 和 Thermostat 为白底琥珀色图标,TV 和 Speaker 为深色底白图标,Ceiling Light 和 Blinds 从下方开始。

列表行代价最高。每一行都要用户找到一行 9 px 的字,读出“On | 80% | Warm White”,再找到一个 30 x 18 的开关去点。八行就是一列文字,没有任何东西把开着的设备和关着的区分开。

卡片就是按钮。整张卡片都是点击目标,名称 14,状态 12,由颜色承担开关的作用:白底琥珀色图标是开,深色底白图标是关。用户一眼就能扫完八个设备,并看到前几行里有两个开着。卡片还从悬浮标签栏下方穿过,告诉用户列表还在继续。

什么都没有丢。初稿里的 Ceiling Light、Shelf Light、Blinds 和 Air Purifier 放在 Accessories 下的“All 8”后面,每个设备依然可以到达。

可复用的规则:当每一项都有开和关两种状态时,用该项自身的颜色表现状态,并让整张卡片成为点击目标。

修复 4:真正的场景胶囊

之前

之后

一个小小的 SCENES 标签下是六个相同的灰色大写字母按钮:Movie、Sleep、Away、Morning、Party、Reading;对比之下,是一排带图标的圆角胶囊:Movie 为白色高亮,Sleep 和 Away 为深色,下一个延伸出边缘。

场景是智能家居 App 最棒的部分,因为一次点击就能改变整个房间。在初稿里,它们被放在底部、八行设备之下,是六个一模一样的灰色按钮。它们像一张表单,而且没有任何一个说明哪个场景正在生效。

修复版把场景上移到房间标签正下方,并给每个场景配上图标。它们高 44,拇指可以轻松操作,当前场景以白色高亮。Party 在胶囊里滑动可见,Reading 在场景标签页里。

可复用的规则:把价值最高的操作放在拇指所在的位置,并显示哪一个正在生效。

更小的修复

• 每项功能都保留。 Ceiling Light、Shelf Light、Blinds 和 Air Purifier 放在 All 8 后面。天气、湿度和用电从标题栏的点点菜单打开。铃铛和齿轮移到“我的”,并带有角标红点。
• 边距一致。 初稿左边距 14 px,右边距 12 px。修复后的屏幕两侧使用同一个边距。
• 只用一种强调色。 琥珀色只出现在开启卡片的图标和当前标签上。初稿里每个开关和好几个图标都有它。
• 平整的压暗层。 照片上只有一层 52% 的黑色,没有渐变,没有光晕,所以台灯依然清晰,书本则暗下去。
• 更少的标签。 悬浮的 62 px 栏里四个标签,取代了五个图标混用实心与描边的标签。
• 字号体系。 文字从 12 到 34 pt,标签文字 10 pt,取代初稿的 9 到 15 px。

审视你自己的智能家居界面

获取 Figma 文件

免费文件包含新手初稿、修复后的屏幕,以及每个部分的组件。

免费 Figma 文件

智能家居界面改版前后对比

两个屏幕以及每个部分的 Figma 组件。免费,仅供查看,可复制到你的草稿。

在 Figma 中打开

FAQ

智能家居 App 的首页应该怎么设计?

以房间名和一行实时状态开头,比如“22° · 3 盏灯开着”。把设备做成双列卡片,用颜色表示开启,把场景做成胶囊放在靠上的位置,并把天气和设置收进菜单。

智能家居 App 的设备应该用卡片还是列表?

首页用卡片。整张卡片就是点击目标,颜色让状态一目了然。列表适合很长的设置或历史记录视图。

智能家居 App 怎样表示设备已开启?

用卡片本身:白色卡片配琥珀色图标表示开,深色卡片配白色图标表示关,这样没人需要去读状态文字或寻找小开关。

智能家居 App 里场景应该放在哪?

放在靠上的位置,房间标签下方,做成拇指够得着的胶囊,并高亮当前场景。场景一键就能改变整个房间,所以不该被压在八行设备下面。

智能家居 App 需要几个标签?

四个就够:Home、Scenes、Automations 和 Profile。房间放在首页可滑动的标签里。

为什么智能家居 App 里不该给房间名加下划线?

下划线在文字里表示链接。朴素标签,选中的房间为白色、其余为灰色,既能显示哪个房间是打开的,又能让这一行滑动。

来源

• 两个屏幕都是我们自己在 Figma 里设计并测量的。App Haven 及其设备是虚构的。数字前后一致:两个屏幕里都是三盏灯开着,Floor Lamp 为 80%,恒温器设为 22°。
• 研究的模式:Apple Home,顶部是房间名及其状态,配件用卡片,场景用胶囊。文字大小遵循 iOS(12 到 34 pt,标签文字 10 pt)。
• 图标来自 Phosphor(MIT)。照片来自 Pexels:Yusuf P 和 Jan Vee。
• 最初作为轮播图发布于 App Brainy。