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