戴森Dyson Link智能産品解析

編輯導語：本篇文章主要探索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. 戴森界面色彩使用

通過檢視戴森店鋪裝修風格、流程界面縮略圖，發現戴森将它的品牌色——黑色、紫色貫穿至每一個需要引起使用者注意的元素上，視覺感受上更有一種“黑”科技的感覺，強化了品牌感覺。

5. 空氣品質等級可視化

對于空氣品質等級顔色的選擇，戴森與空氣品質指數（AQI）等級顔色保持一緻性。

室内室外顔色均可根據空氣品質等級顯示不同效果，可以給使用者提供更加直覺的感受。

Smartmi P1 則是通過文字和部分顔色來展現空氣品質等級，使用者感覺弱。

6. 空氣品質等級詳情

空氣品質詳情頁，戴森和SmartP1均使用色塊展現等級，戴森使用的面積更大，更加明顯，P1則一貫延續留白的簡潔科技感。兩者都有資料分析功能，戴森通過刻度、細線條、更加規整的布局，看上去更具專業性，品質感。

7. 空氣污染物品質等級說明

1) 功能層

戴森和Smart P1都有各個空氣污染物等級的說明，使用者可以了解目前空氣品質情況及顯示規則。

Smart P1 可以讓使用者設定哪些空氣污染物顯示，空氣污染物等級說明在一頁顯示，使用者需要上下滑動來查找相關污染物。

戴森将污染物類型做成導航形式，使用者可以快速選擇要看的類型；

2) 表現層

範圍區間和對應的顔色放一起，強調了他們之間的關聯性，并且可以承載更多的說明資訊。

8. 在App中如何融入産品

對于硬體廠商，在設計界面時，其中一個重要的需求就是“在界面中展現産品”，進而增強産品的獨特性、辨識度。那麼如何做才能恰到好處的向使用者展示産品資訊呢？來看看戴森怎麼做的，具體主要有兩方面：

1、App中産品出現的節點；2、以什麼形式展示産品。

最順其自然的就是在裝置控制界面放置對應的産品，其次就是在引導頁中展現，可以很直覺的告知使用者如何操作及産品目前的狀态回報。

最後還可以在登入頁、空狀态頁作為裝飾元素出現。

産品展現形式在控制界面及引導頁面要盡可能展示産品目前場景下的樣子。

例如：在調節角度界面，用俯視圖可以更加直覺展現旋轉角度的狀态。

在房屋界面，由于隻需要展現裝置狀态，是以用45度視角盡可能展現産品獨特的造型細節。

在登入頁使用産品線框圖作為裝飾元素，減少對文本内容的幹擾。

9. 戴森空氣淨化器控制界面樣式

首頁上空氣淨化器選取常用的功能作為快速入口，并且使用圓、圓角矩形作為按鍵外框，我們看它的實體遙控器、産品造型，就知道為什麼要用這2種形态了，這樣可以延續戴森的産品特征，使得整體品牌更具辨識度，達到強化品牌滲透的目的。

右下角為裝置控制詳情入口，通過使用不透明白底與快捷功能鍵作出區分，還能保持整體性，品質感。

10. 空氣淨化器控制詳情頁

控制詳情頁放置産品實物圖，可以直覺展示産品狀态，功能圖示前期做了區分歸類，保證每一行的圖示尺寸一緻的同時確定它們之間的相關性。角度設定界面，産品使用俯視圖，可以直覺展示角度資訊。

11. 空氣淨化器操控手勢

1) 體驗層

對于使用者常用的操作使用滑動手勢，例如：風量，長按上下滑動可以很友善設定等級，松手傳回确認，風量按鈕可以顯示風量等級條，使用者不僅可以通過數字了解風量等級，還可以通過進度條更直覺感覺風量大小。

12. 快捷鍵功能權限定義

從畫面中可以看出，同樣的風向設定按鈕，在首頁，點選後隻能進行開啟、關閉風向；進入控制詳情頁，則可以設定具體的角度值；保證在不同場景下即可以快速便捷控制裝置，也可以精确控制裝置。

13. 戴森掃地機控制界面

最左邊的控制界面是最早的版本，隻有啟動或停止機器的功能，使用帶角度的視角來展示機器與場景，并且機器是可以進行移動擦除動畫，展現運作中的狀态，這種方式比較耗費開發時間。

中間的界面是過渡版本，較上一個版本做了優化，采用正視圖，并且增加了運作強度、運作區域、定時功能，底部的地闆元素漸變處理減少了畫面對功能入口的幹擾，既能展現場景，還更加易用。

最右邊界面為最新版本，放大了産品，減少了不必要的視覺元素，弱化了地闆背景；充電圖示和裝置狀态放置頂部，與功能區做區分；運作強度選項由展開變成收起，估計這個功能使用頻率較低；運作區域、定時功能的圖示做了優化，更加貼切。視覺和功能得到了完美的平衡。

14. 戴森燈光控制界面

15. 戴森燈光場景功能

右下角為場景選擇，可以選擇系統自帶的燈光使用場景，例如：讀書模式、休閑模式，也可以自定義，可以友善快速設定光線。

二、總結

通過對戴森App的分析，我們了解到了可以通過拟物或者将功能控制區與實物結合的方式，提升使用者操控體驗及産品品牌辨識度；對于硬體産品App，要盡可能保持與實物的一緻性，突出産品特征，包括按鈕形狀、色彩；還有就是可以學習到戴森為了平衡使用者與品牌方的需求，在視覺層面、互動層面的細微改動下的思考方式。

本文由 @木土君 原創釋出于人人都是産品經理。未經許可，禁止轉載。

題圖來自Unsplash，基于CC0協定。