2023-1-5 資深UI設(shè)計(jì)者
三星上一版本界面標(biāo)題選用細(xì)體字,頭部區(qū)域留白,卡片功能區(qū)域小,背景選用寫實(shí)簡約照片,體現(xiàn)文藝感。
圓形的場景卡片與矩形的設(shè)備卡片形成對(duì)比,場景卡片與文字上下排列,更加凸顯場景圖片,但文字存在多行、單行顯示,這種表現(xiàn)方式會(huì)顯得凌亂。
設(shè)備卡片從上到下依次為圖標(biāo)、設(shè)備名、狀態(tài)。
新版本標(biāo)題選用粗體字,標(biāo)題區(qū)域更加緊湊,功能區(qū)域展示空間變大,背景使用抽線雙色漸變,更現(xiàn)代時(shí)尚。
功能卡片為統(tǒng)一圓角矩形,場景卡片圖文左右排布,底部白色卡片區(qū)域可以很好兼容多行、單行文字的情況。
設(shè)備卡片從上到下依次為圖標(biāo)、房間名、設(shè)備名、狀態(tài)。
底部新增Tab區(qū)域,細(xì)分為收藏、設(shè)備、生活、自動(dòng)化、菜單5個(gè)模塊。
風(fēng)格布局總結(jié):新版本屏幕利用率更高,粗體字和抽象背景使得內(nèi)容更凸顯,底部的Tab提供了更多模塊入口,功能分類更合理。
舊版本只有一個(gè)首頁,功能都在此被分發(fā),并且功能較為單一。
新版本增加收藏、設(shè)備、生活、自動(dòng)、更多模塊,對(duì)用戶使用場景做了細(xì)分。
界面頂部的房屋設(shè)置、添加、編輯為全局設(shè)計(jì),不過在每個(gè)模塊中添加的內(nèi)容不同。
收藏作為用戶每次進(jìn)入App的第一屏,說明是用戶常用的重要功能,在收藏模塊中,可以添加的內(nèi)容最多,用戶在此頁面可以完成大多數(shù)常用操作。
設(shè)備模塊是全屋設(shè)備的合集,自動(dòng)模塊是場景、自動(dòng)化的合集。
生活模塊主要提供家庭安全監(jiān)控信息,還可接入其他服務(wù),例如:智能家電監(jiān)控、智能烹飪服務(wù)。
新版本設(shè)備卡片主要由設(shè)備圖標(biāo)、房間名、設(shè)備名、狀態(tài)、控制區(qū)構(gòu)成;房間名域?yàn)轭A(yù)留區(qū),保證在不同頁面下的統(tǒng)一性。
設(shè)備在離線狀態(tài)下,右上角會(huì)顯示離線圖標(biāo),代替控制按鈕。
只有我們提前羅列出更多的頁面顯示情況,整合并預(yù)留可變區(qū)域,才能使頁面更統(tǒng)一。
收藏模塊分為3大區(qū)域,區(qū)域1為狀態(tài)通知區(qū);區(qū)域2為收藏的場景區(qū);區(qū)域3為收藏的服務(wù)或設(shè)備。這3個(gè)區(qū)域展示順序是固定的,可以選擇是否展示,無法改變展示順序。
因?yàn)槊總€(gè)區(qū)域的卡片尺寸是不一樣的,區(qū)域固定的好處是,可以保證顯示的統(tǒng)一性。否則大小卡片穿插顯示,還可能會(huì)空缺幾個(gè),很影響美觀。并且操控邏輯也是固定的,用戶更容易理解。
點(diǎn)擊收藏模塊右上角添加,可批量選擇內(nèi)容快速添加收藏。
在非收藏頁,長按卡片,可單獨(dú)添加收藏內(nèi)容。
在設(shè)備、場景等新建或編輯界面,可以選擇添加至收藏的選項(xiàng)。省去了后續(xù)的單獨(dú)添加動(dòng)作。
在收藏頁,長按卡片,可以進(jìn)行單獨(dú)移除操作。
在收藏編輯頁面,可以批量快速移除移除。滿足了不同的用戶需求。
首次進(jìn)入,展示的是某個(gè)房間內(nèi)的設(shè)備,通過左右滑動(dòng)進(jìn)行切換房間,三星可能想為用戶提供模糊操作來提升效率,在房間少的情況下,這種方式比較好。當(dāng)房間多了,用戶會(huì)滑動(dòng)多次才能到目標(biāo)房間;當(dāng)然三星給出了針對(duì)精確選擇的方式,點(diǎn)擊左上角的房間入口,可以選擇、編輯房間。
房間多的情況下這2種方式都不是很好的解決方案。
這里要注意的是,三星把“沒有房間”也放進(jìn)房間列表,供用戶選擇?,F(xiàn)實(shí)中,有好多設(shè)備是不屬于任何房間或者用戶暫時(shí)不想放到某個(gè)房間,增加無房間選擇可以更靈活的滿足實(shí)際使用場景。
在房屋編輯頁面,可以添加房間,在這里三星已經(jīng)為用戶預(yù)設(shè)了很多房間類型選項(xiàng),用戶只需要做選擇,很方便,即使沒有要的,還可以在列表底部選擇自定義。
在設(shè)備頁面,只能添加設(shè)備、燈光組、監(jiān)控組。
用戶可以通過關(guān)鍵詞搜索、掃碼、設(shè)備類型篩選、品牌篩選進(jìn)行設(shè)備添加。
很全,幾乎涵蓋了所有的添加方式。
在添加頁面,第一步要先填寫組的名稱、選擇所在房間,第二步選擇要合并的燈,添加完成跳轉(zhuǎn)至設(shè)備組詳情,方便立即調(diào)控。
設(shè)備控制頁面采用了模塊化的設(shè)計(jì)方式,控制區(qū)域均為列表形式,不同的設(shè)備只需要替換圖標(biāo)和文字及對(duì)應(yīng)的操控列表,降低新設(shè)備重新創(chuàng)作新界面的設(shè)計(jì)成本。
長按設(shè)備卡片,選擇目標(biāo)房間,可完成單個(gè)設(shè)備轉(zhuǎn)移。
選擇設(shè)備頁面右上角的移動(dòng)方式,可以批量進(jìn)行設(shè)備的轉(zhuǎn)移。
自動(dòng)模塊包含場景、自動(dòng)化、第三方設(shè)備,它們不具備房間屬性;
點(diǎn)擊右上角的箭頭可以展開或收起對(duì)應(yīng)列表,方便查找內(nèi)容。
第一步,先填寫場景名稱、選擇圖標(biāo)、是否要添加到收藏;
第二步,選擇執(zhí)行的設(shè)備,可以根據(jù)設(shè)備名稱、房間名稱進(jìn)行快速定位,并且可以批量選擇設(shè)備;
第三步,設(shè)備添加成功后,根據(jù)需要,單獨(dú)對(duì)設(shè)備執(zhí)行狀態(tài)設(shè)置。
新建場景的邏輯是:先批量選擇要執(zhí)行的設(shè)備,再單獨(dú)設(shè)置執(zhí)行內(nèi)容。
這種方式的好處是,不易打斷用戶的設(shè)置思路,還可以減少操作步長。
新建自動(dòng)化界面分為觸發(fā)條件、執(zhí)行內(nèi)容兩大塊;
初始狀態(tài)會(huì)為用戶提供使用描述,便于用戶操作。
可以通過時(shí)間的變化、設(shè)備狀態(tài)變化、位置變化、天氣變化、安防變化來觸發(fā)執(zhí)行命令。
將設(shè)備狀態(tài)變化作為觸發(fā)條件時(shí),設(shè)置邏輯是,完成一個(gè)設(shè)備的設(shè)置才能設(shè)置下一個(gè),不能批量選擇。為什么和新建場景的流程不一樣?可能是因?yàn)樵谠O(shè)置執(zhí)行條件時(shí),用戶心智里認(rèn)為設(shè)備和狀態(tài)聯(lián)系更緊一些,并且條件種類不會(huì)太多。
當(dāng)添加了一個(gè)以上的設(shè)備作為觸發(fā)條件時(shí),界面會(huì)顯示“同時(shí)滿足或滿足任何一個(gè)”的選項(xiàng)。
執(zhí)行內(nèi)容可以是控制設(shè)備、通知給用戶、運(yùn)行場景、改變安防模式。
可以批量選擇設(shè)備,并且可以設(shè)置執(zhí)行延遲時(shí)間、自動(dòng)復(fù)位,滿足用戶不同需求。
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請(qǐng)加微信ban_lanlan,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。
作者:土木君 來源:站酷
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(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ì)公司
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.wnxcall.com