Josh.AI智能家居APP設(shè)計(jì)解析(智能家居app設(shè)計(jì)模板)
如今很多家居都已經(jīng)智能化,大大提高了我們的生活品質(zhì)。而對于新興智能家居產(chǎn)品來說,優(yōu)秀的界面交互系統(tǒng)與智能硬件有著密不可分的聯(lián)系。本文作者以國外智能家居產(chǎn)品Josh.AI為例,分析它有哪些值得學(xué)習(xí)的設(shè)計(jì)細(xì)節(jié),一起來看一下吧。
大家有沒有發(fā)現(xiàn),現(xiàn)在很多家居都已經(jīng)智能化,包括傳統(tǒng)的家電洗衣機(jī)、空調(diào)、窗簾、冰箱等,你回到家只需要喊一句,“hi.某某同學(xué),幫我打開窗簾”,甚至不需要做什么,一開門家里常用的家電設(shè)備就都開了,大大提高了我們的生活品質(zhì)。
對于傳統(tǒng)的產(chǎn)品設(shè)計(jì)更關(guān)注的是產(chǎn)品本身的物理屬性,例如尺寸、形狀、結(jié)構(gòu)、質(zhì)感等,并且一旦購買就不會做更新和變化,想體驗(yàn)新產(chǎn)品就得花錢。而對于新興智能家居產(chǎn)品,那可真是好處多了去了,首先產(chǎn)品的功能在出售給消費(fèi)者后會持續(xù)更新功能,來滿足用戶的喜好,其次還可以通過語言對智能產(chǎn)品進(jìn)行操作,甚至還能操控其他智能設(shè)備。
以上分析不難發(fā)現(xiàn)優(yōu)秀的界面交互設(shè)計(jì)與智能硬件有著密不可分的聯(lián)系。
那么我們來看看國外智能家居產(chǎn)品Josh.AI 有哪些值得學(xué)習(xí)的設(shè)計(jì)細(xì)節(jié)。
一、Josh.AI
1. 產(chǎn)品介紹
Josh是一款高端語音控制的家庭自動化系統(tǒng),類似于Siri、小愛同學(xué),支持自然語言語音命令,包括問候、問題、說明等,實(shí)現(xiàn)了較為豐富的VUI。
語音命令方面,支持各年齡段包括視力受損、其他殘疾等群體使用,對老年人很是友好。目前也融入了AI技術(shù),通過分析用戶的大量行為數(shù)據(jù),分析用戶的喜好與習(xí)慣,對用戶行為進(jìn)行預(yù)判,為用戶提供更便捷、輕松的產(chǎn)品體驗(yàn)。
2. 頁面拆解
1)首頁
首頁內(nèi)容涵蓋「控制面板」、「語音按鈕」等。整體風(fēng)格較為輕量,沒有過度花哨的視覺元素。
首頁也為用戶推薦常用的操作,例如開啟燈光、播放音樂等,將核心功能外顯,提升易用性。
在下方通過多個(gè)卡片顯示當(dāng)前用戶處于活動狀態(tài)的所有設(shè)備,只需要輕按就可控制每個(gè)設(shè)備。出現(xiàn)異常或提示等狀態(tài),卡片會用小紅條樣式來提醒用戶,強(qiáng)化用戶感知。
首頁右上角的菜單圖標(biāo)可以開啟黑暗模式,開啟后頁面背景整體會變成圖片 黑色蒙層樣式,強(qiáng)調(diào)一種品質(zhì)感和沉浸感,同時(shí)使用淺色的文字內(nèi)容形成很好的對比。而圖片背景的使用,對圖片要求極高。版權(quán)、質(zhì)量、產(chǎn)品匹配度、視覺干擾,都應(yīng)該注意。
一張高質(zhì)量的圖片可以很好的凸顯產(chǎn)品調(diào)性,提升設(shè)計(jì)圖的整體質(zhì)量。反之就會大大降低用戶對其的好感度與信任度,顯得廉價(jià),無品質(zhì)。
左滑進(jìn)入控制面板,類似一個(gè)快捷操作面板,內(nèi)容呈網(wǎng)格分布。點(diǎn)擊開關(guān)只有圖標(biāo)及顏色的變化,稍微有些不明顯;長按卡片可以切換位置,將用戶常用的功能前置。
卡片下邊的三個(gè)點(diǎn)可進(jìn)入完整的控制面板。
由于瓷片區(qū)涵蓋的功能較多,包括「音樂播放器」、「游戲」、「家具控制面板」等。往期版本設(shè)計(jì)中(左側(cè)),瓷片區(qū)風(fēng)格樣式不統(tǒng)一,交互方式大不相同,給用戶帶來較多的困擾。優(yōu)化后將背景統(tǒng)一設(shè)計(jì)成圖片背景,操作變成開關(guān)式。這樣一方面通過多樣的背景設(shè)計(jì)增強(qiáng)產(chǎn)品氛圍感,另一方面也保證了與實(shí)物操作相符合,提高用戶感知。
2. 控制面板
1)燈光控制
燈光控制頁面是由多個(gè)瓷片區(qū)組成,上半部分的滾動條用來控制整個(gè)房間的亮度。
由于用戶看不到智能設(shè)備的內(nèi)部操作,只能直觀感受信息的輸出與輸入,所以卡片增加了一個(gè)模糊燈光的處理,來增強(qiáng)了用戶感知。
卡片結(jié)構(gòu)與首頁相同,點(diǎn)擊三個(gè)點(diǎn)進(jìn)入燈光控制面板,上下滑動可調(diào)整燈光亮度。
2)燈光控制面板
「基本控制器」承載了單獨(dú)范圍的燈光控制,與觸覺反饋相結(jié)合的寬體滑塊讓用戶可以確定他們正在控制什么,動畫很流暢,可以滿足某部分需求的用戶。
「復(fù)雜控制器」通過使用滑塊或支持場景的按鈕預(yù)設(shè)來調(diào)整亮度,高級顏色選擇器與溫度控制功能。
「高級控制器」隨著版本迭代,智能硬件支持晝夜節(jié)奏和更有限控制的燈光,因此增加了顏色預(yù)設(shè)、更豐富的顏色和溫度選擇器、也可以將顏色預(yù)設(shè)應(yīng)用于一批燈、多個(gè)設(shè)備等高級設(shè)置,以及時(shí)間受限的環(huán)境照明模式。
3)音樂播放器
隨著疫情加速,智能家居音樂播放器的訴求也在逐年增加,音樂播放器也成為用戶較為常用的功能。Josh.AI在播放器頁面的處理比較純粹簡單,可以滿足基本的用戶訴求和基本功能。
「播放器樣式」平臺為用戶提供了多種播放器樣式,包括了靜態(tài)圓形、靜態(tài)方形、歌手、寫真等樣式,滿足各類用戶對播放器樣式個(gè)性化設(shè)置的需求。
「聯(lián)集播放」 用戶可以對音樂進(jìn)行分組并設(shè)置在不同的房間,并且在播放頁也可以控制所有房間的音量,大大減少用戶的交互路徑。
三、小結(jié)
智能家居app是用戶對于真實(shí)家居生活的數(shù)字化轉(zhuǎn)譯,將現(xiàn)實(shí)生活中的家居生活場景和高科技信息產(chǎn)品深度融合,也是用戶和產(chǎn)品在智能家居環(huán)境中交流和溝通的關(guān)鍵渠道,因此需要讓用戶在享受高科技帶來的前所未有的體驗(yàn)的同時(shí)注重對用戶的人性化、情感化進(jìn)行詮釋,為此也給大家總結(jié)了幾點(diǎn)設(shè)計(jì)時(shí)注意的幾個(gè)方面。
1. 遵循用戶行為
通過心理學(xué)表明,用戶總是對滿足期望的行為結(jié)果最滿意,那么我們在特定的界面中,只要用戶看到此視覺元素,就應(yīng)該能夠猜測元素是什么、作用是什么。并且應(yīng)不斷調(diào)整頁面上元素的布局,以達(dá)到強(qiáng)烈視覺層次的水平是界面清晰可見。
2. 與人的習(xí)慣保持一致
車的方向盤旋轉(zhuǎn)向和人的固有方向感一致,這就是很多新手駕駛員雖然缺飯方向感但是卻可以很快適應(yīng)駕車方向的原因。這種匹配關(guān)系來源于人們的生活行為習(xí)慣,而產(chǎn)品設(shè)計(jì)若這種自然匹配的狀態(tài)相一致,用戶自然而然就會產(chǎn)生適應(yīng)感。
3. 與人的經(jīng)驗(yàn)保持一致
對于智能家居的用戶而言,“自然”源于用戶的感知、體驗(yàn)和對生活的觀察。在自然環(huán)境中將用戶的經(jīng)驗(yàn)應(yīng)用在app當(dāng)中可以極大地提高交互的自然性和易操作性。
比較直觀的是戴森的空氣進(jìn)化器控制頁面,功能按鈕根據(jù)實(shí)體遙控器1比1還原。
4. 頁面最小化
這樣的目的是將頁面中的信息元素以最直接的方式展示出來,移除不必要的信息元素,只包含最基礎(chǔ)的操作信息就足夠了,這樣可以減少用戶對信息的搜索時(shí)間,只關(guān)注用戶的交互目的、需求和目標(biāo)。極端的就是讓頁面“隱形”,用戶感受不到界面的存在。
參考文獻(xiàn)
https://medium.com/@joshdotai
https://www.josh.ai/
本文由@pop泡面 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自Unsplash,基于 CC0 協(xié)議
該文觀點(diǎn)僅代表作者本人,人人都是產(chǎn)品經(jīng)理平臺僅提供信息存儲空間服務(wù)。