百度智能小程序 長(zhǎng)隆AR動(dòng)物園

長(zhǎng)隆 AR 動(dòng)物園

“長(zhǎng)隆 AR 動(dòng)物園”是一款動(dòng)物園游覽與動(dòng)物科普相結(jié)合的智能小程序。運(yùn)用百度的 AR 技術(shù)還原動(dòng)物模型，用戶在虛擬的三維環(huán)境中給動(dòng)物喂食，與動(dòng)物互動(dòng)，形成看、聽(tīng)、玩一體的科普?qǐng)鼍?。讓用戶通過(guò)逼真的互動(dòng)體驗(yàn)獲取多維認(rèn)知，在娛樂(lè)中學(xué)習(xí)科普知識(shí)。

本文將從信息架構(gòu)、交互流程、色彩系統(tǒng)、LOGO 設(shè)計(jì)、動(dòng)效設(shè)計(jì) 5 個(gè)層面介紹這款智能小程序的設(shè)計(jì)過(guò)程。

信息架構(gòu)

多維度匹配用戶訴求

長(zhǎng)隆 AR 動(dòng)物園的產(chǎn)品目標(biāo)是讓用戶體驗(yàn)小程序的 AR 能力，主要功能為：AR 識(shí)圖、AR 虛擬現(xiàn)實(shí)、AR 導(dǎo)航。因此，操作流程的設(shè)計(jì)需要結(jié)合游覽動(dòng)物園的真實(shí)場(chǎng)景，讓用戶從看、找、逛 3 種維度體驗(yàn)智能小程序的 AR 能力。

1. [看] 通過(guò)動(dòng)物科普+虛擬現(xiàn)實(shí)能力還原動(dòng)物模型，對(duì)動(dòng)物產(chǎn)生立體認(rèn)知，吸引用戶去園區(qū)看真實(shí)的動(dòng)物
2. [找] 使用地圖的 AR 導(dǎo)航能力鏈接線上/線下科普?qǐng)鼍?，最終通過(guò) AR 虛擬現(xiàn)實(shí)能力了解動(dòng)物，虛擬互動(dòng)
3. [逛] 通過(guò)園區(qū)科普展板，使用 AR 識(shí)圖+虛擬現(xiàn)實(shí)能力與動(dòng)物輕松互動(dòng)，強(qiáng)化認(rèn)知

場(chǎng)景示例：查看動(dòng)物（1）-> 查看地圖（2） -> 觀賞動(dòng)物（3）

體驗(yàn)維度結(jié)構(gòu)圖

選擇合適的信息架構(gòu)

為了更好的將產(chǎn)品目標(biāo)與用戶的訴求維度匹配，對(duì)長(zhǎng)隆 AR 動(dòng)物園的核心內(nèi)容進(jìn)行 3 個(gè)維度的劃分：

1.  [看] AR 動(dòng)物集合，為方便用戶快速瀏覽和體驗(yàn)，將動(dòng)物集合設(shè)置在首頁(yè)
2.  [找] 園區(qū) AR 地圖，查看地圖屬于用戶主動(dòng)觸發(fā)需求，放在第二 tab
3.  [逛] AR 智能相機(jī)，作為小程序特色功能放置在 TAB 中間位置以強(qiáng)化展示

小程序要同時(shí)滿足不同維度的用戶訴求，功能入口需為并列關(guān)系。因此小程序信息架構(gòu)采用“底 TAB + 流式布局”的倒 T 型結(jié)構(gòu)，方便用戶能夠在不同訴求間切換，快速體驗(yàn)智能小程序的 AR 能力。

1.T字形架構(gòu)； 2.長(zhǎng)隆AR動(dòng)物園。

使用流程

鋪設(shè)流暢的使用流程

“長(zhǎng)隆 AR 動(dòng)物園”是一款動(dòng)物園游覽與動(dòng)物科普相結(jié)合的智能小程序，讓用戶在游玩過(guò)程中獲取科普知識(shí)。因此，要以科普為中轉(zhuǎn)場(chǎng)景進(jìn)行使用流程設(shè)計(jì)，讓用戶在看、找、逛多維度下都能輕松進(jìn)入科普?qǐng)鼍埃ň€上/線下），再通過(guò)小程序的 AR 能力虛擬現(xiàn)實(shí)，獲取多維科普認(rèn)知。

1. 動(dòng)物科普（動(dòng)物詳情頁(yè)）路徑；2. 線下科普（園區(qū)展板）路徑。

使用合適的基礎(chǔ)組件

AR 科普（動(dòng)物詳情）頁(yè)使用 scroll-view 組件的橫向滑動(dòng)屬性，無(wú)需反復(fù)退出/進(jìn)入動(dòng)物詳情頁(yè)，通過(guò)左右滑動(dòng)即可快速切換動(dòng)物頁(yè)面來(lái)獲取更多動(dòng)物的相關(guān)科普，縮短用戶操作路徑。

1. 快速切換動(dòng)物頁(yè)面；2. 動(dòng)物頁(yè)面效果圖。

地圖頁(yè)使用 view 組件的縮放及跟手屬性，結(jié)合切片和分層加載技術(shù)，實(shí)現(xiàn)靜態(tài)園區(qū)圖片能夠跟隨手勢(shì)展示不同容量信息的交互能力。

1. 圖片切割；2. 左：信息聚合態(tài)，右：信息展開(kāi)態(tài)。

顏色系統(tǒng)

視覺(jué)風(fēng)格定位

長(zhǎng)隆 AR 動(dòng)物園是一款寓教于樂(lè)的小程序，目標(biāo)用戶是低齡的兒童人群 & 親子人群，在設(shè)計(jì)中需要遵循用戶的思維，參考真實(shí)動(dòng)物園世界中用戶的行為和需求。設(shè)計(jì)風(fēng)格上能讓用戶有親近自然，得到科普，放松身心的感受。

長(zhǎng)隆動(dòng)物園實(shí)景圖

結(jié)合風(fēng)格的推導(dǎo)分析，將長(zhǎng)隆 AR 動(dòng)物園的視覺(jué)風(fēng)格確定為以綠色為主色系的“清新自然叢林“風(fēng)格。

清新自然叢林風(fēng)格的定位

色彩系統(tǒng)運(yùn)用

長(zhǎng)隆動(dòng)物園首頁(yè)共有 30 張動(dòng)物卡片，設(shè)計(jì)師希望每張卡片代表一種動(dòng)物，讓每個(gè)動(dòng)物有其獨(dú)特的性格色彩。同時(shí)，考慮到頁(yè)面色彩的統(tǒng)一性，我們建立了色環(huán)，選取同一色彩明度、飽和度的色環(huán)范圍。運(yùn)用了視覺(jué)設(shè)計(jì)中的對(duì)比、親密性原則，使用豐富且規(guī)律的色彩，讓頁(yè)面更加生動(dòng)有趣。

AR動(dòng)物的色彩運(yùn)用

打造有識(shí)別度的 LOGO

小程序設(shè)計(jì) Logo 時(shí)，注意長(zhǎng)隆動(dòng)物園 LOGO 需要在智能小程序圓形輪廓展現(xiàn)，設(shè)計(jì)切圖時(shí)按照?qǐng)A形參考線，預(yù)留固定的出血量以確保 LOGO 的可識(shí)別性。

1. 設(shè)計(jì)建議：主體元素能占整體頭像尺寸 70% 以上，且主要元素處于圓形參考線內(nèi)；

2. 輸出頭像：144x144px 的正方形圖片，文件大小不大于 120kb；

3. 前端展現(xiàn)效果：能在圓形輪廓中展現(xiàn)完全。

情感化的亮點(diǎn)設(shè)計(jì)

帶呼吸動(dòng)效的 AR 入口

AR 入口根據(jù)動(dòng)物的圖片特點(diǎn)動(dòng)態(tài)變化，設(shè)計(jì)情感化的呼吸動(dòng)效，增強(qiáng)了按鈕的代入感和互動(dòng)性。

呼吸動(dòng)效示例（溫馨提示：如果你的瀏覽器無(wú)法正常播放，請(qǐng)換用Chrome瀏覽器。）

總結(jié)

以上是智能小程序“長(zhǎng)隆 AR 動(dòng)物園”的設(shè)計(jì)思考，更多細(xì)節(jié)設(shè)計(jì)可使用百度 APP 掃描下圖二維碼進(jìn)行體驗(yàn)。