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