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