一款校園生活資訊類手機(jī)APP的UI設(shè)計(jì)

山東大學(xué)（威海） 畢業(yè)論文（設(shè)計(jì)） 畢業(yè)論文（設(shè)計(jì)）設(shè)計(jì)(論文)題目一款校園生活資訊類手機(jī)APP的UI設(shè)計(jì)姓 名：呂麗蓉學(xué) 號(hào)：201100800498學(xué) 院：機(jī)電與信息工程學(xué)院專 業(yè)：數(shù)字媒體技術(shù)年 級(jí)2011級(jí)指導(dǎo)教師：李婷 2015年 5 月 18 日目 錄一、緒論1（一）設(shè)計(jì)背景1（二）設(shè)計(jì)的總體概述1二、認(rèn)識(shí)UI設(shè)計(jì)1（一）什么是UI設(shè)計(jì)1（二）UI設(shè)計(jì)的基本流程2（三）UI設(shè)計(jì)的參考原則21.快速流暢22.數(shù)字法則23.優(yōu)化結(jié)構(gòu)34.界面美觀3三、用戶需求分析3（一）用戶體驗(yàn)設(shè)計(jì)3（二）用戶的功能需求分析3（三）用戶的視覺需求分析4四、UI設(shè)計(jì)工具的體驗(yàn)和簡(jiǎn)介5（一）Axure RP5（二）Photoshop5五、APP原型的功能實(shí)現(xiàn)5（一）找兼職模塊6（二）校園二手交易模塊8（三）校園活動(dòng)模塊9（四）收藏模塊11六、APP原型的界面設(shè)計(jì)12（一）界面設(shè)計(jì)的風(fēng)格12（二）圖形的樣式15（三）界面的配色方案15（四）結(jié)構(gòu)排版17七、后臺(tái)數(shù)據(jù)庫的設(shè)計(jì)18八、總結(jié)19（一）遇到的問題及解決方案191.功能的設(shè)置及實(shí)現(xiàn)。192.工具的選擇。19（二）設(shè)計(jì)的不足之處19（三）收獲與感悟20參考文獻(xiàn)21謝 辭22摘 要在這個(gè)電子產(chǎn)品飛速發(fā)展的時(shí)代，UI設(shè)計(jì)正被越來越多的設(shè)計(jì)師們重視起來。一個(gè)貼近產(chǎn)品服務(wù)于用戶的UI設(shè)計(jì)會(huì)讓一款手機(jī)APP帶給人順暢的交互體驗(yàn)，美觀新穎的界面設(shè)計(jì)也能幫助產(chǎn)品吸引住用戶的眼球，可以說這是一種建立在科學(xué)性基礎(chǔ)之上又富含藝術(shù)性特色的設(shè)計(jì)，能夠拉近用戶和應(yīng)用程序之間的距離。在各種買購、社交類APP產(chǎn)品逐漸完備的情況下，在我們的實(shí)際體驗(yàn)中發(fā)現(xiàn)缺少一款基于校園生活的資訊類APP，去為在校生提供校園信息瀏覽的平臺(tái)，主要實(shí)現(xiàn)功能針對(duì)于學(xué)生的校園生活需求，而所做的UI設(shè)計(jì)，正是依附于所設(shè)計(jì)的APP，此款校園資訊類APP的UI設(shè)計(jì)的整體風(fēng)格采用多色彩的扁平式，色彩感較強(qiáng)，視覺感受時(shí)尚。我們相信一款優(yōu)秀的UI設(shè)計(jì)，不僅能夠讓APP看起來品味十足，還能夠讓軟件操作起來順暢自然，從而展示出軟件的特色和價(jià)值。關(guān) 鍵 詞：UI設(shè)計(jì) 校園APP 扁平化界面ABSTRACTInthiseraofrapiddevelopmentofelectronicproducts,UIdesignisbeingmoreandmoredesignerswhopayattentiontoit.AclosegoodsandservicestotheusersmobilephoneAPPUIdesignmakesasmoothinteractiveexperiencetobringpeople,beautifulnewinterfacedesigncanalsohelpproductattractedtheuserseye,wecansaythisisanestablishedscientificbasisoftherichartisticanddistinctivedesign,tonarrowthedistancebetweenusersandapplications.Availableinavarietyofbuying,socialclassAPPproductsgraduallycompleteacase,wefoundalackofpracticalexperienceinaclass-basedinformationAPPcampuslife,campusinformationtoprovidestudentsbrowsingplatform,themainfunctionforatflat,colorsensecampuslifeneedsofstudents,whiledoingUIdesign,itisdependentonthedesignoftheAPP,theoverallstyleofthecampusinformationThisclassAPPUIdesignofmulti-coloredstrongfashionvisualexperience.WebelieveagoodUIdesign,notonlycanmakeAPPlooksfulltaste,butalsoallowsthesoftwaretooperatesmoothandnatural,thusdemonstratingthecharacteristicsandvalueofthesoftware.Keywords:UIdesign CampusAPPFlatinterface 一、緒論（一）設(shè)計(jì)背景智能手機(jī)的推廣促進(jìn)了各類應(yīng)用程序的發(fā)展，像社交類的微信、微博，買購類的美團(tuán)、淘寶，以及娛樂類的逗拍、臉萌，這使得我們的生活變得快捷而豐富。但在我們的校園生活的點(diǎn)點(diǎn)滴滴中，也在各方面體會(huì)到很多與校園生活相關(guān)的消息在收集的過程中存在著些許的不夠便捷，比如對(duì)于大四學(xué)生想處理自己的衣物和書籍除了貼吧卻找不到更為專門的交流平臺(tái)，又比如在校園里除了張貼海報(bào)也找不到其他更新穎普及的方式來宣傳學(xué)院活動(dòng)，我想既然手機(jī)APP是為了提高人們的便捷性，那么也應(yīng)該有更貼近校園生活更有針對(duì)性的應(yīng)用程序來幫忙解決這些被遺漏的角落，因此，我希望設(shè)計(jì)一款對(duì)校園生活更有針對(duì)性的資訊類手機(jī)應(yīng)用程序，借助于時(shí)尚的界面風(fēng)格，來便捷校園生活。（二）設(shè)計(jì)的總體概述我的設(shè)計(jì)的整體思路是依附于一款貼近校園生活的手機(jī)APP原型，來展現(xiàn)出舒適時(shí)尚的移動(dòng)UI設(shè)計(jì)。制作出應(yīng)用程序的圖標(biāo)、按鈕、以及各級(jí)界面的設(shè)計(jì)，使用統(tǒng)一的扁平化的設(shè)計(jì)風(fēng)格，特別重視用戶的需求以及應(yīng)用程序的交互體驗(yàn)，力求在整個(gè)設(shè)計(jì)中注重UI設(shè)計(jì)的基本流程和參考原則的實(shí)際運(yùn)用。同時(shí)，在功能上根據(jù)學(xué)生的實(shí)際生活滿足學(xué)生校園需求，去實(shí)現(xiàn)校園的二手交易、學(xué)生招聘以及學(xué)院活動(dòng)宣傳等資訊的收集功能，能夠方便同學(xué)在自己所在的學(xué)校及時(shí)收集到相應(yīng)的信息，便捷校園生活。二、認(rèn)識(shí)UI設(shè)計(jì)（一）什么是UI設(shè)計(jì)UI是英文單詞User和Interface首字母的縮寫，意為用戶界面，從字面上看是用戶和界面這兩個(gè)部分，實(shí)際上還包括界面和用戶之間的交互關(guān)系，因而UI設(shè)計(jì)被細(xì)分成三個(gè)層面：圖形界面設(shè)計(jì)（GUI）、交互設(shè)計(jì)和用戶研究。在國(guó)內(nèi)，我們對(duì)UI的理解大多數(shù)還停留在美術(shù)設(shè)計(jì)方面，這表明了我們?cè)谟脩艚换サ闹匾陨先狈斫?。同時(shí)，通過在很多軟件公司中人員的比例和待遇的差別上，我們也可以看出，目前國(guó)內(nèi)在軟件開發(fā)過程中依然存在著重技術(shù)而不注重應(yīng)用的現(xiàn)象，這種觀念在某種程度上將制約軟件產(chǎn)品的發(fā)展，使其難以具有長(zhǎng)久的競(jìng)爭(zhēng)力，因而，正確認(rèn)識(shí)UI設(shè)計(jì)的價(jià)值十分重要。UI設(shè)計(jì)不僅僅是進(jìn)行美術(shù)方面的創(chuàng)作，更是對(duì)應(yīng)用程序的使用者、使用方式和使用環(huán)境進(jìn)行分析，最終實(shí)現(xiàn)為用戶服務(wù)，使交互的過程更加流暢簡(jiǎn)便。那么一個(gè)完整的UI設(shè)計(jì)過程則包含三大部分，即前期的數(shù)據(jù)搜集和用戶需求分析、中期的預(yù)定功能實(shí)現(xiàn)以及后期的界面設(shè)計(jì)。1. 前期的數(shù)據(jù)搜集和用戶需求分析這一階段我們首先要明確我們的軟件是給什么人用，比如用戶的年齡、興趣、性別等，同時(shí)要考慮在怎樣的環(huán)境用，最后要參考用戶如何用，是鼠標(biāo)鍵盤還是移動(dòng)設(shè)備上的觸摸屏，總之要通過各種各樣的方式去了解軟件用戶需要什么樣的體驗(yàn)，只有掌握了這部分資料才能對(duì)整個(gè)項(xiàng)目的總體性設(shè)計(jì)做出決策。每一款軟件的推廣離不開對(duì)市場(chǎng)的考察，包括近年來國(guó)內(nèi)外UI軟件的市場(chǎng)規(guī)模和增速、影響市場(chǎng)需求的因素、UI設(shè)計(jì)行業(yè)的競(jìng)爭(zhēng)格局以及UI設(shè)計(jì)的整體走向等，有了這一部分的數(shù)據(jù)搜集，我們才能更好的抓住市場(chǎng)機(jī)遇，同時(shí)了解同類產(chǎn)品的優(yōu)缺點(diǎn)，做到知己知彼、揚(yáng)長(zhǎng)避短。2. 中期的預(yù)定功能實(shí)現(xiàn)在這一階段主要由程序員進(jìn)行功能的實(shí)現(xiàn)，但是仍需要UI設(shè)計(jì)師參與其中。在開發(fā)初期UI設(shè)計(jì)師需要制作出產(chǎn)品每個(gè)模塊的效果圖，使程序員在開發(fā)的過程中能夠更好的把握各個(gè)模塊的統(tǒng)一性，遵從設(shè)計(jì)的整體性，從而共同協(xié)作來設(shè)計(jì)出用戶滿意的產(chǎn)品。3. 后期的界面設(shè)計(jì)在這一階段UI設(shè)計(jì)進(jìn)入界面樣式的設(shè)計(jì)過程，定義產(chǎn)品的整體風(fēng)格，美化圖形設(shè)計(jì)，在設(shè)計(jì)中要滲透到每一級(jí)界面的布局和元素以及文字排版等，要做到注重細(xì)節(jié)、注重用戶的體驗(yàn)，因?yàn)橐粋€(gè)友好舒適的界面設(shè)計(jì)將帶給用戶不一樣的心理感受，給產(chǎn)品帶來巨大的增值功能。界面設(shè)計(jì)也不僅僅是美化界面同時(shí)也包括人機(jī)交互部分，用最舒適、自由、簡(jiǎn)單的操作來滿足用戶的感覺（視覺、聽覺、觸覺）和情感兩個(gè)層次上的需求，通過用戶界面的交互設(shè)計(jì)，人們追求一個(gè)界面不僅實(shí)現(xiàn)置界面于用戶的控制之下，還要減少用戶的記憶負(fù)擔(dān)，也要保持界面的一致性，從而帶給用戶舒適流暢的心理體驗(yàn)，體貼入微的為用戶服務(wù)。（二）UI設(shè)計(jì)的基本流程UI設(shè)計(jì)流程中的第一步是確定目標(biāo)用戶，UI設(shè)計(jì)的一個(gè)重要的任務(wù)就是實(shí)現(xiàn)用戶與界面的交互，而不同的目標(biāo)用戶則會(huì)引起交互設(shè)計(jì)過程中重點(diǎn)的不同，因此通過確定應(yīng)用程序的目標(biāo)用戶，能夠更為直接的去理解用戶的需求，進(jìn)而思考UI設(shè)計(jì)方案。UI設(shè)計(jì)的第二步是采集交互方式，要針對(duì)不同的用戶類型了解用戶的交互習(xí)慣，并進(jìn)而捕捉到用戶想要的交互效果，使得程序的使用者有較為舒適流暢的感受，這對(duì)界面交互的細(xì)節(jié)處理有極其重要的效果。UI設(shè)計(jì)的第三步是指示引導(dǎo)用戶，我們所設(shè)計(jì)的應(yīng)用程序是服務(wù)于用戶的，那么更好的使用戶能夠全面的使用程序，應(yīng)在設(shè)計(jì)過程中具備指示引導(dǎo)的功能，讓用戶可以便捷的了解到應(yīng)用程序的實(shí)際用途，提示給用戶反饋信息，并引導(dǎo)著用戶進(jìn)行下一步操作，使應(yīng)用程序易于上手。（三）UI設(shè)計(jì)的參考原則1.快速流暢身臨其境的產(chǎn)品才更能吸引人，因此在應(yīng)用程序的設(shè)計(jì)中一定要注重與用戶的交互，也只有快速流暢的交互才能夠提供最佳的用戶體驗(yàn)。快速流暢涉及到UI設(shè)計(jì)中的簡(jiǎn)潔性和統(tǒng)一性，通過簡(jiǎn)潔的畫面減少復(fù)雜畫面對(duì)于用戶捕捉信息的干擾，通過界面的風(fēng)格統(tǒng)一性來契合用戶的視覺感受，除此之外，我們?cè)谠O(shè)計(jì)之初也要保證所做的每一個(gè)交互動(dòng)作彼此之間是連續(xù)的，而不是孤立存在的，否則，將會(huì)使程序在使用過程中出現(xiàn)節(jié)點(diǎn)，減少流暢度。2.數(shù)字法則具體的數(shù)字能夠更為直觀的給用戶帶來興奮點(diǎn)，就如同在消息圖標(biāo)上直接顯示消息的數(shù)量，更能引起用戶的注意力。信息的傳遞是應(yīng)用程序的一大任務(wù)，圖表信息的展示則顯得尤為重要，因此，在采用信息圖表的方式基礎(chǔ)上加上動(dòng)態(tài)磁貼的結(jié)合，充分利用數(shù)字對(duì)于人體感官的直接作用，增加界面的功能體現(xiàn)，優(yōu)化用戶的體驗(yàn)。3.優(yōu)化結(jié)構(gòu)在應(yīng)用程序UI的設(shè)計(jì)中，要注重對(duì)層級(jí)結(jié)構(gòu)的平衡，找到一個(gè)最能體現(xiàn)程序特色的排版，因?yàn)榕虐娴暮脡哪軌蛑苯佑绊憫?yīng)用程序的節(jié)奏感和結(jié)構(gòu)感。但是我們?cè)谠O(shè)計(jì)的過程中不能一味注重結(jié)構(gòu)，要將重點(diǎn)放在內(nèi)容上，讓內(nèi)容代替布局，掩蓋住設(shè)計(jì)初期的結(jié)構(gòu)框架，可以充分利用顏色、字體、比例等元素帶給用戶沉浸式的體會(huì)，突出應(yīng)用程序的重點(diǎn)功能，方面用戶進(jìn)行交互。4.界面美觀在快捷、直觀的基礎(chǔ)上要注重界面的美觀性，美好的事物能夠增強(qiáng)用戶的愉悅程度，帶給人舒適的視覺享受，這也是我們?cè)赨I設(shè)計(jì)過程中最直接的要求，注重圖形、色彩搭配等一系列要素的創(chuàng)意性和設(shè)計(jì)感，不僅滿足內(nèi)容需要，更能提升產(chǎn)品的藝術(shù)價(jià)值，因而界面的要做到注重細(xì)節(jié)，力求完美。三、用戶需求分析（一）用戶體驗(yàn)設(shè)計(jì)我們所設(shè)計(jì)的產(chǎn)品最終的目的是要讓用戶進(jìn)行使用，那么用戶的體驗(yàn)才是我們?cè)谠O(shè)計(jì)的過程中要著重思考的。而我們?cè)谟脩趔w驗(yàn)上所追求的目標(biāo)歸根結(jié)底是為了提高用戶使用軟件的效率。這主要是通過兩種方式來加以體現(xiàn)：一是幫助人們變得更快，二是努力減少人們?cè)谑褂密浖^程中出現(xiàn)麻煩的機(jī)會(huì)。一個(gè)產(chǎn)品如果不能滿足用戶的使用效率，那么再多的功能都不能夠被用戶充分的使用，一個(gè)不被欣賞的設(shè)計(jì)是我們不想要的，我們需要用戶對(duì)產(chǎn)品有良好的心理和視覺感受，因而將用戶體驗(yàn)設(shè)計(jì)納入考慮范圍是必不可少。 用戶體驗(yàn)的整個(gè)開發(fā)流程，其實(shí)是為了確保我們?cè)谶M(jìn)行軟件設(shè)計(jì)時(shí)能夠站在用戶的角度，去思考周密并去試圖理解用戶在他們每一個(gè)步驟中所想要的期望值，這樣才能真的為我們的軟件設(shè)計(jì)提供有效的信息，也就是說，只有在設(shè)計(jì)過程中了解到這些用戶想從這個(gè)產(chǎn)品得到什么，理解他們想達(dá)到的這些目標(biāo)將怎樣滿足他們所期待的其他目標(biāo)，才能由此來制定自己的設(shè)計(jì)方案。（二）用戶的功能需求分析確認(rèn)用戶的功能需求是相當(dāng)困難的，因?yàn)椴煌脩羧后w存在著不同的需求和期待。要對(duì)這些用戶的需求尋根求底，必須要定義誰是我們的用戶，這也是UI設(shè)計(jì)流程中第一步所要做的事。當(dāng)我們知道哪些人群是我們想要了解的，就可以對(duì)他們進(jìn)行調(diào)研，這些研究能有助于我們了解當(dāng)用戶使用我們的產(chǎn)品時(shí)，他們想要實(shí)現(xiàn)什么功能，我們的設(shè)計(jì)對(duì)他們生活存在的價(jià)值到底在哪里。對(duì)于我所做的UI設(shè)計(jì)的用戶定義為大學(xué)校園里的學(xué)生，在通過自己以及周圍同學(xué)的校園生活經(jīng)歷中，我們發(fā)現(xiàn)，對(duì)于買購類、社交類的APP已經(jīng)很完備了，但是對(duì)于部分消息的收集存在不及時(shí)不方便缺乏途徑等現(xiàn)象。同學(xué)多數(shù)反映：很多想要在大學(xué)期間體驗(yàn)兼職，但是兼職的消息卻凌亂的張貼在校園的各個(gè)地方難于收集和比較；學(xué)校各個(gè)學(xué)院的活動(dòng)難以及時(shí)收到，有時(shí)錯(cuò)過自己想去的晚會(huì)，或是接到活動(dòng)比賽通知卻已錯(cuò)過報(bào)名日期；對(duì)于自己一些不用但卻質(zhì)量較好用期較短的貨品找不到合適的平臺(tái)進(jìn)行出售，只能通過在學(xué)校廣場(chǎng)集中擺攤點(diǎn)、或是通過貼吧，而對(duì)于東西量少的情況更難以集中起來擺攤出售，而貼吧吧務(wù)卻又常常不允許貼吧買賣這一系列的不方便的情況存在于校園生活的點(diǎn)點(diǎn)滴滴當(dāng)中，雖然事小卻引起了大家的吐槽，針對(duì)這樣的情況進(jìn)行收集和總結(jié)，我認(rèn)為主要需要滿足以下功能： 一是能夠方便收集各類校園兼聘資訊； 二是能夠方便的發(fā)布二手交易的資訊；三是及時(shí)收到全面的學(xué)校活動(dòng)的相關(guān)信息；在了解同學(xué)的各類需求后，我認(rèn)為應(yīng)為程序設(shè)置一個(gè)數(shù)據(jù)庫，添加資訊的收藏功能，使得可以把想要的資訊分條收藏，然后縮小范圍集中比較，這樣將優(yōu)化資訊比較的過程。（三）用戶的視覺需求分析評(píng)估一個(gè)產(chǎn)品視覺設(shè)計(jì)的有效方法之一，就是試著去對(duì)自己提出這樣一系列的問題：你的視線首先落在哪兒？哪個(gè)設(shè)計(jì)要素最先吸引到了用戶的注意力？它們是對(duì)于戰(zhàn)略目標(biāo)來講特別重要的東西嗎？多問自己一些問題，去試著確定視線所停留的地方，一定要注意視線在頁面周圍的、無意識(shí)的移動(dòng)，很多情況下，人們視線的移動(dòng)方式也是我們?cè)O(shè)計(jì)中構(gòu)思的考慮因素。而對(duì)于用戶來說，他們不需要考慮這些問題，只需要根據(jù)自己的感覺走，你們界面的色彩、布局是否給人耳目一新的感覺便顯得尤為重要了。也許用戶的視覺需求就在于這款軟件中是否有一個(gè)圖標(biāo)更為別致、是否整體的風(fēng)格更貼合自己的性格使人感到舒適，因此，我們?cè)谠O(shè)計(jì)中，也應(yīng)該多進(jìn)行換位思考，從用戶的角度得到設(shè)計(jì)的靈感。當(dāng)然，為了在用戶體驗(yàn)中獲得優(yōu)勢(shì)，我們對(duì)界面的要求也應(yīng)該對(duì)功能實(shí)現(xiàn)有所引領(lǐng)作用，即軟件的交互設(shè)計(jì)，讓用戶能夠最容易的發(fā)現(xiàn)接下來的操作，最迅速的掌握整個(gè)軟件的應(yīng)用方式，最有效的提高用戶使用的流暢程度和便捷程度。那么針對(duì)于校園生活的UI視覺需求，我認(rèn)為應(yīng)追求于簡(jiǎn)單和平面，減少商務(wù)色彩，同時(shí)減少雜亂的信息。其實(shí)色彩的作用不僅僅在于豐富和裝飾，用色彩可以代替內(nèi)容，形成內(nèi)容上的分割。下面對(duì)于兩類界面，左側(cè)是QQ中吃喝玩樂模塊的截圖，右側(cè)是SOAPBOX的界面設(shè)計(jì)圖。 對(duì)于左側(cè)騰訊的界面設(shè)計(jì)是國(guó)內(nèi)APP應(yīng)用較多的，包括美團(tuán)、考研幫中都有所應(yīng)用，運(yùn)用各色的圓形圖標(biāo)表達(dá)各類應(yīng)用，同時(shí)下方設(shè)置部分熱門推薦，特別具有應(yīng)用時(shí)效性，而右側(cè)的采用對(duì)比色塊進(jìn)行分割，與時(shí)下微軟發(fā)布的Windows Phone的界面風(fēng)格有相似之處，這類的界面設(shè)計(jì)被稱為Metro，源自于包豪斯風(fēng)格所倡導(dǎo)的“化繁為簡(jiǎn)”，在這樣一種界面的引導(dǎo)下，色彩的運(yùn)用將更為突出，同時(shí)布局整齊簡(jiǎn)易，用戶將會(huì)有流暢快速的操作體驗(yàn)，這也是我在校園APP的UI設(shè)計(jì)中應(yīng)當(dāng)學(xué)習(xí)和借鑒的，通過色彩和窗口分割內(nèi)容帶來新鮮的色彩感。四、UI設(shè)計(jì)工具的體驗(yàn)和簡(jiǎn)介（一）Axure RPAxure RP是一款專業(yè)的快速設(shè)計(jì)APP原型和網(wǎng)頁制作的軟件，可以制作出逼真的、基于HTML代碼的網(wǎng)站原型和APP原型，用于評(píng)估、需求說明、提案、策劃等各種不同的目的，能夠相應(yīng)用戶的點(diǎn)擊、鼠標(biāo)懸停、拖拽、提交表單、超鏈接等各種事件。同時(shí)，Axure RP作為專業(yè)的原型設(shè)計(jì)工具，能夠?yàn)樵O(shè)計(jì)師們高效的創(chuàng)建原型，同時(shí)也能支持多人的協(xié)作和版本的控制管理。在我使用Axure RP設(shè)計(jì)APP原型之前，曾嘗試過墨刀這款專用于APP原型設(shè)計(jì)的軟件，墨刀的實(shí)現(xiàn)功能較為簡(jiǎn)單易于上手，主要通過全局手勢(shì)來完成各級(jí)界面的跳轉(zhuǎn)，可以實(shí)現(xiàn)基本的抽屜功能以及tab菜單等的設(shè)計(jì)，但是墨刀軟件相對(duì)不成熟，存在著啟動(dòng)界面進(jìn)入遲緩、部件過少、無法實(shí)現(xiàn)數(shù)據(jù)庫的虛擬等一系列的問題，最終讓我放棄了墨刀，選擇了Axure軟件。在我的使用過程中，我認(rèn)為Axure功能較為強(qiáng)大，它的工作環(huán)境主要包括主菜單和工具欄、站點(diǎn)地圖面板、控件面板、模塊面板、線框圖工作區(qū)、頁面注釋和交互區(qū)、控件交互面板以及空間注釋面板等八部分組成，可以實(shí)現(xiàn)條件、動(dòng)作、事件的添加，同時(shí)可進(jìn)行界面美化操作，其中，動(dòng)態(tài)面板的使用為實(shí)現(xiàn)APP界面的多功能跳轉(zhuǎn)提供了便捷，但軟件的使用過程也需要設(shè)計(jì)者較好的邏輯思維和UI設(shè)計(jì)靈感。（二）Photoshop對(duì)于UI設(shè)計(jì)中的各級(jí)界面設(shè)計(jì)我主要應(yīng)用了Photoshop，其實(shí)它的專長(zhǎng)在于圖像處理，但因?yàn)楫?dāng)前用于界面設(shè)計(jì)的專業(yè)軟件較少，大多數(shù)人還是采用PS來進(jìn)行美工制作，它能進(jìn)行廣泛的平面設(shè)計(jì)，例如制作海報(bào)招貼，同時(shí)也能實(shí)現(xiàn)圖形創(chuàng)意制作，比如手機(jī)圖標(biāo)的自主設(shè)計(jì)等，可以說是一款比較出名的圖像編輯器。PS軟件可以實(shí)現(xiàn)圖像的編輯和合成、校色調(diào)色等功能去制作設(shè)計(jì)中所需要的圖片素材，如我們校園APP中的圖標(biāo)的制作，也可以實(shí)現(xiàn)對(duì)圖像做各種變換如放大、旋轉(zhuǎn)、傾斜、鏡像、修飾、透視等處理，還能通過對(duì)圖像通過圖層操作、工具應(yīng)用來合成圖像，同時(shí)可以方便地對(duì)圖像的顏色進(jìn)行明暗、色偏的校正調(diào)整以及特效制作，實(shí)現(xiàn)外來圖像與創(chuàng)意的很好融合。五、APP原型的功能實(shí)現(xiàn)根據(jù)前期的用戶需求調(diào)研，針對(duì)于收集兼職信息、進(jìn)行二手交易、查看校園活動(dòng)信息等需求，決定在功能中主要設(shè)置四個(gè)模塊，分別是：找兼職模塊、二手交易模塊、校園活動(dòng)模塊和收藏模塊，在每個(gè)模塊中針對(duì)實(shí)際情況將各類消息分類發(fā)布在app中，并對(duì)每條消息提供瀏覽和收藏功能。此外，為了提高app的針對(duì)性，對(duì)學(xué)?？蛇M(jìn)行設(shè)置，使得其中的內(nèi)容能夠局限在本學(xué)校，也可通過“添加”進(jìn)行添加學(xué)校，方便用戶隨意選擇，這樣保證了信息收集的范圍。（一）找兼職模塊在找兼職模塊中主要滿足用戶搜集與學(xué)生兼職相關(guān)的各招聘信息，而校內(nèi)兼職和日結(jié)算兼職對(duì)于在校學(xué)生而言更具吸引力，因此在模塊的首頁上方設(shè)置校內(nèi)兼職和日結(jié)算區(qū)兩個(gè)矩形色彩框進(jìn)行便利導(dǎo)航。同時(shí)根據(jù)學(xué)生力所能及的工作類別下設(shè)熱門招聘、教育藝術(shù)、IT設(shè)計(jì)三個(gè)子模塊展示在模塊首頁，進(jìn)行部分招聘信息的展示以方便搜索，其中每一個(gè)工作名稱均為按鈕設(shè)定，可點(diǎn)擊查看該類工作的具體職位及其相關(guān)信息。各級(jí)界面示意圖：各級(jí)界面展示：此界面是找兼職模塊的一級(jí)界面，主要功能是分類展示了校園可以搜集到的各種兼職信息，每一個(gè)小分類都完全貼合校園同學(xué)的實(shí)際需求，每一個(gè)按鈕可點(diǎn)擊進(jìn)入下一級(jí)界面。圖一： 圖二： 以找兼職模塊中左上方的“校內(nèi)兼職”按鈕為例，點(diǎn)擊按鈕則可出現(xiàn)上方圖一所示的界面，每一橫欄代表一個(gè)兼職信息，而右側(cè)綠黃相間的矩形條一方面為了區(qū)分相鄰兩項(xiàng)兼職信息，另一方面，每一個(gè)彩色矩形可點(diǎn)擊，點(diǎn)擊后向左滑動(dòng)出現(xiàn)心形的收藏按鈕，如上圖二所示。點(diǎn)擊每個(gè)兼職信息則出現(xiàn)找兼職模塊的第三級(jí)界面，即該兼職的詳情，詳情頁面將再次設(shè)有心形的收藏按鈕，方便用戶在此頁面直接點(diǎn)擊收藏，不必返回上一級(jí)頁面，如圖所示。同時(shí)，該頁還將顯示此條兼職信息的具體介紹，包括薪資待遇、招聘人數(shù)、工作時(shí)間、工作區(qū)域、職位描述以及聯(lián)系方式，使用戶能夠及時(shí)便捷的了解相關(guān)信息，必要時(shí)可通過電話聯(lián)系與招聘單位協(xié)商。 （二）校園二手交易模塊該模塊主要針對(duì)于同校的學(xué)生難以進(jìn)行二手貨品的交流現(xiàn)象，能夠?yàn)榇髮W(xué)生提供一個(gè)方便的貨物交換的平臺(tái)。賣家可以將自己不用的部分衣物或者書籍拍照，同時(shí)將信息分類掛在校園APP中，而同學(xué)在瀏覽各類信息中可選擇是否有自己鐘意的物品，通過其中提供的具體信息可以與同校的或者附近學(xué)校的同學(xué)進(jìn)行溝通、交易。這樣不僅減少了物品的浪費(fèi)，同時(shí)對(duì)于買家來說，既減少了網(wǎng)上購置新物的郵費(fèi)，又能買到可以看到實(shí)物的廉價(jià)商品。根據(jù)學(xué)生需要進(jìn)行交易的物品進(jìn)行分類，主要是服飾、鞋帽、電子產(chǎn)品、書本和其他物品五類，每一類之中包含具體的商品，主要是通過賣家上傳的圖片進(jìn)行商品的展示，用戶可選擇對(duì)此類消息進(jìn)行收藏或者繼續(xù)點(diǎn)開商品詳情了解商品的相關(guān)信息和賣家的聯(lián)系方式。各級(jí)界面示意圖：各級(jí)界面展示：這是二手交易的一級(jí)界面，五種物品的分類對(duì)應(yīng)五個(gè)色塊，每個(gè)色塊在點(diǎn)擊時(shí)會(huì)出現(xiàn)顏色瞬間透明度下降這一交互現(xiàn)象來提示用戶，給予視覺上的感知。 以二手交易中的第一個(gè)服飾類為例，點(diǎn)擊一級(jí)界面中的第一個(gè)色塊則出現(xiàn)此頁面，與找兼職模塊中的設(shè)計(jì)一致的是，右邊同樣設(shè)有綠黃相間的矩形，其功能不變，而不同的是，每一橫欄左邊出現(xiàn)了一個(gè)小型的圖片展示窗口，這與二手交易的功能設(shè)定相匹配，便于用戶直觀的了解物品的外觀，來決定是否有必要進(jìn)入下一級(jí)界面查看物品詳情。 在二手交易的詳情界面主要是物品的大圖展示，同樣再次設(shè)置了心形收藏按鈕，同時(shí)在該頁還說明了物品的價(jià)格及相關(guān)的物品描述，如衣服的大小號(hào)、使用情況等，使用戶對(duì)該二手物品的新舊程度和各項(xiàng)參數(shù)有個(gè)初步的認(rèn)識(shí)，若想了解具體情況，也可通過聯(lián)系方式進(jìn)行溝通，因?yàn)榇薃PP基于附近或自己所在的大學(xué)校園，則為買家和賣家提供了更多的便利。（三）校園活動(dòng)模塊該模塊的主要作用是方便學(xué)校各學(xué)院學(xué)生會(huì)同學(xué)將近期內(nèi)本學(xué)院即將開展的活動(dòng)信息發(fā)布在APP上，提供活動(dòng)地點(diǎn)、活動(dòng)時(shí)間、活動(dòng)形式和內(nèi)容等，使得學(xué)校同學(xué)能夠更為集中的了解近期內(nèi)整個(gè)校園的課外活動(dòng)安排，有選擇的參加或是觀看，這對(duì)豐富校園生活，提高校園活動(dòng)參與度有一定的積極作用。各級(jí)界面展示：該界面是校園活動(dòng)模塊的一級(jí)界面，根據(jù)校園活動(dòng)的類型分成了四大類，分別是知識(shí)競(jìng)賽類、音樂類、體育運(yùn)動(dòng)類和娛樂休閑類，這四類基本包含了所有的校園活動(dòng)類型，每一類型的活動(dòng)子模塊以矩形色塊配以圖形表示出來，整體設(shè)計(jì)采用窗口式方式排列，但窗口大小不進(jìn)行統(tǒng)一，給用戶活潑的體驗(yàn)。每一個(gè)窗口可點(diǎn)擊使用戶有選擇的進(jìn)入下一級(jí)界面，且在點(diǎn)擊時(shí)設(shè)計(jì)交互現(xiàn)象，如圖上知識(shí)競(jìng)賽類窗口，字體添加陰影，而其他窗口中的字體無任何變化。以校園活動(dòng)的第一個(gè)知識(shí)競(jìng)賽類為例，點(diǎn)擊藍(lán)色窗口進(jìn)入二級(jí)界面，此界面與之前兩個(gè)模塊的二級(jí)界面設(shè)計(jì)排版一致，成矩形列表狀排列，同樣，右側(cè)綠黃相間的矩形具備點(diǎn)擊出現(xiàn)收藏按鈕。與競(jìng)賽類相關(guān)的比賽通知和報(bào)名公告在此界面顯示。在活動(dòng)詳情界面，上方以大圖片展示的方式顯示該活動(dòng)的宣傳海報(bào)，在某種程度上也是吸引同學(xué)參加活動(dòng)的有效方式，與之前的詳情界面保持一致的是也再次設(shè)有心形收藏按鈕和該活動(dòng)的詳情描述，包括比賽時(shí)間、比賽要求、報(bào)名方式等，可根據(jù)活動(dòng)實(shí)際情況進(jìn)行添加，最后設(shè)置咨詢電話方便用戶與活動(dòng)負(fù)責(zé)人進(jìn)行進(jìn)一步溝通聯(lián)絡(luò)。 （四）收藏模塊收藏模塊主要屬于后臺(tái)的數(shù)據(jù)庫設(shè)計(jì)，能夠儲(chǔ)存用戶在瀏覽過程中收藏的資訊，方便用戶對(duì)自己感興趣的信息進(jìn)行收集，例如收藏兼職的相關(guān)信息，則可通過收藏模塊進(jìn)行幾條信息的對(duì)比，這樣能夠更直觀而方便，同時(shí)可以通過數(shù)據(jù)集實(shí)現(xiàn)信息的添加和刪除操作，方便對(duì)個(gè)人收藏夾內(nèi)容的管理。而在頁面設(shè)置上主要采用列表的形式進(jìn)行排版，使條目清晰，力求簡(jiǎn)潔明了。點(diǎn)擊心形收藏按鈕，在收藏模塊會(huì)加入這一條信息下面是收藏功能的展示： 點(diǎn)擊刪除，則會(huì)刪除該條收藏六、APP原型的界面設(shè)計(jì)（一）界面設(shè)計(jì)的風(fēng)格界面設(shè)計(jì)的風(fēng)格其實(shí)也是一種設(shè)計(jì)語言，它定義了整個(gè)軟件界面的視覺第一效果，在欣賞了很多國(guó)內(nèi)國(guó)外移動(dòng)UI設(shè)計(jì)的效果圖后，給我留下印象最深的有兩種，一種是大視野背景圖風(fēng)格的界面，而另一種是多色彩的扁平化界面。我認(rèn)為這兩款設(shè)計(jì)風(fēng)格都不乏時(shí)尚性，第一種大視野背景圖的最大優(yōu)勢(shì)是提升了視覺的表現(xiàn)力度，同時(shí)極大的豐富了APP的情感化元素，能夠很快的抓住用戶的眼球。這種設(shè)計(jì)方法雖然極易渲染氛圍，但是實(shí)際上對(duì)文字、排版設(shè)計(jì)的要求變得更高，難度也大的多，因?yàn)樗鼘?duì)于前景的信息排布設(shè)計(jì)是有很大挑戰(zhàn)的，畢竟內(nèi)容豐富的背景比較容易干擾用戶的注意力，這樣就會(huì)減小前景的文字內(nèi)容的可讀性。所以有時(shí)常?？吹叫枰阎匾僮饔妹鞔_的色塊來進(jìn)行區(qū)隔，將閱讀型文字從背景圖中突出出來。而第二種扁平化設(shè)計(jì)已經(jīng)成為移動(dòng)設(shè)備界面設(shè)計(jì)的一種發(fā)展趨勢(shì)，它運(yùn)用簡(jiǎn)單的設(shè)計(jì)元素，更為關(guān)注色彩的運(yùn)用，同時(shí)精簡(jiǎn)設(shè)計(jì)，減少了很多不必要的元素，像如那些透視、紋理等等，往往帶給人別具一格的視覺感受，使界面清新簡(jiǎn)單又美麗十足。綜合這兩種自己最為欣賞的風(fēng)格，考慮到設(shè)計(jì)的難度與用戶的適應(yīng)程度，結(jié)合校園APP的主題，我認(rèn)為選取多色彩的扁平化風(fēng)格則更為凸顯年輕與活力，同時(shí)能夠簡(jiǎn)化操作，切合本款校園App內(nèi)容相對(duì)量少的特點(diǎn)。通過對(duì)一系列扁平化設(shè)計(jì)方案的研究，不難發(fā)現(xiàn)，扁平化不僅體現(xiàn)在多色彩的運(yùn)用上，同時(shí)它又是貫穿整個(gè)設(shè)計(jì)始終的，包括軟件中圖標(biāo)的設(shè)計(jì)、圖案的運(yùn)用，而相比較而言，線性的圖標(biāo)設(shè)計(jì)搭配鮮亮色往往能出現(xiàn)比較好的設(shè)計(jì)效果。啟動(dòng)界面展示圖：此款校園APP主要的功能是用來搜集信息的，因而以“尋找和瀏覽”為主題設(shè)計(jì)圖標(biāo)，同時(shí)“眼睛”的圖形，加之“LOOK”整體形成放大鏡的造型，意為“尋找和瀏覽”，考慮到藍(lán)色和黑色的圖標(biāo)，配置以黃色的背景，形成色彩的對(duì)比，簡(jiǎn)單的輸入窗口與按鈕與整體形成色塊的分割，整個(gè)圖標(biāo)和界面具有扁平化特點(diǎn)。如圖所示，用戶名和密碼窗口設(shè)有獲取焦點(diǎn)的功能，點(diǎn)擊可獲得光標(biāo)，且密碼窗口采用輸密碼的格式，輸入的字符以黑色圓點(diǎn)顯示，點(diǎn)擊登錄可進(jìn)入APP首頁。APP的首頁的效果體驗(yàn)是用戶進(jìn)入該應(yīng)用程序的第一印象，一個(gè)完整的首頁設(shè)計(jì)主要包括廣告圖、導(dǎo)航、應(yīng)用程序各部分內(nèi)容等，通過首頁可以鏈接到各個(gè)分頁。按照用戶的特征與需求，來定義界面中每個(gè)元素的風(fēng)格和視覺效果，從而展示整個(gè)應(yīng)用程序的整體設(shè)計(jì)風(fēng)格，合理的APP首頁布局和交互設(shè)計(jì)可以給用戶的體驗(yàn)帶來便利。因此，首頁的設(shè)計(jì)則顯得尤為重要。在我的APP首頁設(shè)計(jì)中，主要分為三部分內(nèi)容。第一，是一個(gè)圖片輪播的廣告區(qū)，每張圖片對(duì)應(yīng)“校園兼職”、“校園二手交易”和“校園活動(dòng)”的主題，起到對(duì)APP中主要模塊的宣傳功能，每張圖片以2500毫秒的速度進(jìn)行循環(huán)播放，給首頁增加了動(dòng)態(tài)的視覺效果，同時(shí)廣告海報(bào)的設(shè)計(jì)風(fēng)格貼近校園生活，與首頁整體的界面風(fēng)格相匹配。輪播圖片的展示：這是關(guān)于二手交易的廣告海報(bào)，另外兩張將在接下來的截圖中有所展示，此處不重復(fù)上傳。第二，設(shè)置學(xué)校添加區(qū)，在圖片輪播的右下方有一個(gè)星形的線性圖標(biāo)，左側(cè)顯示目前所選擇的學(xué)校名稱，點(diǎn)擊星形圖標(biāo)可進(jìn)行學(xué)校的添加，而整個(gè)APP的范圍則限定在所選的學(xué)校校園之內(nèi)，進(jìn)一步方便用戶。由下向上滑出點(diǎn)擊 第三，四個(gè)模塊的導(dǎo)航區(qū)，采用22網(wǎng)格布局，使用沒有圓角和折邊的純矩形作為模塊窗口，用對(duì)比度較為強(qiáng)烈的鮮艷色塊作為圖標(biāo)的底色，采用簡(jiǎn)單的純白色線性圖標(biāo)，使首頁的界面帶有Metro風(fēng)格。（二）圖形的樣式在整個(gè)app的UI設(shè)計(jì)中，圖標(biāo)的應(yīng)用是極為廣泛的，為了適應(yīng)界面以及配合整體的設(shè)計(jì)思路，我們需要有很多具備自己app特點(diǎn)的圖標(biāo)，以顯示整體設(shè)計(jì)風(fēng)格的一致性，否則將達(dá)不到UI設(shè)計(jì)參考原則中對(duì)于快速流暢的要求。因此，圖標(biāo)的設(shè)計(jì)要考慮到app的具體內(nèi)容、板塊設(shè)置、風(fēng)格特點(diǎn)以及色彩搭配。根據(jù)實(shí)際的板塊，首先主界面需要四個(gè)圖標(biāo)來分別代表四個(gè)相應(yīng)的模塊，而對(duì)于每一個(gè)模塊中的子模塊也必須要配套的圖標(biāo)，用二手交易模塊來舉例，該模塊中又根據(jù)交易的類別細(xì)分為五個(gè)條目，分別為服飾、鞋帽、電子產(chǎn)品、書本和其他物品五類，即需要為此設(shè)計(jì)相關(guān)具有藝術(shù)性和代表性的圖標(biāo)。除此之外，導(dǎo)航類的按鈕也需要添加圖標(biāo)，像如“后退”、“添加”等，而我們?cè)谠O(shè)計(jì)中要做的就是讓這些圖標(biāo)能夠清晰而形象的表現(xiàn)出相應(yīng)的內(nèi)容，富有極大的辨識(shí)度，同時(shí)具備一致性的設(shè)計(jì)風(fēng)格。以上列舉了二手交易中的圖標(biāo)，采用扁平化設(shè)計(jì)，但在此基礎(chǔ)上，仍能通過運(yùn)用添加圖層蒙版為每個(gè)圖案添加色彩上的陰影，既不破壞扁平化的美感，又能使得效果更佳。同時(shí)，圓形元素的使用區(qū)分于主界面上的方形色塊的運(yùn)用，使得主模板與子模板圖標(biāo)在色塊面積上有所分別，便于區(qū)分主次，而色彩的豐富度也有所提高，顯示了其內(nèi)容的細(xì)化性。 這三款圖標(biāo)是該APP中“收藏”“刪除”“添加學(xué)校”的圖標(biāo)樣式，均以矩形色塊配以純白色線性icon設(shè)計(jì)而成，簡(jiǎn)單大方，意義明顯，具有較好的標(biāo)識(shí)度，能夠給用戶起到良好的引領(lǐng)作用。（三）界面的配色方案色彩在界面設(shè)計(jì)中是最具有表現(xiàn)力和感染力的元素，它能夠通過人們的視覺感受來產(chǎn)生一系列的效應(yīng)，比如心理和生理上的反應(yīng)以及類似物理的效應(yīng)等，形成豐富的聯(lián)想和意義深刻的象征。對(duì)于界面的配色方案，有其內(nèi)在的科學(xué)性法則，但呈現(xiàn)給用戶的則是第一視覺上的感受，一般分為三個(gè)大類：由色相差形成的配色方案，由色調(diào)調(diào)和形成的配色方案和由對(duì)比配色形成的配色方案，每一種又有所細(xì)分，如下表所示：在我的設(shè)計(jì)中主要運(yùn)用第三中配色方案中的色相對(duì)比，采用多色對(duì)比的方式構(gòu)成不同色塊，并在色彩的搭配中多采用鮮亮色，結(jié)合不同的亮背景或者暗背景，調(diào)整色調(diào)和飽和度，使其能有合適的搭配，但是，在同一個(gè)子模塊中，做到盡量避免過多的對(duì)比，使得頁面趨于整潔，避免過于雜亂。 如圖所示，每一個(gè)模塊下的子頁面標(biāo)題均采用與首頁模塊圖標(biāo)相一致的底色，同樣采用純白色字體顏色和符號(hào)顏色，提高了用戶在交互體驗(yàn)中的流暢性，體現(xiàn)了“總體協(xié)調(diào)、局部對(duì)比”的色彩應(yīng)用原則。色彩的運(yùn)用也在于與圖形的搭配當(dāng)中，每一個(gè)矩形按鈕的底色與圖形的背景顏色相一致，使圖形與欄目形成緊密的結(jié)合，真正起到導(dǎo)航用戶的作用。（四）結(jié)構(gòu)排版排版是在UI設(shè)計(jì)中也十分重要，它是將文字、圖片等基本元素在整個(gè)設(shè)計(jì)界面中調(diào)整，使界面的布局產(chǎn)生條理化的過程，好的結(jié)構(gòu)排版能夠讓用戶更容易方便的去閱讀、接受軟件提供給他們的資訊。結(jié)構(gòu)排版扮演著內(nèi)容與用戶之間溝通橋梁的角色，在設(shè)計(jì)中要讓用戶不需要特別的努力、訓(xùn)練就可以了解提供的內(nèi)容；與之相反，糟糕的排版可能會(huì)讓用戶產(chǎn)生拒絕的心理，難以接受這些內(nèi)容。因此，排版對(duì)于資訊類的APP十分重要。排版設(shè)計(jì)也會(huì)因?yàn)椴煌那榫?、需求而不同，排版的基本要素如下?. 對(duì)齊任何的東西都不能隨意擺放，在每一個(gè)元素之間都具有某種視覺關(guān)系?？梢岳脤?duì)齊的方式建立一個(gè)清楚整齊的外觀。2. 親密彼此相關(guān)的內(nèi)容應(yīng)緊密的靠在一起，反之那些不相關(guān)的內(nèi)容需要保持距離?？梢岳糜H密性來強(qiáng)調(diào)畫面的架構(gòu)與組織。3. 重復(fù)重復(fù)視覺要素的大小、顏色、字體、空間等，能夠增強(qiáng)條理性，同時(shí)也能增強(qiáng)整體的一致性。4. 對(duì)比為了避免頁面上元素太過于相似，如果它們不同，那就讓他們保持截然不同的效果。讓重要的內(nèi)容引人注目，讓用戶直接看到它們?！凹埳系脕斫K覺淺，絕知此事要躬行”，太多的理論知識(shí)也需要實(shí)際的設(shè)計(jì)中反復(fù)推敲研究，才能夠配合好界面風(fēng)格和內(nèi)容，轉(zhuǎn)換成設(shè)計(jì)的圖稿。而這款校園APP中所用到的排版可以整理為兩類：一是列表式，用來羅列各類消息，這也是用的最多的一種，在找兼職和二手交易的子模塊中均有使用，這體現(xiàn)了排版要素中的對(duì)齊、緊密、重復(fù)的原則，相似的要素排列整齊；二是窗口式，更為簡(jiǎn)潔而又直接的表現(xiàn)內(nèi)容，同時(shí)令界面有新穎感，在主界面以及校園活動(dòng)子模塊有所體現(xiàn)?？傊?，結(jié)構(gòu)排版是否清晰合理，關(guān)系著用戶的視覺流程的通暢程度和信息傳達(dá)的明確性，排版的重要意義在某種程度上是統(tǒng)一應(yīng)用程序的形式內(nèi)容，將各種視覺要素做出整體性上的安排考慮，從而增強(qiáng)用戶的注意力和理解力。七、后臺(tái)數(shù)據(jù)庫的設(shè)計(jì)每款A(yù)PP中比較重要的設(shè)計(jì)在于后臺(tái)數(shù)據(jù)庫的創(chuàng)建，而在我們的校園資訊類APP中，所用到的數(shù)據(jù)庫功能主要體現(xiàn)在收藏模塊當(dāng)中，具體操作為對(duì)每一條信息都含有一個(gè)收藏的圖標(biāo)，點(diǎn)擊圖標(biāo)可使此條信息收藏進(jìn)收藏模塊，同時(shí)點(diǎn)開收藏模塊可查看之前收藏的信息，這樣的一個(gè)操作在Axure開發(fā)工具中主要通過中繼器（repeater）來實(shí)現(xiàn)。中繼器的主要部分有三個(gè)，分別是主頁、項(xiàng)目交互和數(shù)據(jù)集。當(dāng)然，也可以進(jìn)行樣式、屬性等一系列的設(shè)置。主頁就像其他的設(shè)計(jì)頁面一樣，可以把用到的元件拖放進(jìn)來，來進(jìn)行合適的排版以完成單個(gè)模塊所形成的最終效果，同時(shí)結(jié)合數(shù)據(jù)集來形成重復(fù)的項(xiàng)目列表。數(shù)據(jù)集則是以表的形式充當(dāng)存儲(chǔ)數(shù)據(jù)的容器，可以讓每一行數(shù)據(jù)對(duì)應(yīng)一組模塊，而這個(gè)模塊也是可以根據(jù)我們的所需進(jìn)行設(shè)計(jì)的，比如圖片加文字橫向形成一個(gè)模塊等。中繼器的數(shù)據(jù)集能實(shí)現(xiàn)查（篩選、排序）、增、刪、改的動(dòng)作。中繼器的項(xiàng)目列表可以實(shí)現(xiàn)分頁的功能，也可以通過動(dòng)作進(jìn)行控制頁碼，在我的收藏模塊中主要實(shí)現(xiàn)增和刪的動(dòng)作。在Axure中，中繼器里所顯示的列表項(xiàng)與中繼器的數(shù)據(jù)集相關(guān)，在默認(rèn)情況下是一一相對(duì)的。也就是說，中繼器數(shù)據(jù)集中有多少行數(shù)據(jù)，那么，列表項(xiàng)就有多少個(gè)，比如我們的收藏夾中有3個(gè)項(xiàng)目，那么就有3行數(shù)據(jù)排列在中繼器的數(shù)據(jù)集當(dāng)中。中繼器的使用是相對(duì)難度較大的，通過實(shí)際應(yīng)用，我認(rèn)為它在某種程度上提供的是一種虛擬的數(shù)據(jù)容器，可以實(shí)現(xiàn)數(shù)據(jù)間的交流，如下圖：我們要收藏的是收藏圖標(biāo)所指示的文本內(nèi)容數(shù)據(jù)集中列表項(xiàng)命名為text（有所區(qū)分）我們將中繼器命名為TEXTS 中繼器展示窗口TEXT圖形所指示的文本圖形數(shù)據(jù)集與中繼器展示窗口之間實(shí)現(xiàn)文字連接通過點(diǎn)擊圖形，將圖形所指示的文本，添加行到數(shù)據(jù)集中數(shù)據(jù)集text通過中繼器中數(shù)據(jù)集和項(xiàng)目交互的設(shè)置，能夠?qū)崿F(xiàn)我們校園APP中的收藏功能，用戶可以有選擇的對(duì)自己感興趣的信息進(jìn)行收藏，更方便用戶進(jìn)行自己所需信息的管理，實(shí)現(xiàn)“添加”和“刪除”，使的該APP的功能進(jìn)一步完備。中繼器是Axure 7.0推出的新功能，它的使用十分的廣泛，如登錄界面的驗(yàn)證、復(fù)選框與標(biāo)簽的同步、搜索等，當(dāng)然很多人說中繼器也是目前為止Axure中最為復(fù)雜的功能實(shí)現(xiàn)、沒有之一，因而充分利用中繼器，通過我們的不斷的學(xué)習(xí)和積累，將會(huì)創(chuàng)作出更為完備實(shí)用的APP原型。八、總結(jié)（一）遇到的問題