商業產品較易給用戶產生一種“單純、冰冷的工具”感，需要使用戶與產品拉近距離；同時，考慮如何使用戶在操作過程中保證品牌植入的渾然一體，得到沉浸式體驗。本文以阿里媽媽APP為例，為您講解如何在商業產品中植入品牌概念和元素。

設計推導與過程

品牌植入app開展前的思考

商業產品較易給用戶產生一種“單純、冰冷的工具”感，需要使用戶與產品拉近距離；同時，考慮如何使用戶在操作過程中保證品牌植入的渾然一體，得到沉浸式體驗。

最終整理思路，定下“輕量、親切、專注”的品牌落地原則，開展設計。

• 輕量：在品牌透出的整體視覺上盡量避免過于厚重、繁復的設計，做到體驗輕量，減少用戶在操作時的心理負擔。
• 親切：在設計中更多地展現關懷感，避免為用戶帶來負面情緒
• 專注：避免為體現品牌的“存在”而設計。使品牌透出與商業工具完美結合、渾然一體，保證用戶的專注操作體驗

理順思路——吉祥物在產品中的落地原則

利用吉祥物元素，將阿里媽媽品牌在產品中滲透，以增添產品的親切感，使產品和使用者之間產生更多良性互動。

在開展設計之前，我們梳理了一份從“功能級別、品牌傳播、內容周期、技術預估 ”4個方向來定義的優先級表格，來逐一劃分在具體場景中出現的吉祥物應該遵循著何種程度的原則來展現；這樣不但能幫助設計師分清工作的優先度和工作量，也可使其從表格信息中就能判斷哪部分內容要去著重展現，哪部分的內容展現度較輕。

• 功能級別：產品中本身各個區塊的優先級
• 品牌傳播：不同場景下，品牌內容的透出度，及傳播效力
• 技術預估：預估的技術成本投入，在成本區間內進行相關方案的產出
• 內容周期：設計的內容是不是長期通用，需不需要根據版本迭代做變化

確定優先級——吉祥物在產品中的落地原則

具體的落地原則制定。

在四個方向中，以“品牌傳達力”為主要參考方向，將每個部分依次排好優先級，以供設計時方便考量該部分設計的重要程度、品牌透出程度。

基礎建設——吉祥物在產品中的優化設計

為使吉祥物在無線端展示時辨識度更高、產品的整體體驗更為流暢、品牌與產品的結合效果更佳，進行吉祥物在產品中呈現效果的優化設計。

通過草案嘗試，從“細節統一、視角拍平、輕量化”等方向著手，去保證產品整體的空間感一致。

基礎優化完成后，同時進行線性設計，為不同的展示場景作好全面考慮。

提起畫筆——嘗試多種可能性

與項目組同學進行細致的溝通討論，并結合之前已衡量完成的吉祥物落地原則后確定每一個場景的品牌透出程度。

結合場景的具體意義及功能進行腦暴，嘗試多種草圖設計，探索品牌形象透出的可能性和合理性。

在進行多次不同風格的場景和故事性嘗試后，確定使用“媽媽星球”作為串起各個業務線、故事性的主要元素，加強各個場景的聯系和延續性。

勿忘初心，深入設計

• 輕量視覺：空白界面、功能引導等過渡型場景下利用淡灰色線性圖形，來保證用戶在操作時體驗舒適、一致。
• 親切感官：大小袋鼠互動的溫馨畫面、柔和圓潤的細節體現，讓用戶感受到阿里媽媽的“關懷”理念。
• 專注體驗：功能引導、具體操作界面中，吉祥物的展現量減少，確保用戶在功能學習和使用中不受到干擾。

將設計置入真實場景——根據實際效果，微調與優化

完成各個場景的視覺設計后，將設計稿置入真實的手機界面中查看效果。

確認圖形的大小比例是否舒適、展現效果是否理想，并同步給項目組同學，討論待優化的細節；

以及學會同業務方一起思考，避免被限制于視覺美感的單維度。

動效推導與過程

動效設計思考

在依據“輕量、親切、專注”大的設計原則的同時，深入思考動效的設計準則根據品牌理念以及產品需求，最終定下了“流暢、柔和、適度”作為動效關鍵詞，拉近用戶和產品之間的距離

運動流暢

在動效實現過程中，不卡頓、不跳幀、不閃動為基本設計原則，如有卡頓，帶來的就是負向的體驗

節奏柔和

整體的加載體驗要符合阿里媽媽的品牌調性，不同的動效節奏會給用戶帶來不同的感受比如柔和的頻率會給人溫情、舒緩的體驗，同時加載過于急促，反而更容易讓用戶產生焦躁感同時，要確保整體動效節奏把握和用戶主觀感受上的一致統一。

適度設計

根據出現以及使用頻率，加載動效不建議使用過于復雜的動畫效果同時，越獨特的動畫，往往開發成本也就越高，所以在設計動畫效果時，要考量實現成本、平衡設備與方案，設計的最終目的是實現

設計展示

快速感知升級點——引導頁設計

引導頁設計經過幾版方案，最后確定使用吉祥物+升級功能界面的版本。

首先著重突出每個頁面展現的功能重點，并將其置入帶有故事感的場景中，同時保證視覺留白，讓用戶對于新功能升級快速感知、一目了然。

輕松學習——功能引導設計

利用統一的對話框、溫和到位的文字描述完成每一個功能介紹；并設計了吉祥物線性表情的組件作為可選使用元素，為功能引導增添親和力，令用戶第一時間感受阿里媽媽的品牌性格。

同時使用聚光燈效果突出被解釋部分，使功能引導設計達到“易讀”的效果，減少急性子人群的反感程度。

場景關聯——搜索為空 & 錯誤頁設計

相信沒有人會在操作中待見這樣的頁面，但是對于品牌體驗來說，這里恰恰是非常重要的場景。

為了能讓用戶在不舒適的場景中減少其產生的失落感，得到慰藉，這些場景中要避免消極情緒的設計方案（諸如哭鬧等）盡量使用輕松、幽默的風格來展現空白、錯誤頁面。

最終采取了阿袋媽拿著地圖各種找不到路的方案 —— 程序出了點小問題？搜不到想要的內容？不著急，我們換種別的思路再試試看~

正向引導——未建計劃 & 網絡出錯頁設計

同搜索為空、錯誤頁一樣道理。

未建計劃？試著打開薛定諤的阿袋媽，一切就會清晰明了；

網絡出錯？不用擔心，阿袋媽的宇宙穩定有序，不一會兒就會回到正軌：）

下拉加載

在符合“流暢、柔和、適度“三個設計原則的同時，我們設定了星球漫步的加載場景整體運動自然流暢，袋鼠跳躍符合自然運動規律，動作柔緩，后面的星球場景跟隨袋鼠跳躍，發生緩急變化，增強真實感

整體動效分為兩層，袋鼠循環跳躍及背景移動層，避免了動效過于復雜，開發成本過高的情況

宇航員加載動效設定時，我們希望可以設計的更為簡潔通過用戶的下拉回彈動作，以及背景層的勻速下落，完成宇航員勻速前行的動效效果整體運動與手勢結合，自然流暢，節奏頻率柔和，同時實現成本更低，減少開發負擔

星球加載動效，我們希望可以與手勢結合的更緊密在設定時，星球轉動的速率與手勢下拉的速率保持一致，放手回彈過程中同樣會有一個加速反饋，使動效節奏更加自然柔和同時與用戶建立小小的互動，建立用戶對于品牌的好感

全局加載

在全局加載動效設計過程中，考慮到出現頻率較多，不建議設計過于繁瑣的動畫效果整體視覺上輕量、簡潔，通過星球在軌道上的旋轉，給用戶流暢柔和的視覺體驗同時加強加載行為的操作感知，減少網速慢或者需要載入內容較多時等待過程中的焦慮感

還有更多的UED團隊將陸續展示給大家！

作者：阿里媽媽UED

來源：AlibabaGroupUED