2021-6-10 資深UI設計者
智能家居越來越普及，智能化的生活是由一個個智能設備組成，這次通過近距離體驗智能面板，來研究一下它們是如何提升產(chǎn)品體驗的。
隨著互聯(lián)網(wǎng)的發(fā)展，生活智能化越來越普及，各類智能產(chǎn)品逐漸出現(xiàn)到人們面前，在體驗的過程中，其實里面有很多細節(jié)需要深挖和思考。很多產(chǎn)品細節(jié)的背后都是為了提升用戶操作效率、兼容用戶使用場景、滿足用戶情感表達，以最終達到對用戶體驗的提升。作為智能產(chǎn)品的設計師只有充分了解市面上的智能產(chǎn)品，才能設計出更好的產(chǎn)品。
開關對于每個人都不陌生，它用來控制設備的狀態(tài)，傳統(tǒng)開關的數(shù)量和要控制的設備數(shù)量有關，設備越多，開關越多，為了簡化人們的操作，智能面板孕育而出，它不僅可以操控家中單獨的設備，還可以對一系列設備進行聯(lián)動控制。
1. 使用場景
室內(nèi)近場控制，滿足用戶家中近距離控制設備的場景。
2. 產(chǎn)品選擇
Gira、ORVIBO、綠米
為什么選他們？
3. 研究方向
本文將從結(jié)構(gòu)、色彩、手勢操控方式、卡片形式、功能點這些方向展開分析。
Gira g1
TFT 屏、KNX 協(xié)議、定價 8000 元起
KNX 屬于歐洲總線技術(shù)，穩(wěn)定性最好，需要從設計階段介入，高門檻的技術(shù)要求讓 KNX 難以實現(xiàn)全民普及。
ORVIBO 智能開關
多點觸控電容屏、Wifi、藍牙、Zigbee、定價 899 元
Wifi、藍牙、Zigbee 屬于無線通信技術(shù)，穩(wěn)定性不如 KNX，但免布線，易擴展，利于全民普及。
Aqara 智能開關 S1 觸摸屏
IPS 屏、zigbee 協(xié)議、定價 899 左右
通過以上分析，Gira 的人群定位是有全屋定制需求的高消費人群，其他兩個品牌的人群定位是面向嘗鮮體驗的廣大普通消費群體。
1. 功能點對比
通過功能列表中的對比發(fā)現(xiàn)，三個品牌的產(chǎn)品都通過場景聯(lián)動設備執(zhí)行來提高人們的操控體驗，通過左右滑動來快速切換功能模塊類型；
Gira 和 ORVIBO 支持快速返回首頁、面板內(nèi)排序；
ORVIBO 的個性化體驗最好，它具有語音控制、設備自動添加、設備自動歸類功能，這些差異點讓它比其他兩個產(chǎn)品更加智能。
以 Gira G1 為例，從結(jié)構(gòu)、色彩、手勢操控方式、卡片形式、功能點這些方向展開分析。
界面整體用以黑白灰為主，搭配少量顏色，給人簡潔干凈的感覺；
思考：智能面板除了具有功能屬性，還具有裝飾屬性，黑白灰為經(jīng)典搭配，可以更好兼容各種家裝風格，還可以更好的展現(xiàn)內(nèi)容；少量的顏色用來強調(diào)正在運行的設備狀態(tài)。
輔助色大方向上使用兩對互補色，在色環(huán)上形成了一個矩形，通過調(diào)節(jié)亮度飽和度達到統(tǒng)一和諧多彩的效果。
主要分為 2 大層級：功能卡片列表、設置為第一層級，設備控制為第二層級；
對于 gira 這種全屋定制的產(chǎn)品，家中一般會有很多設備，功能卡片放置在第一層級的好處是，便于用戶瀏覽鎖定目標功能卡片。
區(qū)域 1 顯示 KNX 協(xié)議類型，室內(nèi)外溫度，時間；這部分內(nèi)容占比很小，說明這些內(nèi)容用戶不常用，但用戶會偶爾還是會看一下；
區(qū)域 2 為房屋名稱，返回上一級、返回首頁、設置、展示形式切換，這一區(qū)域全局置頂顯示，用戶在多級操作后，可以很快速的返回到首頁；
區(qū)域 3 顯示設備、場景的數(shù)量，用戶可以清楚的掌握家中設備場景的數(shù)量；
區(qū)域 4 為設備場景列表，用灰色背景來強調(diào)主操作區(qū)域。
一屏最多 6 個設備，通過左右滑動來展示更多設備
思考：為什么不是上下滑動，而是左右滑動
有 2 點猜測：
卡片內(nèi)容從上到下依次為設備場景 icon、名稱、狀態(tài)及快捷操作；
用戶可以通過 icon 快速鎖定設備類型，通過名稱確定目標設備，進行快速操作；
各功能模塊獨立劃分，快捷操作區(qū)域可以很好的兼容不同設備的功能鍵。
操控界面劃分為 2 部分，一部分為信息展示區(qū)，內(nèi)容為設備名稱、所屬區(qū)域；
另一部分為控制區(qū)，這部分區(qū)域固定，可以讓不同的設備控制看起來更統(tǒng)一；
大面積區(qū)域留給核心功能，輔助功能布局在四周，便于用戶準確操控。
設備控制界面通過左右劃動快速切換其他設備，不需要返回菜單界面。
手掌長按屏幕，可喚起提前設置好的開關功能，這時面板相當于簡單的開關，可以很快速的關閉開啟所在區(qū)域的燈。
Gira 這樣做還原了開關的本質(zhì)，當想要開啟或關閉該房間內(nèi)的燈時，就不需要到菜單界面找這個設備了。
燈
燈操控界面用刻度形式表現(xiàn)，每一度為一個刻度，并且還可以通過中間的加減號進行精確到 1 個百分比的亮度微調(diào)，品牌方想為用戶打造成清晰準確調(diào)控的形象；
但在實際使用場景中，我們不大會對燈進行這么精確的調(diào)節(jié)。
溫控器
溫控界面同樣可以精確調(diào)節(jié)，每 0.5 攝氏度為一個刻度；
溫控的精準調(diào)節(jié)，就比較貼近我們?nèi)粘５氖褂昧晳T，溫控器控制界面是沒有開關的，因為目標人群家中多數(shù)是中央空調(diào)，隨便就可以關閉，對于大戶型的用戶來說是不友好的。
右下角的定時按鈕可以讓設備在特定時間內(nèi)以某一狀態(tài)運行。
窗簾
窗簾的狀態(tài)值與操控條左右排列，這樣的排布好處是可以讓操控條長度最大化，便于用戶控制；
窗簾控制界面只分為有調(diào)角度的和沒有角度的；
窗簾操控條豎直排列，向上滑到頂部為窗簾全開，滑到底部為全關；
窗簾的行程和角度都用百分比的形式展現(xiàn)。
設計設備控制界面的思考方向一般有 2 種：
1. 界面控制方式要和設備的實際運行方式一致
這種思考方向要考慮實際窗簾有左右運行和上下運行之分，上下劃動的操控方式來控制左右運行的窗簾會有認知上的偏差；
百葉簾的角度有正向和反向轉(zhuǎn)動之分，如果只按最后的遮光百分比來做，會造成設備兼容問題。
也就是說為了模擬真實的操控方式，需要設計出若干不同種類窗簾控制界面。
2. 界面控制方式與設備運行結(jié)果關聯(lián)
這種思考方式不需要考慮窗簾的種類及開合方向，將所有種類的窗簾行程及角度歸為開、關兩種結(jié)果狀態(tài)，
就像 Gira 這樣，只需要做兩套界面就可以兼容幾乎全部的窗簾設備。
Gira 豎排控制條的優(yōu)勢
如果橫向布局，那么左右滑動切換設備時，會觸發(fā)控制條左右手勢，造成誤操作。
背景音樂
設備列表中背景音樂卡片的快捷按鈕很特別，由靜音、播放、下一曲組成，我們設計的時候一般會做成對稱的：上一曲、播放、下一曲，Gira 并沒有這么做，因為在背景音樂的使用中，一般有幾種需要快速響應的場景：用戶在家中發(fā)起臨時談話，需要暫時安靜一下；不想聽了；這首歌的風格不喜歡；
背景音樂操控界面功能和音樂應用差不多，唯一不一樣的是，底部可以快速切換歌單，可以很快速切換不同音樂風格。
文件夾功能
隨著設備、場景的增多，用戶可以根據(jù)自己的喜好將設備或場景歸類放置，便于快速定位功能卡片；
點擊文件夾卡片，進入到顯示著眾多功能名稱的文件夾界面，點文件夾，才能進入功能卡片列表，為什么要多一個文件夾查看的界面。
我們想象一下有這樣一種場景：面板中有幾十個功能卡片，用戶想開啟娛樂場景，這個場景好像在客廳文件夾或走廊文件夾里，于是去客廳文件夾快速翻看這里面有沒有，再點進去操作。
Gira 這樣做符合用戶在功能卡片多的情況下快速選擇的習慣。
排序功能
可以通過拖動來調(diào)節(jié)設備卡片在菜單中的位置，省去了去后臺設置的步驟；
定時功能
定時列表用具象的時鐘來體現(xiàn)開始運行時間，還用黑白來區(qū)分夜晚和白天，對于用戶來說掃一眼圖片就可以知道運行時間，這種體驗很好。
以 ORVIBO Mix Pad 為例，從結(jié)構(gòu)、色彩、手勢操控方式、卡片形式、功能點這些方向展開分析。
整體運用深色色調(diào)，使用幾何圖案作為背景；
用白色體現(xiàn)基礎信息，用色彩強調(diào)設備場景的狀態(tài)及天氣信息；
運用圓角元素，更加生活化。
顏色運用比較豐富，以藍、橙兩互補色為主，其他顏色分別為它們的鄰近色；既能保持強對比，還能讓顏色變得柔和。
主要分為 2 大層級：首屏、設備控制界面、場景列表、鬧鐘為第一層級；設備類型、設置為第二層級；
智能面板一般裝在墻面，用戶站立操作，用戶不可能花太長時間來操控；
歐瑞博的人群為廣大普通消費群體，家中的設備不會太多，設備控制界面層級前移，可以方便用戶直達控制區(qū)，用完即走。
首頁主要分為 2 個區(qū)域：
日期天氣區(qū)
時間、日期、天氣狀況信息，可以滿足用戶日常出門關注的內(nèi)容，并且在這個區(qū)域有多種表現(xiàn)形式供用戶選擇，既保持個性化還不失統(tǒng)一感。
快捷控制區(qū)
可以將常用的功能置頂在首頁展示，最多設置 2 個，用戶在首屏既能看到日期天氣還可以控制設備，大大提升了屏幕的利用率和用戶的操作效率。
這樣做的好處：
當用戶準備出門時，看了一眼面板上的天氣，點一下關玄關燈，就可以直接出門了，不需要滑到燈的菜單界面找到玄關燈然后再關閉它，真的很方便。
底部有向上滑動提示，告訴用戶下面還有重要內(nèi)容。
卡片內(nèi)容左右排布，從左到右依次為 icon、名稱及狀態(tài)、快捷控制，這種排布的好處是可以縮小每個卡片的高度，從而提高屏幕利用率；
但有個問題就是，左右排布的方式，內(nèi)容最多呈現(xiàn) 4 個文字，需要考慮這幾個字能否清楚的定義該卡片功能。
上滑可以查看全部功能卡片，給用戶在手機上瀏覽信息的熟悉感；
在新的操控設備運用用戶熟悉的交互方式可以降低用戶的學習成本；
移動端上常見的手勢對應結(jié)果有：左右滑——代表切換，向下滑——代表喚起相關功能設置，向上滑動——瀏覽更多信息。
用戶在首屏左右滑動就可以切換不同功能模塊，不需要返回上一級，在設備類型少的情況下，這種盲操會比較方便。
下滑進入功能類型選擇、系統(tǒng)設置界面，這一區(qū)域相當于導航，可以實現(xiàn)功能模塊間的快速切換。
多種手勢的組合可以在有限的屏幕內(nèi)操作更加靈活，但手勢太多會帶來一些問題：
針對以上問題解決的方法可以是：
場景卡片分為未激活、運行中、運行結(jié)束三種狀態(tài)；
場景運行狀態(tài)變化在卡片 icon 區(qū)域體現(xiàn)，既傳達了運行的過程，又不會打擾到用戶。
點擊卡片列表最底部的編輯按鈕，可以選擇將某一功能卡片置頂?shù)绞灼粒奖阌脩艨旖莶僮鳌?
將普通燈、場景、門窗等操控方式相近的設備進行了歸類顯示，并且和空調(diào)、色溫燈、背景音樂等設備放置在同一層級；
從交互體驗層講：由于家里的普通燈、場景、門窗的操控方式簡單統(tǒng)一、數(shù)量多，按照類別整合在一起便于查找控制；
從視覺層講：設備操控界面布局形式多，會給用戶造成整體視覺上的不統(tǒng)一，增加學習成本。
空調(diào)
空調(diào)控制界面，只能通過左右滑動以整數(shù)的形式來調(diào)節(jié)溫度，開啟中的時候，背景會有對應模式的色彩氛圍效果，給用戶更直觀的感受；
底部只保留用戶最常用的模式、風速、風向三個功能。
色溫燈
色溫燈界面默認為用戶推薦 6 種不同場景下使用的色溫選項，底部提供亮度調(diào)節(jié)功能，用戶只需要去選擇，大大縮短了用戶的操作路徑。
個性推薦在電商類產(chǎn)品中很常見，推薦機制基于對用戶行為習慣的分析，需要強大的后臺數(shù)據(jù)支持，智能家居這一塊通過窮舉用戶生活中的設備使用場景、目的從而提煉出對應的功能選項可以大大提升產(chǎn)品使用體驗。
窗簾
窗簾控制界面采用半寫實風格，給用戶更加直觀感受，學習成本低，拖動窗簾區(qū)域就可以進行行程的控制，由于沒有微調(diào)按鈕和行程狀態(tài)百分比，所以無法做到窗簾精準控制；
選擇這種寫實的設計風格，需要考慮設備控制界面布局、樣式對新增窗簾類型的兼容性。
背景音樂
背景音樂默認界面只保留了當前播放音樂封面元素，更多復雜操作被隱藏到了下一級界面，用戶在當前界面可以進行暫停、播放、收藏等簡單操作；
在小屏幕中做設計時，有時候會在一個層級界面中堆砌許多功能按鈕，使界面變的臃腫，一來容易讓用戶誤操作，二來讓用戶找不到重點功能，操作效率低下；
我們在處理這些信息時應該結(jié)合使用場景，按用戶的使用頻率進行權(quán)重劃分，將權(quán)重低的進行隱藏處理，突出核心功能，減輕用戶操作負擔。
智能家居廠商大多都是靠賣硬件賺錢，歐瑞博巧妙的運用會員機制結(jié)合背景音樂功能來售賣音樂服務（49 元一年），更加具有互聯(lián)網(wǎng)商業(yè)思維。
在語音設置中，可以選擇是否開啟語音控制，系統(tǒng)默認 2 組喚醒詞激活語音控制；
歐瑞博為用戶提供了更便捷的語音控制功能——快捷口令，說出指令就可以快速執(zhí)行，由于沒有房間、設備名稱的限定，這個功能只能實現(xiàn)面板內(nèi)所有同類型設備的開或關，適用于小戶型簡單的場景。
傳統(tǒng)上添加一臺新設備需要：選擇要添加的設備——選擇網(wǎng)關——輸入正確Wifi密碼——進入設備配網(wǎng)流程——配網(wǎng)成功——設備名稱設置，操作流程繁瑣，中間稍微有些環(huán)節(jié)沒有操作對，最后就無法成功添加設備，歐瑞博通過簡化中間過程，成功解決了這一痛點。
用戶可以在面板中直接設置首屏的風格樣式，系統(tǒng)一共有 3 種風格外和一個隨機演示選項供用戶選擇，并且這三種風格的功能架構(gòu)是一樣的，只是對背景圖、元素大小、布局做了設計區(qū)分。
以 AQARA S1 為例，從結(jié)構(gòu)、色彩、手勢操控方式、卡片形式、功能點這些方向展開分析。
整體使用黑色做背景，用白色體現(xiàn)基礎信息，底部的色塊元素貌似起裝飾作用，和天氣情況并沒有聯(lián)系；
首屏主要分為日期時間和環(huán)境狀況 2 個區(qū)域，天氣、溫度、濕度、空氣質(zhì)量信息并行排列，個人認為用戶對這 4 個信息的關注度是不一樣的，看看我們手機上的天氣 app 的信息排布就知道了，這樣并列排布會讓用戶分不清主次。
顏色以藍色及其鄰近色為主，搭配少量的對比色，整體色調(diào)統(tǒng)一。
主要分為 2 大層級：首屏、設備控制界面、場景列表為第一層級；設置為第二層級；
形式和歐瑞博一致，都是為了讓用戶更便捷的操控；
但進入設置頁面，設置主題類型的步數(shù)比歐瑞博的多一步，用戶設置完成后還得一步步返回，這里可以將用戶常用的“顯示”內(nèi)容上移一個層級，減少頁面跳轉(zhuǎn)次數(shù)；
AI 手勢這種有特色的功能隱藏的太深，不便于用戶的使用。
綠米同樣運用左右滑動進行首屏、場景列表、設備間的快速切換，對于相同類型的窗簾設備，并沒有整合成列表放置同一屏，而是另起一屏，設備多的時候就會存在操控效率低的問題。
下滑進入系統(tǒng)設置界面，這個區(qū)域只有一個設置功能，有點浪費空間，索性就把設置下一級的功能選項移到下拉頁面，還能提高用戶的操作效率。
場景運行過程以進度條的形式在卡片底部體現(xiàn)，對用戶的干擾小，并且只傳遞出開始到結(jié)束的過程，沒有成功提示，這種邏輯是正確的，因為面板只是傳達出了一個命令出去，具體什么時候傳出、接收設備是否正常運行，這些信息面板是獲取不到的。
場景列表與設備控制界面一個層級，溫控器、調(diào)光燈運用半圓的元素作為控制區(qū)域，新穎的設計風格是綠米智能面板的特色；
仔細看，會發(fā)現(xiàn)設備控制界面不統(tǒng)一，相同功能的開關按鈕，在不同的設備中位置卻不一樣，還有就是普通燈是偏寫實的 3 路開關樣式，其他界面卻是抽象的圓環(huán)幾何樣式，不統(tǒng)一的界面會增加用戶的學習成本。
空調(diào)
空調(diào)控制界面，通過上下滑動以整數(shù)的形式來調(diào)節(jié)溫度，新穎的操控方式讓用戶加深對品牌的印象；
底部開關、模式、風速同級展示，這里存在幾個問題：1、用戶在設置空調(diào)時很容易誤點關閉按鈕；2、缺少常用的風向調(diào)節(jié)，功能缺失造成較差使用體驗。
燈
普通燈可以在 App 中設置 1、2、3 路開關樣式，這種形式同樣存在問題：一屏最多放三個開關，屏幕下方大片區(qū)域空置，利用率低。
窗簾
窗簾控制界面顯示窗簾的名稱及行程狀態(tài)；窗簾的開、合，綠米給了 2 種方式：滑動控制、全開全關按鈕；
增加暫停功能可以提升使用體驗，因為用戶在操控窗簾設備時，會以窗簾實際的運動行程為依據(jù)來決定窗簾需要開合到什么程度，而不是看界面上窗簾的位移，當用戶覺著窗簾行程可以了，按暫停鍵就可以準確停留在用戶想要的位置上。
調(diào)色燈
調(diào)色燈用戶可以自定義或選擇系統(tǒng)推薦的顏色；
為了涵蓋大多數(shù)的用戶偏好，調(diào)色燈的 4 個推薦色采用色環(huán)上差距大的顏色，并且根據(jù)用戶使用場景篩選出常用的幾種色調(diào)，排除了用戶不常用的綠色、紫色、粉色。
用戶可以根據(jù)自己的使用偏好，將最常用的功能模塊頁面放到第一屏，這個功能在一定程度上可以提升操作效率，當設備多，還是需要切換很多屏。
用戶使用面板分為：緊急情況、常用情況，緊急情況不一定常用，就像出門需要關燈；常用情況不一定緊急，例如看時間
綠米為了讓用戶便捷，給出默認頁自定義功能，存在的問題是：如果用戶把燈作為開機第一頁，那么日常中看時間要翻頁；日期時間作為第一頁，開關燈需要翻頁，都不是特別便捷。實際上可以做成像 Gira 那樣，通過增加手勢喚起快捷開關功能，首屏留給日期時間，既滿足了日常需要，又能滿足緊急需求。
通過上述分析，我們得到了這些產(chǎn)品的共同點與差異點，以及背后的思考方式，了解共同點可以讓我們彌補自己產(chǎn)品的不足，不被市場淘汰；學習它們差異化的思考方式可以幫助提升我們產(chǎn)品的競爭力。
作為一名合格的設計師，除了學習視覺技法和理論，還應該多玩、多看、多思考真實的線上產(chǎn)品，體驗其核心操作流程，推敲和思考產(chǎn)品設計背后的原理和邏輯，才能不斷提升體驗設計思維。
藍藍設計建立了UI設計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯(lián)系。
文章來源：優(yōu)設 作者：Aaron杜斌
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設計( m.yvirxh.cn )是一家專注而深入的界面設計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務