紅色旅游智能手機(jī)APP用戶界面設(shè)計(jì)說明書目錄TOC\o"1-3"\h\u154161緒論 6160691.1UI簡(jiǎn)介 6177131.2軟件開發(fā)的界面設(shè)計(jì)現(xiàn)狀 6324822項(xiàng)目概述 7177632.1項(xiàng)目目的和內(nèi)容 7183872.2項(xiàng)目分析 8278042.2.1行業(yè)背景分析 8123302.2.2典型用戶分析 9279572.2.3同類APP分析 916962.3慶陽紅色旅游軟件開發(fā)在UI方面的現(xiàn)狀 9209023.軟件界面設(shè)計(jì)基礎(chǔ) 9204623.1創(chuàng)意來源 919153.2前期準(zhǔn)備工作 1062323.3軟件界面設(shè)計(jì)原則 1049013.3.1一致性原則 10242583.3.2留白原則 10151773.3.3用戶體驗(yàn)原則 10197883.3.4記憶最小化原則 11121423.3.5協(xié)調(diào)性原則 11214313.4基本要素設(shè)計(jì) 1133903.4.1設(shè)計(jì)軟件 1167043.4.2設(shè)計(jì)標(biāo)準(zhǔn)色 111863.4.3設(shè)計(jì)規(guī)格 11141253.5手機(jī)APP框架結(jié)構(gòu)圖 11243294.詳細(xì)設(shè)計(jì) 12106304.1Logo的設(shè)計(jì) 12227354.2原型圖設(shè)計(jì) 12245534.3主要界面設(shè)計(jì) 1320924.3.1引導(dǎo)頁界面 1385384.3.2啟動(dòng)頁界面 13327324.3.3注冊(cè)界面 1416404.3.4登錄界面 15276484.3.5首頁界面 15289764.3.6旅游攻略界面 1668204.3.7慶陽美食界面 1688184.3.8最新資訊界面 17125384.3.9我的界面 17154194.4GUI的排版展示 18153265設(shè)計(jì)切圖及標(biāo)注 18181625.1設(shè)計(jì)切圖 18320445.1.1切圖的含義 18132635.1.2切圖的格式 1894365.1.3ios與安卓切圖 18286765.1.4切圖命名格式 18235675.2設(shè)計(jì)標(biāo)注 19302335.2.1APP標(biāo)注顏色 19310845.2.2APP標(biāo)注內(nèi)容 19305445.2.3APP標(biāo)注位置 19126716總結(jié) 1917678參考文獻(xiàn) 2127388英文摘要 228855致謝 23

1引言1.1編寫目的及內(nèi)容慶陽紅色旅游這款手機(jī)應(yīng)用軟件的設(shè)計(jì)目的不僅是為了宣傳慶陽紅色旅游景點(diǎn)、紀(jì)念品、紅色皮影劇等具有慶陽特色的紅色旅游產(chǎn)品，它的設(shè)計(jì)還要滿足旅游者的需求，便利旅游者的出行，促進(jìn)紅色旅游業(yè)的發(fā)展，增強(qiáng)愛國主義的精神，開拓更加龐大的紅色旅游市場(chǎng)等。慶陽紅色旅游APP的界面可以吸引用戶的眼球，美觀的照片加上旅游地的詳細(xì)介紹，讓用戶有種想要旅行的沖動(dòng)，可以增加慶陽本地的經(jīng)濟(jì)收入，并且?guī)?dòng)周邊地區(qū)的經(jīng)濟(jì)發(fā)展?？梢哉f，作為一款專業(yè)地方性的旅游APP，他帶來的將是廣泛的經(jīng)濟(jì)效益、社會(huì)效益以及深遠(yuǎn)的政治影響。我的作品是一款擁有關(guān)于慶陽紅色旅游的APP的UI設(shè)計(jì)。作品內(nèi)容包括有:首頁、旅游攻略、慶陽美食、最新資訊、慶陽簡(jiǎn)介、慶陽酒店、慶陽賓館、慶陽特產(chǎn)、租車公司、景區(qū)概況、關(guān)于我們等界面的設(shè)計(jì)，首頁界面的設(shè)計(jì)是整套APP界面設(shè)計(jì)的關(guān)鍵所在，我將底部菜單欄分為5個(gè)模塊，分別為：首頁、旅游攻略、慶陽美食、最新資訊、我的，這幾部分內(nèi)容為此APP著重設(shè)計(jì)的內(nèi)容。由于搭建框架時(shí)，APP的內(nèi)容較多，并且不存在包含關(guān)系，所以我采用首頁模塊劃分的方式，將APP的主要功能用八種不同顏色的色塊加上8個(gè)精致的icon構(gòu)成了8個(gè)模塊的內(nèi)容，在首頁中顯示的列表還包含推薦景點(diǎn)和推薦酒店，這兩項(xiàng)內(nèi)容也是用戶最關(guān)心的內(nèi)容，所以我將它放在了首頁上，可以讓用戶一目了然，當(dāng)然，在相應(yīng)的內(nèi)頁也包含這部分的內(nèi)容。內(nèi)頁的設(shè)計(jì)大部分采用列表的形式進(jìn)行展示，這樣可以將重要的內(nèi)容全部展示出來，給用戶帶來清新的體驗(yàn)，我的作品具有很高的體驗(yàn)效果，用戶不用看引導(dǎo)頁就可以清晰的找到自己想要的內(nèi)容。此款手機(jī)APP的UI設(shè)計(jì)主題突出、明確，界面色彩雖運(yùn)用鮮艷的紅色但并不顯得單調(diào)，界面風(fēng)格整體統(tǒng)一，作品在設(shè)計(jì)時(shí)精確到每一個(gè)像素，給用戶一種悅目娛心的感覺。2.2項(xiàng)目分析2.2.1行業(yè)背景分析自從移動(dòng)互聯(lián)網(wǎng)走進(jìn)了人們的生活，五花八門的旅游類APP也隨之到來，這是一次旅游業(yè)上的革命，抓住這次商機(jī)，就能開括旅游市場(chǎng)。所以，很多公互聯(lián)網(wǎng)司爭(zhēng)先恐后的涌入了這次爭(zhēng)奪戰(zhàn)中。在這次爭(zhēng)奪戰(zhàn)中，攜程旅行、去哪兒還有同程旅游占得先機(jī)，百度、阿里巴巴、騰訊互聯(lián)網(wǎng)這三巨頭更是不會(huì)錯(cuò)過這次契機(jī)，創(chuàng)業(yè)型的小公司在旅游類市場(chǎng)上也發(fā)了下力，擠進(jìn)來分一小杯羹。目前，旅游類的APP基本上都是由酒店、餐飲、機(jī)票、門票、路線等模塊組成的有查詢預(yù)訂功能的綜合性服務(wù)平臺(tái)，攜程旅行可以作為首個(gè)代表。并且，一些區(qū)域性的旅游類APP也抓住機(jī)遇。截至2016年3月15日，通過對(duì)部分手機(jī)商店的調(diào)查，它們包含旅游類的APP的數(shù)據(jù)分別為：豌豆莢132個(gè)、應(yīng)用寶有410個(gè)、安卓市場(chǎng)430個(gè)、360手機(jī)助手640個(gè)、百度手機(jī)助手310個(gè)、安智市場(chǎng)972個(gè)。統(tǒng)計(jì)得出，在單個(gè)商店上線的區(qū)域性旅游類APP510個(gè)，總下載次數(shù)卻達(dá)到了20759343次。近年來，作為一種新型旅游形式的紅色旅游廣泛地在神州大地上崛起。隨著人們生活水平的提高，越來越多的人涌入到紅色旅游中來，來緬懷革命先烈。國家也十分注重紅色旅游的發(fā)展，并安排專項(xiàng)資金來建設(shè)一些重點(diǎn)的革命老區(qū)和革命紀(jì)念地，將紅色旅游與自然景觀進(jìn)行了密切的結(jié)合，讓游客全身心的體會(huì)到革命的來之不易。從移動(dòng)端旅游類APP的下載量中可以看出，關(guān)于旅游類APP軟件應(yīng)用的一些趨勢(shì)，攜程旅行、去哪網(wǎng)、同城旅游穩(wěn)穩(wěn)的位居了前三位，他們的月下載量都在10萬次以上，這就說明移動(dòng)端用戶對(duì)旅游APP軟件有很強(qiáng)的依賴性，通過對(duì)旅游APP用戶好評(píng)率來看，用戶的總體評(píng)價(jià)并不佳，經(jīng)過分析，這種情況是因?yàn)檫@些APP雖然做的規(guī)模龐大，但是針對(duì)某些景點(diǎn)的介紹并不清楚。比如慶陽紅色旅游的景點(diǎn)，在這三款A(yù)PP的查詢中更是鳳毛麟角，所以為了讓客戶滿意，有針對(duì)性的地方旅游類APP的設(shè)計(jì)是很重要的，慶陽紅色旅游APP既是針對(duì)地方特色的一款A(yù)PP。2.2.2典型用戶分析用戶人群：針對(duì)于16-70歲熱愛歷史、熱愛紅色旅游、追尋品質(zhì)生活的人群。2.2.3同類APP分析相比同類型APP的設(shè)計(jì)，我設(shè)計(jì)的APP既有缺點(diǎn)也有優(yōu)點(diǎn)。缺點(diǎn)是，界面的顏色相對(duì)單一，界面上的照片有的不夠清晰，原因是慶陽紅色旅游剛剛被開發(fā)，他在網(wǎng)上的素材特別的少，而且大部分的素材并不清晰，隨著慶陽紅色旅游的進(jìn)一步發(fā)展，我想在互聯(lián)網(wǎng)上的素材也會(huì)越來越多，那樣界面在照片的美觀上就得到了解決。優(yōu)點(diǎn)是，界面統(tǒng)一，條理清晰，小圖標(biāo)的風(fēng)格一致，并且在設(shè)計(jì)時(shí)采用一像素不差的原則，讓用戶在使用時(shí)感覺非常的舒適，可以讓90%用戶達(dá)到相當(dāng)滿意的程度，內(nèi)容涵蓋詳盡，包含用戶出行所想不到的一些貼心服務(wù)，讓用戶使用時(shí)更便捷更貼心。我也下載了一很多地方性的旅游APP，大部分都是界面粗糙，為了實(shí)現(xiàn)功能而去制作，完全不顧慮界面的美觀程度，并且界面不能達(dá)到統(tǒng)一的效果，用戶在使用時(shí)更是摸不到頭腦。3.軟件界面設(shè)計(jì)基礎(chǔ)3.1創(chuàng)意來源選擇慶陽紅色旅游APP的UI設(shè)計(jì)這個(gè)主題作為畢業(yè)論文，是因?yàn)楸旧碜约罕旧砭秃芟矚g革命先烈的的故事，再加上慶陽市是著名的革命老區(qū)，而我在這里上了四年的大學(xué)，對(duì)慶陽的紅色旅游景點(diǎn)以及地方特色都做了詳細(xì)的了解，所以想到了這個(gè)主題。因?yàn)樽龅氖羌t色旅游，所以在選擇顏色的時(shí)候首先選擇的就是紅色作為APP界面的主要顏色，并紅色可以給人帶來清新和時(shí)尚的感覺，也能帶來喜悅的心情。讓人們?cè)诿β档纳钪蟹潘缮硇?，閱覽革命先烈的英雄事跡。3.2前期準(zhǔn)備工作設(shè)計(jì)主題明確后，開始展開無窮的聯(lián)想，然后查閱大量的資料和同類的應(yīng)用軟件，再根據(jù)自己想要設(shè)計(jì)的內(nèi)容進(jìn)行整理分析，先做一個(gè)大致的流程圖，將我們需要展示的功能一一列舉，然后將確立的大模塊逐步細(xì)分，形成幾個(gè)小模塊，再根據(jù)產(chǎn)品的一特征做創(chuàng)新。我們的APP最終是面向用戶的，所以不管什么設(shè)計(jì)都需要想到用戶再用這個(gè)APP的時(shí)候是否方便，怎么樣的交互界面即可得到用戶的滿意，又有亮點(diǎn)。3.3軟件界面設(shè)計(jì)原則3.3.1一致性原則遵循界面設(shè)計(jì)的一致性是交互設(shè)計(jì)的基本規(guī)范。除了在元素、數(shù)值、鏈接和其他數(shù)據(jù)的展現(xiàn)形式上都要保持著統(tǒng)一，還要在場(chǎng)景和含義上保持一致。界面設(shè)計(jì)擁有了一致性之后，用戶可以輕松學(xué)會(huì)操作，不需要相關(guān)人員去費(fèi)力寫操作文檔。用戶在使用時(shí)，就會(huì)建立一個(gè)標(biāo)準(zhǔn)的界面框架模型，在熟練了一個(gè)界面后，切換到另一個(gè)界面便可隨心所欲的進(jìn)行操作，并且?guī)淼囊曈X效果也很贊，給用戶一種高度統(tǒng)一的感覺，體驗(yàn)度得到上升。3.3.2留白原則對(duì)于留白這個(gè)概念有時(shí)也叫它負(fù)空間。可能我們看見這個(gè)名詞時(shí)，認(rèn)為它是流出來一部分白色的空間來，其實(shí)不然，留白指的是一部分區(qū)域，這部分區(qū)域不一定就是白的，它只是頁面布局中環(huán)繞各元素的空白空間。留白的作用主要是將內(nèi)容進(jìn)行區(qū)分，形成鮮明的對(duì)比。針對(duì)于繁雜的頁面布局，適當(dāng)?shù)牧舭啄茏岉撁婵雌饋碚麧崳⑶抑攸c(diǎn)突出。因?yàn)樗粝铝嗽S多空間，讓設(shè)計(jì)不同的部分形成鮮明的對(duì)比，那么屏幕的焦點(diǎn)就會(huì)自然而然的顯現(xiàn)出來。如果界面上的文字過多，它就會(huì)顯得十分擁擠，影響閱讀興趣。留白則會(huì)提升用戶的閱讀體驗(yàn)，也便于理解。留白還可以突顯界面中其他的色彩，這對(duì)于吸引用戶有很大的作用。3.3.3用戶體驗(yàn)原則用戶體驗(yàn)的原則指的是我們?cè)谠O(shè)計(jì)界面時(shí)要從用戶的角度出發(fā)，而不是從一名設(shè)計(jì)師的角度思考問題。我們的應(yīng)用最終的使用者是用戶，所以我們?cè)谠O(shè)計(jì)的過程中要以用戶為中心，以人為本，這樣才能得到更好的用戶體驗(yàn)。。3.3.4記憶最小化原則設(shè)計(jì)過程中時(shí)，要考慮大腦處理信息的范圍。根據(jù)遺忘曲線的研究發(fā)現(xiàn)，人類大腦對(duì)新事物遺忘的規(guī)律，短期記憶很不穩(wěn)定，在24小時(shí)內(nèi)就存在25%的遺忘率。所以一個(gè)界面上的信息量不宜過多，否則影響會(huì)用戶的體驗(yàn)效果。3.3.5協(xié)調(diào)性原則設(shè)計(jì)界面時(shí)，要保證界面的協(xié)調(diào)性。控件的擺放位置要保證協(xié)調(diào)均衡，讓界面看上去和諧美麗。將重要的控件放在明顯的位置，讓用戶便于瀏覽和操作。另外，設(shè)計(jì)的界面要符合人們的操作習(xí)慣。3.4基本要素設(shè)計(jì)3.4.1設(shè)計(jì)軟件用AdobeIllustratorCS6設(shè)計(jì)Logo的矢量圖。用AdobePhotoshopCS6處理圖片，做為設(shè)計(jì)的主要軟件；利用智能參考線的輔助，在軟件中做出效果圖。3.4.2設(shè)計(jì)標(biāo)準(zhǔn)色主要顏色：#F7253E；#FFF9D00；#F9F9F9；#DDDDDD。3.4.3設(shè)計(jì)規(guī)格設(shè)計(jì)的尺寸采用市場(chǎng)上常見的iphone6的尺寸750px1334px；分辨率最佳顯示為72ppi；色彩模式則采用RGB模式。3.5手機(jī)APP框架結(jié)構(gòu)圖在確定了需要設(shè)計(jì)的模塊以后，我們要根據(jù)模塊建立一個(gè)框架結(jié)構(gòu)圖，讓我們?cè)谠O(shè)計(jì)的時(shí)候可以按部就班有思路的去設(shè)計(jì)。圖STYLEREF1\s3.5手機(jī)APP框架結(jié)構(gòu)圖4.詳細(xì)設(shè)計(jì)4.1Logo的設(shè)計(jì)Logo的設(shè)計(jì)采用慶陽紅色旅游中“紅色”二字的首字母“H”和“S”組合而成，為了突出紅色旅游的特色，Logo的顏色采用了最具有代表性的中國紅，象征著革命的勝利；鮮艷的紅色與中國國旗的顏色相互照應(yīng)。Logo的形狀采取上下、左右均對(duì)稱，角度為27°，是最合適的角度，給人一種對(duì)稱的美感。如下圖4.1所示。圖STYLEREF1\s4.1logo圖形4.2原型圖設(shè)計(jì)原型圖是根據(jù)我們確定的流程圖而設(shè)計(jì)的界面基本框架圖，主要利用的是黑白灰三種顏色搭建界面的輪廓，更快的為客戶展示視覺效果。部分原型圖如圖4.2所示。圖STYLEREF1\s4.2原型圖4.3主要界面設(shè)計(jì)4.3.1引導(dǎo)頁界面引導(dǎo)頁采用的是目前市場(chǎng)上比較流行的扁平化界面進(jìn)行設(shè)計(jì)，用一個(gè)小人的形象來統(tǒng)一界面的規(guī)劃，介紹了軟件的主要功能，如圖4.3.1所示。圖STYLEREF1\s4.3.1引導(dǎo)頁界面4.3.2啟動(dòng)頁界面啟動(dòng)頁也采用扁平的設(shè)計(jì)風(fēng)格，底色采用徑向漸變的紅色，放上設(shè)計(jì)好的logo，并在下方放上一個(gè)具有革命歷史性的小車，整個(gè)界面看起來協(xié)調(diào)、輕快，讓用戶每次打開APP都有愉悅的心情。如圖4.3.2所示。圖STYLEREF1\s4.3.3啟動(dòng)頁界面4.3.3注冊(cè)界面注冊(cè)界面是采取手機(jī)注冊(cè)的方式進(jìn)行注冊(cè)，界面應(yīng)用紅色的小icon，讓界面充滿活力。如圖4.3.3所示。圖STYLEREF1\s4.3.3注冊(cè)界面4.3.4登錄界面登錄界面有用戶和密碼兩部分內(nèi)容，輸入后點(diǎn)擊登錄進(jìn)入界面。如圖4.3.4所示。圖STYLEREF1\s4.3.4登錄界面4.3.5首頁界面首頁將慶陽紅色旅游APP的模塊全部展現(xiàn)，其中包含：慶陽簡(jiǎn)介、旅游酒店、慶陽賓館、慶陽特產(chǎn)、租車公司、一步導(dǎo)航、關(guān)于我們的模塊，用戶可以通過首頁了解整套APP的規(guī)劃。如圖4.3.5所示。圖STYLEREF1\s4.3.5首頁界面4.3.6旅游攻略界面旅游攻略界面采用了列表的排列方式，怎樣游慶陽的攻略全部進(jìn)行了陳列，點(diǎn)進(jìn)去一個(gè)模塊可以得到詳細(xì)的介紹。如圖4.3.6所示。圖STYLEREF1\s4.3.6旅游攻略界面4.3.7慶陽美食界面旅游美食界面將慶陽的美食全部陳列，采用飽和度較高的圖片來吸引用戶，勾起用戶的食欲。如圖4.3.7所示。圖STYLEREF1\s4.3.7旅游美食界面4.3.8最新資訊界面最新資訊界面也采用的是列表的展示形式，時(shí)刻更新慶陽市紅色旅游景點(diǎn)的情況和一些旅游類文章。如圖4.3.8所示。圖STYLEREF1\s4.3.8最新資訊界面4.3.9我的界面我的界面采用一些小icon，讓頁面看起來更加精致，不至于枯燥乏味。界面包含我的資料、軟件反饋、分享給好友、軟件設(shè)置和版本升級(jí)5大模塊。如圖4.3.9所示。圖STYLEREF1\s4.3.9我的界面4.4GUI的排版展示GUI就是圖形用戶界面的簡(jiǎn)稱，是指采用圖形方式顯示的計(jì)算機(jī)操作用戶界面。我所做的僅僅是GUI的一個(gè)展示界面，將設(shè)計(jì)的過程從上到下依次進(jìn)行排列，對(duì)logo、原型圖、界面及展示效果進(jìn)行了排版。5設(shè)計(jì)切圖及標(biāo)注5.1設(shè)計(jì)切圖5.1.1切圖的含義切圖是指將設(shè)計(jì)稿切成便于制作成頁面的圖片，并完成html+css布局的靜態(tài)頁面，通俗來講，把一張?jiān)O(shè)計(jì)圖利用到切片工具把自己所需的切成一張張小圖，然后用DIV+CSS完成靜態(tài)頁面書寫，完成CSS布局。在APP中切圖，與在web中切圖大致是一樣的。開發(fā)同學(xué)在實(shí)現(xiàn)過程中，需要計(jì)算好每一個(gè)元素（包括文字，圖片等）的位置，然后在調(diào)用我們切好的圖進(jìn)行填充。5.1.2切圖的格式一般切圖的格式在ps中存儲(chǔ)成web格式時(shí)，選擇的是PNG24，而啟動(dòng)頁和引導(dǎo)頁的切圖采用的是PNG8的格式進(jìn)行存儲(chǔ)。5.1.3ios與安卓切圖ios的屏幕精度分成retina與非retina2種，而Android的屏幕精度只要分成：mdpi（橫向屏幕360px左右）；hdpi（橫向屏幕480px左右）；xhdpi（橫向屏幕720px左右）3種。慶陽紅色旅游APP在設(shè)計(jì)時(shí)，是按照retina進(jìn)行的切圖。5.1.4切圖命名格式APP的切圖可分為背景、按鈕、圖片、TabBar、icon等幾大類。為了讓切圖的命名整齊規(guī)范，我們會(huì)按照它的特性命名。比如背景圖我們會(huì)命名為bg_xxx.png、按鈕圖命名為btn_xxx.png、圖片為img_xxx.png等等，取它們的英文縮寫作為頭部，在界面上的位置用xxx表示。如果在設(shè)計(jì)時(shí)需要成倍數(shù)關(guān)系的話，可以在后綴名前加上@2x，表示二倍的關(guān)系；@3x則表示三倍的關(guān)系。如iPadmini、iphone6和iPhone6Plus在切圖命名時(shí)分別用bg_xxx.png、bg_xxx@2x.png和bg_xxx@3x.png。慶陽紅色旅游APP是按照iphone6的尺寸進(jìn)行設(shè)計(jì)的，所以切圖命名時(shí)采用的都是@2x的命名方式。5.2設(shè)計(jì)標(biāo)注5.2.1APP標(biāo)注顏色我在標(biāo)注慶陽紅色旅游APP時(shí)應(yīng)用的軟件是馬克鰻，當(dāng)然其他軟件也可以辦到。在標(biāo)注顏色時(shí)采用的是16進(jìn)制標(biāo)注法。如果采取16進(jìn)制和RGB兩種色值表達(dá)的方法可能會(huì)更加的清晰。5.2.2APP標(biāo)注內(nèi)容在標(biāo)注內(nèi)容的時(shí)候，我們需要標(biāo)注字體大小和字體顏色，字體大小采用的是以像素單位；在頂部標(biāo)題欄標(biāo)注背景色值，如果有透明度的話也需要進(jìn)行標(biāo)注；標(biāo)注banner時(shí)我們只需要標(biāo)注它的高度，因?yàn)閷挾仁瞧聊坏膶挾?；?biāo)注菜單圖標(biāo)時(shí)，不一定非要標(biāo)