三星SmartThings产品解析

2023-1-5    资深UI设计者

这篇文章主要探索三星智能家居App-SmartThings的主要功能和核心流程,以及新版本与上一版本的差异给我们的启发。



1.整体风格布局差异对比

1-1 SmartThings 1.0 界面

三星上一版本界面标题选用细体字,头部区域留白,卡片功能区域小,背景选用写实简约照片,体现文艺感。

圆形的场景卡片与矩形的设备卡片形成对比,场景卡片与文字上下排列,更加凸显场景图片,但文字存在多行、单行显示,这种表现方式会显得凌乱。

设备卡片从上到下依次为图标、设备名、状态。



1-2 SmartThings 2.0 界面

新版本标题选用粗体字,标题区域更加紧凑,功能区域展示空间变大,背景使用抽线双色渐变,更现代时尚。

功能卡片为统一圆角矩形,场景卡片图文左右排布,底部白色卡片区域可以很好兼容多行、单行文字的情况。

设备卡片从上到下依次为图标、房间名、设备名、状态。

底部新增Tab区域,细分为收藏、设备、生活、自动化、菜单5个模块。

 

风格布局总结:新版本屏幕利用率更高,粗体字和抽象背景使得内容更凸显,底部的Tab提供了更多模块入口,功能分类更合理。



2.架构差异对比

2-1 SmartThings 1.0 架构

旧版本只有一个首页,功能都在此被分发,并且功能较为单一。



2-2 SmartThings 2.0 架构

新版本增加收藏、设备、生活、自动、更多模块,对用户使用场景做了细分。

界面顶部的房屋设置、添加、编辑为全局设计,不过在每个模块中添加的内容不同。

收藏作为用户每次进入App的第一屏,说明是用户常用的重要功能,在收藏模块中,可以添加的内容最多,用户在此页面可以完成大多数常用操作。

设备模块是全屋设备的合集,自动模块是场景、自动化的合集。

生活模块主要提供家庭安全监控信息,还可接入其他服务,例如:智能家电监控、智能烹饪服务。



3.设备卡片分析

3-1 设备卡片结构解析

新版本设备卡片主要由设备图标、房间名、设备名、状态、控制区构成;房间名域为预留区,保证在不同页面下的统一性。

设备在离线状态下,右上角会显示离线图标,代替控制按钮。

只有我们提前罗列出更多的页面显示情况,整合并预留可变区域,才能使页面更统一。



4.新版本收藏模块分析

4-1 收藏界面

收藏模块分为3大区域,区域1为状态通知区;区域2为收藏的场景区;区域3为收藏的服务或设备。这3个区域展示顺序是固定的,可以选择是否展示,无法改变展示顺序。

因为每个区域的卡片尺寸是不一样的,区域固定的好处是,可以保证显示的统一性。否则大小卡片穿插显示,还可能会空缺几个,很影响美观。并且操控逻辑也是固定的,用户更容易理解。



4-2 添加到收藏方式1

点击收藏模块右上角添加,可批量选择内容快速添加收藏。



4-3 添加到收藏方式2、3

在非收藏页,长按卡片,可单独添加收藏内容。

在设备、场景等新建或编辑界面,可以选择添加至收藏的选项。省去了后续的单独添加动作。



4-4 移除收藏

在收藏页,长按卡片,可以进行单独移除操作。

在收藏编辑页面,可以批量快速移除移除。满足了不同的用户需求。



5.设备模块分析

5-1 设备界面

首次进入,展示的是某个房间内的设备,通过左右滑动进行切换房间,三星可能想为用户提供模糊操作来提升效率,在房间少的情况下,这种方式比较好。当房间多了,用户会滑动多次才能到目标房间;当然三星给出了针对精确选择的方式,点击左上角的房间入口,可以选择、编辑房间。

房间多的情况下这2种方式都不是很好的解决方案。

这里要注意的是,三星把“没有房间”也放进房间列表,供用户选择。现实中,有好多设备是不属于任何房间或者用户暂时不想放到某个房间,增加无房间选择可以更灵活的满足实际使用场景。



5-2 房间添加流程

在房屋编辑页面,可以添加房间,在这里三星已经为用户预设了很多房间类型选项,用户只需要做选择,很方便,即使没有要的,还可以在列表底部选择自定义。



5-3 设备添加方式

在设备页面,只能添加设备、灯光组、监控组。

用户可以通过关键词搜索、扫码、设备类型筛选、品牌筛选进行设备添加。

很全,几乎涵盖了所有的添加方式。



5-4 灯光组添加流程

在添加页面,第一步要先填写组的名称、选择所在房间,第二步选择要合并的灯,添加完成跳转至设备组详情,方便立即调控。



5-5 设备控制页

设备控制页面采用了模块化的设计方式,控制区域均为列表形式,不同的设备只需要替换图标和文字及对应的操控列表,降低新设备重新创作新界面的设计成本。



5-6 单独移动设备

长按设备卡片,选择目标房间,可完成单个设备转移。



5-7 批量移动设备

选择设备页面右上角的移动方式,可以批量进行设备的转移。



6.自动模块分析

6-1 自动运行界面

自动模块包含场景、自动化、第三方设备,它们不具备房间属性;

点击右上角的箭头可以展开或收起对应列表,方便查找内容。



6-2 新建场景流程

第一步,先填写场景名称、选择图标、是否要添加到收藏;

第二步,选择执行的设备,可以根据设备名称、房间名称进行快速定位,并且可以批量选择设备;

第三步,设备添加成功后,根据需要,单独对设备执行状态设置。

 

新建场景的逻辑是:先批量选择要执行的设备,再单独设置执行内容。

这种方式的好处是,不易打断用户的设置思路,还可以减少操作步长。



6-3 新建自动化

新建自动化界面分为触发条件、执行内容两大块;

初始状态会为用户提供使用描述,便于用户操作。

可以通过时间的变化、设备状态变化、位置变化、天气变化、安防变化来触发执行命令。



6-4 添加触发条件

将设备状态变化作为触发条件时,设置逻辑是,完成一个设备的设置才能设置下一个,不能批量选择。为什么和新建场景的流程不一样?可能是因为在设置执行条件时,用户心智里认为设备和状态联系更紧一些,并且条件种类不会太多。



6-5 条件满足类型

当添加了一个以上的设备作为触发条件时,界面会显示“同时满足或满足任何一个”的选项。



6-6 执行内容

执行内容可以是控制设备、通知给用户、运行场景、改变安防模式。

可以批量选择设备,并且可以设置执行延迟时间、自动复位,满足用户不同需求。


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请加微信ban_lanlan,报下信息,蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作,也请与我们联系。 

作者:土木君     来源:站酷


分享此文一切功德,皆悉回向给文章原作者及众读者. 免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。 

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务
UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司               

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档