智能家居越來(lái)越普及，智能化的生活是由一個(gè)個(gè)智能設(shè)備組成，這次通過(guò)近距離體驗(yàn)智能面板，來(lái)研究一下它們是如何提升產(chǎn)品體驗(yàn)的。

前言

隨著互聯(lián)網(wǎng)的發(fā)展，生活智能化越來(lái)越普及，各類(lèi)智能產(chǎn)品逐漸出現(xiàn)到人們面前，在體驗(yàn)的過(guò)程中，其實(shí)里面有很多細(xì)節(jié)需要深挖和思考。很多產(chǎn)品細(xì)節(jié)的背后都是為了提升用戶(hù)操作效率、兼容用戶(hù)使用場(chǎng)景、滿(mǎn)足用戶(hù)情感表達(dá)，以最終達(dá)到對(duì)用戶(hù)體驗(yàn)的提升。作為智能產(chǎn)品的設(shè)計(jì)師只有充分了解市面上的智能產(chǎn)品，才能設(shè)計(jì)出更好的產(chǎn)品。

什么是智能面板

開(kāi)關(guān)對(duì)于每個(gè)人都不陌生，它用來(lái)控制設(shè)備的狀態(tài)，傳統(tǒng)開(kāi)關(guān)的數(shù)量和要控制的設(shè)備數(shù)量有關(guān)，設(shè)備越多，開(kāi)關(guān)越多，為了簡(jiǎn)化人們的操作，智能面板孕育而出，它不僅可以操控家中單獨(dú)的設(shè)備，還可以對(duì)一系列設(shè)備進(jìn)行聯(lián)動(dòng)控制。

1. 使用場(chǎng)景

室內(nèi)近場(chǎng)控制，滿(mǎn)足用戶(hù)家中近距離控制設(shè)備的場(chǎng)景。

2. 產(chǎn)品選擇

Gira、ORVIBO、綠米

為什么選他們？

• Gira 從事智能建筑系統(tǒng)技術(shù)有 100 多年的歷史，算是做智能開(kāi)關(guān)的先驅(qū)；
• ORVIBO、綠米國(guó)內(nèi)做智能開(kāi)關(guān)相對(duì)成熟的品牌。

3. 研究方向

本文將從結(jié)構(gòu)、色彩、手勢(shì)操控方式、卡片形式、功能點(diǎn)這些方向展開(kāi)分析。

設(shè)備基礎(chǔ)信息

Gira g1

TFT 屏、KNX 協(xié)議、定價(jià) 8000 元起

KNX 屬于歐洲總線技術(shù)，穩(wěn)定性最好，需要從設(shè)計(jì)階段介入，高門(mén)檻的技術(shù)要求讓 KNX 難以實(shí)現(xiàn)全民普及。

ORVIBO 智能開(kāi)關(guān)

多點(diǎn)觸控電容屏、Wifi、藍(lán)牙、Zigbee、定價(jià) 899 元

Wifi、藍(lán)牙、Zigbee 屬于無(wú)線通信技術(shù)，穩(wěn)定性不如 KNX，但免布線，易擴(kuò)展，利于全民普及。

Aqara 智能開(kāi)關(guān) S1 觸摸屏

IPS 屏、zigbee 協(xié)議、定價(jià) 899 左右

通過(guò)以上分析，Gira 的人群定位是有全屋定制需求的高消費(fèi)人群，其他兩個(gè)品牌的人群定位是面向嘗鮮體驗(yàn)的廣大普通消費(fèi)群體。

1. 功能點(diǎn)對(duì)比

通過(guò)功能列表中的對(duì)比發(fā)現(xiàn)，三個(gè)品牌的產(chǎn)品都通過(guò)場(chǎng)景聯(lián)動(dòng)設(shè)備執(zhí)行來(lái)提高人們的操控體驗(yàn)，通過(guò)左右滑動(dòng)來(lái)快速切換功能模塊類(lèi)型；

Gira 和 ORVIBO 支持快速返回首頁(yè)、面板內(nèi)排序；

ORVIBO 的個(gè)性化體驗(yàn)最好，它具有語(yǔ)音控制、設(shè)備自動(dòng)添加、設(shè)備自動(dòng)歸類(lèi)功能，這些差異點(diǎn)讓它比其他兩個(gè)產(chǎn)品更加智能。

Gira G1

以 Gira G1 為例，從結(jié)構(gòu)、色彩、手勢(shì)操控方式、卡片形式、功能點(diǎn)這些方向展開(kāi)分析。

1. 首屏

界面整體用以黑白灰為主，搭配少量顏色，給人簡(jiǎn)潔干凈的感覺(jué)；

思考：智能面板除了具有功能屬性，還具有裝飾屬性，黑白灰為經(jīng)典搭配，可以更好兼容各種家裝風(fēng)格，還可以更好的展現(xiàn)內(nèi)容；少量的顏色用來(lái)強(qiáng)調(diào)正在運(yùn)行的設(shè)備狀態(tài)。

2. 輔助顏色

輔助色大方向上使用兩對(duì)互補(bǔ)色，在色環(huán)上形成了一個(gè)矩形，通過(guò)調(diào)節(jié)亮度飽和度達(dá)到統(tǒng)一和諧多彩的效果。

3. 層級(jí)劃分

主要分為 2 大層級(jí)：功能卡片列表、設(shè)置為第一層級(jí)，設(shè)備控制為第二層級(jí)；

對(duì)于 gira 這種全屋定制的產(chǎn)品，家中一般會(huì)有很多設(shè)備，功能卡片放置在第一層級(jí)的好處是，便于用戶(hù)瀏覽鎖定目標(biāo)功能卡片。

4. 首頁(yè)布局

區(qū)域 1 顯示 KNX 協(xié)議類(lèi)型，室內(nèi)外溫度，時(shí)間；這部分內(nèi)容占比很小，說(shuō)明這些內(nèi)容用戶(hù)不常用，但用戶(hù)會(huì)偶爾還是會(huì)看一下；

區(qū)域 2 為房屋名稱(chēng)，返回上一級(jí)、返回首頁(yè)、設(shè)置、展示形式切換，這一區(qū)域全局置頂顯示，用戶(hù)在多級(jí)操作后，可以很快速的返回到首頁(yè)；

區(qū)域 3 顯示設(shè)備、場(chǎng)景的數(shù)量，用戶(hù)可以清楚的掌握家中設(shè)備場(chǎng)景的數(shù)量；

區(qū)域 4 為設(shè)備場(chǎng)景列表，用灰色背景來(lái)強(qiáng)調(diào)主操作區(qū)域。

一屏最多 6 個(gè)設(shè)備，通過(guò)左右滑動(dòng)來(lái)展示更多設(shè)備

思考：為什么不是上下滑動(dòng)，而是左右滑動(dòng)

有 2 點(diǎn)猜測(cè)：

• 左右滑動(dòng)下面的點(diǎn)相當(dāng)于頁(yè)碼，用戶(hù)在找某個(gè)設(shè)備的時(shí)候可以方便記住某個(gè)設(shè)備在第幾個(gè)點(diǎn)的頁(yè)面里
• 在設(shè)備控制界面中左右滑動(dòng)快速切換其他設(shè)備，這樣可以統(tǒng)一用戶(hù)對(duì)于左右滑動(dòng)切換的認(rèn)知

5. 卡片展示

卡片內(nèi)容從上到下依次為設(shè)備場(chǎng)景 icon、名稱(chēng)、狀態(tài)及快捷操作；

用戶(hù)可以通過(guò) icon 快速鎖定設(shè)備類(lèi)型，通過(guò)名稱(chēng)確定目標(biāo)設(shè)備，進(jìn)行快速操作；

各功能模塊獨(dú)立劃分，快捷操作區(qū)域可以很好的兼容不同設(shè)備的功能鍵。

6. 設(shè)備控制區(qū)域布局

操控界面劃分為 2 部分，一部分為信息展示區(qū)，內(nèi)容為設(shè)備名稱(chēng)、所屬區(qū)域；

另一部分為控制區(qū)，這部分區(qū)域固定，可以讓不同的設(shè)備控制看起來(lái)更統(tǒng)一；

大面積區(qū)域留給核心功能，輔助功能布局在四周，便于用戶(hù)準(zhǔn)確操控。

7. 手勢(shì)

設(shè)備控制界面通過(guò)左右劃動(dòng)快速切換其他設(shè)備，不需要返回菜單界面。

8. 手勢(shì)

手掌長(zhǎng)按屏幕，可喚起提前設(shè)置好的開(kāi)關(guān)功能，這時(shí)面板相當(dāng)于簡(jiǎn)單的開(kāi)關(guān)，可以很快速的關(guān)閉開(kāi)啟所在區(qū)域的燈。

Gira 這樣做還原了開(kāi)關(guān)的本質(zhì)，當(dāng)想要開(kāi)啟或關(guān)閉該房間內(nèi)的燈時(shí)，就不需要到菜單界面找這個(gè)設(shè)備了。

9. 設(shè)備控制

燈

燈操控界面用刻度形式表現(xiàn)，每一度為一個(gè)刻度，并且還可以通過(guò)中間的加減號(hào)進(jìn)行精確到 1 個(gè)百分比的亮度微調(diào)，品牌方想為用戶(hù)打造成清晰準(zhǔn)確調(diào)控的形象；

但在實(shí)際使用場(chǎng)景中，我們不大會(huì)對(duì)燈進(jìn)行這么精確的調(diào)節(jié)。

溫控器

溫控界面同樣可以精確調(diào)節(jié)，每 0.5 攝氏度為一個(gè)刻度；

溫控的精準(zhǔn)調(diào)節(jié)，就比較貼近我們?nèi)粘５氖褂昧?xí)慣，溫控器控制界面是沒(méi)有開(kāi)關(guān)的，因?yàn)槟繕?biāo)人群家中多數(shù)是中央空調(diào)，隨便就可以關(guān)閉，對(duì)于大戶(hù)型的用戶(hù)來(lái)說(shuō)是不友好的。

右下角的定時(shí)按鈕可以讓設(shè)備在特定時(shí)間內(nèi)以某一狀態(tài)運(yùn)行。

窗簾

窗簾的狀態(tài)值與操控條左右排列，這樣的排布好處是可以讓操控條長(zhǎng)度最大化，便于用戶(hù)控制；

窗簾控制界面只分為有調(diào)角度的和沒(méi)有角度的；

窗簾操控條豎直排列，向上滑到頂部為窗簾全開(kāi)，滑到底部為全關(guān)；

窗簾的行程和角度都用百分比的形式展現(xiàn)。

設(shè)計(jì)設(shè)備控制界面的思考方向一般有 2 種：

1. 界面控制方式要和設(shè)備的實(shí)際運(yùn)行方式一致

這種思考方向要考慮實(shí)際窗簾有左右運(yùn)行和上下運(yùn)行之分，上下劃動(dòng)的操控方式來(lái)控制左右運(yùn)行的窗簾會(huì)有認(rèn)知上的偏差；

百葉簾的角度有正向和反向轉(zhuǎn)動(dòng)之分，如果只按最后的遮光百分比來(lái)做，會(huì)造成設(shè)備兼容問(wèn)題。

也就是說(shuō)為了模擬真實(shí)的操控方式，需要設(shè)計(jì)出若干不同種類(lèi)窗簾控制界面。

2. 界面控制方式與設(shè)備運(yùn)行結(jié)果關(guān)聯(lián)

這種思考方式不需要考慮窗簾的種類(lèi)及開(kāi)合方向，將所有種類(lèi)的窗簾行程及角度歸為開(kāi)、關(guān)兩種結(jié)果狀態(tài)，

就像 Gira 這樣，只需要做兩套界面就可以兼容幾乎全部的窗簾設(shè)備。

Gira 豎排控制條的優(yōu)勢(shì)

如果橫向布局，那么左右滑動(dòng)切換設(shè)備時(shí)，會(huì)觸發(fā)控制條左右手勢(shì)，造成誤操作。

背景音樂(lè)

設(shè)備列表中背景音樂(lè)卡片的快捷按鈕很特別，由靜音、播放、下一曲組成，我們?cè)O(shè)計(jì)的時(shí)候一般會(huì)做成對(duì)稱(chēng)的：上一曲、播放、下一曲，Gira 并沒(méi)有這么做，因?yàn)樵诒尘耙魳?lè)的使用中，一般有幾種需要快速響應(yīng)的場(chǎng)景：用戶(hù)在家中發(fā)起臨時(shí)談話，需要暫時(shí)安靜一下；不想聽(tīng)了；這首歌的風(fēng)格不喜歡；

背景音樂(lè)操控界面功能和音樂(lè)應(yīng)用差不多，唯一不一樣的是，底部可以快速切換歌單，可以很快速切換不同音樂(lè)風(fēng)格。

文件夾功能

隨著設(shè)備、場(chǎng)景的增多，用戶(hù)可以根據(jù)自己的喜好將設(shè)備或場(chǎng)景歸類(lèi)放置，便于快速定位功能卡片；

點(diǎn)擊文件夾卡片，進(jìn)入到顯示著眾多功能名稱(chēng)的文件夾界面，點(diǎn)文件夾，才能進(jìn)入功能卡片列表，為什么要多一個(gè)文件夾查看的界面。

我們想象一下有這樣一種場(chǎng)景：面板中有幾十個(gè)功能卡片，用戶(hù)想開(kāi)啟娛樂(lè)場(chǎng)景，這個(gè)場(chǎng)景好像在客廳文件夾或走廊文件夾里，于是去客廳文件夾快速翻看這里面有沒(méi)有，再點(diǎn)進(jìn)去操作。

Gira 這樣做符合用戶(hù)在功能卡片多的情況下快速選擇的習(xí)慣。

排序功能

可以通過(guò)拖動(dòng)來(lái)調(diào)節(jié)設(shè)備卡片在菜單中的位置，省去了去后臺(tái)設(shè)置的步驟；

定時(shí)功能

定時(shí)列表用具象的時(shí)鐘來(lái)體現(xiàn)開(kāi)始運(yùn)行時(shí)間，還用黑白來(lái)區(qū)分夜晚和白天，對(duì)于用戶(hù)來(lái)說(shuō)掃一眼圖片就可以知道運(yùn)行時(shí)間，這種體驗(yàn)很好。

ORVIBO Mix Pad

以 ORVIBO Mix Pad 為例，從結(jié)構(gòu)、色彩、手勢(shì)操控方式、卡片形式、功能點(diǎn)這些方向展開(kāi)分析。

1. 首屏

整體運(yùn)用深色色調(diào)，使用幾何圖案作為背景；

用白色體現(xiàn)基礎(chǔ)信息，用色彩強(qiáng)調(diào)設(shè)備場(chǎng)景的狀態(tài)及天氣信息；

運(yùn)用圓角元素，更加生活化。

2. 輔助顏色

顏色運(yùn)用比較豐富，以藍(lán)、橙兩互補(bǔ)色為主，其他顏色分別為它們的鄰近色；既能保持強(qiáng)對(duì)比，還能讓顏色變得柔和。

3. 層級(jí)劃分

主要分為 2 大層級(jí)：首屏、設(shè)備控制界面、場(chǎng)景列表、鬧鐘為第一層級(jí)；設(shè)備類(lèi)型、設(shè)置為第二層級(jí)；

智能面板一般裝在墻面，用戶(hù)站立操作，用戶(hù)不可能花太長(zhǎng)時(shí)間來(lái)操控；

歐瑞博的人群為廣大普通消費(fèi)群體，家中的設(shè)備不會(huì)太多，設(shè)備控制界面層級(jí)前移，可以方便用戶(hù)直達(dá)控制區(qū)，用完即走。

4. 首頁(yè)布局

首頁(yè)主要分為 2 個(gè)區(qū)域：

日期天氣區(qū)

時(shí)間、日期、天氣狀況信息，可以滿(mǎn)足用戶(hù)日常出門(mén)關(guān)注的內(nèi)容，并且在這個(gè)區(qū)域有多種表現(xiàn)形式供用戶(hù)選擇，既保持個(gè)性化還不失統(tǒng)一感。

快捷控制區(qū)

可以將常用的功能置頂在首頁(yè)展示，最多設(shè)置 2 個(gè)，用戶(hù)在首屏既能看到日期天氣還可以控制設(shè)備，大大提升了屏幕的利用率和用戶(hù)的操作效率。

這樣做的好處：

當(dāng)用戶(hù)準(zhǔn)備出門(mén)時(shí)，看了一眼面板上的天氣，點(diǎn)一下關(guān)玄關(guān)燈，就可以直接出門(mén)了，不需要滑到燈的菜單界面找到玄關(guān)燈然后再關(guān)閉它，真的很方便。

底部有向上滑動(dòng)提示，告訴用戶(hù)下面還有重要內(nèi)容。

5. 卡片展示

卡片內(nèi)容左右排布，從左到右依次為 icon、名稱(chēng)及狀態(tài)、快捷控制，這種排布的好處是可以縮小每個(gè)卡片的高度，從而提高屏幕利用率；

但有個(gè)問(wèn)題就是，左右排布的方式，內(nèi)容最多呈現(xiàn) 4 個(gè)文字，需要考慮這幾個(gè)字能否清楚的定義該卡片功能。

6. 上滑手勢(shì)

上滑可以查看全部功能卡片，給用戶(hù)在手機(jī)上瀏覽信息的熟悉感；

在新的操控設(shè)備運(yùn)用用戶(hù)熟悉的交互方式可以降低用戶(hù)的學(xué)習(xí)成本；

移動(dòng)端上常見(jiàn)的手勢(shì)對(duì)應(yīng)結(jié)果有：左右滑——代表切換，向下滑——代表喚起相關(guān)功能設(shè)置，向上滑動(dòng)——瀏覽更多信息。

7. 左右滑手勢(shì)

用戶(hù)在首屏左右滑動(dòng)就可以切換不同功能模塊，不需要返回上一級(jí)，在設(shè)備類(lèi)型少的情況下，這種盲操會(huì)比較方便。

8. 下滑手勢(shì)

下滑進(jìn)入功能類(lèi)型選擇、系統(tǒng)設(shè)置界面，這一區(qū)域相當(dāng)于導(dǎo)航，可以實(shí)現(xiàn)功能模塊間的快速切換。

9. 手勢(shì)問(wèn)題

多種手勢(shì)的組合可以在有限的屏幕內(nèi)操作更加靈活，但手勢(shì)太多會(huì)帶來(lái)一些問(wèn)題：

• 誤操作問(wèn)題，在空調(diào)界面，左右切換設(shè)備時(shí)，容易觸發(fā)空調(diào)溫度操作；
• 認(rèn)知上的負(fù)擔(dān)，在歐瑞博面板的邏輯定義里，首屏和控制界面屬于同一層級(jí)，然而上滑手勢(shì)只能在首屏操作，在設(shè)備控制界面上滑就無(wú)法使用，下滑手勢(shì)卻可以全局操作，這里面的邏輯會(huì)讓用戶(hù)混亂。

針對(duì)以上問(wèn)題解決的方法可以是：

• 改變空調(diào)左右滑動(dòng)設(shè)置溫度的操控方式；
• 首屏和控制界面層級(jí)做區(qū)分，或簡(jiǎn)化手勢(shì)。

10. 場(chǎng)景運(yùn)行效果

場(chǎng)景卡片分為未激活、運(yùn)行中、運(yùn)行結(jié)束三種狀態(tài)；

場(chǎng)景運(yùn)行狀態(tài)變化在卡片 icon 區(qū)域體現(xiàn)，既傳達(dá)了運(yùn)行的過(guò)程，又不會(huì)打擾到用戶(hù)。

12. 卡片首頁(yè)置頂

點(diǎn)擊卡片列表最底部的編輯按鈕，可以選擇將某一功能卡片置頂?shù)绞灼粒奖阌脩?hù)快捷操作。

13. 設(shè)備控制區(qū)域布局

將普通燈、場(chǎng)景、門(mén)窗等操控方式相近的設(shè)備進(jìn)行了歸類(lèi)顯示，并且和空調(diào)、色溫?zé)?、背景音?lè)等設(shè)備放置在同一層級(jí)；

從交互體驗(yàn)層講：由于家里的普通燈、場(chǎng)景、門(mén)窗的操控方式簡(jiǎn)單統(tǒng)一、數(shù)量多，按照類(lèi)別整合在一起便于查找控制；

從視覺(jué)層講：設(shè)備操控界面布局形式多，會(huì)給用戶(hù)造成整體視覺(jué)上的不統(tǒng)一，增加學(xué)習(xí)成本。

14. 設(shè)備控制

空調(diào)

空調(diào)控制界面，只能通過(guò)左右滑動(dòng)以整數(shù)的形式來(lái)調(diào)節(jié)溫度，開(kāi)啟中的時(shí)候，背景會(huì)有對(duì)應(yīng)模式的色彩氛圍效果，給用戶(hù)更直觀的感受；

底部只保留用戶(hù)最常用的模式、風(fēng)速、風(fēng)向三個(gè)功能。

色溫?zé)?/strong>

色溫?zé)艚缑婺J(rèn)為用戶(hù)推薦 6 種不同場(chǎng)景下使用的色溫選項(xiàng)，底部提供亮度調(diào)節(jié)功能，用戶(hù)只需要去選擇，大大縮短了用戶(hù)的操作路徑。

個(gè)性推薦在電商類(lèi)產(chǎn)品中很常見(jiàn)，推薦機(jī)制基于對(duì)用戶(hù)行為習(xí)慣的分析，需要強(qiáng)大的后臺(tái)數(shù)據(jù)支持，智能家居這一塊通過(guò)窮舉用戶(hù)生活中的設(shè)備使用場(chǎng)景、目的從而提煉出對(duì)應(yīng)的功能選項(xiàng)可以大大提升產(chǎn)品使用體驗(yàn)。

窗簾

窗簾控制界面采用半寫(xiě)實(shí)風(fēng)格，給用戶(hù)更加直觀感受，學(xué)習(xí)成本低，拖動(dòng)窗簾區(qū)域就可以進(jìn)行行程的控制，由于沒(méi)有微調(diào)按鈕和行程狀態(tài)百分比，所以無(wú)法做到窗簾精準(zhǔn)控制；

選擇這種寫(xiě)實(shí)的設(shè)計(jì)風(fēng)格，需要考慮設(shè)備控制界面布局、樣式對(duì)新增窗簾類(lèi)型的兼容性。

背景音樂(lè)

背景音樂(lè)默認(rèn)界面只保留了當(dāng)前播放音樂(lè)封面元素，更多復(fù)雜操作被隱藏到了下一級(jí)界面，用戶(hù)在當(dāng)前界面可以進(jìn)行暫停、播放、收藏等簡(jiǎn)單操作；

在小屏幕中做設(shè)計(jì)時(shí)，有時(shí)候會(huì)在一個(gè)層級(jí)界面中堆砌許多功能按鈕，使界面變的臃腫，一來(lái)容易讓用戶(hù)誤操作，二來(lái)讓用戶(hù)找不到重點(diǎn)功能，操作效率低下；

我們?cè)谔幚磉@些信息時(shí)應(yīng)該結(jié)合使用場(chǎng)景，按用戶(hù)的使用頻率進(jìn)行權(quán)重劃分，將權(quán)重低的進(jìn)行隱藏處理，突出核心功能，減輕用戶(hù)操作負(fù)擔(dān)。

智能家居廠商大多都是靠賣(mài)硬件賺錢(qián)，歐瑞博巧妙的運(yùn)用會(huì)員機(jī)制結(jié)合背景音樂(lè)功能來(lái)售賣(mài)音樂(lè)服務(wù)（49 元一年），更加具有互聯(lián)網(wǎng)商業(yè)思維。

15. 語(yǔ)音控制

在語(yǔ)音設(shè)置中，可以選擇是否開(kāi)啟語(yǔ)音控制，系統(tǒng)默認(rèn) 2 組喚醒詞激活語(yǔ)音控制；

歐瑞博為用戶(hù)提供了更便捷的語(yǔ)音控制功能——快捷口令，說(shuō)出指令就可以快速執(zhí)行，由于沒(méi)有房間、設(shè)備名稱(chēng)的限定，這個(gè)功能只能實(shí)現(xiàn)面板內(nèi)所有同類(lèi)型設(shè)備的開(kāi)或關(guān)，適用于小戶(hù)型簡(jiǎn)單的場(chǎng)景。

16. 快速添加設(shè)備

傳統(tǒng)上添加一臺(tái)新設(shè)備需要：選擇要添加的設(shè)備——選擇網(wǎng)關(guān)——輸入正確Wifi密碼——進(jìn)入設(shè)備配網(wǎng)流程——配網(wǎng)成功——設(shè)備名稱(chēng)設(shè)置，操作流程繁瑣，中間稍微有些環(huán)節(jié)沒(méi)有操作對(duì)，最后就無(wú)法成功添加設(shè)備，歐瑞博通過(guò)簡(jiǎn)化中間過(guò)程，成功解決了這一痛點(diǎn)。

17. 個(gè)性化設(shè)置

用戶(hù)可以在面板中直接設(shè)置首屏的風(fēng)格樣式，系統(tǒng)一共有 3 種風(fēng)格外和一個(gè)隨機(jī)演示選項(xiàng)供用戶(hù)選擇，并且這三種風(fēng)格的功能架構(gòu)是一樣的，只是對(duì)背景圖、元素大小、布局做了設(shè)計(jì)區(qū)分。

AQARA S1

以 AQARA S1 為例，從結(jié)構(gòu)、色彩、手勢(shì)操控方式、卡片形式、功能點(diǎn)這些方向展開(kāi)分析。

1. 首屏

整體使用黑色做背景，用白色體現(xiàn)基礎(chǔ)信息，底部的色塊元素貌似起裝飾作用，和天氣情況并沒(méi)有聯(lián)系；

首屏主要分為日期時(shí)間和環(huán)境狀況 2 個(gè)區(qū)域，天氣、溫度、濕度、空氣質(zhì)量信息并行排列，個(gè)人認(rèn)為用戶(hù)對(duì)這 4 個(gè)信息的關(guān)注度是不一樣的，看看我們手機(jī)上的天氣 app 的信息排布就知道了，這樣并列排布會(huì)讓用戶(hù)分不清主次。

2. 輔助顏色

顏色以藍(lán)色及其鄰近色為主，搭配少量的對(duì)比色，整體色調(diào)統(tǒng)一。

3. 層級(jí)劃分

主要分為 2 大層級(jí)：首屏、設(shè)備控制界面、場(chǎng)景列表為第一層級(jí)；設(shè)置為第二層級(jí)；

形式和歐瑞博一致，都是為了讓用戶(hù)更便捷的操控；

但進(jìn)入設(shè)置頁(yè)面，設(shè)置主題類(lèi)型的步數(shù)比歐瑞博的多一步，用戶(hù)設(shè)置完成后還得一步步返回，這里可以將用戶(hù)常用的“顯示”內(nèi)容上移一個(gè)層級(jí)，減少頁(yè)面跳轉(zhuǎn)次數(shù)；

AI 手勢(shì)這種有特色的功能隱藏的太深，不便于用戶(hù)的使用。

4. 左右滑手勢(shì)

綠米同樣運(yùn)用左右滑動(dòng)進(jìn)行首屏、場(chǎng)景列表、設(shè)備間的快速切換，對(duì)于相同類(lèi)型的窗簾設(shè)備，并沒(méi)有整合成列表放置同一屏，而是另起一屏，設(shè)備多的時(shí)候就會(huì)存在操控效率低的問(wèn)題。

5. 下滑手勢(shì)

下滑進(jìn)入系統(tǒng)設(shè)置界面，這個(gè)區(qū)域只有一個(gè)設(shè)置功能，有點(diǎn)浪費(fèi)空間，索性就把設(shè)置下一級(jí)的功能選項(xiàng)移到下拉頁(yè)面，還能提高用戶(hù)的操作效率。

6. 場(chǎng)景運(yùn)行效果

場(chǎng)景運(yùn)行過(guò)程以進(jìn)度條的形式在卡片底部體現(xiàn)，對(duì)用戶(hù)的干擾小，并且只傳遞出開(kāi)始到結(jié)束的過(guò)程，沒(méi)有成功提示，這種邏輯是正確的，因?yàn)槊姘逯皇莻鬟_(dá)出了一個(gè)命令出去，具體什么時(shí)候傳出、接收設(shè)備是否正常運(yùn)行，這些信息面板是獲取不到的。

7. 設(shè)備控制區(qū)域布局

場(chǎng)景列表與設(shè)備控制界面一個(gè)層級(jí)，溫控器、調(diào)光燈運(yùn)用半圓的元素作為控制區(qū)域，新穎的設(shè)計(jì)風(fēng)格是綠米智能面板的特色；

仔細(xì)看，會(huì)發(fā)現(xiàn)設(shè)備控制界面不統(tǒng)一，相同功能的開(kāi)關(guān)按鈕，在不同的設(shè)備中位置卻不一樣，還有就是普通燈是偏寫(xiě)實(shí)的 3 路開(kāi)關(guān)樣式，其他界面卻是抽象的圓環(huán)幾何樣式，不統(tǒng)一的界面會(huì)增加用戶(hù)的學(xué)習(xí)成本。

8. 設(shè)備控制

空調(diào)

空調(diào)控制界面，通過(guò)上下滑動(dòng)以整數(shù)的形式來(lái)調(diào)節(jié)溫度，新穎的操控方式讓用戶(hù)加深對(duì)品牌的印象；

底部開(kāi)關(guān)、模式、風(fēng)速同級(jí)展示，這里存在幾個(gè)問(wèn)題：1、用戶(hù)在設(shè)置空調(diào)時(shí)很容易誤點(diǎn)關(guān)閉按鈕；2、缺少常用的風(fēng)向調(diào)節(jié)，功能缺失造成較差使用體驗(yàn)。

燈

普通燈可以在 App 中設(shè)置 1、2、3 路開(kāi)關(guān)樣式，這種形式同樣存在問(wèn)題：一屏最多放三個(gè)開(kāi)關(guān)，屏幕下方大片區(qū)域空置，利用率低。

窗簾

窗簾控制界面顯示窗簾的名稱(chēng)及行程狀態(tài)；窗簾的開(kāi)、合，綠米給了 2 種方式：滑動(dòng)控制、全開(kāi)全關(guān)按鈕；

增加暫停功能可以提升使用體驗(yàn)，因?yàn)橛脩?hù)在操控窗簾設(shè)備時(shí)，會(huì)以窗簾實(shí)際的運(yùn)動(dòng)行程為依據(jù)來(lái)決定窗簾需要開(kāi)合到什么程度，而不是看界面上窗簾的位移，當(dāng)用戶(hù)覺(jué)著窗簾行程可以了，按暫停鍵就可以準(zhǔn)確停留在用戶(hù)想要的位置上。

調(diào)色燈

調(diào)色燈用戶(hù)可以自定義或選擇系統(tǒng)推薦的顏色；

為了涵蓋大多數(shù)的用戶(hù)偏好，調(diào)色燈的 4 個(gè)推薦色采用色環(huán)上差距大的顏色，并且根據(jù)用戶(hù)使用場(chǎng)景篩選出常用的幾種色調(diào)，排除了用戶(hù)不常用的綠色、紫色、粉色。

9. 開(kāi)機(jī)默認(rèn)頁(yè)設(shè)置

用戶(hù)可以根據(jù)自己的使用偏好，將最常用的功能模塊頁(yè)面放到第一屏，這個(gè)功能在一定程度上可以提升操作效率，當(dāng)設(shè)備多，還是需要切換很多屏。

用戶(hù)使用面板分為：緊急情況、常用情況，緊急情況不一定常用，就像出門(mén)需要關(guān)燈；常用情況不一定緊急，例如看時(shí)間

綠米為了讓用戶(hù)便捷，給出默認(rèn)頁(yè)自定義功能，存在的問(wèn)題是：如果用戶(hù)把燈作為開(kāi)機(jī)第一頁(yè)，那么日常中看時(shí)間要翻頁(yè)；日期時(shí)間作為第一頁(yè)，開(kāi)關(guān)燈需要翻頁(yè)，都不是特別便捷。實(shí)際上可以做成像 Gira 那樣，通過(guò)增加手勢(shì)喚起快捷開(kāi)關(guān)功能，首屏留給日期時(shí)間，既滿(mǎn)足了日常需要，又能滿(mǎn)足緊急需求。

總結(jié)

通過(guò)上述分析，我們得到了這些產(chǎn)品的共同點(diǎn)與差異點(diǎn)，以及背后的思考方式，了解共同點(diǎn)可以讓我們彌補(bǔ)自己產(chǎn)品的不足，不被市場(chǎng)淘汰；學(xué)習(xí)它們差異化的思考方式可以幫助提升我們產(chǎn)品的競(jìng)爭(zhēng)力。

作為一名合格的設(shè)計(jì)師，除了學(xué)習(xí)視覺(jué)技法和理論，還應(yīng)該多玩、多看、多思考真實(shí)的線上產(chǎn)品，體驗(yàn)其核心操作流程，推敲和思考產(chǎn)品設(shè)計(jì)背后的原理和邏輯，才能不斷提升體驗(yàn)設(shè)計(jì)思維。

未來(lái)物聯(lián)網(wǎng)交互會(huì)有哪些創(chuàng)新？來(lái)看這篇6000+的干貨！

?? 背景 伴隨網(wǎng)絡(luò)條件的提升與智能化科技的發(fā)展，我們身邊正在發(fā)生著天翻地覆的變化，以國(guó)內(nèi)華為、阿里、百度、騰訊、JD 等科技公司運(yùn)用 5G、AI、物聯(lián)網(wǎng)、大數(shù)據(jù)、云計(jì)算等新型技術(shù)改變著我們的生活場(chǎng)景，這使得我們不論是生活、學(xué)習(xí)還是辦公都更加智能化、高效化、可視化、數(shù)字化，也許你現(xiàn)在接觸的

閱讀文章 >