如今很多家居都已經(jīng)智能化，大大提高了我們的生活品質(zhì)。而對(duì)于新興智能家居產(chǎn)品來(lái)說(shuō)，優(yōu)秀的界面交互系統(tǒng)與智能硬件有著密不可分的聯(lián)系。本文作者以國(guó)外智能家居產(chǎn)品Josh.AI為例，分析它有哪些值得學(xué)習(xí)的設(shè)計(jì)細(xì)節(jié)，一起來(lái)看一下吧。

大家有沒有發(fā)現(xiàn)，現(xiàn)在很多家居都已經(jīng)智能化，包括傳統(tǒng)的家電洗衣機(jī)、空調(diào)、窗簾、冰箱等，你回到家只需要喊一句，“hi.某某同學(xué)，幫我打開窗簾”，甚至不需要做什么，一開門家里常用的家電設(shè)備就都開了，大大提高了我們的生活品質(zhì)。

對(duì)于傳統(tǒng)的產(chǎn)品設(shè)計(jì)更關(guān)注的是產(chǎn)品本身的物理屬性，例如尺寸、形狀、結(jié)構(gòu)、質(zhì)感等，并且一旦購(gòu)買就不會(huì)做更新和變化，想體驗(yàn)新產(chǎn)品就得花錢。而對(duì)于新興智能家居產(chǎn)品，那可真是好處多了去了，首先產(chǎn)品的功能在出售給消費(fèi)者后會(huì)持續(xù)更新功能，來(lái)滿足用戶的喜好，其次還可以通過(guò)語(yǔ)言對(duì)智能產(chǎn)品進(jìn)行操作，甚至還能操控其他智能設(shè)備。

以上分析不難發(fā)現(xiàn)優(yōu)秀的界面交互設(shè)計(jì)與智能硬件有著密不可分的聯(lián)系。

那么我們來(lái)看看國(guó)外智能家居產(chǎn)品Josh.AI 有哪些值得學(xué)習(xí)的設(shè)計(jì)細(xì)節(jié)。

一、Josh.AI

1. 產(chǎn)品介紹

Josh是一款高端語(yǔ)音控制的家庭自動(dòng)化系統(tǒng)，類似于Siri、小愛同學(xué)，支持自然語(yǔ)言語(yǔ)音命令，包括問(wèn)候、問(wèn)題、說(shuō)明等，實(shí)現(xiàn)了較為豐富的VUI。

語(yǔ)音命令方面，支持各年齡段包括視力受損、其他殘疾等群體使用，對(duì)老年人很是友好。目前也融入了AI技術(shù)，通過(guò)分析用戶的大量行為數(shù)據(jù)，分析用戶的喜好與習(xí)慣，對(duì)用戶行為進(jìn)行預(yù)判，為用戶提供更便捷、輕松的產(chǎn)品體驗(yàn)。

2. 頁(yè)面拆解

1）首頁(yè)

首頁(yè)內(nèi)容涵蓋「控制面板」、「語(yǔ)音按鈕」等。整體風(fēng)格較為輕量，沒有過(guò)度花哨的視覺元素。

首頁(yè)也為用戶推薦常用的操作，例如開啟燈光、播放音樂(lè)等，將核心功能外顯，提升易用性。

在下方通過(guò)多個(gè)卡片顯示當(dāng)前用戶處于活動(dòng)狀態(tài)的所有設(shè)備，只需要輕按就可控制每個(gè)設(shè)備。出現(xiàn)異常或提示等狀態(tài)，卡片會(huì)用小紅條樣式來(lái)提醒用戶，強(qiáng)化用戶感知。

首頁(yè)右上角的菜單圖標(biāo)可以開啟黑暗模式，開啟后頁(yè)面背景整體會(huì)變成圖片 黑色蒙層樣式，強(qiáng)調(diào)一種品質(zhì)感和沉浸感，同時(shí)使用淺色的文字內(nèi)容形成很好的對(duì)比。而圖片背景的使用，對(duì)圖片要求極高。版權(quán)、質(zhì)量、產(chǎn)品匹配度、視覺干擾，都應(yīng)該注意。

一張高質(zhì)量的圖片可以很好的凸顯產(chǎn)品調(diào)性，提升設(shè)計(jì)圖的整體質(zhì)量。反之就會(huì)大大降低用戶對(duì)其的好感度與信任度，顯得廉價(jià)，無(wú)品質(zhì)。

左滑進(jìn)入控制面板，類似一個(gè)快捷操作面板，內(nèi)容呈網(wǎng)格分布。點(diǎn)擊開關(guān)只有圖標(biāo)及顏色的變化，稍微有些不明顯；長(zhǎng)按卡片可以切換位置，將用戶常用的功能前置。

卡片下邊的三個(gè)點(diǎn)可進(jìn)入完整的控制面板。

由于瓷片區(qū)涵蓋的功能較多，包括「音樂(lè)播放器」、「游戲」、「家具控制面板」等。往期版本設(shè)計(jì)中（左側(cè)），瓷片區(qū)風(fēng)格樣式不統(tǒng)一，交互方式大不相同，給用戶帶來(lái)較多的困擾。優(yōu)化后將背景統(tǒng)一設(shè)計(jì)成圖片背景，操作變成開關(guān)式。這樣一方面通過(guò)多樣的背景設(shè)計(jì)增強(qiáng)產(chǎn)品氛圍感，另一方面也保證了與實(shí)物操作相符合，提高用戶感知。

2. 控制面板

1）燈光控制

燈光控制頁(yè)面是由多個(gè)瓷片區(qū)組成，上半部分的滾動(dòng)條用來(lái)控制整個(gè)房間的亮度。

由于用戶看不到智能設(shè)備的內(nèi)部操作，只能直觀感受信息的輸出與輸入，所以卡片增加了一個(gè)模糊燈光的處理，來(lái)增強(qiáng)了用戶感知。

卡片結(jié)構(gòu)與首頁(yè)相同，點(diǎn)擊三個(gè)點(diǎn)進(jìn)入燈光控制面板，上下滑動(dòng)可調(diào)整燈光亮度。

2）燈光控制面板

「基本控制器」承載了單獨(dú)范圍的燈光控制，與觸覺反饋相結(jié)合的寬體滑塊讓用戶可以確定他們正在控制什么，動(dòng)畫很流暢，可以滿足某部分需求的用戶。

「復(fù)雜控制器」通過(guò)使用滑塊或支持場(chǎng)景的按鈕預(yù)設(shè)來(lái)調(diào)整亮度，高級(jí)顏色選擇器與溫度控制功能。

「高級(jí)控制器」隨著版本迭代，智能硬件支持晝夜節(jié)奏和更有限控制的燈光，因此增加了顏色預(yù)設(shè)、更豐富的顏色和溫度選擇器、也可以將顏色預(yù)設(shè)應(yīng)用于一批燈、多個(gè)設(shè)備等高級(jí)設(shè)置，以及時(shí)間受限的環(huán)境照明模式。

3）音樂(lè)播放器

隨著疫情加速，智能家居音樂(lè)播放器的訴求也在逐年增加，音樂(lè)播放器也成為用戶較為常用的功能。Josh.AI在播放器頁(yè)面的處理比較純粹簡(jiǎn)單，可以滿足基本的用戶訴求和基本功能。

「播放器樣式」平臺(tái)為用戶提供了多種播放器樣式，包括了靜態(tài)圓形、靜態(tài)方形、歌手、寫真等樣式，滿足各類用戶對(duì)播放器樣式個(gè)性化設(shè)置的需求。

「聯(lián)集播放」 用戶可以對(duì)音樂(lè)進(jìn)行分組并設(shè)置在不同的房間，并且在播放頁(yè)也可以控制所有房間的音量，大大減少用戶的交互路徑。

三、小結(jié)

智能家居app是用戶對(duì)于真實(shí)家居生活的數(shù)字化轉(zhuǎn)譯，將現(xiàn)實(shí)生活中的家居生活場(chǎng)景和高科技信息產(chǎn)品深度融合，也是用戶和產(chǎn)品在智能家居環(huán)境中交流和溝通的關(guān)鍵渠道，因此需要讓用戶在享受高科技帶來(lái)的前所未有的體驗(yàn)的同時(shí)注重對(duì)用戶的人性化、情感化進(jìn)行詮釋，為此也給大家總結(jié)了幾點(diǎn)設(shè)計(jì)時(shí)注意的幾個(gè)方面。

1. 遵循用戶行為

通過(guò)心理學(xué)表明，用戶總是對(duì)滿足期望的行為結(jié)果最滿意，那么我們?cè)谔囟ǖ慕缑嬷?，只要用戶看到此視覺元素，就應(yīng)該能夠猜測(cè)元素是什么、作用是什么。并且應(yīng)不斷調(diào)整頁(yè)面上元素的布局，以達(dá)到強(qiáng)烈視覺層次的水平是界面清晰可見。

2. 與人的習(xí)慣保持一致

車的方向盤旋轉(zhuǎn)向和人的固有方向感一致，這就是很多新手駕駛員雖然缺飯方向感但是卻可以很快適應(yīng)駕車方向的原因。這種匹配關(guān)系來(lái)源于人們的生活行為習(xí)慣，而產(chǎn)品設(shè)計(jì)若這種自然匹配的狀態(tài)相一致，用戶自然而然就會(huì)產(chǎn)生適應(yīng)感。

3. 與人的經(jīng)驗(yàn)保持一致

對(duì)于智能家居的用戶而言，“自然”源于用戶的感知、體驗(yàn)和對(duì)生活的觀察。在自然環(huán)境中將用戶的經(jīng)驗(yàn)應(yīng)用在app當(dāng)中可以極大地提高交互的自然性和易操作性。

比較直觀的是戴森的空氣進(jìn)化器控制頁(yè)面，功能按鈕根據(jù)實(shí)體遙控器1比1還原。

4. 頁(yè)面最小化

這樣的目的是將頁(yè)面中的信息元素以最直接的方式展示出來(lái)，移除不必要的信息元素，只包含最基礎(chǔ)的操作信息就足夠了，這樣可以減少用戶對(duì)信息的搜索時(shí)間，只關(guān)注用戶的交互目的、需求和目標(biāo)。極端的就是讓頁(yè)面“隱形”，用戶感受不到界面的存在。

參考文獻(xiàn)

https://medium.com/@joshdotai

https://www.josh.ai/

本文由@pop泡面 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash，基于 CC0 協(xié)議

該文觀點(diǎn)僅代表作者本人，人人都是產(chǎn)品經(jīng)理平臺(tái)僅提供信息存儲(chǔ)空間服務(wù)。