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

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