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

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