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.miumiuwan.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.miumiuwan.com