APPUI版式設(shè)計-畢業(yè)綜合實踐報告.doc

2014藝術(shù)設(shè)計專業(yè)本科 APPUI版式設(shè)計中文摘要手機、電腦等電子設(shè)備已經(jīng)成為現(xiàn)代人生活的必需品，生活中的一舉一動都可能體現(xiàn)出電子設(shè)備的重要性。UI界面作為現(xiàn)代電子設(shè)備中人機交互的重要手段，UI界面的設(shè)計隨著電子設(shè)備在人們生活中地位的提高,也成為視覺設(shè)計中最為重要的分支之一和重要的新興學(xué)科。報告使用了Xmind梳理需求思路，使用Axure制作產(chǎn)品原型，之后使用Photoshop繪制產(chǎn)品UI設(shè)計，最終輸出產(chǎn)品UI設(shè)計稿。設(shè)計稿主要內(nèi)容為APPUI版式設(shè)計，包含Android版式設(shè)計以及IOS版式設(shè)計。它還涵蓋了界面外觀的設(shè)計，還有用戶和機器的互動交流和操作邏輯。UI 的設(shè)計如今一直伴隨著人們的日常生活并密不可分。好的 UI 設(shè)計可以使產(chǎn)品更使用戶更容易接受和更受用戶的歡迎。關(guān)鍵詞：UI設(shè)計 APPUI設(shè)計 AndroidUI設(shè)計I目 錄中文摘要I1 設(shè)計概論11.1 UI設(shè)計的背景11.2 研究的內(nèi)容11.3 研究的意義21.4 研究的方法22 設(shè)計任務(wù)33 UI設(shè)計的依據(jù)44 設(shè)計思路54.1 UI設(shè)計的創(chuàng)意54.2 UI設(shè)計的表達55 設(shè)計內(nèi)容66 UI設(shè)計說明76.1 設(shè)計過程的分析76.1.1 UI設(shè)計整體構(gòu)思76.1.2 UI設(shè)計風(fēng)格的選擇86.2幸福花苑UI設(shè)計86.2.1 Auto CAD的平面施工圖的設(shè)計86.2.2 3D MAX三維建模設(shè)計96.2.3 Photoshop后期處理設(shè)計16設(shè)計總結(jié)20參考文獻21附 錄22致 謝26 2014藝術(shù)設(shè)計專業(yè)本科 APPUI版式設(shè)計1 設(shè)計概論UI作為互聯(lián)網(wǎng)時代時下流行的新詞匯，它還涵蓋了界面外觀的設(shè)計，還有用戶和機器的互動交流和操作邏輯。UI 的設(shè)計如今一直伴隨著人們的日常生活并密不可分。好的 UI 設(shè)計可以使產(chǎn)品更使用戶更容易接受和更受用戶的歡迎。1.1 UI設(shè)計的背景及現(xiàn)狀在過去很長的一段時間里界面設(shè)計一直沒有被國內(nèi)信息企業(yè)重視，做界面設(shè)計的人一直被稱呼為美工，他們的工作被認(rèn)為只是單純地給界面或者網(wǎng)站進行簡單的裝飾，完全不需要獨立的思想和創(chuàng)意。當(dāng)信息產(chǎn)業(yè)鋪天蓋地的融入我們的生活的時候，越來越多的企業(yè)發(fā)現(xiàn)軟件和網(wǎng)站產(chǎn)品僅僅靠先進的技術(shù)是不足以在市場上立于不敗之地，高水平的界面與交互設(shè)計成為了產(chǎn)品在市場上一種重要的手段，為很多廠家?guī)砹讼喈?dāng)可觀的經(jīng)濟效益，一個美觀的界面會給人帶來舒適的視覺享受，拉近人與電腦的距離，為商家創(chuàng)造賣點。界面設(shè)計不是單純的美術(shù)繪畫。它需要考慮使用者、使用環(huán)境、使用方式，并且最終實現(xiàn)為用戶而設(shè)計是純粹的科學(xué)性的藝術(shù)設(shè)計。檢驗一個界面的標(biāo)準(zhǔn)既不是某個項目開發(fā)組領(lǐng)導(dǎo)的意見也不是項目成員投票的結(jié)果，而是最終用戶的感受，所以界面設(shè)計要和用戶研究緊密結(jié)合，最終為用戶設(shè)計出一個滿意的視覺效果。1.2 UI的概念UI的本來是User Interface(用戶界面)的簡稱,主要是指對軟件的人機交互、操作邏輯、界面美觀的整體設(shè)計。1.3 研究的意義UI 在國內(nèi)在近幾年才開始流行起來，是一個新興的熱門行業(yè)，所以有許許多多的人涉足于該行業(yè)；又因為 UI 設(shè)計的行業(yè)在國內(nèi)剛剛火熱起來，各個公司對該行業(yè)的人才也非常需要。在當(dāng)今的專業(yè) UI 設(shè)計人員當(dāng)中，有許多都是從美術(shù)行業(yè)、網(wǎng)頁設(shè)計行業(yè)轉(zhuǎn)行的專人也才，其中也包括了自學(xué)的人。然而和國外的 UI 設(shè)計師相比之下，國內(nèi)的知識水平就相對匱乏，經(jīng)驗也較為不足。 無論是 IOS、Android 還是 WP 系統(tǒng)的各類智能手機及平板電腦，都有各種各樣的應(yīng)用軟件。應(yīng)用軟件的界面實用性、視覺美觀性和用戶體驗優(yōu)良性都離不開視覺傳達藝術(shù)。在人機交互技術(shù)逐漸成熟的今天，用戶開始注重自身的對產(chǎn)品體驗的滿足感，這就意味著優(yōu)秀的用戶體驗即產(chǎn)品成功的關(guān)鍵。 產(chǎn)品的視覺設(shè)計在產(chǎn)品中占據(jù)著重要的地位，優(yōu)秀的UI設(shè)計意味著能給用戶帶來優(yōu)秀的用戶體驗。因為自己一直做 UI 設(shè)計，所以想通過項目中的 UI 設(shè)計來探究UI設(shè)計中的版式設(shè)計對整體UI表達效果的的意義以及價值。2 UI版式設(shè)計分類UI界面設(shè)計包括硬件界面設(shè)計和軟件界面設(shè)計這里我們探討的是軟件界面設(shè)計，軟件界面設(shè)計中又包括“用戶研究”、“交互設(shè)計”與“界面設(shè)計”三個部分。2.1用戶研究在產(chǎn)品開發(fā)的前期通過調(diào)查研究了解用戶的工作性質(zhì)、工作流程、工作環(huán)境、工作中的使用習(xí)慣，挖掘出用戶對產(chǎn)品功能的需求和希望，為我們的界面設(shè)計提供有力的思考方向，設(shè)計出讓用戶滿意的界面用戶研究不是設(shè)計者主觀的行為，而是站在用戶的角度去探討產(chǎn)品的開發(fā)設(shè)計它最終達到的目標(biāo)是提高產(chǎn)品的可用性，使我們設(shè)計的產(chǎn)品更容易被人接受。使用并記憶當(dāng)產(chǎn)品最終被推上市場后，設(shè)計者還應(yīng)該主動去收集市場的用戶反饋，因為市場反饋是用戶使用后的想法是檢驗界面與交互設(shè)計是否合理的標(biāo)準(zhǔn)，也是經(jīng)驗積累的重要途徑。2.2 交互設(shè)計這部分指人與機之間的交互工程一般都是軟件工程師來制作，交互設(shè)計師的工作內(nèi)容就是設(shè)計軟件的操作流程“樹狀結(jié)構(gòu)”軟件的結(jié)構(gòu)與操作規(guī)范等。一個軟件產(chǎn)品在編碼之前需要作的就是交互設(shè)計，并且確立交互模型、交互規(guī)范。人機交互設(shè)計的目的在于加強軟件的易用、易學(xué)、易理解，使計算機真正成為方便地為人類服務(wù)的工具。2.3 界面設(shè)計國內(nèi)目前大部分工作者都是從事這類設(shè)計工作，也有人稱之為美工，但實際上不是單純意義上的美術(shù)工作者，而是軟件產(chǎn)品的信息界面設(shè)計師從心理學(xué)意義來分，界面可分為感覺、視覺、觸覺、聽覺和情感兩個層次。用戶界面設(shè)計是屏幕產(chǎn)品的重要組成部分界面設(shè)計是一個復(fù)雜的有不同學(xué)科參與的工程，認(rèn)知心理學(xué)、設(shè)計學(xué)、語言學(xué)等在此都扮演著重要的角色，用戶界面設(shè)計的三大原則是置界面于用戶的控制之下，減少用戶的記憶負(fù)擔(dān)，保持界面的一致性。2 設(shè)計任務(wù)本次設(shè)計的任務(wù)就是要設(shè)計一個相對符合現(xiàn)代人類審美，且擁有良好視覺體驗、用戶體驗的APPUI設(shè)計作品。一個成功的UI設(shè)計作品對于是否符合現(xiàn)代人類審美，除了在扎實的基礎(chǔ)理論上的知識外；在技術(shù)層面上來看，熟練地技巧也是密不可分的，而且是一個作品的成敗的關(guān)鍵部分。在我們的設(shè)計中有一個共性問題一直存在，那就是每一位客戶對風(fēng)格上的要求都是不同的，所以也要求了UI設(shè)計師們在進行UI設(shè)計之前必須與產(chǎn)品經(jīng)理、需求分析人員、需求調(diào)研工作者進行溝通，理解需求內(nèi)容及重點，了解用戶心理以及用戶所需要的，能接受的UI設(shè)計作品。事實證明，隨著時代的發(fā)展進步，UI設(shè)計無論在功能上，還是在藝術(shù)審美上的要求都要更具有人性化，這也是它的一個發(fā)展趨勢而且具有挑戰(zhàn)性。3 UI版式設(shè)計依據(jù)3.1 UI版式設(shè)計法則72法則：因為人腦處理信息的能力有限,所以它通過把信息分成塊和單元來處理復(fù)雜問題。根據(jù)George A Miller 的研究，人們短期記憶每次能處理59件事情。這經(jīng)常貝作為把導(dǎo)航菜單的元素限制在7個以內(nèi)的依據(jù)。但是關(guān)于“72”的爭論很激烈。以至于如何把他應(yīng)用到網(wǎng)站上還不明確。主要使用范圍是網(wǎng)頁設(shè)計的導(dǎo)航上。2秒鐘法則：這是個松散的原則，用戶在使用某類系統(tǒng)時的等待反映(比如:功能切換和功能載入)的時候不應(yīng)該超過2秒。選擇2秒也許有一點隨意，但是這卻是一個合理的數(shù)量級。一個更可信的原則是，用戶等待的時間越短，用戶體驗更佳。這個法則也使用與移動APP的啟動頁面或者交互觸發(fā)。如圖3-1所示。圖3-1多手指手勢操作3次點擊法則：用戶在3次點擊之內(nèi)如果還沒有找到他們想要的信息或了解網(wǎng)站特色，他們就會離開該網(wǎng)站。這條原則突出樂清晰的導(dǎo)航，符合邏輯的結(jié)構(gòu)和易于理解的網(wǎng)站層級的重要性。如果你的網(wǎng)站能夠讓用戶知道他在哪里，從哪里來，要到哪里去，并且能夠讓用戶了解如何完成目標(biāo)，圖3-2所示的點擊即使多次也是沒有問題的。圖3-2三次點擊操作示意圖2/8法則(Pareto定律):Paretod定律(也被稱為“少數(shù)關(guān)鍵定律”或“因素稀疏定律”)表明80的結(jié)果，由20的原因產(chǎn)生。這是商業(yè)中一條記本的經(jīng)驗法則（80的銷量來自20的客戶），但是也同樣適用于設(shè)計領(lǐng)域和可用性領(lǐng)域。比如，對20的用戶，客戶，活動，產(chǎn)品或過程的定位，可能為你帶來80的利潤，使你對它們的注意程度最大化。圖3-2少數(shù)關(guān)鍵簡化設(shè)計樣例3.2 UI版式設(shè)計原則Ben Shneiderman 通過對用戶界面的設(shè)計的研究，提出了一系列的原則，這些原則來自經(jīng)驗和啟發(fā)，適用于大多數(shù)交互系統(tǒng)。這些原則和所有的用戶界面設(shè)計都相關(guān)，嚴(yán)格意義上說，也適用于網(wǎng)站設(shè)計。1. 努力做到連貫2. 允許頻繁使用系統(tǒng)的用戶使用快捷方式3. 提供信息反饋4. 為關(guān)閉這一動作設(shè)計對話框5. 提供簡單的設(shè)計處理6. 允許簡單的撤銷操作7. 提供控制器。支持內(nèi)部控制點8. 降低短期記憶載荷4 UI版式設(shè)計標(biāo)準(zhǔn)4.1 Android UI版式設(shè)計標(biāo)準(zhǔn)1.尺寸及分辨率:Android界面尺寸：480*800、720*1280、1080*1920PX。Android比iPhone的寸尺多了很多套，建議取用720*1280這個尺寸，這個尺寸720*1280中顯示完美，在1080*1920中看起來比較清晰，切圖后的圖片文件大小也適中，應(yīng)用的內(nèi)存消耗也不會過高。2.界面基本組成元素:Android的app界面和iPhone的基本相同：狀態(tài)欄、導(dǎo)航欄、主菜單、內(nèi)容區(qū)域。Android中我們?nèi)∮玫?20*1280的尺寸設(shè)計，那我們就說說在這個尺寸下這些元素的尺寸。狀態(tài)欄高度為：50px導(dǎo)航欄高度為：96px主菜單欄高度為：96px內(nèi)容區(qū)域高度為：1038px(1280-50-96-96=1038)Android最近出的手機都幾乎去掉了實體鍵，把功能鍵移到了屏幕中，當(dāng)然高度也是和菜單欄一樣的。Android為了在界面上區(qū)別于iOS，Android4.0開始提出的一套HOLO的UI風(fēng)格一些app的最新版本都采用了這一風(fēng)格，這一風(fēng)格最明顯的變化就是將下方的主菜單移到了導(dǎo)航欄下面，這樣的方式解決了現(xiàn)在很多手機去除實體鍵后再屏幕中顯示而出現(xiàn)的雙底欄的尷尬情景。3.字體大?。?Android 上的字體為：Droid sans fallback，是谷歌自己的字體，與微軟雅黑很像,如圖4-1所示。圖4-1安卓UI版式設(shè)計字體4.2 IOS UI版式設(shè)計標(biāo)準(zhǔn)尺寸及分辨率:iPhone界面尺寸：320*480、640*960、640*1136iPad界面尺寸：1024*768、2048*1536單位：像素72dpi，在設(shè)計的時候并不是每個尺寸都要做一套，尺寸按自己的手機來設(shè)計，比較方便預(yù)覽效果，一般用640*960或者640*1136的尺寸來設(shè)計。Ps：作圖的時候確保都是用形狀工具(快捷鍵：U)畫的，這樣更方便后期的切圖或者尺寸變更。界面基本組成元素:iPhone的app界面一般由四個元素組成，分別是：狀態(tài)欄、導(dǎo)航欄、主菜單欄、內(nèi)容區(qū)域。這里取用640*960的尺寸設(shè)計，那我們就說說在這個尺寸下這些元素的尺寸。狀態(tài)欄：就是我們經(jīng)常說的信號、運營商、電量等顯示手機狀態(tài)的區(qū)域，其高度為：40px;導(dǎo)航欄：顯示當(dāng)前界面的名稱，包含相應(yīng)的功能或者頁面間的跳轉(zhuǎn)按鈕，其高度為：88px;主菜單欄：類似于頁面的主菜單，提供整個應(yīng)用的分類內(nèi)容的快速跳轉(zhuǎn)，其高度為：98px;內(nèi)容區(qū)域：展示應(yīng)用提供的相應(yīng)內(nèi)容，整個應(yīng)用中布局變更最為頻繁，其高度為：734px;字體大小:Phone上的字體英文為：HelveticaNeue 。至于中文Mac下用的是黑體，Win下則為華文黑體，如圖4-2所示。圖4-2 IOS UI版式設(shè)計字體5 設(shè)計內(nèi)容局部與整體協(xié)調(diào)統(tǒng)一：設(shè)計時需要從里到外多次反復(fù)協(xié)調(diào)，務(wù)使其更趨完美合理。UI版式設(shè)計需要與需求整體的重點、公司內(nèi)部設(shè)計標(biāo)準(zhǔn)、風(fēng)格相協(xié)調(diào)統(tǒng)一。色彩與需求重點的協(xié)調(diào)：色彩有著豐富的含義和象征，人們對不同的色彩表現(xiàn)出不同的好惡，這種心理反應(yīng)，常常是因人們生活經(jīng)驗以及由色彩引起的聯(lián)想造成的。需求分為次重點：需求中的重點表現(xiàn)內(nèi)容需要通過色彩突出，對用戶做出視覺上的引導(dǎo)，盡可能的減少用戶的認(rèn)知成本，讓用戶可以輕易、快速的獲取到需求中的重點表現(xiàn)內(nèi)容以及相關(guān)的重點操作指引。UI設(shè)計的風(fēng)格：在UI設(shè)計的前期工作就是和產(chǎn)品經(jīng)理多溝通，了解需求重點，多通過各個渠道了解用戶特征，以設(shè)計出更易于被用戶接受的產(chǎn)品。然后再在專業(yè)的知識上結(jié)合用戶以及產(chǎn)品需求的要求，做出具有舒適性、科學(xué)性、藝術(shù)性、易于識別、美觀性的UI設(shè)計風(fēng)格。設(shè)計總結(jié)隨著Web2.0時代的到來,互聯(lián)網(wǎng)作為一個新興的行業(yè)（產(chǎn)業(yè)），已成為社會經(jīng)濟和科學(xué)技術(shù)發(fā)展最快的一個領(lǐng)域，更是近年來各領(lǐng)域的投資熱點。在接下來的十年，我們可以看到，互聯(lián)網(wǎng)已經(jīng)不再只是社會的一個細(xì)分業(yè)態(tài)，而是成為了當(dāng)今社會發(fā)展的一個新階段，包括傳統(tǒng)商貿(mào)零售、金融、政府、公共事業(yè)、醫(yī)療、媒體等幾乎所有行業(yè)均會從業(yè)務(wù)、營銷到技術(shù)想互聯(lián)網(wǎng)化全面轉(zhuǎn)型。APP作為互聯(lián)網(wǎng)行業(yè)面向大眾用戶最直接的表現(xiàn)形式，作為互聯(lián)網(wǎng)給用戶傳遞信息的載體之一，在設(shè)計方面也在不斷的完善發(fā)展，報告的創(chuàng)新點在于以用戶為中心的設(shè)計理念被貫穿在APP產(chǎn)品的始終，以提高APP產(chǎn)品用戶體驗。在APP的設(shè)計之中，APP的設(shè)計版式也是一門新興知識領(lǐng)域，盡管還只是數(shù)十年的事，但隨著互聯(lián)網(wǎng)產(chǎn)品的不斷發(fā)展演化，從主流系統(tǒng)APP的產(chǎn)品設(shè)計到不同垂直細(xì)分領(lǐng)域的APP產(chǎn)品，其版式正在被互聯(lián)網(wǎng)不斷統(tǒng)一及完善，并在業(yè)內(nèi)逐漸形成一套獨有的統(tǒng)一的設(shè)計標(biāo)準(zhǔn)，使互聯(lián)網(wǎng)產(chǎn)品表現(xiàn)形式更加豐富，且有規(guī)可循，更好的傳播互聯(lián)網(wǎng)信息，更好更快的完成人人交互、人機交互，助力互聯(lián)網(wǎng)發(fā)展。參考文獻 1 法古斯塔夫勒龐.烏合之眾：大眾心理研究M.中央編譯出版社, 20132 美Kristofer Layon產(chǎn)品經(jīng)理必知必會J.人民郵電出版社,20123 美Jonathan Cagan