APPUI版式設(shè)計-畢業(yè)綜合實踐報告資料1

2014藝術(shù)設(shè)計專業(yè)本科2014藝術(shù)設(shè)計專業(yè)本科APPUI版式設(shè)計o-CWe-LfcdDwt^r1帛igo-CWe-LfcdDwt^r1帛igiRpciiftftrffntTuesdayTo-Do's0時Ijirthd社yqiFtGroceryListCerealMilk麗FiZ?BrwdPrctirt圖3-2少數(shù)關(guān)鍵簡化設(shè)計樣例3.2UI版式設(shè)計原則BenShneiderman通過對用戶界面的設(shè)計的研究，提出了一系列的原則，這些原則來自經(jīng)驗和啟發(fā)，適用于大多數(shù)交互系統(tǒng)。這些原則和所有的用戶界面設(shè)計都相關(guān)，嚴(yán)格意義上說，也適用于網(wǎng)站設(shè)計。.努力做到連貫.允許頻繁使用系統(tǒng)的用戶使用快捷方式.提供信息反饋.為關(guān)閉這一動作設(shè)計對話框.提供簡單的設(shè)計處理.允許簡單的撤銷操作.提供控制器。支持內(nèi)部控制點.降低短期記憶載荷UI版式設(shè)計標(biāo)準(zhǔn)AndroidUI版式設(shè)計標(biāo)準(zhǔn).尺寸及分辨率：Android界面尺寸：480*800、720*1280、1080*1920PX。Android比iPhone的寸尺多了很多套，建議取用720*1280這個尺寸，這個尺寸720*1280中顯示完美，在1080*1920中看起來比較清晰，切圖后的圖片文件大小也適中，應(yīng)用的內(nèi)存消耗也不會過高。.界面基本組成元素：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)的雙底欄的尷尬情景。.字體大?。篈ndroid上的字體為：Droidsansfallback，是谷歌自己的字體，與微軟雅黑很像如圖4-1所示。由注點口」/片砒鯉下窿(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è)計字體.2IOSUI版式設(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;字體大?。篜hone上的字體英文為：HelveticaNeue。至于中文Mac下用的是黑體，Win下則為華文黑體，如圖4-2所示。見岫M”津防電上用戶M為口小】望娥蹴言制產(chǎn)蒯加（用戶認(rèn)為展第透）IQS長存26Px30px32px-34px用文本23px30Px注牌24px24Px26px圖4-2IOSUI版式設(shè)計字體設(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ā)展。參考文獻(xiàn)[1][法]古斯塔夫?勒龐.烏合之眾：大眾心理研究加].中央編譯出版社，2013[2][美]KristoferLayon.產(chǎn)品經(jīng)理必知必會J].人民郵電出版社,2012[3][美]JonathanCaganCraigM.Vogal.創(chuàng)造突破性產(chǎn)品：從產(chǎn)品策略到項目定案的創(chuàng)新[M].機械工業(yè)出版社,2010[4]黃晟.基于用戶體驗的APP設(shè)計研究①].陜西科技大學(xué),2010[5]龍瀅冰.淺談基于用戶體驗的APP界面設(shè)計[D].北方工業(yè)大學(xué),2010[6]劉志?移動學(xué)習(xí)的現(xiàn)狀及其評述J].上海師范大學(xué),2010[7]張睿，周峰，郭隆慶.移動互聯(lián)網(wǎng)技術(shù)J].人民郵電出版社,2008致謝四年大學(xué)生活終于將以這篇畢業(yè)論文而畫上一個完美的句號。然而校園生活畫上了句號，但在人生的道路上才是剛剛開篇。非常感謝學(xué)校和老師們給予了我知識，讓即將真正踏上社會的我更加有自信地走在這條道路上。同時，我也要感謝我的父母，是他們給予了我生命，他們的無私奉獻(xiàn)和默默的支持讓我有了更多的動力。當(dāng)然，大學(xué)四年里最不能忘記的是曾經(jīng)共同學(xué)習(xí)和生活過的同學(xué)們，他們讓我感受到了什么叫真誠，陪伴我一起度過這美好、快樂的四年校園時光。在本文完成之際，謹(jǐn)向我的指導(dǎo)老師王春梅老師致以最衷心的感謝，在設(shè)計中和論文寫作中都是在她的悉心指導(dǎo)和關(guān)懷下完成，從論文的選題、作品的設(shè)計，到論文