APPUI版式設(shè)計(jì)-畢業(yè)綜合實(shí)踐報(bào)告.doc

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