一個(gè)關(guān)于寵物護(hù)理App的界面設(shè)計(jì)——畢業(yè)論文
《一個(gè)關(guān)于寵物護(hù)理App的界面設(shè)計(jì)——畢業(yè)論文》由會(huì)員分享,可在線閱讀,更多相關(guān)《一個(gè)關(guān)于寵物護(hù)理App的界面設(shè)計(jì)——畢業(yè)論文(23頁珍藏版)》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。
1、淮南師范學(xué)院本科畢業(yè)論文畢業(yè)設(shè)計(jì)題 目: 一個(gè)關(guān)于寵物護(hù)理App的界面設(shè)計(jì)學(xué)生姓名 : 學(xué)號(hào) : 所在院(系): 文化創(chuàng)意與傳播學(xué)院專業(yè)名稱 : 數(shù)字媒體技術(shù)屆別 : 指導(dǎo)教師 : 職稱(學(xué)位): 淮南師范學(xué)院教務(wù)處印制目 錄1項(xiàng)目概述32項(xiàng)目分析32.1背景分析32.2用戶分析32.3競(jìng)品分析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ì)體會(huì)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ì)。隨著社會(huì)的發(fā)展,人們對(duì)APP的使用率越來越高,從 而對(duì)界面的要求也越來越嚴(yán)格,為了滿足人們的需求和適應(yīng)時(shí)代的發(fā)展, App界面設(shè)計(jì)也在不斷的加強(qiáng)創(chuàng)新性和時(shí)代性。我的作品是一款寵物護(hù)理 APP的界面設(shè)計(jì),伴隨著社會(huì)經(jīng)濟(jì)的快速發(fā)展和人類生活觀念的改變,養(yǎng) 寵物的人越來越多而且變得越來越年輕化,寵物市場(chǎng)正在一步步的崛起。 因此設(shè)計(jì)一款煥然一新的寵物護(hù)理APP,是非常具有市場(chǎng)意義的。我的這 款手機(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)目概述 在社會(huì)經(jīng)濟(jì)和城市化建設(shè)的不斷發(fā)展過程中,人們?cè)诰裆詈臀镔|(zhì)生活方面也得到了很大的改變,隨著社會(huì)的老齡化現(xiàn)象突出,獨(dú)生子女和丁克家庭也越來越普及,人們?cè)谛蓍e方式上,消費(fèi)觀念和情感寄托方面也變得越來越多樣化。我們發(fā)現(xiàn)養(yǎng)寵物的家庭在日益增多,一個(gè)新的產(chǎn)業(yè),也就是寵物行業(yè)會(huì)有非常可觀的發(fā)展。因?yàn)?/p>
8、養(yǎng)寵物的人越來越多而且變得越來越年輕化,所以寵物市場(chǎng)正在不斷的興起。而隨著人們對(duì)養(yǎng)寵物的熱度越來越高,不難發(fā)現(xiàn)寵物行業(yè)中的美容、醫(yī)療、保健、寄養(yǎng)、訓(xùn)練、比賽、攝影等護(hù)理服務(wù)將會(huì)不斷地發(fā)展開。所以目前中國(guó)的寵物市場(chǎng)正處于持續(xù)發(fā)展的時(shí)期,而在這斷發(fā)展的過程中必然會(huì)有一些不可忽視的問題出現(xiàn)。因此,寵物健康、高效地發(fā)展需要線上與線下聯(lián)合調(diào)控。目前市面上的寵物類APP,從調(diào)查分析來看功能都很雜亂。而且寵物主的水平還處于初步期,對(duì)寵物了解還有所欠缺。所以目前對(duì)于用戶來說急需一款煥然一新的寵物護(hù)理類APP,能夠給用戶提供全面的養(yǎng)寵知識(shí)和護(hù)理服務(wù)。2項(xiàng)目分析2.1背景分析 從現(xiàn)在的寵物市場(chǎng)環(huán)境來分析,此行業(yè)還
9、是處在不斷發(fā)展的階段。自從2008年開始,就出現(xiàn)了許多的國(guó)際市場(chǎng)調(diào)研機(jī)構(gòu)對(duì)中國(guó)的寵物行業(yè)發(fā)展進(jìn)行了調(diào)查。根據(jù)有關(guān)的調(diào)查顯示,中國(guó)的寵物總數(shù)在2000到2008年的這八年時(shí)間中瘋狂增長(zhǎng),總數(shù)將近翻了五番。特別是寵物貓和狗的數(shù)量驚人,總量大約在兩億只以上。而到2015年,這個(gè)數(shù)字已達(dá)到五億。還有關(guān)于寵物行業(yè)的數(shù)據(jù)分析顯示,外國(guó)的寵物經(jīng)濟(jì)在該國(guó)的GDP總量中占比非常高,而中國(guó)的寵物經(jīng)濟(jì)占GDP總量比少于1%。還有就是比較受歡迎的寵物類APP大多出現(xiàn)在2014到2015年間,近來沒有此類APP上線。所以就目前中國(guó)經(jīng)濟(jì)的快速發(fā)展及人民消費(fèi)理念的不斷改變來看,寵物服務(wù)行業(yè)也將會(huì)迎來高速的發(fā)展。 2.2用戶
10、分析 隨著移動(dòng)互聯(lián)網(wǎng)的高速發(fā)展,寵物服務(wù)行業(yè)的也會(huì)迎來新的發(fā)展機(jī)會(huì)。從消費(fèi)群體來看,主要是90后的新生代,他們已經(jīng)習(xí)慣于使用功能豐富,界面美觀的APP,就像目前非?;鸨拇蟊婞c(diǎn)評(píng)APP。而寵物行業(yè)也需要這樣的服務(wù)平臺(tái),人們更愿意用簡(jiǎn)單的方式來解決問題,而APP的出現(xiàn)更好的解決了寵物服務(wù)和產(chǎn)品價(jià)格不透明,消費(fèi)者對(duì)寵物服務(wù)站點(diǎn)信任度低等等問題。 隨著互聯(lián)網(wǎng)+概念的提出,寵物服務(wù)行業(yè)線上與線下的合作也會(huì)得到巨大的發(fā)展。而移動(dòng)APP隨下隨用的特點(diǎn),很容易得到發(fā)展。所以根據(jù)用戶需求設(shè)計(jì)出口碑好的APP很容易在用戶間擴(kuò)散,得到更多人的認(rèn)可。因此用戶都愿意通過第三方服務(wù)平臺(tái)來解決自己遇到的問題,所以設(shè)計(jì)出功
11、能全面的,界面美觀的APP是用戶所需求的。2.3競(jìng)品分析2.3.1戰(zhàn)略分析表1 戰(zhàn)略分析名稱Slogan產(chǎn)品定位商業(yè)模式溜溜一個(gè)讓養(yǎng)寵生活更加簡(jiǎn)單有趣的新拍檔社交+閑置物品交換電商聞聞窩寵物家有寵物,上聞聞窩就夠了社交+o2o+電商電商樂寵有樂寵的地方就有愛社交+電商+上門服務(wù)電商+上門服務(wù)有寵你是我的好朋友社交+o2o+電商電商波奇寵物波奇全面關(guān)愛寵物生活社交+電商電商 根據(jù)上表所示可以看出:目前上線的這些app中基本功能以社交為主,從而來發(fā)展電商和少數(shù)的服務(wù)功能。2.3.2功能分析 基本需求分析,溜溜、聞聞窩寵物、樂寵、有寵這四款A(yù)PP的社交方式類似于微博的分享,用戶可以分別看到最新的,推
12、薦的和附近的動(dòng)態(tài)等;而波奇寵物采用的是類似于貼吧的分享方式,需要進(jìn)入波奇劇場(chǎng)來看相應(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í)都會(huì)為圖片添加濾鏡、貼紙等效果,有一定的美化效果。以上所有的APP都會(huì)有活動(dòng)的功能,有的是通過banner的形式展示,而有的是
13、通過用戶之間自己發(fā)起的。其他期望需求上,溜溜有造型,絕育等功能,聞聞窩寵物有專家問診,周邊服務(wù)等功能,波奇寵物有求助互動(dòng),有寵有專家在線問診,資訊等功能。興奮需求分析,樂寵、波奇寵物、聞聞窩寵物和有寵都有電商功能模塊,都以類似于淘寶的購(gòu)物方式進(jìn)行商品購(gòu)買。而且除了溜溜外,這些APP消費(fèi)都會(huì)有積分累計(jì),根據(jù)累積的積分可以換取商品。上門服務(wù)的功能都有些,各有不同。配對(duì),防走失等熱門功能都會(huì)出現(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ì)非常簡(jiǎn)單,沒有商品分類,也沒有搜索欄,對(duì)用戶的使用有一定的局限性。 樂寵,有獨(dú)特的圈子功能,經(jīng)過對(duì)不同寵物的分類,組建了各種各樣的寵物圈,比如同一個(gè)圈子里可以邀請(qǐng)對(duì)方一同遛狗,這個(gè)功
15、能的開發(fā),給用戶帶來了很好的社交互動(dòng)。而這個(gè)產(chǎn)品的設(shè)計(jì)主要是針對(duì)寵物狗和貓的,在服務(wù)方面,只有關(guān)于這兩者的美容。商城的設(shè)計(jì)比較豐富多樣,能夠極大的滿足用戶需要。也有防走失平臺(tái)和活動(dòng)功能,主要是針對(duì)的對(duì)象較少,所以可用性較差。有寵,社交功能上主要是分享動(dòng)態(tài),沒有特色之處。資訊非常多,但有很多不相關(guān)的內(nèi)容,使得趣味性不是很強(qiáng)。服務(wù)主要體現(xiàn)在為用戶提供較為豐富的養(yǎng)寵常識(shí)等。主要的兩個(gè)兩點(diǎn):有寵公益和有寵智能,有寵公益對(duì)那些流浪動(dòng)物多了一份關(guān)愛;而有寵智能則可以對(duì)寵物進(jìn)行實(shí)時(shí)定位,并且可以對(duì)寵物健康數(shù)據(jù)監(jiān)測(cè)。 波奇寵物,以波奇劇場(chǎng)為主的寵物社交,增添了不少的趣味性,可玩性較好。但是和樂寵一樣針對(duì)的對(duì)象
16、只有狗狗和貓貓,服務(wù)功能主要是通過線下站點(diǎn)的上門服務(wù),功能不夠全面。3項(xiàng)目設(shè)計(jì)3.1設(shè)計(jì)思路圖1 腦圖據(jù)競(jìng)品分析和調(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)品之間各有不同,功能都相對(duì)有所欠缺,主要是用戶與線下站點(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ì)主要的作用是對(duì)所設(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è)模塊中會(huì)設(shè)計(jì)了一些創(chuàng)新性功能。 3.2產(chǎn)品線框圖圖2 線框圖如圖所示是根據(jù)草圖制作出來的產(chǎn)品線框圖,線框圖制作的重要性在界面設(shè)計(jì)中是不言而喻
18、的。它是整合框架層項(xiàng)目要素的方法:首先是通過排列信息和放置來安排界面的信息設(shè)計(jì);然后是通過識(shí)別和定義核心功能來整合了界面的導(dǎo)航設(shè)計(jì);最后線框圖安排并選擇了界面元素從而有了界面設(shè)計(jì)的整合。通過這三個(gè)整合方法,線框圖就基本確定界面了界面的功能架構(gòu),概念結(jié)構(gòu)以及信息架構(gòu),同時(shí)也可以規(guī)劃視覺設(shè)計(jì)應(yīng)該選擇的風(fēng)格??此埔粡埡?jiǎn)單的線框圖,但是其中包含的信息內(nèi)容有文字,圖片和視頻等等。所以通常情況下,在設(shè)計(jì)的過程中會(huì)用些特殊占位符來表示這些元素,會(huì)用帶斜線的線框來替代圖片,用一些標(biāo)識(shí)性的文字來替代文本的排版。根據(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á)了一種對(duì)寵物的情感。其中選取了橙黃色作為主色調(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í),會(huì)把所給的數(shù)據(jù)除以二,如文字字號(hào)為32pt,則告訴工程師16pt,實(shí)際顯示大小也是16pt。因此在字體方面,設(shè)計(jì)時(shí)盡量使字號(hào)的數(shù)據(jù)為偶數(shù)。字體的顏色一般不用純黑色。純黑的顏色在視覺上給人的感覺太深邃,會(huì)使用戶迷失。最后是設(shè)計(jì)規(guī)范,傳統(tǒng)的設(shè)計(jì)其實(shí)非常強(qiáng)調(diào)創(chuàng)新和個(gè)性,但界面設(shè)計(jì)對(duì)這一塊的關(guān)注卻不太需要的,甚至有點(diǎn)遏制的感覺在里面。而我的
21、觀點(diǎn)是只有適當(dāng)?shù)卮蚱埔?guī)范,才能創(chuàng)造出讓人耳目一新、或者說有格調(diào)的產(chǎn)品。因?yàn)?,界面設(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ì)過程中所涉及的色彩選擇,功能按鈕和信息組成都是采用的簡(jiǎn)約化設(shè)計(jì),并沒有較復(fù)雜的界面和交互,避免了認(rèn)知功能障礙的產(chǎn)生,從而使得界面的設(shè)計(jì)更加的清晰,簡(jiǎn)約,并且使得交互的流程更加注重于功能的本身。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)。如果對(duì)于用戶而言這個(gè)表達(dá)的意義不明確甚至使人感到厭惡,這樣那可能對(duì)于整個(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)。為了便于用戶識(shí)別,該圖標(biāo)選擇了無色彩漸變的剪影式設(shè)計(jì),其主色調(diào)選擇的是橙黃色,中心的logo采用的白色,設(shè)計(jì)簡(jiǎn)約大方且寓意深刻。給用戶帶來一種親和感,非常清晰的表達(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)航用戶可以對(duì)我們APP大體的結(jié)構(gòu)和功能所處的位置有一個(gè)大致的判斷;一個(gè)清晰明確的導(dǎo)航會(huì)跟用戶留下一個(gè)美好的印象,而對(duì)于一個(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是會(huì)根據(jù)需要來確定哪些內(nèi)容要去瀏覽,這些小icon就會(huì)引領(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á)的意思簡(jiǎn)約明了。要注意的是這些Icon圖標(biāo)不宜過于炫目,因?yàn)榭赡軙?huì)分散訪客的注意力,不要讓它吸引了用戶的注意力而忽略了內(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í)候就會(huì)看到精美的引導(dǎo)頁,它們?cè)谀阄词褂卯a(chǎn)品之前提前帶你進(jìn)入狀態(tài),給用戶第一印象。第一印象的好壞會(huì)極大地影響到產(chǎn)品用戶體驗(yàn)。因此每個(gè)APP都在努力將這幾個(gè)頁面設(shè)計(jì)好,從一開始就引人入勝有效的提升用戶體驗(yàn)。根據(jù)引導(dǎo)頁的目的、出發(fā)點(diǎn)不同,我們可以將其分為四種類型:功能介紹類、使用說明類、推廣類和問題解決類,一定要注意的是一般引導(dǎo)頁不會(huì)超過5頁,設(shè)計(jì)過
26、多極有可能使其作用適得其反。 此次設(shè)計(jì)的是推廣類引導(dǎo)頁。界面使用簡(jiǎn)潔的視覺元素整合形成,確保了界面的直觀,易于理解不需要做任何的引導(dǎo)。內(nèi)容更多是想傳達(dá)產(chǎn)品的情懷,并考慮與整個(gè)產(chǎn)品風(fēng)格和形象相一致。這一類的引導(dǎo)頁如果做的不夠吸引人,用戶只會(huì)不耐煩地想快速劃過。而制作精美、有趣的引導(dǎo)頁,用戶會(huì)細(xì)細(xì)品味觀賞。而這三張引導(dǎo)頁設(shè)計(jì)了一個(gè)符合用戶情感的一個(gè)溫馨的故事,給用戶帶來一種全新的愛護(hù)寵物的情懷和產(chǎn)生情感的寄托。4.3.2首頁 圖7 首頁 這是首頁的設(shè)計(jì),對(duì)于用戶來說使用APP的時(shí)候,特別是對(duì)于閱讀類的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ā)用戶更多的分享,這對(duì)于擴(kuò)大用戶群體是有價(jià)值的;內(nèi)容分類的價(jià)值就在于此。而此次設(shè)計(jì)的APP首頁的功能主要是分享動(dòng)態(tài),關(guān)于社交方面的應(yīng)用。從競(jìng)品分析的結(jié)果來看,每款此類的APP都會(huì)有社交類的功能。隨著使用群體的不斷年輕化,社交功能也越來越受歡迎,因此這一功能在設(shè)計(jì)的時(shí)候一定是必不可少的。在此模塊可以分享自家寵物的動(dòng)態(tài),我們會(huì)注意到標(biāo)題欄有一個(gè)攝像機(jī)圖標(biāo),這個(gè)圖標(biāo)的功能就是用來分享動(dòng)態(tài)的。而在這個(gè)功能會(huì)涉及到一個(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)效以及信息的延展讓用戶意識(shí)到整個(gè)界面的延展,獲取最新信息,新內(nèi)容上浮,舊內(nèi)容下沉。這種設(shè)計(jì)可以延長(zhǎng)與用戶的交互時(shí)間,是服務(wù)更完善,更貼心??ㄆ瘍?nèi)容呈現(xiàn)打破了原有的模式,內(nèi)容至上,去除一切干擾,在用戶需要瀏覽大量信息的場(chǎng)景下,提高了內(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ì)的原則,簡(jiǎn)化了界面中功能圖標(biāo)的設(shè)計(jì),采用的是色彩明亮柔和的色塊,寓意明確的icon和文字信息結(jié)合來呈現(xiàn);并且使用較為簡(jiǎn)單的視覺元素圓形,直線來區(qū)分界面,使得界面比較直觀,易于使用,不用做過多的引導(dǎo)。在色彩方面,采用的是多色彩的搭配設(shè)計(jì),同一界面的用色達(dá)到了6-8種,使界面看起來整體上較協(xié)調(diào),而各個(gè)部分又會(huì)對(duì)比鮮明。關(guān)于排版,是把簡(jiǎn)單的圖形元素,圖片和文字三者進(jìn)行合理的編排。根據(jù)用戶的需求,在適當(dāng)?shù)牡胤揭院线m的元素呈現(xiàn),設(shè)計(jì)出層次清晰的視覺效果,使用戶在使用時(shí)更
30、有效的理解設(shè)計(jì);整個(gè)界面是簡(jiǎn)約化設(shè)計(jì),界面的所有元素都是功能性元素,從而使得易用性與交互性大大增強(qiáng),有效的提高了用戶體驗(yàn)。在功能方面,在這里會(huì)提供給用戶非常全面的護(hù)理服務(wù)功能,不僅包含了其他此類APP的護(hù)理功能,并且會(huì)開發(fā)出一些創(chuàng)新性功能。這里主要包含了三個(gè)主功能:站點(diǎn),醫(yī)療和護(hù)理。在站點(diǎn)模塊中有寄養(yǎng),領(lǐng)養(yǎng),防走失,配對(duì)四個(gè)功能。在此我的設(shè)計(jì)放大了寄養(yǎng)和領(lǐng)養(yǎng)這兩大功能。經(jīng)過調(diào)查發(fā)現(xiàn),一些愛寵人士在外出較長(zhǎng)時(shí)間的情況下,對(duì)寵物的寄養(yǎng)感到煩惱,所以根據(jù)這種問題設(shè)計(jì)了寄養(yǎng)功能,這里的寄養(yǎng)功能不會(huì)局限于用戶和線下站點(diǎn)之間,還會(huì)提供用戶與用戶之間的溝通,為寵物找到更好的家庭寄養(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ù)理小知識(shí),給用戶提供些護(hù)理小技巧和解決常識(shí)性問題。在這兩個(gè)模塊中設(shè)計(jì)幾個(gè)創(chuàng)新功能,他們是預(yù)防,保健和訓(xùn)練功能。隨著人們對(duì)寵物越來越重視,對(duì)寵物的健康關(guān)注度也越來越高,因此預(yù)防和保健功能也就能得到愛寵人士的認(rèn)可。而訓(xùn)練功能則是針對(duì)那些初次接觸寵物的人群,在這里會(huì)提供給這些人士全面的訓(xùn)練知
32、識(shí),從而是寵物有著較好的生活習(xí)慣,而且還可以為寵物訓(xùn)練些小技能等等,這樣既可以提高寵物的生活質(zhì)量又可以為愛寵人士增添些養(yǎng)寵物的趣味性。在用戶體驗(yàn)反面,扁平化的設(shè)計(jì)風(fēng)格可以給用戶留下直接的體驗(yàn)。重點(diǎn)功能設(shè)計(jì)聚焦在頁面頂部,突出內(nèi)容;各功能之間布局位置獨(dú)立,不會(huì)受到其他元素的局限。界面包含的信息一目了然,圖片文字之間空間分配合理,符合用戶的操作習(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ì)體會(huì)本次的APP界面設(shè)計(jì)作為我的畢業(yè)設(shè)計(jì),重要性是不言而喻的,所以每個(gè)人都會(huì)無比的關(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)查分析和競(jìng)品分析,一步步的理清設(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)資料,請(qǐng)教老師幫忙,和同學(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ì)的符號(hào)化研究J.寧波教育學(xué)院學(xué)報(bào).2015(3):69-729 雷菁.淺析中國(guó)傳統(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ā)展趨勢(shì)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、要向這四年中對(duì)我教育培養(yǎng)的老師們表示真誠(ché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é)到了很多知識(shí),彌補(bǔ)了以前學(xué)習(xí)過程中很多的不足。作為一個(gè)經(jīng)驗(yàn)匱乏的我,難免會(huì)遇到種種困難,如果沒有指導(dǎo)老師的督促指導(dǎo),順利完成是很難的。在此要感謝所有的老師,是您們?nèi)蝿谌卧沟母冻觯晦o辛苦的為我們改作業(yè),為我們解答難題,為我打下專業(yè)的知識(shí)基礎(chǔ)。您們的這些精神深深地激勵(lì)著我們,幫助我們不斷的成長(zhǎng),成為我們?nèi)松闹嘎窡?。最后我要真摯的感謝我四年來的室友和同學(xué)們,從遙遠(yuǎn)的家來到這個(gè)陌生的城市里,陪伴我走過那些風(fēng)風(fēng)雨雨的日子,那些瞬間無法忘懷,一切就好像昨天一樣,這份友誼和感情我會(huì)永遠(yuǎn)銘記于心,再次表示對(duì)我的學(xué)校!敬愛的老師們!親愛的同學(xué)們表示深深地的感謝!19
- 溫馨提示:
1: 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
2: 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
3.本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
5. 裝配圖網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025年防凍教育安全教育班會(huì)全文PPT
- 2025年寒假安全教育班會(huì)全文PPT
- 初中2025年冬季防溺水安全教育全文PPT
- 初中臘八節(jié)2024年專題PPT
- 主播直播培訓(xùn)提升人氣的方法正確的直播方式如何留住游客
- XX地區(qū)機(jī)關(guān)工委2024年度年終黨建工作總結(jié)述職匯報(bào)
- 心肺復(fù)蘇培訓(xùn)(心臟驟停的臨床表現(xiàn)與診斷)
- 我的大學(xué)生活介紹
- XX單位2024年終專題組織生活會(huì)理論學(xué)習(xí)理論學(xué)習(xí)強(qiáng)黨性凝心聚力建新功
- 2024年XX單位個(gè)人述職述廉報(bào)告
- 一文解讀2025中央經(jīng)濟(jì)工作會(huì)議精神(使社會(huì)信心有效提振經(jīng)濟(jì)明顯回升)
- 2025職業(yè)生涯規(guī)劃報(bào)告自我評(píng)估職業(yè)探索目標(biāo)設(shè)定發(fā)展策略
- 2024年度XX縣縣委書記個(gè)人述職報(bào)告及2025年工作計(jì)劃
- 寒假計(jì)劃中學(xué)生寒假計(jì)劃安排表(規(guī)劃好寒假的每個(gè)階段)
- 中央經(jīng)濟(jì)工作會(huì)議九大看點(diǎn)學(xué)思想強(qiáng)黨性重實(shí)踐建新功