王哲 田曉帆 朱長永 張琳

【摘要】基于地域文化特征的APP交互項目研究開發(fā)，通過“狼山旅游景區(qū)”這個APP能夠快速實現(xiàn)旅客對南通本地某個景點有一定的相關(guān)了解，幫助旅客不至于盲目的無目的的游玩。此APP主要是針對外來旅客，不能在南通停留很長時間，能夠及時幫助旅客了解南通本地有特色的文化，南通作為一個長三角旅游城市，能吸引更多的旅客游玩。

【關(guān)鍵詞】APP;交互;狼山旅游景區(qū);特色

一、總體流程框架圖

用戶登陸注冊模塊

（1）直接注冊進(jìn)行您的用戶自動注冊：您的用戶通過直接注冊進(jìn)入登錄APP您的用戶自動登錄注冊界面直接登錄進(jìn)入您的用戶自動登錄注冊功能在該界面直接登入進(jìn)行您的用戶自動注冊，填寫正確的用戶個人信息，提交您的用戶自動注冊驗證數(shù)據(jù)，系統(tǒng)將自動會對您進(jìn)行自動注冊驗證，審核您的自動用戶注冊驗證是否通過，成為新登錄用戶。

（2）個人信息：每位注冊成功的用戶可對自己所在城市、錢包、用戶名、密碼等個人信息進(jìn)行查看操作。

（3）其他方式：每位未注冊的用戶可以通過自己已有的微信，QQ或者微博通過第三方登陸方式無需注冊直接登陸。

二、關(guān)鍵技術(shù)分析

（1）畫板設(shè)計

在XD對畫板進(jìn)行整體一個大框架的設(shè)計，從起始頁開始設(shè)計，登陸，注冊等許多界面，根據(jù)手機(jī)APP中相應(yīng)的要求進(jìn)行相對應(yīng)的設(shè)計，狀態(tài)欄，項目欄等許多欄目，進(jìn)行一一規(guī)劃。在PS中制作相應(yīng)的圖標(biāo)保存為png格式，導(dǎo)入到XD中放到相應(yīng)的位置。

動用XD中的矩形選框工具，橢圓圓角工具，文本框工具，設(shè)計大框架頁面，導(dǎo)入圖片，XD蒙版效果對圖片進(jìn)行遮罩，適應(yīng)相應(yīng)的模塊大小，添加陰影，顏色漸變等效果讓界面呈現(xiàn)一定的3D效果圖，參照一定的APP模式，制作出其中的顯示欄，圖標(biāo)欄。界面中在相應(yīng)的角落擺放狼山旅游景區(qū)的logo標(biāo)志，已做設(shè)計宣傳。如圖4-2。

（2）交互原型

借助XD自帶的交互原型，使用交互動畫，將所有的畫板一一通過交互線連接，使其進(jìn)行相應(yīng)畫板間的跳轉(zhuǎn)。對交互線的連接進(jìn)行設(shè)置，添加交互效果，使用觸發(fā)中的四個效果鍵（點擊、拖移、按鍵和游戲手柄、語音）對畫板進(jìn)行跳轉(zhuǎn)操作，在操作中選擇過度類型讓其過渡到下一個畫板，使用過渡效果（溶解、左滑、右滑、上滑、下滑、向左推出、向右推出）對不同的頁面跳轉(zhuǎn)進(jìn)行添加，豐富交互動畫。添加音頻文件對其頁面添加相應(yīng)的音樂。

（3）懸停效果

XD中可以通過組件和交互實現(xiàn)相對應(yīng)的按鈕懸停，對按鈕進(jìn)行打組，添加組件，選擇懸停狀態(tài)，雙擊進(jìn)入按鈕，將按鈕上移一小段距離，添加陰影，使用交互線，點擊效果，操作中選擇平停狀態(tài)，對其操作進(jìn)行過渡到懸停狀態(tài)。此效果可以實現(xiàn)首頁面的倒數(shù)計時效果，按鈕懸停狀態(tài)，小游戲五子棋的制作等。當(dāng)鼠標(biāo)觸手“開始游戲”按鈕時，按鈕會向上移動，并且底部出現(xiàn)投影，有3D立體按鈕，懸停在上方的體積效果。

（4）語音原型

項目制作中有些景點的歷史文化需要語音介紹，通過XD中的語音交互可以對頁面實現(xiàn)語音介紹操作。在頁面中點擊喇叭，喇叭中會播放一段中英文景點介紹。

語音交互且分兩種方式，其一是通過聲音的傳遞，原型接收相應(yīng)的聲音指令實現(xiàn)下一步的界面跳轉(zhuǎn)，亦或是收到指令播放其中的語音文字;其二是通過點擊觸發(fā)語音原型，讓原型按照指定的語音留言，用自帶的人聲播放相應(yīng)的內(nèi)容，該方式可用于語音景點介紹，用戶可以通過點擊觸發(fā)原型介紹相應(yīng)的景點文化特色，亦或是了解路線地圖。該功能大大便捷了用戶體驗，無需動手便能了解喜歡景點的相關(guān)內(nèi)容。

通過介紹項目的背景和開發(fā)需求展開，規(guī)劃項目設(shè)計的總體流程并繪制出總體流程框架圖，理清項目中所運用的關(guān)鍵技術(shù)和設(shè)計思路，為系統(tǒng)設(shè)計做一個良好的開端。

三、界面設(shè)計分析

（1）PS技術(shù)繪制圖標(biāo)

使用PS中的鋼筆工具，通過畫線的方式描摹出想要的圖標(biāo)（向左，向右等）的形狀，完工之后對其添加顏色，以便與相對應(yīng)的界面相融。

對于復(fù)雜的圖標(biāo)，可以使用線性疊加的方式，制作出其中一半的形狀，復(fù)制其之后將其旋轉(zhuǎn)或是對稱，再與之前的重復(fù)或者疊加，添加模糊效果，制作完后對其添加投影形狀，增強(qiáng)圖標(biāo)的3D視覺性，亦或是使用漸變疊加，疊加顏色，豐富圖標(biāo)的多樣性，對其添加外發(fā)光內(nèi)發(fā)光，調(diào)整陰暗效果，導(dǎo)出png格式。

起始頁：3張起始頁，從3秒跳到1秒時所展示的設(shè)計界面。

設(shè)計思路：當(dāng)今現(xiàn)狀，大多數(shù)APP中的起始頁都會出現(xiàn)這樣的效果，頁面倒計時跳轉(zhuǎn)，從3往1過渡最終過渡到登錄頁。為了和旅游這個話題相符，選取一些高清的旅游圖片，又為能夠使得狼山旅游景區(qū)這個APP得到宣傳，所以在最后的底部小半部分掛上該APP的logo。

關(guān)鍵步驟：定時過渡，選擇畫板3，點擊過渡選擇時間，設(shè)計延遲1秒，動作選擇過渡效果，連接到畫板2，以同樣的方法，選擇畫板2過渡到畫板1，在從畫板1過渡到登錄頁。

主要過程：正常手機(jī)APP的顯示欄，用矩形選框制作出信號，和WIFI圖標(biāo)，附加文字時間，將其居中，導(dǎo)入制作好的藍(lán)牙圖標(biāo)將其居右，繪制橢圓形，填充顏色灰色，導(dǎo)入圖片，XD蒙版繪制一個矩形，Ctrl+Shift+M對圖片進(jìn)行蒙版，調(diào)整到相應(yīng)的大小，導(dǎo)入狼山旅游景區(qū)的logo圖標(biāo)，“狼”底部繪制一個矩形填充顏色漸變，正片疊底放入最底層，繪制橢圓，附加“跳過1”文字，對當(dāng)前橢圓添加原型點擊交互，點擊可以使頁面跳轉(zhuǎn)至登錄頁，在原型界面點擊該橢圓，附加點擊跳轉(zhuǎn)，選擇溶解效果，間隔選擇1秒，并且連接到登錄頁的畫板，返回設(shè)計頁面，底部附上狼山旅游景區(qū)名稱。

登錄頁：起始頁完了后緊接登錄注冊頁面。

設(shè)計思路：登錄方式有兩種，驗證碼登錄和輸入密碼登錄，這兩種登錄都是通過點擊到首頁面的，另外可以通過語音讓其跳轉(zhuǎn)到首頁面，為了區(qū)分這兩種登錄方式，將輸入密碼登錄的背景圖添加模糊效果。

關(guān)鍵步驟：點擊賬號登錄這個按鈕，對其添加交互效果，點擊過渡到賬號登錄頁，效果選擇溶解，對輸入手機(jī)號那個按鈕添加疊加效果，將小鍵盤疊加到頁面，可以實現(xiàn)輸入方式的效果。對登錄添加點擊交互，讓登錄頁跳轉(zhuǎn)到首頁。

主要過程：在畫板中以起始頁為例，用同樣的方法做出頂部顯示欄標(biāo)識，導(dǎo)入圖片與相關(guān)的圖標(biāo)，將圖標(biāo)放入相應(yīng)的地方，添加文本文字，制作按鈕圖標(biāo)，選擇矩形框，畫出矩形，調(diào)整圓角，讓矩形變?yōu)闄E圓按鈕形狀，附加文本內(nèi)容，調(diào)整不透明度，以示區(qū)分，添加QQ、微信、微博圖標(biāo)，調(diào)整好指定位置，在最底部附加狼山旅游景區(qū)文字。

旅游景點頁是旅行APP的重點，旅游APP主要就是圍繞這四個大點而展開的，每個界面的設(shè)計都以旅游景點為背景，以每個景區(qū)的圖片蒙版作為點擊按鈕而進(jìn)入其界面，頂部除了顯示欄之外都做了其相對應(yīng)的圖標(biāo)，以示頁面介紹，接著是搜索欄方便其搜索別的特色景點，中間放置重心景點頭像按鈕，底部做其中一個景點游覽信息。制作四個大點的相關(guān)圖標(biāo)，在PS中將圖片濾鏡，曝光度調(diào)整，亮度提亮，導(dǎo)入XD中，圓形框蒙版將圖片蒙版為頭像形狀方便設(shè)置按鈕，對頭像按鈕添加點擊原型，效果選擇溶解，間隔時間為0秒，以便點擊即可立即跳轉(zhuǎn)至其中的景點詳情頁面。在PS中，線狀工具和鋼筆工具繪制圖標(biāo)外形，Ctrl+V復(fù)制外形反向，添加效果，選擇投影加深，顏色漸變效果，導(dǎo)出png格式，導(dǎo)入XD中調(diào)整尺寸大小，放到相應(yīng)的位置，導(dǎo)入圖片，圓形框蒙版圖片，調(diào)整圖片之間的間隔保持均勻分布，添加文本框，調(diào)整文字大小，導(dǎo)入標(biāo)題欄放置最下，固定滾動位置，將景點圖片分別居左和居右，添加相關(guān)詩句。對所有的景點實施點擊原型跳轉(zhuǎn)，添加交互，選擇點擊交互方式，效果設(shè)置為溶解，狀態(tài)選擇下一個畫板，間隔為0秒，再次選擇交互，添加音頻文件，給所有的游樂景點添加背景音樂，豐富原型界面。

通過本次狼山旅游景區(qū)項目設(shè)計研究，對于如何實現(xiàn)一個APP原型的制作，如何從前期，中期，到后期的收尾，簡單的實現(xiàn)一個小程序，而且XD中制作出來的原型還可以供自己調(diào)用，是個很全面的APP原型，并且簡單易懂。只需輕輕單擊一下，即可將所有的靜態(tài)設(shè)計線框都切換為交互式的原型。對設(shè)計做出了更改，然后交互式的原型便隨機(jī)會自動更新，無需手動進(jìn)行同步。在Roios和Roandroid設(shè)備上我們預(yù)覽了帶有過渡效果的交互式原型，然后與團(tuán)隊共享，快速征集反饋。

參考文獻(xiàn)：

[1]徐洪偉，石卉.探究旅游類APP分析與交互設(shè)計要點[J].智庫時代，2019（35）：278-279.

[2]卜陽.開封旅游APP界面的本土文化設(shè)計探討[J].開封：開封大學(xué)學(xué)報，2019，33（01）：83-85.

[3]張潤龍，羅輝.旅游APP啟動界面設(shè)計[J].湖北：湖北第二師范學(xué)院學(xué)報，2019，36（02）：109.

依托于基金項目：南通市科技項目《基于移動端的狼山旅游景區(qū)APP應(yīng)用程序設(shè)計與開發(fā)研究》編號：JCZ20152。

作者簡介：王哲（1992.03）女，漢族，山東淄博人，南通理工學(xué)院講師，碩士學(xué)位，專業(yè)：美術(shù)學(xué)，研究方向：中國畫、數(shù)字媒體。