教學(xué)課件3-1-APP設(shè)計(jì)基礎(chǔ)

APP設(shè)計(jì)基礎(chǔ)授課教師：肖文婷APP設(shè)計(jì)基礎(chǔ)授課教師：肖文婷APP即Application的簡(jiǎn)寫，因此被稱為應(yīng)用。由于iPhone智能手機(jī)的流行，現(xiàn)在的APP多指第三方智能手機(jī)的應(yīng)用程序。在移動(dòng)設(shè)備市場(chǎng)里，主流應(yīng)用商店有Apple的iTunesStore、Android的GoogleMarket、惠普的AppCatalog、黑莓的RIM。APP即Application的簡(jiǎn)寫，因此被稱為應(yīng)用。由于iiTunesStore與GooglePlayiTunesStore與GooglePlay手機(jī)UI設(shè)計(jì)的平臺(tái)主要是的APP客戶端。由于手機(jī)UI的獨(dú)特性，比如尺寸要求、控件和組件類型都需要UI設(shè)計(jì)師重新調(diào)整審美基礎(chǔ)。所以，UI設(shè)計(jì)師提前對(duì)手機(jī)界面的限制與要求做了解，然后合理創(chuàng)意，便可創(chuàng)造出具有獨(dú)特風(fēng)格的APP界面設(shè)計(jì)。手機(jī)APPＵＩ設(shè)計(jì)手機(jī)UI設(shè)計(jì)的平臺(tái)主要是的APP客戶端。由于手機(jī)UI的獨(dú)特性平版APPＵＩ設(shè)計(jì)平版APPＵＩ設(shè)計(jì)【常見智能手機(jī)的操作系統(tǒng)】1、SymbianOS（塞班）由諾基亞、索尼愛立信、摩托羅拉、西門子等幾家大型移動(dòng)通信設(shè)備商共同出資組建的合資公司，專門研發(fā)手機(jī)系統(tǒng)。塞班系統(tǒng)（SymbianOS）界面設(shè)計(jì)【常見智能手機(jī)的操作系統(tǒng)】塞班系統(tǒng)（SymbianOS）界2、WindowsMobile

由Microsoft用于PocketPC和Smartphone的軟件平臺(tái)。WindowsMobile將熟悉的Windows桌面拓展到了個(gè)人設(shè)備中。由于手機(jī)界面與電腦界面十分接近，讓用戶較容易上手，輕松實(shí)現(xiàn)信息資源共享。MicrosoftWindowsMobile界面設(shè)計(jì)2、WindowsMobileMicrosoftWind3、Linux目前采用Linux操作系統(tǒng)的手機(jī)越來(lái)越多，并沒有一個(gè)統(tǒng)一的平臺(tái)。由于具有自由、免費(fèi)、開放源代碼的優(yōu)勢(shì)，可以由用戶自主研究代碼。但是的機(jī)型來(lái)自官方的第三方軟件很少，需要刷機(jī)后才能安裝更多程序。Linux界面設(shè)計(jì)3、LinuxLinux界面設(shè)計(jì)4、PalmOS是Palm公司開發(fā)的專用于PDA上的一種操作系統(tǒng)。它占據(jù)90%在PDA上是市場(chǎng)份額。PalmOS系統(tǒng)處理速度快，且簡(jiǎn)單易用，但功能較為單一，用戶群少，支持中文的操作平臺(tái)開發(fā)慢。PalmOS界面設(shè)計(jì)4、PalmOSPalmOS界面設(shè)計(jì)5、GoogleAndroid谷歌與開放手機(jī)聯(lián)盟合作開發(fā)了Android，主要包括中國(guó)移動(dòng)、摩托羅拉、高通、宏達(dá)和T-Mobile在內(nèi)的30多家技術(shù)和無(wú)線應(yīng)用的領(lǐng)軍企業(yè)組成。GoogleAndroid界面設(shè)計(jì)5、GoogleAndroidGoogleAndroid6、BlackBerry（黑莓）是美國(guó)市場(chǎng)占有率第一的智能手機(jī)。這得益于它的制造商RIM（ResearchinMotion）較早地進(jìn)入移動(dòng)市場(chǎng)且開發(fā)出適應(yīng)美國(guó)市場(chǎng)的郵件系統(tǒng)。BlackBerry與桌面PC同步堪稱完美，是移動(dòng)電郵的巨無(wú)霸。BlackBerry界面設(shè)計(jì)6、BlackBerry（黑莓）BlackBerry界面設(shè)計(jì)7、IOS（蘋果）是美國(guó)蘋果公司開發(fā)的手機(jī)和平板電腦操作系統(tǒng)，它打造一種更加簡(jiǎn)單實(shí)用又妙趣橫生的用戶體驗(yàn)，正因?yàn)樗?wù)于體驗(yàn)的設(shè)計(jì)才成為當(dāng)下影響力很大的手機(jī)操作系統(tǒng)之一。IOS界面設(shè)計(jì)7、IOS（蘋果）IOS界面設(shè)計(jì)【APP的界面構(gòu)成】在APP界面設(shè)計(jì)中主要包含以下3個(gè)部分：

1、導(dǎo)航菜單欄導(dǎo)航菜單的設(shè)計(jì)是APP設(shè)計(jì)發(fā)展過程中很值得玩味的地方，由于移動(dòng)設(shè)備特別是智能手機(jī)的屏幕尺寸有限，UI設(shè)計(jì)師通常都會(huì)將盡可能多的空間留給主體內(nèi)容，盡量保持簡(jiǎn)約和易用性高。5種常見導(dǎo)航菜單設(shè)計(jì)方案，不僅實(shí)用而且美觀時(shí)尚。（1）列表式菜單列表式導(dǎo)航菜單設(shè)計(jì)遵循由上至下的閱讀習(xí)慣，用戶用起來(lái)不會(huì)很困難。它可以通過漂亮的配色、圖標(biāo)組合來(lái)設(shè)計(jì)，使菜單更美觀?！続PP的界面構(gòu)成】列表式導(dǎo)航菜單設(shè)計(jì)列表式導(dǎo)航菜單設(shè)計(jì)（2）矩陣、網(wǎng)格式菜單網(wǎng)格式菜單類似于堆砌色塊，優(yōu)點(diǎn)是簡(jiǎn)約而不簡(jiǎn)陋，導(dǎo)航清晰、明顯，并能提高效率。但設(shè)計(jì)時(shí)切記不分青紅皂白的去使用色彩，這可能會(huì)讓用戶不知所措和產(chǎn)生疲倦感。網(wǎng)格式菜單設(shè)計(jì)（2）矩陣、網(wǎng)格式菜單網(wǎng)格式菜單設(shè)計(jì)（3）底部菜單這是最基礎(chǔ)的一種形式，主要列出應(yīng)用程序重要的功能。底部導(dǎo)航菜單設(shè)計(jì)（3）底部菜單底部導(dǎo)航菜單設(shè)計(jì)（4）頂部菜單頂部菜單和底部意義差不多，把菜單放在頂部，可以遵循上至下的閱讀習(xí)慣，但不能單手操作。頂部導(dǎo)航菜單設(shè)計(jì)（4）頂部菜單頂部導(dǎo)航菜單設(shè)計(jì)（5）擴(kuò)展式菜單可以嘗試用這種方式來(lái)隱藏菜單，需要注意的是設(shè)計(jì)展開菜單按鈕大部設(shè)計(jì)在左或右上角這些顯示的位置。擴(kuò)展式導(dǎo)航菜單設(shè)計(jì)（5）擴(kuò)展式菜單擴(kuò)展式導(dǎo)航菜單設(shè)計(jì)2、屏幕欄屏幕欄主要由窗口、菜單、圖標(biāo)、按鈕、對(duì)話框等組成。窗口是指在屏幕上的一個(gè)矩形區(qū)域，它可以說(shuō)是最主要的界面對(duì)象。UI設(shè)計(jì)師通過它來(lái)規(guī)劃布局、組織數(shù)據(jù)命令，并以最佳的視覺效果呈現(xiàn)給用戶。手機(jī)屏幕欄設(shè)計(jì)2、屏幕欄手機(jī)屏幕欄設(shè)計(jì)窗口一般由標(biāo)題欄、菜單欄、滾動(dòng)條、狀態(tài)欄和控制欄組成。利用窗口技術(shù)，大文件就可以用滾動(dòng)方式在一個(gè)窗口中顯示，不需要用多幅屏幕來(lái)顯示一個(gè)文件，這樣大大地提高了人機(jī)交互作用的能力。菜單是一種直觀且操作簡(jiǎn)便的界面對(duì)象。它可以把用戶當(dāng)前要使用的操作命令都以項(xiàng)目列表的方式顯示在屏幕上供其按需求選擇。3、下方按鈕欄手機(jī)下方按鈕主要包括文字輸入、主頁(yè)和返回鍵等，是整個(gè)APP設(shè)計(jì)中重要的組成部分。窗口一般由標(biāo)題欄、菜單欄、滾動(dòng)條、狀態(tài)欄和控制欄組成。利用窗手機(jī)鍵盤按鈕欄手機(jī)鍵盤按鈕欄【APP設(shè)備的設(shè)計(jì)規(guī)范】1、APP的尺寸相關(guān)概念（1）英寸英寸是長(zhǎng)度單位，英文為inch，縮寫為in，一般1in等于2.54cm。通常我們指的5英寸屏幕的手機(jī)，10英寸的平板電腦都是指的屏幕對(duì)角的長(zhǎng)度。iphone手機(jī)型號(hào)的不同尺寸【APP設(shè)備的設(shè)計(jì)規(guī)范】iphone手機(jī)型號(hào)的不同尺寸（2）顯示分辨率顯示分辨率是移動(dòng)設(shè)備在顯示圖像時(shí)的分辨率，它是用點(diǎn)來(lái)衡量的。顯示分辨率的數(shù)值是指整個(gè)屏幕所有可視面積上水平像素和垂直像素的數(shù)量。800×600分辨率的手機(jī)（2）顯示分辨率800×600分辨率的手機(jī)（3）像素密度

像素密度，即每英寸屏幕所擁有的像素?cái)?shù)，像素密度越大，顯示畫面細(xì)節(jié)就越豐富，畫質(zhì)就越細(xì)膩。像素密度的大小由分辨率中X和Y軸的數(shù)字除以該軸的長(zhǎng)度。像素密度與屏幕大小的關(guān)系（3）像素密度像素密度與屏幕大小的關(guān)系2、設(shè)備中圖標(biāo)設(shè)計(jì)的尺寸規(guī)格

不同設(shè)備商的應(yīng)用圖標(biāo)像素的尺寸不同，以iOS應(yīng)用圖標(biāo)像素尺寸為例分析。（1）必需圖標(biāo)AppStore圖標(biāo)（1024×1024mm）；iPhone主屏幕圖標(biāo)（57×57mm、114×114mm）；iPad主屏幕圖標(biāo)（72×72mm、144×144mm）。（2）可選圖標(biāo)由于只適用iPad的應(yīng)用不能再iPhone上運(yùn)行，因此用戶不需要那么多圖標(biāo)。（3）所選圖標(biāo)APPStore圖標(biāo)（1024mm×1024mm）；iPad主屏幕圖標(biāo)（72×72mm、144×144mm）。（4）可選圖標(biāo)iPad（29×29mm、58×58mm）；ipads（59×50mm、100×100mm）。2、設(shè)備中圖標(biāo)設(shè)計(jì)的尺寸規(guī)格教學(xué)ppt課件3-1-APP設(shè)計(jì)基礎(chǔ)教學(xué)ppt課件3-1-APP設(shè)計(jì)基礎(chǔ)圖標(biāo)格式即制作圖標(biāo)的格式，是計(jì)算機(jī)儲(chǔ)存圖片的格式，常見的儲(chǔ)存格式有bmp、jpg、tiff、gif、pcx、tga、exif、fpx、svg、psd、cdr、pcd、ufo、eps、ai、raw等。其中最為常見的圖片格式有：JPEG；照片最基本格式，相同圖像的JPEG格式文件比PNG格式文件小，不支持背景透明。GIF：支持透明但會(huì)出現(xiàn)鋸齒。PNG：支持透明。iOS推薦的圖片格式，相同的圖像生成的PNG格式后文件比JPEG格式、GIF格式大。圖標(biāo)格式即制作圖標(biāo)的格式，是計(jì)算機(jī)儲(chǔ)存圖片的格式，常見的儲(chǔ)存3、APP界面設(shè)計(jì)的尺寸規(guī)范3、APP界面設(shè)計(jì)的尺寸規(guī)范Android系統(tǒng)界面設(shè)計(jì)規(guī)范。由于尺寸眾多，建議使用分辨率為720×1280的尺寸設(shè)計(jì)。這個(gè)尺寸720×1280中顯示完美，在1080×1920中看起來(lái)也比較清晰；切圖后的圖片文件大小也適中，應(yīng)用的內(nèi)存消耗也不會(huì)過高。狀態(tài)欄高度：50px導(dǎo)航欄高度：96px標(biāo)簽欄高度：96px內(nèi)容區(qū)域高度為：1038px（1280-50-96-96=1038）。Android系統(tǒng)界面設(shè)計(jì)規(guī)范。由于尺寸眾多，建議使用分辨率4、APP界面中的字體要求IOS系統(tǒng)：英文字體為HelveticaNeue，中文字體Mac系統(tǒng)下用的是黑體-簡(jiǎn)，Windows系統(tǒng)下則為華文黑體，所有字體要用雙數(shù)字號(hào)。IOS系統(tǒng)APP字體大小調(diào)查結(jié)果4、APP界面中的字體要求IOS系統(tǒng)：英文字體為HelveAndroid系統(tǒng)APP字體大小調(diào)查結(jié)果Android系統(tǒng)：Droidsansfallback，是谷歌自己的字體，與微軟雅黑很像。Android系統(tǒng)APP字體大小調(diào)查結(jié)果Android系統(tǒng)：5、APP界面中的顏色應(yīng)用規(guī)范（1）色彩對(duì)比對(duì)比是色彩關(guān)系中最為普遍的表現(xiàn)方式，是指人的視知覺得到兩種以上的色彩感覺相互作用的表現(xiàn)。移動(dòng)UI界面中有了色彩對(duì)比，可以產(chǎn)生視覺落差，才能制造出特殊的視覺傳達(dá)效果，有助于傳達(dá)信息。明暗對(duì)比5、APP界面中的顏色應(yīng)用規(guī)范色相對(duì)比色相對(duì)比面積對(duì)比面積對(duì)比純度對(duì)比純度對(duì)比（2）色彩的情感表達(dá)在設(shè)計(jì)APPUI之前，首先應(yīng)該確定該界面的設(shè)計(jì)目的、用途及受眾群，然后根據(jù)這些要求追求合理的顏色方案。不同的顏色顯示不同的情感色彩，為了讓設(shè)計(jì)的移動(dòng)UI界面更加符合APP所要表達(dá)的思想和感情。紅色——熱烈、緊張、刺激（2）色彩的情感表達(dá)紅色——熱烈、緊張、刺激黃色——冷漠、高貴、敏感黃色——冷漠、高貴、敏感藍(lán)色——冷靜、樸實(shí)、平靜藍(lán)色——冷靜、樸實(shí)、平靜綠色——和平、清新、安穩(wěn)綠色——和平、清新、安穩(wěn)紫色——神秘、沉悶、嫵媚紫色——神秘、沉悶、嫵媚白色——純潔、干凈白色——純潔、干凈（3）色彩級(jí)別移動(dòng)設(shè)備所指的屏幕顏色實(shí)質(zhì)上可以理解為色階的概念，即色彩級(jí)別，它表示移動(dòng)設(shè)備顯示屏亮度強(qiáng)弱的指數(shù)標(biāo)準(zhǔn)，也就是常說(shuō)的色彩指數(shù)。目前移動(dòng)設(shè)備的色階指數(shù)從低到高可分為單色、256色、4096色、65536色、26萬(wàn)色、1600萬(wàn)色。其中256色就是2的8次方得來(lái)的，即8位彩色，以此類推，4096色為2的12次方，65536色為2的16次方，即通常所說(shuō)的16位真彩色，26萬(wàn)色為2的18次方，也就是18位真彩?，F(xiàn)在市面上普遍見到的一般由3種色彩數(shù)，即65536色、26萬(wàn)色、1600萬(wàn)色，之余對(duì)屏幕顯示質(zhì)量要求比較高的用戶，65536色是較好的選擇。（3）色彩級(jí)別（4）不同系統(tǒng)的色彩應(yīng)用規(guī)范在iOS7系統(tǒng)中，內(nèi)置的APP使用了一系列純粹干凈的顏色，使它們無(wú)論單獨(dú)還是整體看起來(lái)都非常棒。蘋果iOS7系統(tǒng)的標(biāo)準(zhǔn)色彩（4）不同系統(tǒng)的色彩應(yīng)用規(guī)范蘋果iOS7系統(tǒng)的標(biāo)準(zhǔn)色彩藍(lán)色是Andriod系統(tǒng)的調(diào)色板中的標(biāo)準(zhǔn)顏色。除此之外，該系統(tǒng)還提供了其余4種顏色