教學課件3-1-APP設計基礎

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

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

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

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

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