王哲 田曉帆 朱長(zhǎng)永 張琳

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

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

一、總體流程框架圖

用戶登陸注冊(cè)模塊

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

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

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

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

（1）畫板設(shè)計(jì)

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

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

（2）交互原型

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

（3）懸停效果

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

（4）語音原型

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

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

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

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

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

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

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

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

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

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

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

登錄頁：起始頁完了后緊接登錄注冊(cè)頁面。

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

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

主要過程：在畫板中以起始頁為例，用同樣的方法做出頂部顯示欄標(biāo)識(shí)，導(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ū)文字。

旅游景點(diǎn)頁是旅行APP的重點(diǎn)，旅游APP主要就是圍繞這四個(gè)大點(diǎn)而展開的，每個(gè)界面的設(shè)計(jì)都以旅游景點(diǎn)為背景，以每個(gè)景區(qū)的圖片蒙版作為點(diǎn)擊按鈕而進(jìn)入其界面，頂部除了顯示欄之外都做了其相對(duì)應(yīng)的圖標(biāo)，以示頁面介紹，接著是搜索欄方便其搜索別的特色景點(diǎn)，中間放置重心景點(diǎn)頭像按鈕，底部做其中一個(gè)景點(diǎn)游覽信息。制作四個(gè)大點(diǎn)的相關(guān)圖標(biāo)，在PS中將圖片濾鏡，曝光度調(diào)整，亮度提亮，導(dǎo)入XD中，圓形框蒙版將圖片蒙版為頭像形狀方便設(shè)置按鈕，對(duì)頭像按鈕添加點(diǎn)擊原型，效果選擇溶解，間隔時(shí)間為0秒，以便點(diǎn)擊即可立即跳轉(zhuǎn)至其中的景點(diǎ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)題欄放置最下，固定滾動(dòng)位置，將景點(diǎn)圖片分別居左和居右，添加相關(guān)詩句。對(duì)所有的景點(diǎn)實(shí)施點(diǎn)擊原型跳轉(zhuǎn)，添加交互，選擇點(diǎn)擊交互方式，效果設(shè)置為溶解，狀態(tài)選擇下一個(gè)畫板，間隔為0秒，再次選擇交互，添加音頻文件，給所有的游樂景點(diǎn)添加背景音樂，豐富原型界面。

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

參考文獻(xiàn)：

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

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

[3]張潤(rùn)龍，羅輝.旅游APP啟動(dòng)界面設(shè)計(jì)[J].湖北：湖北第二師范學(xué)院學(xué)報(bào)，2019，36（02）：109.

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

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