哈弗H8平板APP界面設(shè)計(jì)畢業(yè)設(shè)計(jì)說(shuō)明書

畢業(yè)設(shè)計(jì)說(shuō)明書題目：哈弗H8平板APP界面設(shè)計(jì)產(chǎn)品設(shè)計(jì)工藝設(shè)計(jì)方案設(shè)計(jì)√類型：學(xué)生姓名：學(xué)號(hào)：學(xué)院：藝術(shù)學(xué)院專業(yè)：電腦藝術(shù)設(shè)計(jì)（新媒體）班級(jí)：學(xué)校指導(dǎo)教師：企業(yè)指導(dǎo)教師：_____________________________2016年1月9日《哈弗H8》平板APP界面的設(shè)計(jì)制作摘要當(dāng)今社會(huì)的生活節(jié)奏越來(lái)越快，平板設(shè)備不斷普及，對(duì)平板設(shè)備的軟件需求越來(lái)越多，從以前的追求技術(shù)到現(xiàn)在的追求視覺(jué)。界面視覺(jué)效果良好，且具有良好體驗(yàn)的應(yīng)用留在自己的平板上長(zhǎng)期使用。因此，平板UI界面設(shè)計(jì)在當(dāng)今移動(dòng)互聯(lián)網(wǎng)迅猛發(fā)展的時(shí)代中顯現(xiàn)得尤為重要。我的作品是哈弗H8平板APP界面設(shè)計(jì)。希望我們的項(xiàng)目可以使廣大消費(fèi)者快捷、方便、明了的看到這款車的信息，解決信息不全面，對(duì)車型的不了解，對(duì)款式的性能。比之前有的軟件更加完善，更加細(xì)致全面。現(xiàn)如今車的品牌和種類都特別多，有的消費(fèi)者并不是特別的了解，在購(gòu)車前都會(huì)做好十足的準(zhǔn)備，我們要做的這個(gè)APP就能使有想法買這款車的消費(fèi)者非常的了解這款車，而且也能使消費(fèi)者有個(gè)對(duì)比。此款平板APP界面設(shè)計(jì)主題突出，明確。整體色彩運(yùn)用暖色調(diào)系列，界面風(fēng)格整體統(tǒng)一，我們的APP欄目有：車型感官、內(nèi)飾體驗(yàn)、經(jīng)銷商查詢、性能裝備表、養(yǎng)車小知識(shí)。是一款以實(shí)用和獨(dú)特的風(fēng)格呈現(xiàn)給消費(fèi)者更快捷、方便、明了的體驗(yàn)。關(guān)鍵詞：哈弗H8;UI界面設(shè)計(jì);平板APP 目錄1.摘要 11.目錄 22.引言 32.1項(xiàng)目目的和內(nèi)容 42.2項(xiàng)目分析 42.2.1行業(yè)背景分析 42.2.2同類型APP分析 42.3基本要素 42.3.1設(shè)計(jì)風(fēng)格定義 42.3.2規(guī)格定義 42.APP開發(fā)可行性分析 52.1設(shè)計(jì)原理上的可行性分析 52.2開發(fā)技術(shù)上的可行性分析 53.界面詳情設(shè)計(jì) 53.1市場(chǎng)調(diào)查 53.2承擔(dān)項(xiàng)目 63.3應(yīng)用界面設(shè)計(jì) 63.3.1按鈕的設(shè)計(jì) 63.3.2文字的設(shè)計(jì) 63.3.3背景的設(shè)計(jì) 63.4色彩 74.設(shè)計(jì)中遇到的問(wèn)題和解決方案 75.結(jié)論 8參考文獻(xiàn) 8致謝 81引言當(dāng)今社會(huì)的生活節(jié)奏越來(lái)越快，人們對(duì)平板的要求也越來(lái)越高。平板APP設(shè)計(jì)是平板軟件的人機(jī)交互，操作邏輯，界面美觀的整體設(shè)計(jì)。在漫長(zhǎng)的軟件發(fā)展中，界面設(shè)計(jì)工作一直沒(méi)有受到設(shè)計(jì)師得關(guān)注，其實(shí)軟件界面設(shè)計(jì)是產(chǎn)品的重要買點(diǎn)。一個(gè)操作簡(jiǎn)潔美觀的界面會(huì)給人帶來(lái)舒適的視覺(jué)享受，拉近人與平板的距離，為商家創(chuàng)造賣點(diǎn)，同時(shí)用戶能夠最直觀的感受到視覺(jué)設(shè)計(jì)的魅力。我所選擇的是哈弗這款車的品牌，哈弗是長(zhǎng)城汽車定位為CUV車型(CityUtilityVehicle)，其中文意思是指城市多功能車?，F(xiàn)在的人群使用汽車類型APP也是越來(lái)越多，但是屬于一款車型的APP很少。哈弗H8是長(zhǎng)城汽車將要推出的一款中型城市SUV車型。其前臉依然采用傳統(tǒng)的鍍鉻大嘴設(shè)計(jì)風(fēng)格，部造型更加飽滿，攻擊性更為強(qiáng)烈。外觀更具肌肉感，車內(nèi)空間更大。國(guó)產(chǎn)合資車相對(duì)于性價(jià)比更高?，F(xiàn)如今車的品牌和種類都特別多，有的消費(fèi)者并不是特別的了解，在購(gòu)車前都會(huì)做好十足的準(zhǔn)備，我們要做的這個(gè)APP就能使有想法買這款車的消費(fèi)者非常的了解這款車，而且也能使消費(fèi)者有個(gè)對(duì)比。1.1項(xiàng)目目的和內(nèi)容我的作品是哈弗H8的車型平板APP界面設(shè)計(jì)，主要針對(duì)將要買車了解車型的群體，希望我們的項(xiàng)目可以使廣大消費(fèi)者快捷、方便、明了的看到這款車的信息，解決信息不全面，對(duì)車型的不了解，對(duì)款式的性能。比之前有的軟件更加完善，更加細(xì)致全面?，F(xiàn)如今車的品牌和種類都特別多，有的消費(fèi)者并不是特別的了解，在購(gòu)車前都會(huì)做好十足的準(zhǔn)備，我們要做的這個(gè)APP就能使有想法買這款車的消費(fèi)者非常的了解這款車，而且也能使消費(fèi)者有個(gè)對(duì)比。此平板APP界面設(shè)計(jì)主題突出、明確，整體色彩運(yùn)用運(yùn)用為暖色調(diào)為主，風(fēng)格統(tǒng)一，是用平面化的表現(xiàn)方式為學(xué)生們帶來(lái)不一樣的清新健康體驗(yàn)。我的作品具有高的體驗(yàn)效果，創(chuàng)意設(shè)計(jì)把消費(fèi)者所需要的體現(xiàn)在每個(gè)界面，精確的分類、有創(chuàng)意的界面設(shè)計(jì)，并且每一個(gè)像素的細(xì)節(jié)呈現(xiàn)著令人賞心悅目的視覺(jué)效果。將以獨(dú)特的風(fēng)格，把APP應(yīng)用更加符合消費(fèi)者的需求，讓消費(fèi)者能夠快捷、方便、明了的看到這款車的信息。作品內(nèi)容包括有：?jiǎn)?dòng)界面（1張）、主界面（1張）、車型感官（11張）、內(nèi)飾體驗(yàn)（12張）、經(jīng)銷商查詢（6張）、性能裝備表（14張）、養(yǎng)車小知識(shí)（1張）。1.2項(xiàng)目分析1.2.1行業(yè)背景分析隨著計(jì)算機(jī)廣泛運(yùn)用，平板市場(chǎng)的快速發(fā)展，發(fā)現(xiàn)2014年12月中國(guó)平板網(wǎng)民規(guī)模達(dá)至5.57億，使APP應(yīng)用行業(yè)迅速發(fā)展。其中除了游戲和廣告之外，其它類型的APP應(yīng)用近期數(shù)量不斷增加，而汽車類型的APP也越來(lái)越多，根據(jù)汽車品牌不同，風(fēng)格類型也各有不同。汽車是人們出行的一種重要交通工具，給人們帶來(lái)很大的便利。移動(dòng)互聯(lián)網(wǎng)時(shí)代，汽車APP也因人對(duì)汽車的多種需求而不斷開發(fā)上線。隨著汽車行業(yè)的發(fā)展，如今，越來(lái)越多的品牌選擇用APP來(lái)講述品牌故事。各大品牌也相繼推出了屬于自己的APP平臺(tái)，這樣的好處就是可以讓消費(fèi)者享受到隨時(shí)隨地的便捷服務(wù)。平板相對(duì)與手機(jī)來(lái)說(shuō)更加清晰屏幕的尺寸更大對(duì)于我們做的汽車類型的APP更加便捷。而汽車作為人們出行的重要工具，當(dāng)兩者結(jié)合起來(lái)共同為用戶服務(wù)時(shí)將是不錯(cuò)的體驗(yàn)。1.2.2同類型APP分析相比同類型APP，我的既有缺點(diǎn)也有他自身的優(yōu)點(diǎn)之處。缺點(diǎn)是：內(nèi)容不夠豐富，在技術(shù)上有待提高。優(yōu)點(diǎn)是：使用的風(fēng)格大膽，符合我想要做的主題。更加體現(xiàn)了越野車的特性，讓消費(fèi)者更加了解，使購(gòu)買欲望更強(qiáng)。在細(xì)節(jié)方面也處理的比較好。在動(dòng)畫的形式上也給人耳目一新的感覺(jué)。跟同類型APP相比增加了一個(gè)啟動(dòng)動(dòng)畫，讓消費(fèi)者覺(jué)得與別的APP別具一格，還新增加了一個(gè)養(yǎng)車小知識(shí)，給消費(fèi)者溫馨的感覺(jué)。在背景上大膽的運(yùn)用風(fēng)景的素材表現(xiàn)出越野的特性。雖然APP有美中不足，但和同類型相比，我的APP還是存在它本身的優(yōu)勢(shì)。1.3基本要素1.3.1設(shè)計(jì)風(fēng)格定義手繪所有界面草稿，在Photoshop、CorelDRAWCs4中處理圖片色界以及制作效果圖，接著在Flash中制作動(dòng)畫效果。1.利用PS制作效果界面圖，PS設(shè)計(jì)界面的排版、圖標(biāo)、配色、風(fēng)格等，確定效果方案圖。2.再用PS以及CoreIDRAW來(lái)做主界面、二級(jí)界面、三級(jí)界面。3.我們將用Flash來(lái)做引導(dǎo)頁(yè)面的動(dòng)畫。4.用Flash制作動(dòng)畫，加入感染力的音樂(lè)。5.Flash制作多媒體的圖形和界面。1.3.2規(guī)格定義（1）設(shè)計(jì)尺寸：寬度：1136像素高度：852像素（2）最佳顯示分辨率：72dpi（3）色彩模式：RGB2APP開發(fā)可行性分析2.1.設(shè)計(jì)原理上的可行性分析整個(gè)汽車平板APP推廣以展示圖片、提供信息為主，采用靜態(tài)頁(yè)面的形式，然后利于FLASH制作動(dòng)畫效果形成APP軟件。該款A(yù)PP有美觀的界面設(shè)計(jì)，軟件的操作舒適、簡(jiǎn)單、自由,便捷的交互設(shè)置方便用戶的使用。1.前期選擇合適的項(xiàng)目，進(jìn)行市場(chǎng)調(diào)查，資料的收集；需找相關(guān)海報(bào)的風(fēng)格色彩搭配方式，借鑒別的優(yōu)秀網(wǎng)站和手機(jī)app。2.方案草圖，確定方案。確定欄目用PS做效果界面圖。3.PS修改界面圖，根據(jù)效果界面圖的問(wèn)題進(jìn)行修改。最終定稿。4.確定效果界面圖以及細(xì)節(jié)設(shè)計(jì)，進(jìn)一步研究效果及細(xì)節(jié)和對(duì)方案的調(diào)整。5.最后用Flash制作動(dòng)畫，修改、調(diào)整達(dá)到方案的效果。2.2開發(fā)技術(shù)上的可行性分析技術(shù)介紹：1.利用PS制作效果界面圖，PS設(shè)計(jì)界面的排版、圖標(biāo)、配色、風(fēng)格等，確定效果方案圖。2.再用PS以及CoreIDRAW來(lái)做主界面、二級(jí)界面、三級(jí)界面。3.我們將用Flash來(lái)做引導(dǎo)頁(yè)面的動(dòng)畫。4.用Flash制作動(dòng)畫，加入感染力的音樂(lè)。5.Flash制作多媒體的圖形和界面。3界面詳情設(shè)計(jì)3.1市場(chǎng)調(diào)查通過(guò)我們小組的市場(chǎng)調(diào)查發(fā)現(xiàn)：平板APP軟件要比其他渠道車輛信息要全面一些，信息的更新速度也要快很多，汽車的信息也更加的具有專業(yè)性，功能也更加的方便。而平板APP軟件相比其他渠道來(lái)說(shuō)是沒(méi)有辦法直接獲取有效的信息，而平板APP的內(nèi)容的可信度也不是很高，功能也單一。結(jié)合這些我們小組討論要做一個(gè)功能豐富、內(nèi)容可信度高的一款A(yù)PP。就現(xiàn)在國(guó)內(nèi)的外現(xiàn)況分析：?jiǎn)蝹€(gè)汽車品牌的APP并不是很多，在這個(gè)方面哈弗有研發(fā)自己的APP。但并不是很好，在功能上面分析有靈感、外形、空間、性能以及360度展示，通過(guò)這幾個(gè)可以初步的了解H8這一款車，但是沒(méi)有深入的介紹這一款車的優(yōu)缺點(diǎn)，沒(méi)有讓用戶明簡(jiǎn)單直接的明白這一款車，只是用數(shù)據(jù)來(lái)說(shuō)明這一款車的優(yōu)點(diǎn)，而就給會(huì)用戶一種不真實(shí)的感覺(jué)。3.2承擔(dān)項(xiàng)目在本次畢業(yè)設(shè)計(jì)中，我是小組的組長(zhǎng)。我所承擔(dān)的項(xiàng)目是前期的調(diào)查、圖文的收集和三級(jí)界面，在交互動(dòng)畫中的后期修改。我們的APP欄目有：車型感官、內(nèi)飾體驗(yàn)、經(jīng)銷商查詢、性能裝備表、養(yǎng)車小知識(shí)。這些欄目都是通過(guò)小組討論，再三選取的。在前期的調(diào)查當(dāng)中我們選取的是哈弗H8這款品牌的車型的題材為主題。通過(guò)上網(wǎng)查詢資料以及問(wèn)卷調(diào)查來(lái)了解，在制作的過(guò)程中我們對(duì)于同類型的APP做了對(duì)比，收集了各種不同風(fēng)格的海報(bào)來(lái)借鑒。通過(guò)上網(wǎng)搜查一些我們需要用到的圖片然后進(jìn)行選取，用于我們需要的欄目背景以及細(xì)節(jié)素材。我做的三級(jí)界面主要是車型感官里面的車身顏色的選擇和外觀局部的觀賞，內(nèi)飾體驗(yàn)點(diǎn)擊進(jìn)去細(xì)節(jié)圖片、文字講解以及經(jīng)銷商查詢當(dāng)鼠標(biāo)在車子圖標(biāo)上顯示的資料。在后期會(huì)把使用Photoshop做的效果圖用Flash以動(dòng)畫的形式展示出來(lái)，在期間負(fù)責(zé)完善動(dòng)畫效果。3.3應(yīng)用界面3.3.1按鈕的設(shè)計(jì)按鈕的字號(hào)要看按鈕的大小來(lái)確定。字的高度為按鈕高度的1/2—1/3為佳，同樣，字的寬度為按鈕寬度的1/2—1/3比較好看。按鈕的顏色。按鈕的顏色最好與整個(gè)界面的主色調(diào)統(tǒng)一。如要求突出按鈕，那么按鈕的顏色可以試試界面的對(duì)比色。3.3.2文字的設(shè)計(jì)文字是界面的主體，也是傳達(dá)信息的主要工具。因此，文字絕對(duì)不可以馬虎。文字的字體我選擇為黑體，黑體顯得獨(dú)具一格，給人一種粗實(shí)有力、嚴(yán)肅莊嚴(yán)、樸素大方的感覺(jué)。3.3.3背景的設(shè)計(jì)背景是界面設(shè)計(jì)缺一不可的，也是最難挑選的地方。它實(shí)質(zhì)上是對(duì)產(chǎn)品進(jìn)行藝術(shù)包裝。背景必須和軟件主題有關(guān)聯(lián)，要能襯托出主題又不顯得很單一，因?yàn)檫@些背景就是對(duì)軟件的高度抽象化，它要既能讓人覺(jué)得賞心悅目，又能體現(xiàn)軟件的宗旨。3.3色彩色彩是藝術(shù)表現(xiàn)的要素之一。在進(jìn)行設(shè)計(jì)時(shí)，要根據(jù)和諧、均衡和重點(diǎn)突出的原則，將不同的色彩進(jìn)行組合，搭配來(lái)構(gòu)成美麗的頁(yè)面。根據(jù)色彩對(duì)人們心理的影響，合理地加以運(yùn)用。我們整個(gè)色系為暖色調(diào)。暖色調(diào)給人:日光不透明刺激濃厚固定近重干，人們見(jiàn)到暖色(如紅、橙、黃等)一類色彩，會(huì)聯(lián)系到陽(yáng)光、火光、鮮血等景物，產(chǎn)生熱烈、歡樂(lè)、溫暖、開朗、活躍、恐怖等感情反應(yīng)。在色彩上我們也會(huì)給予冷暖的對(duì)比來(lái)更加襯托主題，效果更強(qiáng)。4設(shè)計(jì)中遇到的困難和解決方案在設(shè)計(jì)創(chuàng)造過(guò)程中遇到困難時(shí)難免的，而設(shè)計(jì)的整個(gè)過(guò)程本身就帶著種種困難，發(fā)現(xiàn)并解決困難是一個(gè)過(guò)程，人生亦是如此，跌宕起伏，不是完美也不盡人意。此次APP設(shè)計(jì)中，我遇到了不少難題，開始就是困難，在最初的選題上我們是幾番波折，選題是一改再改，才最終確定了這一個(gè)選題。在制作過(guò)程中色彩以及風(fēng)格的選擇也一再改動(dòng)。想要作品能過(guò)呈現(xiàn)主題相符合并且和諧的感覺(jué)還是很難的，而且必須保證在整體主題色調(diào)格局統(tǒng)一又不單調(diào)，就需要花費(fèi)很多時(shí)間去思考。我堅(jiān)信任何問(wèn)題都有解決的方法，與組員進(jìn)行交流共同探究，請(qǐng)教老師幫助解決，上網(wǎng)查閱相關(guān)資料，通過(guò)比較解決方案，最終完成整個(gè)設(shè)計(jì)。5結(jié)論通過(guò)這一段時(shí)間的努力，終于