一個(gè)關(guān)于寵物護(hù)理App的界面設(shè)計(jì)——畢業(yè)論文

《一個(gè)關(guān)于寵物護(hù)理App的界面設(shè)計(jì)——畢業(yè)論文》由會員分享，可在線閱讀，更多相關(guān)《一個(gè)關(guān)于寵物護(hù)理App的界面設(shè)計(jì)——畢業(yè)論文（23頁珍藏版）》請?jiān)谘b配圖網(wǎng)上搜索。

1、淮南師范學(xué)院本科畢業(yè)論文畢業(yè)設(shè)計(jì)題 目： 一個(gè)關(guān)于寵物護(hù)理App的界面設(shè)計(jì)學(xué)生姓名 ： 學(xué)號 ： 所在院(系)： 文化創(chuàng)意與傳播學(xué)院專業(yè)名稱 ： 數(shù)字媒體技術(shù)屆別 ： 指導(dǎo)教師 ： 職稱(學(xué)位)： 淮南師范學(xué)院教務(wù)處印制目 錄1項(xiàng)目概述32項(xiàng)目分析32.1背景分析32.2用戶分析32.3競品分析43項(xiàng)目設(shè)計(jì)63.1設(shè)計(jì)思路63.2產(chǎn)品線框圖73.3設(shè)計(jì)要求84項(xiàng)目詳細(xì)設(shè)計(jì)94.1界面風(fēng)格設(shè)計(jì)94.2圖標(biāo)展示與說明94.3界面設(shè)計(jì)實(shí)現(xiàn)114.4整體效果設(shè)計(jì)145設(shè)計(jì)體會16參考文獻(xiàn)：17致謝18一個(gè)關(guān)于寵物護(hù)理App的界面設(shè)計(jì)學(xué)生： (指導(dǎo)老師： )淮南師范學(xué)院文化傳播與創(chuàng)意學(xué)院 摘 要:APP

2、的界面是用戶與機(jī)器之間進(jìn)行信息交流的媒介，是人與系統(tǒng)互動(dòng)過程 的一個(gè)支持層面。界面設(shè)計(jì)所涉及到的領(lǐng)域有計(jì)算機(jī)科學(xué)，心理學(xué)，美 學(xué)和人機(jī)系統(tǒng)工程，注重的是人機(jī)交互，界面元素之間邏輯合理，排版 美觀的整體設(shè)計(jì)。隨著社會的發(fā)展，人們對APP的使用率越來越高，從 而對界面的要求也越來越嚴(yán)格，為了滿足人們的需求和適應(yīng)時(shí)代的發(fā)展， App界面設(shè)計(jì)也在不斷的加強(qiáng)創(chuàng)新性和時(shí)代性。我的作品是一款寵物護(hù)理 APP的界面設(shè)計(jì),伴隨著社會經(jīng)濟(jì)的快速發(fā)展和人類生活觀念的改變，養(yǎng) 寵物的人越來越多而且變得越來越年輕化，寵物市場正在一步步的崛起。 因此設(shè)計(jì)一款煥然一新的寵物護(hù)理APP，是非常具有市場意義的。我的這 款手機(jī)A

3、PP界面在設(shè)計(jì)上主題明確，整體色彩豐富多樣，風(fēng)格整體統(tǒng)一， 秉承著實(shí)用性強(qiáng)和服務(wù)功能全面的思路給用戶帶來便捷、貼心的交互體 驗(yàn)。 關(guān)鍵詞：APP；界面設(shè)計(jì)；人機(jī)交互；寵物護(hù)理About a Pet Care APP Interface DesignStudent:Hao Zonghao (Adviser:Tan Lunrong )( Huainan normal university culture creativity &communication )Abstract:Userinterfaceisthemediumofexchangeofinformationbetweenuserandm

4、achine,peopleinteractwiththesystemisasupportlevel.Interfacedesigninvolvesthefieldofcomputerscience,psychology,aestheticsandtheman-machinesystemengineering,focusesonhuman-computerinteraction,interfaceelementsbetweenthelogicalandreasonable,theintegraldesignofthelayoutisbeautiful.Withthedevelop-mentoft

5、hesociety,peoplesutilizationrateishigherandhighertotheAPP,whichisbecomingmoreandmorestricttotherequirementoftheinterface,inordertosatisfypeoplesneedsandadapttothedevelopmentofTheTimes,theAPPinterfacedesignalsoconstantlystrengthentheinnovativeanddynamic.MyworkisapetcareAPPinterfacedesign,alongwiththe

6、rapiddevelopmentofsocialeconomyandthechangeofthehumanlifeconcept,moreandmorepetownersandbecomemoreandmoreyounger,petmarketisrisestepbystep.SodesignanewpetcareAPP,isverymarketsignificance.IthephoneAPPinterfaceindesignthemeisclear,theoverallcolorvariety,styleisunifiedwhole,withstrongpracticabilityands

7、ervicefunctioncomprehensivethinkingbringstotheuser,andintimateinteractionexperience. Keywords:APP;Interfacedesign;Human-computerinteraction;Petcare. 1項(xiàng)目概述 在社會經(jīng)濟(jì)和城市化建設(shè)的不斷發(fā)展過程中，人們在精神生活和物質(zhì)生活方面也得到了很大的改變，隨著社會的老齡化現(xiàn)象突出，獨(dú)生子女和丁克家庭也越來越普及，人們在休閑方式上,消費(fèi)觀念和情感寄托方面也變得越來越多樣化。我們發(fā)現(xiàn)養(yǎng)寵物的家庭在日益增多，一個(gè)新的產(chǎn)業(yè)，也就是寵物行業(yè)會有非常可觀的發(fā)展。因?yàn)?/p>

8、養(yǎng)寵物的人越來越多而且變得越來越年輕化，所以寵物市場正在不斷的興起。而隨著人們對養(yǎng)寵物的熱度越來越高，不難發(fā)現(xiàn)寵物行業(yè)中的美容、醫(yī)療、保健、寄養(yǎng)、訓(xùn)練、比賽、攝影等護(hù)理服務(wù)將會不斷地發(fā)展開。所以目前中國的寵物市場正處于持續(xù)發(fā)展的時(shí)期，而在這斷發(fā)展的過程中必然會有一些不可忽視的問題出現(xiàn)。因此，寵物健康、高效地發(fā)展需要線上與線下聯(lián)合調(diào)控。目前市面上的寵物類APP，從調(diào)查分析來看功能都很雜亂。而且寵物主的水平還處于初步期，對寵物了解還有所欠缺。所以目前對于用戶來說急需一款煥然一新的寵物護(hù)理類APP，能夠給用戶提供全面的養(yǎng)寵知識和護(hù)理服務(wù)。2項(xiàng)目分析2.1背景分析 從現(xiàn)在的寵物市場環(huán)境來分析，此行業(yè)還

9、是處在不斷發(fā)展的階段。自從2008年開始，就出現(xiàn)了許多的國際市場調(diào)研機(jī)構(gòu)對中國的寵物行業(yè)發(fā)展進(jìn)行了調(diào)查。根據(jù)有關(guān)的調(diào)查顯示，中國的寵物總數(shù)在2000到2008年的這八年時(shí)間中瘋狂增長，總數(shù)將近翻了五番。特別是寵物貓和狗的數(shù)量驚人，總量大約在兩億只以上。而到2015年，這個(gè)數(shù)字已達(dá)到五億。還有關(guān)于寵物行業(yè)的數(shù)據(jù)分析顯示，外國的寵物經(jīng)濟(jì)在該國的GDP總量中占比非常高，而中國的寵物經(jīng)濟(jì)占GDP總量比少于1%。還有就是比較受歡迎的寵物類APP大多出現(xiàn)在2014到2015年間，近來沒有此類APP上線。所以就目前中國經(jīng)濟(jì)的快速發(fā)展及人民消費(fèi)理念的不斷改變來看，寵物服務(wù)行業(yè)也將會迎來高速的發(fā)展。 2.2用戶

10、分析 隨著移動(dòng)互聯(lián)網(wǎng)的高速發(fā)展，寵物服務(wù)行業(yè)的也會迎來新的發(fā)展機(jī)會。從消費(fèi)群體來看，主要是90后的新生代，他們已經(jīng)習(xí)慣于使用功能豐富，界面美觀的APP，就像目前非常火爆的大眾點(diǎn)評APP。而寵物行業(yè)也需要這樣的服務(wù)平臺，人們更愿意用簡單的方式來解決問題，而APP的出現(xiàn)更好的解決了寵物服務(wù)和產(chǎn)品價(jià)格不透明，消費(fèi)者對寵物服務(wù)站點(diǎn)信任度低等等問題。 隨著互聯(lián)網(wǎng)+概念的提出，寵物服務(wù)行業(yè)線上與線下的合作也會得到巨大的發(fā)展。而移動(dòng)APP隨下隨用的特點(diǎn)，很容易得到發(fā)展。所以根據(jù)用戶需求設(shè)計(jì)出口碑好的APP很容易在用戶間擴(kuò)散，得到更多人的認(rèn)可。因此用戶都愿意通過第三方服務(wù)平臺來解決自己遇到的問題，所以設(shè)計(jì)出功

11、能全面的，界面美觀的APP是用戶所需求的。2.3競品分析2.3.1戰(zhàn)略分析表1 戰(zhàn)略分析名稱Slogan產(chǎn)品定位商業(yè)模式溜溜一個(gè)讓養(yǎng)寵生活更加簡單有趣的新拍檔社交+閑置物品交換電商聞聞窩寵物家有寵物，上聞聞窩就夠了社交+o2o+電商電商樂寵有樂寵的地方就有愛社交+電商+上門服務(wù)電商+上門服務(wù)有寵你是我的好朋友社交+o2o+電商電商波奇寵物波奇全面關(guān)愛寵物生活社交+電商電商 根據(jù)上表所示可以看出:目前上線的這些app中基本功能以社交為主，從而來發(fā)展電商和少數(shù)的服務(wù)功能。2.3.2功能分析 基本需求分析，溜溜、聞聞窩寵物、樂寵、有寵這四款A(yù)PP的社交方式類似于微博的分享，用戶可以分別看到最新的，推

12、薦的和附近的動(dòng)態(tài)等；而波奇寵物采用的是類似于貼吧的分享方式，需要進(jìn)入波奇劇場來看相應(yīng)的消息。在動(dòng)態(tài)分享方面，各有不同的特點(diǎn)，聞聞窩寵物使用的是從寵物的視角參與到互動(dòng)中，分享動(dòng)態(tài)。而有寵有所不同的是以用戶與寵物共同參與的方式進(jìn)行分享，其他的APP都是以用戶的視角來互動(dòng)的。在社交功能中，所有的APP都有用戶之間的關(guān)注，查看動(dòng)態(tài)和私信的功能。波奇寵物和聞聞窩寵物都有類似于微信群聊的功能，可以讓用戶更好的分享共同感興趣的動(dòng)態(tài)。期望需求分析，溜溜、聞聞窩寵物、樂寵和有寵發(fā)布消息時(shí)都會為圖片添加濾鏡、貼紙等效果，有一定的美化效果。以上所有的APP都會有活動(dòng)的功能，有的是通過banner的形式展示，而有的是

13、通過用戶之間自己發(fā)起的。其他期望需求上，溜溜有造型，絕育等功能，聞聞窩寵物有專家問診，周邊服務(wù)等功能，波奇寵物有求助互動(dòng)，有寵有專家在線問診，資訊等功能。興奮需求分析，樂寵、波奇寵物、聞聞窩寵物和有寵都有電商功能模塊，都以類似于淘寶的購物方式進(jìn)行商品購買。而且除了溜溜外，這些APP消費(fèi)都會有積分累計(jì)，根據(jù)累積的積分可以換取商品。上門服務(wù)的功能都有些，各有不同。配對，防走失等熱門功能都會出現(xiàn)在不同的APP中。在智能硬件方面，有寵的有寵貝貝具有定位功能，能有效的防止寵物走丟。樂寵則有防走失狗牌，通過二維碼記錄主人信息，寵物走丟時(shí)其他人只要掃描二維碼就可以看到信息來聯(lián)系主人。2.3.3分析總結(jié)溜溜，

14、是一款專注于社交玩法的APP，主要特別推送，溜溜日常，互幫互助，熱門標(biāo)簽和好物分享等。各種功能都是純粹的利用寵物來社交，具備了很強(qiáng)的趣味性。其他的功能就只有商城了，服務(wù)類功能基本沒有。 聞聞窩寵物，應(yīng)該是目前寵物app中用戶量最多的一個(gè)，功能較多，從功能的分布上看排版不統(tǒng)一，有些雜亂無章。首頁是社交玩法，用戶的分享質(zhì)量較好，用戶之間的互動(dòng)也很多，似乎以寵物為第一視角的互動(dòng)方式發(fā)揮出了一定的獨(dú)特效果。而在電商模塊設(shè)計(jì)非常簡單，沒有商品分類，也沒有搜索欄，對用戶的使用有一定的局限性。 樂寵，有獨(dú)特的圈子功能，經(jīng)過對不同寵物的分類，組建了各種各樣的寵物圈，比如同一個(gè)圈子里可以邀請對方一同遛狗，這個(gè)功

15、能的開發(fā)，給用戶帶來了很好的社交互動(dòng)。而這個(gè)產(chǎn)品的設(shè)計(jì)主要是針對寵物狗和貓的，在服務(wù)方面，只有關(guān)于這兩者的美容。商城的設(shè)計(jì)比較豐富多樣，能夠極大的滿足用戶需要。也有防走失平臺和活動(dòng)功能，主要是針對的對象較少，所以可用性較差。有寵，社交功能上主要是分享動(dòng)態(tài)，沒有特色之處。資訊非常多，但有很多不相關(guān)的內(nèi)容，使得趣味性不是很強(qiáng)。服務(wù)主要體現(xiàn)在為用戶提供較為豐富的養(yǎng)寵常識等。主要的兩個(gè)兩點(diǎn)：有寵公益和有寵智能，有寵公益對那些流浪動(dòng)物多了一份關(guān)愛；而有寵智能則可以對寵物進(jìn)行實(shí)時(shí)定位，并且可以對寵物健康數(shù)據(jù)監(jiān)測。 波奇寵物，以波奇劇場為主的寵物社交，增添了不少的趣味性，可玩性較好。但是和樂寵一樣針對的對象

16、只有狗狗和貓貓，服務(wù)功能主要是通過線下站點(diǎn)的上門服務(wù)，功能不夠全面。3項(xiàng)目設(shè)計(jì)3.1設(shè)計(jì)思路圖1 腦圖據(jù)競品分析和調(diào)查結(jié)果發(fā)現(xiàn)，目前上線的這些app中基本功能主要有社交，電商和服務(wù)功能。社交玩法是通過分享寵物的照片和狀態(tài)等，來找到有共同興趣點(diǎn)的用戶，進(jìn)行養(yǎng)寵的樂趣和經(jīng)驗(yàn)的溝通交流。電商主要體現(xiàn)在寵物的食，用和玩這些方面。而在服務(wù)功能方面，產(chǎn)品之間各有不同，功能都相對有所欠缺，主要是用戶與線下站點(diǎn)的合作進(jìn)行寵物護(hù)理?？偟膩碚f，目前寵物app還是處在發(fā)展的階段，功能主要局限在：通過分享寵物狀態(tài)來進(jìn)行社交，通過電商來盈利和不夠全面的護(hù)理服務(wù)。綜上所述，設(shè)計(jì)了一款新的寵物護(hù)理APP的頁面。如上圖所示，

17、是所設(shè)計(jì)的界面架構(gòu)。架構(gòu)的設(shè)計(jì)主要的作用是對所設(shè)計(jì)的產(chǎn)品信息進(jìn)行了構(gòu)建，它一般包括了兩點(diǎn)：界面的功能性設(shè)計(jì)和界面信息的排版設(shè)計(jì)，它可以使設(shè)計(jì)者清晰的設(shè)計(jì)各個(gè)功能和組織各個(gè)功能模塊的關(guān)系。此次所設(shè)計(jì)的這個(gè)APP頁面有四個(gè)主頁面，它們分別是首頁，商城，服務(wù)和我的。而圖中所示的上傳是在首頁里隱藏的一個(gè)功能，這也是此次設(shè)計(jì)的一個(gè)亮點(diǎn)。而此次APP界面設(shè)計(jì)的最大亮點(diǎn)是在服務(wù)功能模塊。在這個(gè)功能模塊有著非常全面的功能，總體上分為護(hù)理，醫(yī)療和線下站點(diǎn)這三個(gè)功能。而在這個(gè)模塊中會設(shè)計(jì)了一些創(chuàng)新性功能。 3.2產(chǎn)品線框圖圖2 線框圖如圖所示是根據(jù)草圖制作出來的產(chǎn)品線框圖，線框圖制作的重要性在界面設(shè)計(jì)中是不言而喻

18、的。它是整合框架層項(xiàng)目要素的方法：首先是通過排列信息和放置來安排界面的信息設(shè)計(jì)；然后是通過識別和定義核心功能來整合了界面的導(dǎo)航設(shè)計(jì)；最后線框圖安排并選擇了界面元素從而有了界面設(shè)計(jì)的整合。通過這三個(gè)整合方法，線框圖就基本確定界面了界面的功能架構(gòu)，概念結(jié)構(gòu)以及信息架構(gòu)，同時(shí)也可以規(guī)劃視覺設(shè)計(jì)應(yīng)該選擇的風(fēng)格。看似一張簡單的線框圖，但是其中包含的信息內(nèi)容有文字，圖片和視頻等等。所以通常情況下，在設(shè)計(jì)的過程中會用些特殊占位符來表示這些元素，會用帶斜線的線框來替代圖片，用一些標(biāo)識性的文字來替代文本的排版。根據(jù)用戶需求進(jìn)行了功能的排版，信息架構(gòu)的組建。在此過程中要考慮用戶體驗(yàn)的可用性等等這些東西。最重要的是

19、線框圖可以使設(shè)計(jì)及時(shí)的改善，為后續(xù)設(shè)計(jì)減少了不必要的麻煩。3.3設(shè)計(jì)要求首先是顏色搭配，顏色在界面中除了美觀的作用外，也表達(dá)了產(chǎn)品或者說APP的情感和聯(lián)想。顏色的意義取決于產(chǎn)品的文化和用戶使用產(chǎn)品的環(huán)境。色彩也影響著人的感官，具有非常強(qiáng)的視覺沖擊力。在界面設(shè)計(jì)中起非常重要的作用，可以說僅次于功能。在本次的APP界面設(shè)計(jì)中我所使用的是多種配色，這些配色方式能夠突出表達(dá)我們APP的功能，并且表達(dá)了一種對寵物的情感。其中選取了橙黃色作為主色調(diào)，使整個(gè)界面的風(fēng)格在極具視覺沖擊力的同時(shí)，又能夠突出大多數(shù)寵物的毛發(fā)色。然后是字體的設(shè)計(jì)，字體在界面設(shè)計(jì)中所占的部分不多，更多的是使用系統(tǒng)自帶的字體。所以在字體

20、這一塊只要按照基本的要求來做就行了。中文一般選擇與iOS比較接近的冬青黑體，英文也選用與之相近的Helvetica。在PS中使用字體時(shí)，最小的標(biāo)準(zhǔn)為24-32pt，基本把最小標(biāo)準(zhǔn)定為28pt，特殊情況下可以為24pt。由于手機(jī)屏幕的比例關(guān)系，前端工程師在使用數(shù)據(jù)時(shí)，會把所給的數(shù)據(jù)除以二，如文字字號為32pt，則告訴工程師16pt，實(shí)際顯示大小也是16pt。因此在字體方面，設(shè)計(jì)時(shí)盡量使字號的數(shù)據(jù)為偶數(shù)。字體的顏色一般不用純黑色。純黑的顏色在視覺上給人的感覺太深邃，會使用戶迷失。最后是設(shè)計(jì)規(guī)范，傳統(tǒng)的設(shè)計(jì)其實(shí)非常強(qiáng)調(diào)創(chuàng)新和個(gè)性，但界面設(shè)計(jì)對這一塊的關(guān)注卻不太需要的，甚至有點(diǎn)遏制的感覺在里面。而我的

21、觀點(diǎn)是只有適當(dāng)?shù)卮蚱埔?guī)范，才能創(chuàng)造出讓人耳目一新、或者說有格調(diào)的產(chǎn)品。因?yàn)椋缑嬖O(shè)計(jì)的目的是為商業(yè)，為產(chǎn)品負(fù)責(zé)，為用戶負(fù)責(zé)。4項(xiàng)目詳細(xì)設(shè)計(jì)4.1界面風(fēng)格設(shè)計(jì)此次設(shè)計(jì)的界面風(fēng)格采用的是扁平化設(shè)計(jì)風(fēng)格，這種設(shè)計(jì)風(fēng)格的理念就是界面中的所有元素都不加入任何的陰影，浮雕，紋理，漸變，高光等等特效。在此次的設(shè)計(jì)過程中所涉及的色彩選擇，功能按鈕和信息組成都是采用的簡約化設(shè)計(jì)，并沒有較復(fù)雜的界面和交互，避免了認(rèn)知功能障礙的產(chǎn)生，從而使得界面的設(shè)計(jì)更加的清晰，簡約，并且使得交互的流程更加注重于功能的本身。4.2圖標(biāo)展示與說明 圖3 啟動(dòng)圖標(biāo)這是此次設(shè)計(jì)的啟動(dòng)圖標(biāo)，啟動(dòng)圖標(biāo)是界面設(shè)計(jì)中最重要的元素之一，在設(shè)計(jì)的時(shí)

22、候我們應(yīng)該把圖標(biāo)的傳達(dá)含義和功能放在首位，它是一個(gè)APP給用戶帶來的第一視覺體驗(yàn)。如果對于用戶而言這個(gè)表達(dá)的意義不明確甚至使人感到厭惡，這樣那可能對于整個(gè)APP的界面設(shè)計(jì)都是失敗的。所以啟動(dòng)圖標(biāo)的作用是千萬不可忽視的。該款A(yù)PP作為一款寵物護(hù)理類的APP，啟動(dòng)圖標(biāo)采用的是寵物的英文“pet”的首字母“P”與狗狗的卡通形象相結(jié)合，設(shè)計(jì)出的扁平化風(fēng)格的桌面圖標(biāo)。為了便于用戶識別，該圖標(biāo)選擇了無色彩漸變的剪影式設(shè)計(jì)，其主色調(diào)選擇的是橙黃色，中心的logo采用的白色，設(shè)計(jì)簡約大方且寓意深刻。給用戶帶來一種親和感，非常清晰的表達(dá)了寵物的形象特征。圖4 導(dǎo)航欄圖標(biāo)這是界面所涉及的四個(gè)主要圖標(biāo)，也就是APP

23、界面中的導(dǎo)航欄。導(dǎo)航欄表示的是界面的名稱和具體的功能或者說是頁面之間的跳轉(zhuǎn)按鈕。它可以明確的告訴我們這里有什么，通過可視化的層次結(jié)構(gòu)導(dǎo)航直觀的告訴我們頁面的內(nèi)容是什么；它可以引導(dǎo)我們?nèi)ナ褂肁PP，通過導(dǎo)航用戶可以對我們APP大體的結(jié)構(gòu)和功能所處的位置有一個(gè)大致的判斷；一個(gè)清晰明確的導(dǎo)航會跟用戶留下一個(gè)美好的印象，而對于一個(gè)產(chǎn)品的第一印象是非常重要的。此次此次設(shè)計(jì)的這四個(gè)圖標(biāo)表示了整個(gè)APP的主功能，它們分別是首頁，商城，服務(wù)，和我的，用戶可以清晰的了解到APP的大致功能，并且不需要過多思考的找到他所需要的功能。圖標(biāo)的設(shè)計(jì)也形象的表達(dá)了其功能特點(diǎn)。 圖5 功能圖標(biāo)這是界面中所涉及的小功能圖標(biāo)，這

24、些看似嬌小的功能圖標(biāo)可以給我們的設(shè)計(jì)工作增加一些亮點(diǎn)。它們?yōu)榻缑嫣砑恿艘曈X引導(dǎo)、用作按鈕、做整體修飾、使界面更顯專業(yè)、增強(qiáng)了交互性。據(jù)研究表明，大多數(shù)的訪客使用APP是會根據(jù)需要來確定哪些內(nèi)容要去瀏覽，這些小icon就會引領(lǐng)用戶進(jìn)入感興趣的版塊。它讓你的界面布局不再生硬，把整體分割成眾多模塊，每一塊都內(nèi)容豐富而充滿魅力，吸引著訪客來點(diǎn)擊閱讀。 以上所設(shè)計(jì)圖標(biāo)的依次用在商城，站點(diǎn)和護(hù)理模塊。這些圖標(biāo)都是通過精心挑選的一些樣式和寓意都與內(nèi)容緊密相連設(shè)計(jì)出來的，設(shè)計(jì)的風(fēng)格統(tǒng)一，表達(dá)的意思簡約明了。要注意的是這些Icon圖標(biāo)不宜過于炫目，因?yàn)榭赡軙稚⒃L客的注意力，不要讓它吸引了用戶的注意力而忽略了內(nèi)

25、容。這些圖標(biāo)加強(qiáng)界面的內(nèi)容和設(shè)計(jì)，闡述了功能特點(diǎn)。它要跟界面的其他部分協(xié)調(diào)且風(fēng)格一致。減少界面中太炫目的圖標(biāo)設(shè)計(jì)，要多關(guān)注網(wǎng)站整體風(fēng)格的一致性。 4.3界面設(shè)計(jì)實(shí)現(xiàn)4.3.1引導(dǎo)頁 圖6 引導(dǎo)頁 如上圖所示是設(shè)計(jì)的APP引導(dǎo)頁。當(dāng)你打開一款A(yù)PP應(yīng)用的時(shí)候就會看到精美的引導(dǎo)頁，它們在你未使用產(chǎn)品之前提前帶你進(jìn)入狀態(tài)，給用戶第一印象。第一印象的好壞會極大地影響到產(chǎn)品用戶體驗(yàn)。因此每個(gè)APP都在努力將這幾個(gè)頁面設(shè)計(jì)好，從一開始就引人入勝有效的提升用戶體驗(yàn)。根據(jù)引導(dǎo)頁的目的、出發(fā)點(diǎn)不同，我們可以將其分為四種類型：功能介紹類、使用說明類、推廣類和問題解決類，一定要注意的是一般引導(dǎo)頁不會超過5頁，設(shè)計(jì)過

26、多極有可能使其作用適得其反。 此次設(shè)計(jì)的是推廣類引導(dǎo)頁。界面使用簡潔的視覺元素整合形成，確保了界面的直觀，易于理解不需要做任何的引導(dǎo)。內(nèi)容更多是想傳達(dá)產(chǎn)品的情懷，并考慮與整個(gè)產(chǎn)品風(fēng)格和形象相一致。這一類的引導(dǎo)頁如果做的不夠吸引人，用戶只會不耐煩地想快速劃過。而制作精美、有趣的引導(dǎo)頁，用戶會細(xì)細(xì)品味觀賞。而這三張引導(dǎo)頁設(shè)計(jì)了一個(gè)符合用戶情感的一個(gè)溫馨的故事，給用戶帶來一種全新的愛護(hù)寵物的情懷和產(chǎn)生情感的寄托。4.3.2首頁 圖7 首頁 這是首頁的設(shè)計(jì)，對于用戶來說使用APP的時(shí)候，特別是對于閱讀類的APP來說首頁尤為重要。優(yōu)秀的APP首頁設(shè)計(jì)，可以讓你的APP成功一半。因?yàn)锳PP首頁曝光率是整個(gè)

27、APP界面中最高的，當(dāng)然也要排除一些特殊情況，可以肯定的是APP首頁卻是分享最好的頁面。APP首頁的作用在于引導(dǎo)客戶，迅速向用戶呈現(xiàn)內(nèi)容，而精彩的內(nèi)容本身和更精準(zhǔn)的分類能激發(fā)用戶更多的分享，這對于擴(kuò)大用戶群體是有價(jià)值的；內(nèi)容分類的價(jià)值就在于此。而此次設(shè)計(jì)的APP首頁的功能主要是分享動(dòng)態(tài)，關(guān)于社交方面的應(yīng)用。從競品分析的結(jié)果來看，每款此類的APP都會有社交類的功能。隨著使用群體的不斷年輕化，社交功能也越來越受歡迎，因此這一功能在設(shè)計(jì)的時(shí)候一定是必不可少的。在此模塊可以分享自家寵物的動(dòng)態(tài)，我們會注意到標(biāo)題欄有一個(gè)攝像機(jī)圖標(biāo)，這個(gè)圖標(biāo)的功能就是用來分享動(dòng)態(tài)的。而在這個(gè)功能會涉及到一個(gè)隱藏功能，也就是

28、前面所敘述的上傳功能。在上傳分享動(dòng)態(tài)過程中必須要經(jīng)過審核的內(nèi)容才能被別人瀏覽。因此提高了此版塊內(nèi)容的質(zhì)量，也就避免了一些無關(guān)的，內(nèi)容低俗的動(dòng)態(tài)。在這個(gè)模塊設(shè)計(jì)中，采用的是卡片化設(shè)計(jì)和延展性設(shè)計(jì)，通過上下的動(dòng)效以及信息的延展讓用戶意識到整個(gè)界面的延展，獲取最新信息，新內(nèi)容上浮，舊內(nèi)容下沉。這種設(shè)計(jì)可以延長與用戶的交互時(shí)間，是服務(wù)更完善，更貼心。卡片化內(nèi)容呈現(xiàn)打破了原有的模式，內(nèi)容至上，去除一切干擾，在用戶需要瀏覽大量信息的場景下，提高了內(nèi)容的呈現(xiàn)效率，在信息展現(xiàn)上非常突出。4.3.3服務(wù)功能模塊 圖8 服務(wù)功能模塊 此功能模塊是此次設(shè)計(jì)的重點(diǎn)，也就是本次設(shè)計(jì)的主題模塊。在設(shè)計(jì)方面，整個(gè)界面設(shè)計(jì)為

29、扁平化設(shè)計(jì)風(fēng)格，界面中的所有元素都沒有添加浮雕，漸變，高光，羽化等特效修飾。和擬物化設(shè)計(jì)風(fēng)格有所不同，它是注重的質(zhì)感光影;根據(jù)扁平化設(shè)計(jì)的原則，簡化了界面中功能圖標(biāo)的設(shè)計(jì)，采用的是色彩明亮柔和的色塊，寓意明確的icon和文字信息結(jié)合來呈現(xiàn);并且使用較為簡單的視覺元素圓形，直線來區(qū)分界面，使得界面比較直觀，易于使用，不用做過多的引導(dǎo)。在色彩方面，采用的是多色彩的搭配設(shè)計(jì)，同一界面的用色達(dá)到了6-8種，使界面看起來整體上較協(xié)調(diào)，而各個(gè)部分又會對比鮮明。關(guān)于排版，是把簡單的圖形元素，圖片和文字三者進(jìn)行合理的編排。根據(jù)用戶的需求，在適當(dāng)?shù)牡胤揭院线m的元素呈現(xiàn)，設(shè)計(jì)出層次清晰的視覺效果，使用戶在使用時(shí)更

30、有效的理解設(shè)計(jì)；整個(gè)界面是簡約化設(shè)計(jì)，界面的所有元素都是功能性元素，從而使得易用性與交互性大大增強(qiáng)，有效的提高了用戶體驗(yàn)。在功能方面，在這里會提供給用戶非常全面的護(hù)理服務(wù)功能，不僅包含了其他此類APP的護(hù)理功能，并且會開發(fā)出一些創(chuàng)新性功能。這里主要包含了三個(gè)主功能：站點(diǎn)，醫(yī)療和護(hù)理。在站點(diǎn)模塊中有寄養(yǎng)，領(lǐng)養(yǎng)，防走失，配對四個(gè)功能。在此我的設(shè)計(jì)放大了寄養(yǎng)和領(lǐng)養(yǎng)這兩大功能。經(jīng)過調(diào)查發(fā)現(xiàn)，一些愛寵人士在外出較長時(shí)間的情況下，對寵物的寄養(yǎng)感到煩惱，所以根據(jù)這種問題設(shè)計(jì)了寄養(yǎng)功能，這里的寄養(yǎng)功能不會局限于用戶和線下站點(diǎn)之間，還會提供用戶與用戶之間的溝通，為寵物找到更好的家庭寄養(yǎng)。領(lǐng)養(yǎng)則是根據(jù)那些即將想養(yǎng)

31、寵物的用戶設(shè)計(jì)的功能，在此用戶可以找到自己所想要養(yǎng)的寵物。這樣通過用戶與用戶，用戶與線下站點(diǎn)之間進(jìn)行互動(dòng)，極大的降低寵物被遺棄的可能性。在醫(yī)療模塊中提供了驅(qū)蟲，皮膚，疾病，預(yù)防和專家問診五個(gè)功能。而護(hù)理模塊則有美容，保健，訓(xùn)練和預(yù)防功能，這里的預(yù)防與醫(yī)療中的有所不同，在此預(yù)防的是寵物受傷和走丟等，還有關(guān)于寵物的護(hù)理小知識，給用戶提供些護(hù)理小技巧和解決常識性問題。在這兩個(gè)模塊中設(shè)計(jì)幾個(gè)創(chuàng)新功能，他們是預(yù)防，保健和訓(xùn)練功能。隨著人們對寵物越來越重視，對寵物的健康關(guān)注度也越來越高，因此預(yù)防和保健功能也就能得到愛寵人士的認(rèn)可。而訓(xùn)練功能則是針對那些初次接觸寵物的人群，在這里會提供給這些人士全面的訓(xùn)練知

32、識，從而是寵物有著較好的生活習(xí)慣，而且還可以為寵物訓(xùn)練些小技能等等，這樣既可以提高寵物的生活質(zhì)量又可以為愛寵人士增添些養(yǎng)寵物的趣味性。在用戶體驗(yàn)反面，扁平化的設(shè)計(jì)風(fēng)格可以給用戶留下直接的體驗(yàn)。重點(diǎn)功能設(shè)計(jì)聚焦在頁面頂部，突出內(nèi)容；各功能之間布局位置獨(dú)立，不會受到其他元素的局限。界面包含的信息一目了然，圖片文字之間空間分配合理，符合用戶的操作習(xí)慣，給用戶留下一種清晰的，舒適的總體印象。功能之間的切換可以通過左右滑動(dòng)來實(shí)現(xiàn)，合理的交互步驟給用戶帶來很大的便利性。避免了使用時(shí)用戶產(chǎn)生焦慮感，極大的提升了用戶體驗(yàn)效率。4.4整體效果設(shè)計(jì) 圖9 首頁-上傳界面 圖10 商城-商品分類界面 圖11 服務(wù)護(hù)

33、理界面 圖12 我的-個(gè)人主頁界面5設(shè)計(jì)體會本次的APP界面設(shè)計(jì)作為我的畢業(yè)設(shè)計(jì)，重要性是不言而喻的，所以每個(gè)人都會無比的關(guān)心和重視。只為能做出理想的作品，順利畢業(yè)。此次設(shè)計(jì)過程中遇到了許多的困難，從選題開始就想了很多，由于想法太多導(dǎo)致思路混亂，后來經(jīng)過老師的指導(dǎo)分析才把題目確定下來。接下來就是準(zhǔn)備工作，從開題報(bào)告開始就遇到了許多問題，被老師指責(zé)過不夠用心，準(zhǔn)備不足，沒有靜下心來認(rèn)真的思考過設(shè)計(jì)過程。經(jīng)過老師的提醒，才真正的走入到此次的設(shè)計(jì)過程中，從開題報(bào)告開始做起。再然后投入到設(shè)計(jì)工作中來，去查閱資料了解界面設(shè)計(jì)；根據(jù)題目進(jìn)行用戶調(diào)查分析和競品分析，一步步的理清設(shè)計(jì)思路，進(jìn)行思維腦圖的制作，

34、進(jìn)入到具體設(shè)計(jì)中來。之后就是進(jìn)行原型圖，線框圖的繪制，再到詳細(xì)的界面設(shè)計(jì)。在此過程中遇到許多專業(yè)性的問題，如界面的風(fēng)格設(shè)計(jì)，色彩的搭配，界面元素的排版都是設(shè)計(jì)中的難點(diǎn)。在此過程中我堅(jiān)信自己能做好設(shè)計(jì)，從而通過查閱相關(guān)資料，請教老師幫忙，和同學(xué)探討學(xué)習(xí)解決了不少問題。設(shè)計(jì)本來就是一個(gè)循序漸進(jìn)的過程，本身就充滿著困難，只要我們不自暴自棄，半途而廢，我想經(jīng)過不斷的努力什么樣的困難都能解決。人生就是這樣，充滿著各種挑戰(zhàn)，在這次畢業(yè)設(shè)計(jì)過程中我學(xué)到了很多，也懂得了許多。參考文獻(xiàn)：1 張軍.關(guān)于UI界面設(shè)計(jì)課程設(shè)置的構(gòu)思與創(chuàng)想J.西安美術(shù)學(xué)院.2011：99-101.2 朱軒櫻.面向智能手機(jī)的UI界面設(shè)計(jì)

35、J.蘇州工業(yè)園區(qū)服務(wù)外包職業(yè)學(xué)院.2015：63-643 岳琳.智能手機(jī)UI界面設(shè)計(jì)分析探討 J.吉林藝術(shù)學(xué)院設(shè)計(jì)學(xué)院.2014：83-844 李翠.產(chǎn)品設(shè)計(jì)中的界面設(shè)計(jì)J.武昌首義學(xué)院.430064：256-2575 張美珍.淺析色彩在UI設(shè)計(jì)中的應(yīng)用J.鄭州升達(dá)經(jīng)貿(mào)管理學(xué)院.2014：97-986 黃亞飛.UI設(shè)計(jì)與產(chǎn)品形象的關(guān)系探討J.揚(yáng)州職業(yè)大學(xué).2011（3）：1008-36937 屠秀棟.淺談UI設(shè)計(jì)J.安徽三聯(lián)學(xué)院.2010（7）：1706-10778 李紅玉.手機(jī)游戲UI圖形設(shè)計(jì)的符號化研究J.寧波教育學(xué)院學(xué)報(bào).2015（3）：69-729 雷菁.淺析中國傳統(tǒng)元素在手機(jī)UI界面

36、設(shè)計(jì)中的應(yīng)用J.通訊世界.2015（10）：20-2110 李黎.論手機(jī)UI設(shè)計(jì)中視覺藝術(shù)元素的構(gòu)成J.現(xiàn)代裝飾.2015（7）：13311 聞剛.淺論視覺傳達(dá)效能在手機(jī)UI設(shè)計(jì)中的應(yīng)用J.劍南文學(xué).2013（2）：167-16812 顧炎輝.論手機(jī)UI設(shè)計(jì)發(fā)展趨勢J.淮陰工學(xué)院設(shè)計(jì)藝術(shù)學(xué)院.2009（33）：341-34213 尤勝.智能手機(jī)UI設(shè)計(jì)比較J.上海工藝藝術(shù)職業(yè)學(xué)院.2014（8）：33-3414 常麗.UI設(shè)計(jì)必須課M.北京：人民出版社，201515 王彥.手機(jī)游戲UI設(shè)計(jì)的一般性原則研究D.武漢：華中師范大學(xué)美術(shù)學(xué)院，2014致謝 時(shí)光荏苒，四年的大學(xué)時(shí)光即將結(jié)束。在這里，我

37、要向這四年中對我教育培養(yǎng)的老師們表示真誠地感謝。特別是我的論文指導(dǎo)老師老師。您認(rèn)真負(fù)責(zé)的態(tài)度，值得我敬佩。這次畢業(yè)設(shè)計(jì)讓老師你傾注了無數(shù)的關(guān)心，幫我渡過了學(xué)習(xí)的難關(guān)，拓展了視野，從而使得論文順利的進(jìn)行。通過此次畢業(yè)設(shè)計(jì)的制作，從中我學(xué)到了很多知識，彌補(bǔ)了以前學(xué)習(xí)過程中很多的不足。作為一個(gè)經(jīng)驗(yàn)匱乏的我，難免會遇到種種困難，如果沒有指導(dǎo)老師的督促指導(dǎo)，順利完成是很難的。在此要感謝所有的老師，是您們?nèi)蝿谌卧沟母冻觯晦o辛苦的為我們改作業(yè)，為我們解答難題，為我打下專業(yè)的知識基礎(chǔ)。您們的這些精神深深地激勵(lì)著我們，幫助我們不斷的成長，成為我們?nèi)松闹嘎窡?。最后我要真摯的感謝我四年來的室友和同學(xué)們，從遙遠(yuǎn)的家來到這個(gè)陌生的城市里，陪伴我走過那些風(fēng)風(fēng)雨雨的日子，那些瞬間無法忘懷，一切就好像昨天一樣，這份友誼和感情我會永遠(yuǎn)銘記于心，再次表示對我的學(xué)校！敬愛的老師們！親愛的同學(xué)們表示深深地的感謝！19