百度智能小程序-長隆 AR 動物園
長隆 AR 動物園”是一款動物園游覽與動物科普相結合的智能小程序。運用百度的 AR 技術還原動物模型,用戶在虛擬的三維環境中給動物喂食,與動物互動,形成看、聽、玩一體的科普場景。讓用戶通過逼真的互動體驗獲取多維認知,在娛樂中學習科普知識。
本文將從信息架構、交互流程、色彩系統、LOGO 設計、動效設計 5 個層面介紹這款智能小程序的設計過程。
信息架構
多維度匹配用戶訴求
長隆 AR 動物園的產品目標是讓用戶體驗小程序的 AR 能力,主要功能為:AR 識圖、AR 虛擬現實、AR 導航。因此,操作流程的設計需要結合游覽動物園的真實場景,讓用戶從看、找、逛 3 種維度體驗智能小程序的 AR 能力。
1. [看] 通過動物科普+虛擬現實能力還原動物模型,對動物產生立體認知,吸引用戶去園區看真實的動物
2. [找] 使用地圖的 AR 導航能力鏈接線上/線下科普場景,最終通過 AR 虛擬現實能力了解動物,虛擬互動
3. [逛] 通過園區科普展板,使用 AR 識圖+虛擬現實能力與動物輕松互動,強化認知
場景示例:查看動物(1)-> 查看地圖(2) -> 觀賞動物(3)
體驗維度結構圖
選擇合適的信息架構
為了更好的將產品目標與用戶的訴求維度匹配,對長隆 AR 動物園的核心內容進行 3 個維度的劃分:
1. [看] AR 動物集合,為方便用戶快速瀏覽和體驗,將動物集合設置在首頁
2. [找] 園區 AR 地圖,查看地圖屬于用戶主動觸發需求,放在第二 tab
3. [逛] AR 智能相機,作為小程序特色功能放置在 TAB 中間位置以強化展示
小程序要同時滿足不同維度的用戶訴求,功能入口需為并列關系。因此小程序信息架構采用“底 TAB + 流式布局”的倒 T 型結構,方便用戶能夠在不同訴求間切換,快速體驗智能小程序的 AR 能力。
1.T字形架構; 2.長隆AR動物園。
使用流程
鋪設流暢的使用流程
“長隆 AR 動物園”是一款動物園游覽與動物科普相結合的智能小程序,讓用戶在游玩過程中獲取科普知識。因此,要以科普為中轉場景進行使用流程設計,讓用戶在看、找、逛多維度下都能輕松進入科普場景(線上/線下),再通過小程序的 AR 能力虛擬現實,獲取多維科普認知。
1. 動物科普(動物詳情頁)路徑;
2. 線下科普(園區展板)路徑。
使用合適的基礎組件
AR 科普(動物詳情)頁使用 scroll-view 組件的橫向滑動屬性,無需反復退出/進入動物詳情頁,通過左右滑動即可快速切換動物頁面來獲取更多動物的相關科普,縮短用戶操作路徑。
1. 快速切換動物頁面;
2. 動物頁面效果圖。
地圖頁使用 view 組件的縮放及跟手屬性,結合切片和分層加載技術,實現靜態園區圖片能夠跟隨手勢展示不同容量信息的交互能力。
1. 圖片切割;
2. 左:信息聚合態,右:信息展開態。
顏色系統
視覺風格定位
長隆 AR 動物園是一款寓教于樂的小程序,目標用戶是低齡的兒童人群 & 親子人群,在設計中需要遵循用戶的思維,參考真實動物園世界中用戶的行為和需求。設計風格上能讓用戶有親近自然,得到科普,放松身心的感受。
長隆動物園實景圖
結合風格的推導分析,將長隆 AR 動物園的視覺風格確定為以綠色為主色系的“清新自然叢林“風格。
清新自然叢林風格的定位
色彩系統運用
長隆動物園首頁共有 30 張動物卡片,設計師希望每張卡片代表一種動物,讓每個動物有其獨特的性格色彩。同時,考慮到頁面色彩的統一性,我們建立了色環,選取同一色彩明度、飽和度的色環范圍。運用了視覺設計中的對比、親密性原則,使用豐富且規律的色彩,讓頁面更加生動有趣。
AR動物的色彩運用
打造有識別度的 LOGO
小程序設計 Logo 時,注意長隆動物園 LOGO 需要在智能小程序圓形輪廓展現,設計切圖時按照圓形參考線,預留固定的出血量以確保 LOGO 的可識別性。
1. 設計建議:主體元素能占整體頭像尺寸70%以上,且主要元素處于圓形參考線內;
2. 輸出頭像:144x144px的正方形圖片,文件大小不大于120kb;
3. 前端展現效果:能在圓形輪廓中展現完全。
情感化的亮點設計
帶呼吸動效的 AR 入口
AR 入口根據動物的圖片特點動態變化,設計情感化的呼吸動效,增強了按鈕的代入感和互動性。
呼吸動效示例(溫馨提示:如果你的瀏覽器無法正常播放,請換用Chrome瀏覽器。)
總結
以上是智能小程序“長隆 AR 動物園”的設計思考,更多細節設計可使用百度 App 掃描下圖二維碼進行體驗。
來源:百度智能小程序