2023-1-5 資深UI設計者
根據互聯網消費調研中心,了解到戴森的消費者大致有三個特征:高品質消費、重視生活之美、新生活開啟者。重視生活之美的消費者更注重設計美觀、獨特、有辨識度的產品。
戴森品牌定位:高端、黑科技、高顏值。
下面我們通過案例去了解戴森是如何通過設計滿足品牌方和消費人群的。
戴森APP 1.0首頁通過模擬房屋、顏色變化來向用戶直觀展示屋外、屋內的空氣狀態;整體來看擬物化可以很直觀的向用戶展示信息,房屋的造型給用戶一種溫馨家的生活之美,更有辨識度。
屋外主要有天氣、AQI(空氣質量)、溫度、濕度、PM2.5、紫外線等信息;
屋內主要有Wifi強度、房間名稱、屋內空氣質量、溫度、濕度其它信息、設備圖片;
頁面左下角為設備控制入口、右下角為時間設置;底部可以通過左右滑動切換設備類型。
繁多的信息雖然給用戶專業的感覺,但無形之中削弱了信息的層級,并且有的圖標使用不準確,用戶不知道是什么。頁面中使用產品圖可以強化自身產品品牌,增強產品辨識度。
戴森APP 2.0首頁相比1.0,區分了信息層級,增強了操控體驗。
根據用戶使用習慣,屋外只保留了空氣質量等級、溫度、濕度這些常用的信息;
擴大了房間區域,為信息提供更多展示空間,降低視覺干擾。屋內保留Wifi強度、房間名稱、屋內空氣質量、溫度濕度,將設備核心功能入口外顯,用戶可以更便捷去操控設備,提升了易用性。
使用局部放大的產品,用圓形襯底,并且還可以體現設備開關狀態,這樣做可以統一不同產品下的畫面,增強了用戶對于產品狀態的感知,從而強化了產品品牌。
首頁通過上滑、下拉等手勢可以查看關于空氣質量的更多詳細信息,將主次信息分級,既能凸顯首頁主要信息,還不影響用戶快速查看詳情的效率。
相比戴森,Smartmi P1在灰底上只保留空氣質量、Pm2.5、產品圖,大留白,從而凸顯的是簡潔的科技感。
功能上也做了整合,簡化了操控細節,為用戶提供了自動、睡眠、中速、自定義等快捷選擇。
兩個品牌對比來看,戴森體現了家的溫情,Smartmi P1則體現了簡約的科技。
在家電市場中,廠家都希望消費者提高購買頻次,界面底部濾芯的剩余使用時長,可以起到提示用戶及時更換濾芯的作用,從而提高購買頻次。這一點還是值得借鑒的。
通過查看戴森店鋪裝修風格、流程界面縮略圖,發現戴森將它的品牌色——黑色、紫色貫穿至每一個需要引起用戶注意的元素上,視覺感受上更有一種“黑”科技的感覺,強化了品牌感知。
對于空氣質量等級顏色的選擇,戴森與空氣質量指數(AQI)等級顏色保持一致性。
室內室外顏色均可根據空氣質量等級顯示不同效果,可以給用戶提供更加直觀的感受。
Smartmi P1 則是通過文字和部分顏色來體現空氣質量等級,用戶感知弱。
空氣質量詳情頁,戴森和SmartP1均使用色塊體現等級,戴森使用的面積更大,更加明顯,P1則一貫延續留白的簡潔科技感。兩者都有數據分析功能,戴森通過刻度、細線條、更加規整的布局,看上去更具專業性,品質感。
戴森和Smart P1都有各個空氣污染物等級的說明,用戶可以了解當前空氣質量情況及顯示規則。
Smart P1 可以讓用戶設置哪些空氣污染物顯示,空氣污染物等級說明在一頁顯示,用戶需要上下滑動來查找相關污染物。
戴森將污染物類型做成導航形式,用戶可以快速選擇要看的類型;
范圍區間和對應的顏色放一起,強調了他們之間的關聯性,并且可以承載更多的說明信息。
對于硬件廠商,在設計界面時,其中一個重要的需求就是“在界面中體現產品”,從而增強產品的獨特性、辨識度。那么如何做才能恰到好處的向用戶展示產品信息呢?來看看戴森怎么做的,具體主要有兩方面:
1、App中產品出現的節點;2、以什么形式展示產品。
最順其自然的就是在設備控制界面放置對應的產品,其次就是在引導頁中體現,可以很直觀的告知用戶如何操作及產品當前的狀態反饋。
最后還可以在登錄頁、空狀態頁作為裝飾元素出現。
產品展現形式在控制界面及引導頁面要盡可能展示產品當前場景下的樣子。
例如:在調節角度界面,用俯視圖可以更加直觀體現旋轉角度的狀態。
在房屋界面,由于只需要體現設備狀態,所以用45度視角盡可能體現產品獨特的造型細節。
在登錄頁使用產品線框圖作為裝飾元素,減少對文本內容的干擾。
首頁上空氣凈化器選取常用的功能作為快速入口,并且使用圓、圓角矩形作為按鍵外框,我們看它的實體遙控器、產品造型,就知道為什么要用這2種形態了,這樣可以延續戴森的產品特征,使得整體品牌更具辨識度,達到強化品牌滲透的目的。
右下角為設備控制詳情入口,通過使用不透明白底與快捷功能鍵作出區分,還能保持整體性,品質感。
控制詳情頁放置產品實物圖,可以直觀展示產品狀態,功能圖標前期做了區分歸類,保證每一行的圖標尺寸一致的同時確保它們之間的相關性。角度設置界面,產品使用俯視圖,可以直觀展示角度信息。
對于用戶常用的操作使用滑動手勢,例如:風量,長按上下滑動可以很方便設置等級,松手返回確認,風量按鈕可以顯示風量等級條,用戶不僅可以通過數字了解風量等級,還可以通過進度條更直觀感知風量大小。
從畫面中可以看出,同樣的風向設置按鈕,在首頁,點擊后只能進行開啟、關閉風向;進入控制詳情頁,則可以設置具體的角度值;保證在不同場景下即可以快速便捷控制設備,也可以精確控制設備。
最左邊的控制界面是最早的版本,只有啟動或停止機器的功能,使用帶角度的視角來展示機器與場景,并且機器是可以進行移動擦除動畫,體現運行中的狀態,這種方式比較耗費開發時間。
中間的界面是過渡版本,較上一個版本做了優化,采用正視圖,并且增加了運行強度、運行區域、定時功能,底部的地板元素漸變處理減少了畫面對功能入口的干擾,既能體現場景,還更加易用。
最右邊界面為最新版本,放大了產品,減少了不必要的視覺元素,弱化了地板背景;充電圖標和設備狀態放置頂部,與功能區做區分;運行強度選項由展開變成收起,估計這個功能使用頻率較低;運行區域、定時功能的圖標做了優化,更加貼切。視覺和功能得到了完美的平衡。
燈光控制界面,主畫面是燈頂部實物圖,值得一提的是,點擊圖片上的開關按鈕就可以實現燈的開啟關閉,很直接;點擊開關上部的區域,會彈出色溫、亮度調節界面。功能區域和實物結合的形式值得我們學習。
右下角為場景選擇,可以選擇系統自帶的燈光使用場景,例如:讀書模式、休閑模式,也可以自定義,可以方便快速設定光線。
通過對戴森App的分析,我們了解到了可以通過擬物或者將功能控制區與實物結合的方式,提升用戶操控體驗及產品品牌辨識度;對于硬件產品App,要盡可能保持與實物的一致性,突出產品特征,包括按鈕形狀、色彩;還有就是可以學習到戴森為了平衡用戶與品牌方的需求,在視覺層面、交互層面的細微改動下的思考方式。