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

2014藝術(shù)設(shè)計(jì)專業(yè)本科2014藝術(shù)設(shè)計(jì)專業(yè)本科APPUI版式設(shè)計(jì)o-CWe-LfcdDwt^r1帛igo-CWe-LfcdDwt^r1帛igiRpciiftftrffntTuesdayTo-Do's0時(shí)Ijirthd社yqiFtGroceryListCerealMilk麗FiZ?BrwdPrctirt圖3-2少數(shù)關(guān)鍵簡化設(shè)計(jì)樣例3.2UI版式設(shè)計(jì)原則BenShneiderman通過對(duì)用戶界面的設(shè)計(jì)的研究，提出了一系列的原則，這些原則來自經(jīng)驗(yàn)和啟發(fā)，適用于大多數(shù)交互系統(tǒng)。這些原則和所有的用戶界面設(shè)計(jì)都相關(guān)，嚴(yán)格意義上說，也適用于網(wǎng)站設(shè)計(jì)。.努力做到連貫.允許頻繁使用系統(tǒng)的用戶使用快捷方式.提供信息反饋.為關(guān)閉這一動(dòng)作設(shè)計(jì)對(duì)話框.提供簡單的設(shè)計(jì)處理.允許簡單的撤銷操作.提供控制器。支持內(nèi)部控制點(diǎn).降低短期記憶載荷UI版式設(shè)計(jì)標(biāo)準(zhǔn)AndroidUI版式設(shè)計(jì)標(biāo)準(zhǔn).尺寸及分辨率：Android界面尺寸：480*800、720*1280、1080*1920PX。Android比iPhone的寸尺多了很多套，建議取用720*1280這個(gè)尺寸，這個(gè)尺寸720*1280中顯示完美，在1080*1920中看起來比較清晰，切圖后的圖片文件大小也適中，應(yīng)用的內(nèi)存消耗也不會(huì)過高。.界面基本組成元素：Android的app界面和iPhone的基本相同：狀態(tài)欄、導(dǎo)航欄、主菜單、內(nèi)容區(qū)域。Android中我們?nèi)∮玫?20*1280的尺寸設(shè)計(jì)，那我們就說說在這個(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開始提出的一套HOLO的UI風(fēng)格一些app的最新版本都采用了這一風(fēng)格，這一風(fēng)格最明顯的變化就是將下方的主菜單移到了導(dǎo)航欄下面，這樣的方式解決了現(xiàn)在很多手機(jī)去除實(shí)體鍵后再屏幕中顯示而出現(xiàn)的雙底欄的尷尬情景。.字體大?。篈ndroid上的字體為：Droidsansfallback，是谷歌自己的字體，與微軟雅黑很像如圖4-1所示。由注點(diǎn)口」/片砒鯉下窿(60%用附帷gJ見小IS〔50%以上用戶葭為調(diào)小〕ijiEE』上1電晶四"JJI(陰戶認(rèn)為晶科活)物如蚣靛瀛賽塞(480^00)長文本2tp3f24pv27px箱訃31px24px27px曲18pz21pxAMpid哈降率(32C^0O)長又本L4px16px16pK-2Qpx短支本岸習(xí)火聿!爭把18px—苑kcun.也KULNT2px14px-16pX圖4-1安卓UI版式設(shè)計(jì)字體.2IOSUI版式設(shè)計(jì)標(biāo)準(zhǔn)尺寸及分辨率：iPhone界面尺寸：320*480、640*960、640*1136iPad界面尺寸：1024*768、2048*1536單位：像素72dpi,在設(shè)計(jì)的時(shí)候并不是每個(gè)尺寸都要做一套，尺寸按自己的手機(jī)來設(shè)計(jì)，比較方便預(yù)覽效果，一般用640*960或者640*1136的尺寸來設(shè)計(jì)。Ps：作圖的時(shí)候確保都是用形狀工具（快捷鍵：U）畫的，這樣更方便后期的切圖或者尺寸變更。界面基本組成元素：iPhone的app界面一般由四個(gè)元素組成，分別是：狀態(tài)欄、導(dǎo)航欄、主菜單欄、內(nèi)容區(qū)域。這里取用640*960的尺寸設(shè)計(jì)，那我們就說說在這個(gè)尺寸下這些元素的尺寸。狀態(tài)欄：就是我們經(jīng)常說的信號(hào)、運(yùn)營商、電量等顯示手機(jī)狀態(tài)的區(qū)域，其高度為：40px;導(dǎo)航欄：顯示當(dāng)前界面的名稱，包含相應(yīng)的功能或者頁面間的跳轉(zhuǎn)按鈕，其高度為：88px;主菜單欄：類似于頁面的主菜單，提供整個(gè)應(yīng)用的分類內(nèi)容的快速跳轉(zhuǎn)，其高度為：98px;內(nèi)容區(qū)域：展示應(yīng)用提供的相應(yīng)內(nèi)容，整個(gè)應(yīng)用中布局變更最為頻繁，其高度為：734px;字體大小：Phone上的字體英文為：HelveticaNeue。至于中文Mac下用的是黑體，Win下則為華文黑體，如圖4-2所示。見岫M”津防電上用戶M為口小】望娥蹴言制產(chǎn)蒯加（用戶認(rèn)為展第透）IQS長存26Px30px32px-34px用文本23px30Px注牌24px24Px26px圖4-2IOSUI版式設(shè)計(jì)字體設(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)容需要通過色彩突出，對(duì)用戶做出視覺上的引導(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)，多通過各個(gè)渠道了解用戶特征，以設(shè)計(jì)出更易于被用戶接受的產(chǎn)品。然后再在專業(yè)的知識(shí)上結(jié)合用戶以及產(chǎn)品需求的要求，做出具有舒適性、科學(xué)性、藝術(shù)性、易于識(shí)別、美觀性的UI設(shè)計(jì)風(fēng)格。設(shè)計(jì)總結(jié)隨著Web2.0時(shí)代的到來,互聯(lián)網(wǎng)作為一個(gè)新興的行業(yè)（產(chǎn)業(yè)），已成為社會(huì)經(jīng)濟(jì)和科學(xué)技術(shù)發(fā)展最快的一個(gè)領(lǐng)域，更是近年來各領(lǐng)域的投資熱點(diǎn)。在接下來的十年，我們可以看到，互聯(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ù)、營銷到技術(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ì)版式也是一門新興知識(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][法]古斯塔夫?勒龐.烏合之眾：大眾心理研究加].中央編譯出版社，2013[2][美]KristoferLayon.產(chǎn)品經(jīng)理必知必會(huì)J].人民郵電出版社,2012[3][美]JonathanCaganCraigM.Vogal.創(chuàng)造突破性產(chǎn)品：從產(chǎn)品策略到項(xiàng)目定案的創(chuàng)新[M].機(jī)械工業(yè)出版社,2010[4]黃晟.基于用戶體驗(yàn)的APP設(shè)計(jì)研究①].陜西科技大學(xué),2010[5]龍瀅冰.淺談基于用戶體驗(yàn)的APP界面設(shè)計(jì)[D].北方工業(yè)大學(xué),2010[6]劉志?移動(dòng)學(xué)習(xí)的現(xiàn)狀及其評(píng)述J].上海師范大學(xué),2010[7]張睿，周峰，郭隆慶.移動(dòng)互聯(lián)網(wǎng)技術(shù)J].人民郵電出版社,2008致謝四年大學(xué)生活終于將以這篇畢業(yè)論文而畫上一個(gè)完美的句號(hào)。然而校園生活畫上了句號(hào)，但在人生的道路上才是剛剛開篇。非常感謝學(xué)校和老師們給予了我知識(shí)，讓即將真正踏上社會(huì)的我更加有自信地走在這條道路上。同時(shí)，我也要感謝我的父母，是他們給予了我生命，他們的無私奉獻(xiàn)和默默的支持讓我有了更多的動(dòng)力。當(dāng)然，大學(xué)四年里最不能忘記的是曾經(jīng)共同學(xué)習(xí)和生活過的同學(xué)們，他們讓我感受到了什么叫真誠，陪伴我一起度過這美好、快樂的四年校園時(shí)光。在本文完成之際，謹(jǐn)向我的指導(dǎo)老師王春梅老師致以最衷心的感謝，在設(shè)計(jì)中和論文寫作中都是在她的悉心指導(dǎo)和關(guān)懷下完成，從論文的選題、作品的設(shè)計(jì)，到論文