狼山旅游景區(qū)交互原型項目設(shè)計研究

王哲 田曉帆 朱長永 張琳

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

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

一、總體流程框架圖

用戶登陸注冊模塊

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

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

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

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

（1）畫板設(shè)計

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

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

（2）交互原型

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

（3）懸停效果

XD中可以通過組件和交互實現(xiàn)相對應(yīng)的按鈕懸停，對按鈕進行打組，添加組件，選擇懸停狀態(tài)，雙擊進入按鈕，將按鈕上移一小段距離，添加陰影，使用交互線，點擊效果，操作中選擇平停狀態(tài)，對其操作進行過渡到懸停狀態(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ù)或者疊加，添加模糊效果，制作完后對其添加投影形狀，增強圖標(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過渡到登錄頁。

主要過程：正常手機APP的顯示欄，用矩形選框制作出信號，和WIFI圖標(biāo)，附加文字時間，將其居中，導(dǎo)入制作好的藍牙圖標(biāo)將其居右，繪制橢圓形，填充顏色灰色，導(dǎo)入圖片，XD蒙版繪制一個矩形，Ctrl+Shift+M對圖片進行蒙版，調(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)鍵步驟：點擊賬號登錄這個按鈕，對其添加交互效果，點擊過渡到賬號登錄頁，效果選擇溶解，對輸入手機號那個按鈕添加疊加效果，將小鍵盤疊加到頁面，可以實現(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ū)的圖片蒙版作為點擊按鈕而進入其界面，頂部除了顯示欄之外都做了其相對應(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è)計做出了更改，然后交互式的原型便隨機會自動更新，無需手動進行同步。在Roios和Roandroid設(shè)備上我們預(yù)覽了帶有過渡效果的交互式原型，然后與團隊共享，快速征集反饋。

參考文獻：

[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ù)字媒體。