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