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