APP界面的設(shè)計(jì)與實(shí)現(xiàn)

1、XXXX學(xué)院畢業(yè)設(shè)計(jì)報(bào)告設(shè)計(jì)題目“樂(lè)情旅”APP界面的設(shè)計(jì)與實(shí)現(xiàn)指導(dǎo)教師/職稱XXXXX作者姓名XXXXXXXXXXXXXXX學(xué)院教務(wù)處目錄摘要31緒言31.1項(xiàng)目界面設(shè)計(jì)基本要求31.2項(xiàng)目界面設(shè)計(jì)工具介紹41.3項(xiàng)目背景及意義42需求分析52.1用戶需求52.2功能需求63APP界面的設(shè)計(jì)63.1 APP功能界面介紹63.2 APP圖標(biāo)的設(shè)計(jì)73.3 APP界面的布局設(shè)計(jì)83.4 APP界面的實(shí)現(xiàn)93.4.1引導(dǎo)頁(yè)界面93.4.2 網(wǎng)絡(luò)加載界面93.4.3 登錄界面103.4.4 首頁(yè)界面103.4.5 分類界面103.4.6 目的地界面113.4.7 搶購(gòu)界面113.4.8 我的界面11

2、致謝12參考文獻(xiàn)12“樂(lè)情旅”APP界面的設(shè)計(jì)與實(shí)現(xiàn)摘要旅行是近幾年娛樂(lè)休閑的主要方式，而更加方便快捷的出行方式就是使用APP來(lái)獲取信息，網(wǎng)上訂票。更多的人將“世界那么大，我想去看看”掛在嘴邊，旅游散心一則放松自己在工作日中緊張的身心，二則鍛煉身體?；谶@種形勢(shì)，設(shè)計(jì)一款以旅行為主導(dǎo)的APP是現(xiàn)階段十分有必要的任務(wù)。樂(lè)情旅APP主要服務(wù)于中青年群體，基于智能手機(jī)平臺(tái)，希望能夠提供更便捷的服務(wù)來(lái)讓用戶更好走出去。關(guān)鍵詞：旅行；APP；需求1緒言智能手機(jī)在這幾年不斷的充斥著我們的日常生活，同時(shí)現(xiàn)代人也更加注重生活質(zhì)量，在假期或者周末期間，一般人都想出去旅旅游散散心以放松自己在工作日中緊張的身心，也

3、是為了鍛煉身體。現(xiàn)如今，旅游也逐漸成為了現(xiàn)代人生活的重要一部分。所以在這個(gè)大背景下，設(shè)計(jì)一款基于智能手機(jī)的旅游軟件也是十分有必要的，同時(shí)也會(huì)讓我們的旅游生活變得更加方便。1.1 項(xiàng)目界面設(shè)計(jì)基本要求界面設(shè)計(jì)：首先一款有價(jià)值的APP要擁有良好的用戶界面，用戶在使用APP的過(guò)程中，容易對(duì)漂亮的界面產(chǎn)生好感，同時(shí)也更容易接受一些。相反的，如果一款粗糙丑陋的界面會(huì)使用戶產(chǎn)生厭惡感，然后對(duì)這款軟件產(chǎn)生不信任感，最終放棄使用。所以一個(gè)好的用戶界面是APP在設(shè)計(jì)時(shí)的基礎(chǔ)。用戶體驗(yàn)：軟件簡(jiǎn)單上手易操作是大多數(shù)用戶的需求，用戶首先不會(huì)對(duì)一款難以操作的軟件產(chǎn)生好感，同樣的對(duì)于操作復(fù)雜的也不會(huì)有興趣，難以操作會(huì)使整

4、個(gè)項(xiàng)目失去原有的活力，也就意味著項(xiàng)目還沒(méi)開(kāi)始就已經(jīng)失敗了。要想做一款成功的APP，讓用戶在第一眼看到就能夠操作基本項(xiàng)目是基本要求。1.2 項(xiàng)目界面設(shè)計(jì)工具介紹首先，制定計(jì)劃方案，設(shè)立目標(biāo)。確定選題，然后及時(shí)與指導(dǎo)老師溝通，進(jìn)一步完善選題，了解選題所涉及的方面；查閱資料，到圖書(shū)館查閱相關(guān)圖書(shū)，到閱覽室查閱相關(guān)期刊、雜志以及從網(wǎng)上查閱相關(guān)知識(shí)，準(zhǔn)備相關(guān)素材，并對(duì)畢業(yè)設(shè)計(jì)所需的工具軟件進(jìn)行了解，基本確定畢業(yè)設(shè)計(jì)作品的制作步驟，及畢業(yè)報(bào)告所要論述的內(nèi)容，并完成論文開(kāi)題報(bào)告和題目審批表。其次，該款A(yù)PP的設(shè)計(jì)主要使用的軟件為AdobeIllustrator。作為全球最著名的圖形軟件AdobeIllust

5、rator,以其強(qiáng)大的功能和體貼用戶的界面已經(jīng)占據(jù)了全球矢量編輯軟件中的大部分份額。具不完全統(tǒng)計(jì)全球有37%的設(shè)計(jì)師在使用AdobeIllustrator進(jìn)行藝術(shù)設(shè)計(jì)，尤其基于Adobe公司專利的PostScript技術(shù)的運(yùn)用，Illustrator已經(jīng)完全占領(lǐng)專業(yè)的印刷出版領(lǐng)域。該軟件所具備的精良的繪圖工具、具有表現(xiàn)力的自然畫(huà)筆、各種省時(shí)功能基本已經(jīng)滿足了我在設(shè)計(jì)上的所有需求。另外，在設(shè)計(jì)過(guò)程中也用到了Photoshop,使用Photoshop設(shè)計(jì)了整款A(yù)PP的啟動(dòng)頁(yè)面，以及利用其進(jìn)行其他頁(yè)面的裁剪，美化。在設(shè)計(jì)啟動(dòng)頁(yè)面的過(guò)程中，主要是利用Photoshop設(shè)計(jì)了啟動(dòng)頁(yè)面中心LOGO，以及“

6、樂(lè)情旅”的字體設(shè)計(jì)。1.3 項(xiàng)目背景及意義Android操作系統(tǒng)是與ios等手機(jī)操作系統(tǒng)處在同一級(jí)別的手機(jī)操作系統(tǒng)，是Google公司在2007年11月發(fā)布的基于Linux核心的手機(jī)操作系統(tǒng)，是一個(gè)開(kāi)放性、開(kāi)源性上午移動(dòng)平臺(tái)操作系統(tǒng)。2012年11月數(shù)據(jù)顯示，單是Android手機(jī)就占據(jù)全球智能手機(jī)市場(chǎng)76%的份額，中國(guó)市場(chǎng)占有率為90%。2013年9月24日谷歌開(kāi)發(fā)的Android操作系統(tǒng)迎來(lái)了5歲生日，全世界采用Android手機(jī)數(shù)量已經(jīng)達(dá)到10億臺(tái)。而ios系統(tǒng)以其流暢的運(yùn)行速度，在智能手機(jī)市場(chǎng)更是首屈一指?；谝陨?，我認(rèn)為開(kāi)發(fā)一個(gè)基于智能手機(jī)的旅游軟件必定有其廣闊的市場(chǎng)價(jià)值和重要的意義

7、。對(duì)于現(xiàn)代人來(lái)說(shuō)，手機(jī)已經(jīng)和生活緊密相連，可以說(shuō)離了手機(jī)，大多數(shù)人很多事情都辦不成。所以基于以上幾點(diǎn)，我認(rèn)為開(kāi)發(fā)這么一款軟件必定能給用戶帶來(lái)極大地方便。隨著現(xiàn)在智能手機(jī)的功能越來(lái)越強(qiáng)大，智能手機(jī)在我們的日常生活中可謂是無(wú)處不在。同時(shí)，基本上每個(gè)人在手機(jī)上都會(huì)裝一些APP以方便自己的生活，比如美團(tuán)外賣，淘寶，支付寶在智能手機(jī)平臺(tái)上，開(kāi)發(fā)者可以隨意開(kāi)發(fā)各式各樣的應(yīng)用，因此手機(jī)上的應(yīng)用程序也越來(lái)越多?，F(xiàn)在，越來(lái)越多的人已經(jīng)不滿足蝸居在自己熟悉的地方了，很多人都喊著“世界那么大，我想去看看”的口號(hào)，越來(lái)越多的人選擇走出去，去看看外邊的風(fēng)景，體驗(yàn)一把不同的風(fēng)土人情。但是出門(mén)在外，難免會(huì)有很多不適應(yīng)的地方

8、，所以擁有一個(gè)方便實(shí)用的旅游APP顯得格外重要，它會(huì)幫助我們少走很多彎路，我們?cè)谲浖膸椭乱材芸焖僬业较矚g的酒店，也可以提前了解一下我們所要去的目的地，最重要的是可以網(wǎng)上訂酒店，訂門(mén)票。如此一來(lái)，就極大的方便了用戶使用，同時(shí)為用戶節(jié)省了時(shí)間，提高了出行效率，減少了出行煩惱。2需求分析一般來(lái)說(shuō)，用戶對(duì)于一款旅游APP的基本需求主要傾向于以下幾個(gè)方面：首先APP應(yīng)該具備基礎(chǔ)的注冊(cè)登錄，查看景點(diǎn)簡(jiǎn)介、圖片、評(píng)價(jià)、旅行游記等功能。此外還應(yīng)具備良好的穩(wěn)定性能和交互性。2.1用戶需求一個(gè)產(chǎn)品的成敗往往最關(guān)鍵的部分就是產(chǎn)品經(jīng)理能否判斷出用戶需求，同樣的，對(duì)用戶的需求進(jìn)行分析也是設(shè)計(jì)產(chǎn)品的第一步。美國(guó)心理學(xué)

9、家亞伯拉罕馬斯洛在動(dòng)機(jī)與個(gè)性中提出人類的需求像階梯一樣從低到高按層次分為五種，分別是：生理需求（對(duì)食物、水、空氣和住房等需求都是生理需求）；安全需求（對(duì)人身安全、生活穩(wěn)定以及免遭痛苦、威脅或疾病等的需求）；社交需求（對(duì)友誼、愛(ài)情以及隸屬關(guān)系的需求）；尊重需求（對(duì)成就或自我價(jià)值的個(gè)人感覺(jué)，也包括他人對(duì)自己的認(rèn)可與尊重）；自我實(shí)現(xiàn)需求（發(fā)揮自身潛能，實(shí)現(xiàn)一定的目標(biāo)）。馬斯洛在晚年還提出過(guò)一個(gè)七層次需求理論，相對(duì)五層次需求理論，他在尊重需求和自我實(shí)現(xiàn)需求之間增加了認(rèn)知和審美兩個(gè)需求。七層次需求理論的具體內(nèi)容為：生理需求、安全需求、社交需求、尊重需求、認(rèn)知需求、審美需求和自我實(shí)現(xiàn)的需求。認(rèn)知的需求，是

10、指對(duì)己對(duì)人對(duì)事物變化有所理解的需求，例如閱讀書(shū)籍了解未知的事物；審美的需求，是指對(duì)美好事物欣賞并希望周遭事物有秩序、有結(jié)構(gòu)、順自然、循真理等心理需求，例如聽(tīng)音樂(lè)。綜合馬斯洛的需求分析理論，我認(rèn)為做一款優(yōu)質(zhì)的旅游類APP，需要滿足人的社交需求、審美需求、生理需求。用戶的需求是多方面的、多層次的，但資源和條件的限制決定了單個(gè)產(chǎn)品不可能滿足用戶的所有需求，所以我們有必要將需求進(jìn)行排序?；拘托枨螅菏钱a(chǎn)品所必須滿足的用戶需求。比如，旅游類APP需要讓用戶能夠隨時(shí)隨地查詢景點(diǎn)咨詢，網(wǎng)上購(gòu)票等基礎(chǔ)功能。期望型需求：用戶滿意度隨著此類需求的滿足程度而線性提升或下降。當(dāng)此類型需求越得到滿足則用戶滿意度越高，反

11、之則用戶滿意度越低。比如，本款A(yù)PP在使用過(guò)程中，用戶希望景點(diǎn)越多越好，同時(shí)景點(diǎn)信息也越多越好。興奮型需求：是一種完全出乎用戶意料的屬性或功能。如果提供此類因素，用戶會(huì)感覺(jué)十分驚喜，同時(shí)滿意度也會(huì)大幅提升，但如果不提供此需求，用戶滿意度也不會(huì)隨之降低。無(wú)差異型需求：這類需求無(wú)論滿足與否，用戶滿意度都不會(huì)受其影響，用戶對(duì)此因素并不在意。例如景點(diǎn)簡(jiǎn)介。反向型需求：用戶沒(méi)有此需求，提供后滿意度適得其反。例如不知名的鏈接廣告。將用戶需求歸納結(jié)果就是：用戶需要出去旅行，在查詢經(jīng)典信息時(shí)想要更加便利一些，想要在移動(dòng)端平臺(tái)獲取經(jīng)典信息，并能提前預(yù)定好景點(diǎn)門(mén)票或者是酒店民居。2.2功能需求所以我們做本款產(chǎn)品就

12、需要滿足用戶使用的需求，也就是產(chǎn)品需求，我們這款產(chǎn)品需要所具備的信息是在用戶出行前，能夠給用戶提供景點(diǎn)訊息，讓用戶足不出戶就能了解到自己想要了解的內(nèi)容資訊，能夠?qū)崿F(xiàn)網(wǎng)上購(gòu)買(mǎi)門(mén)票，以及網(wǎng)上預(yù)訂酒店。在了解完前面兩項(xiàng)之后，我們就需要將用戶需求進(jìn)而轉(zhuǎn)化為產(chǎn)品功能，將產(chǎn)品功能需求在移動(dòng)端平臺(tái)實(shí)現(xiàn)，也能夠分為兩種，一種是微信公眾平臺(tái)，一種是APP軟件。在這里由于功能涉及較多，用微信公眾平臺(tái)恐怕難以實(shí)現(xiàn)，所以最終考慮還是用APP來(lái)實(shí)現(xiàn)產(chǎn)品功能。了解完用戶的需求之后，接下來(lái)就是將用戶的需求轉(zhuǎn)化為APP的主要功能。旅游類APP其系統(tǒng)用于展示和存儲(chǔ)景點(diǎn)信息，存儲(chǔ)相關(guān)的旅游信息是本款A(yù)PP最主要的功能。另外，用戶

13、希望擁有更加快捷便利的旅行方式，希望足不出戶就能了解到景點(diǎn)的各種信息，以及規(guī)劃好的旅游線路，所以為了配合該功能的實(shí)現(xiàn)，APP在設(shè)計(jì)過(guò)程中還應(yīng)該具有用戶信息發(fā)布的功能，以及一些豐富軟件性能的功能。例如訂購(gòu)火車票，飛機(jī)票，酒店等等。3APP界面的設(shè)計(jì)在洞悉用戶的基本需求之后，做好簡(jiǎn)單的界面搭設(shè)之后，接下來(lái)就是本款A(yù)PP設(shè)計(jì)最關(guān)鍵的部分一一界面設(shè)計(jì)，一個(gè)實(shí)用美觀的界面會(huì)給一款A(yù)PP的用戶帶來(lái)不一樣的體驗(yàn)效果。如圖13.1APP功能界面介紹用戶注冊(cè)：首先APP內(nèi)部要有存儲(chǔ)功能，能夠查看景點(diǎn)和發(fā)布一些旅游心得，也要在這同時(shí)設(shè)置一些私人屬性。所以用戶如果想要更快捷的使用這些功能，就必須注冊(cè)使用，有自己的賬

14、戶來(lái)存放信息，注冊(cè)時(shí)可以采用手機(jī)號(hào)注冊(cè)，或者qq，微信登錄。另外開(kāi)發(fā)者在設(shè)計(jì)登錄界面時(shí)也應(yīng)注意揣測(cè)用戶心理變化，可能有些人擔(dān)心泄露信息，就不會(huì)選擇注冊(cè)，所以為了增加注冊(cè)量，開(kāi)發(fā)者就應(yīng)在界面中設(shè)置一些小心機(jī)，比如發(fā)布心得體會(huì)，點(diǎn)贊別人的圖片，購(gòu)買(mǎi)門(mén)票或者預(yù)定酒店等必須登錄才可以使用。景點(diǎn)列表：用戶在登錄之后可以通過(guò)下拉來(lái)查看各個(gè)景點(diǎn)信息，在主界面上通過(guò)分類來(lái)選擇自己需要的旅行方式。景點(diǎn)介紹：在選中景點(diǎn)之后，可以點(diǎn)擊進(jìn)入景點(diǎn)主菜單，查看景點(diǎn)介紹以及門(mén)票價(jià)格等信息。網(wǎng)上訂票：現(xiàn)階段，網(wǎng)上訂票已經(jīng)成為一種潮流，那么將這一功能置入此款A(yù)PP中也就有了錦上添花的效果，當(dāng)用戶距離想要的景點(diǎn)較遠(yuǎn)時(shí)，便可以采用

15、網(wǎng)上訂票的功能，該功能可以提前預(yù)定火車票，飛機(jī)票，各景區(qū)景點(diǎn)門(mén)票等等，為用戶省去了大量排隊(duì)買(mǎi)票的時(shí)間。圖13.2 APP圖標(biāo)的設(shè)計(jì)一個(gè)優(yōu)秀的界面不僅是功能布局清晰、易操作，更要具有視覺(jué)美感。在這里，圖標(biāo)不僅起到代替文字描述以節(jié)約空間的作用，也是一種裝飾圖形與符號(hào)，更重要的，它發(fā)揮著交互性、情感化、指代性、隱喻性等作用，所以圖標(biāo)成為人機(jī)界面中不可或缺的元素。A90首頁(yè)目的地?fù)尭业膱D2我在設(shè)計(jì)APP圖標(biāo)時(shí)，秉承著簡(jiǎn)介，易操作的理念，采用扁平化的設(shè)計(jì)風(fēng)格，在設(shè)計(jì)過(guò)程中也參考了其他APP的設(shè)計(jì)風(fēng)格，再加上自己的創(chuàng)作理念，最終設(shè)計(jì)出一套適用于“樂(lè)情旅”的圖標(biāo)。如圖2首頁(yè)：采用了房子的理念，因?yàn)槭醉?yè)作為

16、進(jìn)入APP第一個(gè)界面，更像是一個(gè)開(kāi)始，而在我心中，最初的地方就是一個(gè)家的概念。在旅游APP的設(shè)計(jì)中引入家的概念，也是一種隱喻，旅行要從家出發(fā)，首頁(yè)也從家開(kāi)始。另外，在圖標(biāo)的設(shè)計(jì)上，也分為正反兩面，比如打開(kāi)首頁(yè)，首頁(yè)的圖標(biāo)就會(huì)變成藍(lán)色，其他的依舊保持不變。分類：采用了列表式的設(shè)計(jì)，因?yàn)榉诸惐旧砭透挥袠O強(qiáng)的排列思維，所以采用列表式的設(shè)計(jì)也顯得更加直觀。目的地：看上去像是一個(gè)倒立的水滴，不過(guò)，這個(gè)圖標(biāo)的設(shè)計(jì)是借鑒了百度地圖的定位，百度地圖在定位某個(gè)地點(diǎn)時(shí)就會(huì)采用這種方式。將其他APP的理念引入，也更容易讓用戶接受，本身出行去一個(gè)地方就和地圖息息相關(guān)，所以引入百度地圖的概念也會(huì)更加讓用戶感到親切。搶購(gòu)

17、：考慮到搶購(gòu)一般和時(shí)間有關(guān)，比如什么限時(shí)搶購(gòu)，所以在設(shè)計(jì)“搶購(gòu)”的圖標(biāo)時(shí)引入了秒表的概念，意味著搶購(gòu)是機(jī)不可失，失不再來(lái)。同時(shí)也能吸引用戶點(diǎn)擊進(jìn)入搶購(gòu)界面，以了解最新的旅行優(yōu)惠活動(dòng)。我的：作為用戶信息的主界面，我在設(shè)計(jì)時(shí)選擇延續(xù)其他APP的設(shè)計(jì)風(fēng)格，設(shè)計(jì)了一個(gè)扁平化的小人，作為這個(gè)界面的圖標(biāo)，是因?yàn)檫@樣的風(fēng)格以被大多數(shù)人所接受，如果一味去改變，可能會(huì)適得其反。3.3 APP界面的布局設(shè)計(jì)在確定了需求和主流程后，開(kāi)始著手設(shè)計(jì)app界面，我們所要面臨的問(wèn)題就是如何將信息以最優(yōu)的方式組合起來(lái)，針對(duì)這個(gè)問(wèn)題所作出的設(shè)計(jì)決策對(duì)整個(gè)app的核心體驗(yàn)起到關(guān)鍵作用。在整個(gè)界面的布局上，對(duì)于一級(jí)頁(yè)面，采用宮格布

18、局的方式。（在這里，以首頁(yè)作為例子）在首頁(yè)部分，頂bar設(shè)計(jì)成搜索框，底bar作為導(dǎo)航欄，分別設(shè)置首頁(yè)，分類，目的地，搶購(gòu)，我的。如圖3在頂bar之下，設(shè)置照片輪換的形式放置一些風(fēng)景圖或是一些廣告大圖。再往下是主打的優(yōu)惠線路。之后是以宮格形式設(shè)計(jì)的菜單欄。，之所以采用方格形式，就是為了防止誤操作。最下面是以內(nèi)容主導(dǎo)的瀑布流，當(dāng)然也是有小心機(jī)的成分，在下滑的時(shí)候最下面一張圖永遠(yuǎn)是顯示一半的，這樣能吸引用戶向下滑動(dòng)，另外在滑動(dòng)到一定位置時(shí)，右下角會(huì)有一個(gè)置頂圖標(biāo)，能夠帶來(lái)更好的用戶體驗(yàn)。VlV撫樂(lè)聞未狀樂(lè)世£3.4APP界面的實(shí)現(xiàn)Yt兀石全新呈現(xiàn)JS況-滅叫刻1送詁語(yǔ)晉B記翡引融迪卻a；盟麗出惰省錢(qián)攻略3.4.2網(wǎng)絡(luò)加載界面圖53.4.3登錄界面圖63.4.4首頁(yè)界面圖73.4.5分類界面3.4.6目的地界面圖93.4.7搶購(gòu)界面sstw元鼻I圖103.4.8我的界面AHUM*<Z1PW1百型“匸？ElVVHUTHItHP麗a總卅riQ血>Q麗噸、圖11致謝光陰荏苒，日月如梭，美好的三年大學(xué)生活即將畫(huà)上句點(diǎn)。這個(gè)句點(diǎn)不僅標(biāo)志著我的求學(xué)之路暫且告一段落，也標(biāo)志我即將要踏上一片新的征程。在這三年幸福的時(shí)光中，我學(xué)到了知識(shí)，收獲了友情，更體會(huì)到了做設(shè)計(jì)的艱辛和追求真理的喜悅?；厥鬃稣撐牡哪嵌瓮床⒖鞓?lè)的日子，甚是百感交集，