一、寫在前面

美的美居APP UI升級改造煥「新」來襲，將帶來瞭新的視覺體驗。

首先我們對產品整體設計進行瞭全流程體驗梳理，從競品對比、用戶反饋、體驗評價以及UI趨勢等系統性去思考，同時結合企業產品自身特性進行設計體驗升級，以用戶體驗為核心，打造更智能更有溫度的智能傢居產品體驗。

https://www.zhihu.com/video/1490722228467146752

二、明確設計目標

隨著產品功能與內容品類的豐富，APP在不斷調整與整合的過程中，我們發現目前產品在情感化設計上的體驗缺乏，信息內容與用戶關聯性不高，自定義與可玩性表現較弱，在愉悅性方面缺乏動效設計輔助以及在品牌的意識上和感染力也不夠。

在這次美的美居升級改版開展的設計工作坊裡，我們先對現狀問題分析討論，結合設計主流趨勢研究，再組織小組成員進行新版設計腦暴，整個過程從發散到收斂，最終提煉出「趣味、高效、簡約」三個最核心的關鍵詞，再以“視覺”“心境”“物化”三個維度進行聯想，為後續設計提供重要的鋪墊。

在趣味性上我們希望把主題形象比擬用戶生活場景隨日光幻變，通過智能提示及問候語加強APP情感化設計，其次在效率上需要明確組件交互屬性，以功能優先級調整結構以達到用戶對關鍵數據一觸即達目標，最後要減少首頁多餘信息幹擾，保持對關鍵信息的獲取和功能的使用達到效率最大化。

該圖片來源網絡，如有版權請聯系刪除

三、系統模塊化思考設計

新版整體設計基調延續微光漸變插畫UI風格，在保持時間幻變概念上提供用戶角色主題選擇增強用戶情感共鳴，場景圖標采用主流輕質感的玻璃擬態設計，卡片細節元素設計更加圓潤，並加入微動效果提升畫面友好度及愉悅性，通過用戶界面各個維度設計的底層邏輯分析，把每個模塊的細節做瞭更系統化的思考。

1、色彩應用

首先顏色是用戶感知界面內容及產品特性的直觀方式和媒介，運用合理且和諧的顏色搭配能夠提高界面的可用性，為我們的界面帶來統一且可識別的一致性，提升用戶體驗和感知。

品牌主色：在主色彩的選擇上，我們經過多輪嘗試和討論後，決定延續美的美居品牌色科技藍，藍色的色彩含義為“理性”“沉穩”，不會過於張揚，其次美居APP是一款偏生活服務和工具類的軟件，產品調性應是簡潔明快的，不宜讓過多色彩覺效果喧賓奪主。在做產品的整體視覺設計時，需避免大面積使用過於強烈和厚重的輔助色彩，因此在後續的功能界面和應用插件設計拓展中盡量減少對於顏色的依賴，減少幹擾用戶的裝飾性元素，讓用戶專註於信息內容的本身。

輔助顏色：輔助色是基於色輪配色表制定，以標準色#267AFF（H 38 S 122 B 255) 為起始點，S（飽和度）、B（明度）保持不變，H（色相）以210°為起點，以15°為增量或減量標準生成 24 色色板，再結合產品自身特性，提煉出一套美居色系，包含 12 種色彩。最後為瞭讓不同色相看起來更加協調，需要校正色板的明度和飽和度，以保證視覺感觀體驗同頻且更加和諧舒適。

色彩衍生：考慮到不同色彩在自然光下的變化規律，結合產品在實際使用場景中需求，我們在保持統一的色系上對 12 種基礎顏色進行瞭衍生形成色板，包含 120 種不同明亮度的色彩。

另外在日常生活中有一個占比較小的人群就是視覺辨認障礙人群，即我們常說的“色盲(Color Blindness)”。那麼需要思考在設計工作中如何保證所有用戶在視覺上的良好體驗，消除色盲人群在色彩感知上的偏差，保障產品的可用性和易用性，色盲有很多種類型，比如看不清楚顏色，混淆顏色，或者無法區分某些顏色等。

同時在無障礙色彩的組合搭配上需要考慮視覺辨認障礙人群難以或無法通過色彩去區分，因此則需要通過不同的色相明度或深淺去做不同狀態的區分。針對無障礙色彩中我們還定義三種或多種色彩的組合搭配使用，同時列舉在紅綠色盲情況下哪些色彩是避免組合使用。

2、主頁佈局

整體佈局上，界面要求清晰簡明，同時要在一屏內呈現更多的核心信息，目的是提升信息瀏覽和操作效率以及增強互動，讓首頁從純展示的頁面變成一個與用戶有互動，方便用戶快捷控制設備及場景且有情感化的界面。新版規劃瞭機器人語音概念設計入口、傢庭環境信息卡片的占比要減少，信息需要更加聚焦。我們根據用戶偏好全方位優化展示邏輯，當用戶在沒有添加設地備情況下將推薦相關內容，秉承以用戶為中心的智能推薦體系，以細分用戶群體的需求為導向，整合組織內容維度，為不同需求用戶量身定制個性化場景內容，從而提升用戶體驗。

首頁“+”號圍繞用戶習慣對功能進行區分，一方面讓用戶能夠明確有目的選擇功能，另一方面也會方便功能拓展，如增加“創建場景”入口。

添加設備：跳轉到掃碼添加設備頁面；創建場景：跳轉到設置場景頁面，設置手動或自動場景；掃一掃：支持所有掃碼功能，新增食材識別等功能且可擴展；邀請傢人：直接跳轉到邀請傢人界面，減少鏈路，方便用戶操作；

3、設備卡片

對設備卡片輪廓的圓潤度、透明度、投影等我們進行瞭細節上優化和調整，整體感受更加圓潤提升產品的友好感，而在卡片與卡片之間增大瞭間距，使用戶在閱讀卡片信息時更加清晰明確，同時在功能規劃上目前大部分設備已提供瞭核心功能及狀態信息，可直接操控，關鍵狀態信息能直觀呈現，使得用戶可以更快更方便的進行操控及查看設備現狀信息。

4、圖標設計

新版我們還對場景圖標進行設計重構，結合目前主流設計趨勢，引入毛玻璃擬態風格來表現，其次在底部Bar圖標中，對圖標的一致性細節反復打磨，包括圖標在動畫效出場和消失也力求保持一致，希望在整體視覺呈現上提升設計品質。

5、動效細節

動效方面主要對主頁的設備開關卡片、場景執行卡片增加微動表達，輕量的動效設計，能讓用戶感受到真實而友好的反饋感知，而在頂部的小藍機器人則根據用戶傢庭實際使用情況提供貼心提示語及更多智能生活內容指引，同時我們還加入節日氛圍微動效等，提升畫面愉悅度。

設備開關效果場景執行效果智能提示效果氛圍微動效

6、品牌元素

主頁傢庭信息卡片默認使用IP形象設計，進一步體現通過設計體驗提升企業價值，更有效幫助用戶提高對企業的感知，同時在背景氛圍提供自定義選擇設計，未來將拓展更多元主題設計，也希望通過設計的表現提升情感的表達同時提升用戶對品牌的認知。

角色設計第一版到最終版調整主要從，體型、發型、五官細節、服裝、造型、配色、材質質感、光源、透視等進行瞭一系列的細節調整與改進。

四、傾聽用戶聲音

通過用戶調研後發現，在本次改版已有一定的體驗提升，用戶在反饋中提到瞭升級後的背景氛圍圖像朝霞、像夕陽，好看，同時反饋中說到去掉瞭廣告位Banner，整體簡潔易讀，視覺上也較為舒適幹凈，還有語音機器人也受到部分用戶歡迎，認為語音功能增加控制的便捷性等等。

五、結語

從前期競品分析、現狀及趨勢分析、概念方案設計、用戶驗證，再到解決後期研發中出現的實際問題，每一步都經過團隊每一位成員細心和耐心的打磨，最終呈現出的全新的美居APP UI體驗升級，目前也在各渠道收集用戶反饋，繼續提升APP體驗。希望真正成為每一位智能用戶愛好者及傢庭的智能產品，讓每一位用戶的智能傢居生活更加便捷。