三星SmartThings產(chǎn)品解析

2023-1-5    資深UI設(shè)計(jì)者

這篇文章主要探索三星智能家居App-SmartThings的主要功能和核心流程,以及新版本與上一版本的差異給我們的啟發(fā)。



1.整體風(fēng)格布局差異對(duì)比

1-1 SmartThings 1.0 界面

三星上一版本界面標(biāo)題選用細(xì)體字,頭部區(qū)域留白,卡片功能區(qū)域小,背景選用寫實(shí)簡(jiǎn)約照片,體現(xiàn)文藝感。

圓形的場(chǎng)景卡片與矩形的設(shè)備卡片形成對(duì)比,場(chǎng)景卡片與文字上下排列,更加凸顯場(chǎng)景圖片,但文字存在多行、單行顯示,這種表現(xiàn)方式會(huì)顯得凌亂。

設(shè)備卡片從上到下依次為圖標(biāo)、設(shè)備名、狀態(tài)。



1-2 SmartThings 2.0 界面

新版本標(biāo)題選用粗體字,標(biāo)題區(qū)域更加緊湊,功能區(qū)域展示空間變大,背景使用抽線雙色漸變,更現(xiàn)代時(shí)尚。

功能卡片為統(tǒng)一圓角矩形,場(chǎng)景卡片圖文左右排布,底部白色卡片區(qū)域可以很好兼容多行、單行文字的情況。

設(shè)備卡片從上到下依次為圖標(biāo)、房間名、設(shè)備名、狀態(tài)。

底部新增Tab區(qū)域,細(xì)分為收藏、設(shè)備、生活、自動(dòng)化、菜單5個(gè)模塊。

 

風(fēng)格布局總結(jié):新版本屏幕利用率更高,粗體字和抽象背景使得內(nèi)容更凸顯,底部的Tab提供了更多模塊入口,功能分類更合理。



2.架構(gòu)差異對(duì)比

2-1 SmartThings 1.0 架構(gòu)

舊版本只有一個(gè)首頁(yè),功能都在此被分發(fā),并且功能較為單一。



2-2 SmartThings 2.0 架構(gòu)

新版本增加收藏、設(shè)備、生活、自動(dòng)、更多模塊,對(duì)用戶使用場(chǎng)景做了細(xì)分。

界面頂部的房屋設(shè)置、添加、編輯為全局設(shè)計(jì),不過(guò)在每個(gè)模塊中添加的內(nèi)容不同。

收藏作為用戶每次進(jìn)入App的第一屏,說(shuō)明是用戶常用的重要功能,在收藏模塊中,可以添加的內(nèi)容最多,用戶在此頁(yè)面可以完成大多數(shù)常用操作。

設(shè)備模塊是全屋設(shè)備的合集,自動(dòng)模塊是場(chǎng)景、自動(dòng)化的合集。

生活模塊主要提供家庭安全監(jiān)控信息,還可接入其他服務(wù),例如:智能家電監(jiān)控、智能烹飪服務(wù)。



3.設(shè)備卡片分析

3-1 設(shè)備卡片結(jié)構(gòu)解析

新版本設(shè)備卡片主要由設(shè)備圖標(biāo)、房間名、設(shè)備名、狀態(tài)、控制區(qū)構(gòu)成;房間名域?yàn)轭A(yù)留區(qū),保證在不同頁(yè)面下的統(tǒng)一性。

設(shè)備在離線狀態(tài)下,右上角會(huì)顯示離線圖標(biāo),代替控制按鈕。

只有我們提前羅列出更多的頁(yè)面顯示情況,整合并預(yù)留可變區(qū)域,才能使頁(yè)面更統(tǒng)一。



4.新版本收藏模塊分析

4-1 收藏界面

收藏模塊分為3大區(qū)域,區(qū)域1為狀態(tài)通知區(qū);區(qū)域2為收藏的場(chǎng)景區(qū);區(qū)域3為收藏的服務(wù)或設(shè)備。這3個(gè)區(qū)域展示順序是固定的,可以選擇是否展示,無(wú)法改變展示順序。

因?yàn)槊總€(gè)區(qū)域的卡片尺寸是不一樣的,區(qū)域固定的好處是,可以保證顯示的統(tǒng)一性。否則大小卡片穿插顯示,還可能會(huì)空缺幾個(gè),很影響美觀。并且操控邏輯也是固定的,用戶更容易理解。



4-2 添加到收藏方式1

點(diǎn)擊收藏模塊右上角添加,可批量選擇內(nèi)容快速添加收藏。



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

在非收藏頁(yè),長(zhǎng)按卡片,可單獨(dú)添加收藏內(nèi)容。

在設(shè)備、場(chǎng)景等新建或編輯界面,可以選擇添加至收藏的選項(xiàng)。省去了后續(xù)的單獨(dú)添加動(dòng)作。



4-4 移除收藏

在收藏頁(yè),長(zhǎng)按卡片,可以進(jìn)行單獨(dú)移除操作。

在收藏編輯頁(yè)面,可以批量快速移除移除。滿足了不同的用戶需求。



5.設(shè)備模塊分析

5-1 設(shè)備界面

首次進(jìn)入,展示的是某個(gè)房間內(nèi)的設(shè)備,通過(guò)左右滑動(dòng)進(jìn)行切換房間,三星可能想為用戶提供模糊操作來(lái)提升效率,在房間少的情況下,這種方式比較好。當(dāng)房間多了,用戶會(huì)滑動(dòng)多次才能到目標(biāo)房間;當(dāng)然三星給出了針對(duì)精確選擇的方式,點(diǎn)擊左上角的房間入口,可以選擇、編輯房間。

房間多的情況下這2種方式都不是很好的解決方案。

這里要注意的是,三星把“沒(méi)有房間”也放進(jìn)房間列表,供用戶選擇?,F(xiàn)實(shí)中,有好多設(shè)備是不屬于任何房間或者用戶暫時(shí)不想放到某個(gè)房間,增加無(wú)房間選擇可以更靈活的滿足實(shí)際使用場(chǎng)景。



5-2 房間添加流程

在房屋編輯頁(yè)面,可以添加房間,在這里三星已經(jīng)為用戶預(yù)設(shè)了很多房間類型選項(xiàng),用戶只需要做選擇,很方便,即使沒(méi)有要的,還可以在列表底部選擇自定義。



5-3 設(shè)備添加方式

在設(shè)備頁(yè)面,只能添加設(shè)備、燈光組、監(jiān)控組。

用戶可以通過(guò)關(guān)鍵詞搜索、掃碼、設(shè)備類型篩選、品牌篩選進(jìn)行設(shè)備添加。

很全,幾乎涵蓋了所有的添加方式。



5-4 燈光組添加流程

在添加頁(yè)面,第一步要先填寫組的名稱、選擇所在房間,第二步選擇要合并的燈,添加完成跳轉(zhuǎn)至設(shè)備組詳情,方便立即調(diào)控。



5-5 設(shè)備控制頁(yè)

設(shè)備控制頁(yè)面采用了模塊化的設(shè)計(jì)方式,控制區(qū)域均為列表形式,不同的設(shè)備只需要替換圖標(biāo)和文字及對(duì)應(yīng)的操控列表,降低新設(shè)備重新創(chuàng)作新界面的設(shè)計(jì)成本。



5-6 單獨(dú)移動(dòng)設(shè)備

長(zhǎng)按設(shè)備卡片,選擇目標(biāo)房間,可完成單個(gè)設(shè)備轉(zhuǎn)移。



5-7 批量移動(dòng)設(shè)備

選擇設(shè)備頁(yè)面右上角的移動(dòng)方式,可以批量進(jìn)行設(shè)備的轉(zhuǎn)移。



6.自動(dòng)模塊分析

6-1 自動(dòng)運(yùn)行界面

自動(dòng)模塊包含場(chǎng)景、自動(dòng)化、第三方設(shè)備,它們不具備房間屬性;

點(diǎn)擊右上角的箭頭可以展開(kāi)或收起對(duì)應(yīng)列表,方便查找內(nèi)容。



6-2 新建場(chǎng)景流程

第一步,先填寫場(chǎng)景名稱、選擇圖標(biāo)、是否要添加到收藏;

第二步,選擇執(zhí)行的設(shè)備,可以根據(jù)設(shè)備名稱、房間名稱進(jìn)行快速定位,并且可以批量選擇設(shè)備;

第三步,設(shè)備添加成功后,根據(jù)需要,單獨(dú)對(duì)設(shè)備執(zhí)行狀態(tài)設(shè)置。

 

新建場(chǎng)景的邏輯是:先批量選擇要執(zhí)行的設(shè)備,再單獨(dú)設(shè)置執(zhí)行內(nèi)容。

這種方式的好處是,不易打斷用戶的設(shè)置思路,還可以減少操作步長(zhǎng)。



6-3 新建自動(dòng)化

新建自動(dòng)化界面分為觸發(fā)條件、執(zhí)行內(nèi)容兩大塊;

初始狀態(tài)會(huì)為用戶提供使用描述,便于用戶操作。

可以通過(guò)時(shí)間的變化、設(shè)備狀態(tài)變化、位置變化、天氣變化、安防變化來(lái)觸發(fā)執(zhí)行命令。



6-4 添加觸發(fā)條件

將設(shè)備狀態(tài)變化作為觸發(fā)條件時(shí),設(shè)置邏輯是,完成一個(gè)設(shè)備的設(shè)置才能設(shè)置下一個(gè),不能批量選擇。為什么和新建場(chǎng)景的流程不一樣?可能是因?yàn)樵谠O(shè)置執(zhí)行條件時(shí),用戶心智里認(rèn)為設(shè)備和狀態(tài)聯(lián)系更緊一些,并且條件種類不會(huì)太多。



6-5 條件滿足類型

當(dāng)添加了一個(gè)以上的設(shè)備作為觸發(fā)條件時(shí),界面會(huì)顯示“同時(shí)滿足或滿足任何一個(gè)”的選項(xiàng)。



6-6 執(zhí)行內(nèi)容

執(zhí)行內(nèi)容可以是控制設(shè)備、通知給用戶、運(yùn)行場(chǎng)景、改變安防模式。

可以批量選擇設(shè)備,并且可以設(shè)置執(zhí)行延遲時(shí)間、自動(dòng)復(fù)位,滿足用戶不同需求。


藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)加微信ban_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。 

作者:土木君     來(lái)源:站酷


分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。 

藍(lán)藍(lán)設(shè)計(jì)bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 平面設(shè)計(jì)服務(wù)、
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司               

日歷

鏈接

個(gè)人資料

存檔