百度智能小程序-長隆 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 掃描下圖二維碼進行體驗。
來源：百度智能小程序
