編輯導(dǎo)讀：物聯(lián)網(wǎng)技術(shù)的發(fā)展，讓人們的生活越來越智能化、越來越方便。而作為一名產(chǎn)品設(shè)計(jì)師，要對(duì)市面上的智能產(chǎn)品有多了解，并且對(duì)用戶場景有所了解，才能設(shè)計(jì)出更好的產(chǎn)品。本文作者將對(duì)一些智能產(chǎn)品進(jìn)行深度解析，本文為智能面板篇。

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

什么是智能面板：

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

使用場景：

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

產(chǎn)品選擇：

Gira、ORVIBO、綠米

為什么選他們？

Gira從事智能建筑系統(tǒng)技術(shù)有100多年的歷史，算是做智能開關(guān)的先驅(qū)；

ORVIBO、綠米國內(nèi)做智能開關(guān)相對(duì)成熟的品牌。

研究方向：

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

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

Gira g1：

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

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

ORVIBO 智能開關(guān)：

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

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

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

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

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

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

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

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

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

01

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

1. 首屏

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

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

2. 輔助顏色

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

3. 層級(jí)劃分

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

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

4. 首頁布局

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

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

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

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

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

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

有2點(diǎn)猜測：

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

5. 卡片展示

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

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

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

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

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

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

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

7. 手勢

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

8. 手勢

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

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

9. 設(shè)備控制

1）燈

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

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

2）溫控器

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

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

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

3）窗簾

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

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

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

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

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

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

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

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

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

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

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

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

10. Gira豎排控制條的優(yōu)勢

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

11. 背景音樂

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

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

12. 文件夾功能

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

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

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

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

13. 排序功能

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

14. 定時(shí)功能

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

02

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

1. 首屏

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

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

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

2. 輔助顏色

顏色運(yùn)用比較豐富，以藍(lán)、橙兩互補(bǔ)色為主，其他顏色分別為它們的鄰近色；

既能保持強(qiáng)對(duì)比，還能讓顏色變得柔和。

3. 層級(jí)劃分

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

智能面板一般裝在墻面，用戶站立操作，用戶不可能花太長時(shí)間來操控；

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

4. 首頁布局

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

1）日期天氣區(qū)

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

2）快捷控制區(qū)

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

這樣做的好處：

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

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

5. 卡片展示

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

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

6. 上滑手勢

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

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

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

7. 左右滑手勢

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

8. 下滑手勢

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

9. 手勢問題

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

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

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

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

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

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

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

11. 卡片首頁置頂

點(diǎn)擊卡片列表最底部的編輯按鈕，可以選擇將某一功能卡片置頂?shù)绞灼?，方便用戶快捷操作?/p>

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

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

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

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

13. 設(shè)備控制

1）空調(diào)

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

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

2）色溫?zé)?/strong>