編輯導語：本篇文章主要探索Dyson App 各版本介面的差異點、互動方式以及為了平衡使用者與品牌方，設計做的努力，從而開拓我們的設計思路。一起來看看吧！
一、產品背景
根據網際網路消費調研中心，瞭解到戴森的消費者大致有三個特徵：高品質消費、重視生活之美、新生活開啟者。重視生活之美的消費者更注重設計美觀、獨特、有辨識度的產品。
戴森品牌定位：高階、黑科技、高顏值。
下面我們透過案例去了解戴森是如何透過設計滿足品牌方和消費人群的。
1。 首頁1。0
1）表現層
戴森APP 1。0首頁透過模擬房屋、顏色變化來向用戶直觀展示屋外、屋內的空氣狀態；整體來看擬物化可以很直觀的向用戶展示資訊，房屋的造型給使用者一種溫馨家的生活之美，更有辨識度。
2）功能層
屋外主要有天氣、AQI（空氣質量）、溫度、溼度、PM2。5、紫外線等資訊；
屋內主要有Wifi強度、房間名稱、屋內空氣質量、溫度、溼度其它資訊、裝置圖片；
頁面左下角為裝置控制入口、右下角為時間設定；底部可以透過左右滑動切換裝置型別。
繁多的資訊雖然給使用者專業的感覺，但無形之中削弱了資訊的層級，並且有的圖示使用不準確，使用者不知道是什麼。頁面中使用產品圖可以強化自身產品品牌，增強產品辨識度。
2。 首頁2。0
戴森APP 2。0首頁相比1。0，區分了資訊層級，增強了操控體驗。
1）功能層
根據使用者使用習慣，屋外只保留了空氣質量等級、溫度、溼度這些常用的資訊；
擴大了房間區域，為資訊提供更多展示空間，降低視覺干擾。屋內保留Wifi強度、房間名稱、屋內空氣質量、溫度溼度，將裝置核心功能入口外顯，使用者可以更便捷去操控裝置，提升了易用性。
2）表現層
使用區域性放大的產品，用圓形襯底，並且還可以體現裝置開關狀態，這樣做可以統一不同產品下的畫面，增強了使用者對於產品狀態的感知，從而強化了產品品牌。
3）體驗層
首頁透過上滑、下拉等手勢可以檢視關於空氣質量的更多詳細資訊，將主次資訊分級，既能凸顯首頁主要資訊，還不影響使用者快速檢視詳情的效率。
3。 Smartmi P1
1) 表現層
相比戴森，Smartmi P1在灰底上只保留空氣質量、Pm2。5、產品圖，大留白，從而凸顯的是簡潔的科技感。
2) 功能層
功能上也做了整合，簡化了操控細節，為使用者提供了自動、睡眠、中速、自定義等快捷選擇。
兩個品牌對比來看，戴森體現了家的溫情，Smartmi P1則體現了簡約的科技。
在家電市場中，廠家都希望消費者提高購買頻次，介面底部濾芯的剩餘使用時長，可以起到提示使用者及時更換濾芯的作用，從而提高購買頻次。這一點還是值得借鑑的。
4。 戴森介面色彩使用
1) 表現層
透過檢視戴森店鋪裝修風格、流程介面縮圖，發現戴森將它的品牌色——黑色、紫色貫穿至每一個需要引起使用者注意的元素上，視覺感受上更有一種“黑”科技的感覺，強化了品牌感知。
5。 空氣質量等級視覺化
1) 表現層
對於空氣質量等級顏色的選擇，戴森與空氣質量指數（AQI）等級顏色保持一致性。
室內室外顏色均可根據空氣質量等級顯示不同效果，可以給使用者提供更加直觀的感受。
Smartmi P1 則是透過文字和部分顏色來體現空氣質量等級，使用者感知弱。
6。 空氣質量等級詳情
1) 表現層
空氣質量詳情頁，戴森和SmartP1均使用色塊體現等級，戴森使用的面積更大，更加明顯，P1則一貫延續留白的簡潔科技感。兩者都有資料分析功能，戴森透過刻度、細線條、更加規整的佈局，看上去更具專業性，品質感。
7。 空氣汙染物質量等級說明
1) 功能層
戴森和Smart P1都有各個空氣汙染物等級的說明，使用者可以瞭解當前空氣質量情況及顯示規則。
Smart P1 可以讓使用者設定哪些空氣汙染物顯示，空氣汙染物等級說明在一頁顯示，使用者需要上下滑動來查詢相關汙染物。
戴森將汙染物型別做成導航形式，使用者可以快速選擇要看的型別；
2) 表現層
範圍區間和對應的顏色放一起，強調了他們之間的關聯性，並且可以承載更多的說明資訊。
8。 在App中如何融入產品
對於硬體廠商，在設計介面時，其中一個重要的需求就是“在介面中體現產品”，從而增強產品的獨特性、辨識度。那麼如何做才能恰到好處的向用戶展示產品資訊呢？來看看戴森怎麼做的，具體主要有兩方面：
1、App中產品出現的節點；2、以什麼形式展示產品。
最順其自然的就是在裝置控制介面放置對應的產品，其次就是在引導頁中體現，可以很直觀的告知使用者如何操作及產品當前的狀態反饋。
最後還可以在登入頁、空狀態頁作為裝飾元素出現。
產品展現形式在控制介面及引導頁面要儘可能展示產品當前場景下的樣子。
例如：在調節角度介面，用俯檢視可以更加直觀體現旋轉角度的狀態。
在房屋介面，由於只需要體現裝置狀態，所以用45度視角儘可能體現產品獨特的造型細節。
在登入頁使用產品線框圖作為裝飾元素，減少對文字內容的干擾。
9。 戴森空氣清淨機控制介面樣式
1) 表現層
首頁上空氣清淨機選取常用的功能作為快速入口，並且使用圓、圓角矩形作為按鍵外框，我們看它的實體遙控器、產品造型，就知道為什麼要用這2種形態了，這樣可以延續戴森的產品特徵，使得整體品牌更具辨識度，達到強化品牌滲透的目的。
右下角為裝置控制詳情入口，透過使用不透明白底與快捷功能鍵作出區分，還能保持整體性，品質感。
10。 空氣清淨機控制詳情頁
1) 表現層
控制詳情頁放置產品實物圖，可以直觀展示產品狀態，功能圖示前期做了區分歸類，保證每一行的圖示尺寸一致的同時確保它們之間的相關性。角度設定介面，產品使用俯檢視，可以直觀展示角度資訊。
11。 空氣清淨機操控手勢
1) 體驗層
對於使用者常用的操作使用滑動手勢，例如：風量，長按上下滑動可以很方便設定等級，鬆手返回確認，風量按鈕可以顯示風量等級條，使用者不僅可以透過數字瞭解風量等級，還可以透過進度條更直觀感知風量大小。
12。 快捷鍵功能許可權定義
1) 功能層
從畫面中可以看出，同樣的風向設定按鈕，在首頁，點選後只能進行開啟、關閉風向；進入控制詳情頁，則可以設定具體的角度值；保證在不同場景下即可以快速便捷控制裝置，也可以精確控制裝置。
13。 戴森掃地機控制介面
1) 表現層
最左邊的控制介面是最早的版本，只有啟動或停止機器的功能，使用帶角度的視角來展示機器與場景，並且機器是可以進行移動擦除動畫，體現執行中的狀態，這種方式比較耗費開發時間。
中間的介面是過渡版本，較上一個版本做了最佳化，採用正檢視，並且增加了執行強度、執行區域、定時功能，底部的地板元素漸變處理減少了畫面對功能入口的干擾，既能體現場景，還更加易用。
最右邊介面為最新版本，放大了產品，減少了不必要的視覺元素，弱化了地板背景；充電圖示和裝置狀態放置頂部，與功能區做區分；執行強度選項由展開變成收起，估計這個功能使用頻率較低；執行區域、定時功能的圖示做了最佳化，更加貼切。視覺和功能得到了完美的平衡。
14。 戴森燈光控制介面
1) 功能層
15。 戴森燈光場景功能
1) 功能層
右下角為場景選擇，可以選擇系統自帶的燈光使用場景，例如：讀書模式、休閒模式，也可以自定義，可以方便快速設定光線。
二、總結
透過對戴森App的分析，我們瞭解到了可以透過擬物或者將功能控制區與實物結合的方式，提升使用者操控體驗及產品品牌辨識度；對於硬體產品App，要儘可能保持與實物的一致性，突出產品特徵，包括按鈕形狀、色彩；還有就是可以學習到戴森為了平衡使用者與品牌方的需求，在視覺層面、互動層面的細微改動下的思考方式。
本文由 @木土君 原創釋出於人人都是產品經理。未經許可，禁止轉載。
題圖來自Unsplash，基於CC0協議。
