移動APP界面設(shè)計基礎(chǔ)

UI界面設(shè)計重慶工程職業(yè)技術(shù)學(xué)院信息工程學(xué)院汪應(yīng)第1章移動APP界面設(shè)計根底第1章

移動APP界面設(shè)計基礎(chǔ)關(guān)于手機(jī)發(fā)明歷史1902年，一位叫作內(nèi)森·斯塔布菲爾德的美國人在肯塔基州默里的鄉(xiāng)下住宅內(nèi)制成了第一個無線電話裝置，這部可無線移動通訊的電話就是人類對“手機(jī)”技術(shù)最早的探索研究。1938年，美國貝爾實驗室為美國軍方制成了世界上第一部“移動電話”手機(jī)。1973年4月，美國工程技術(shù)員馬丁·庫帕發(fā)明了世界上第一部推向民用的手機(jī)，馬丁·庫帕從此也被稱為“手機(jī)之父”。第一代手機(jī)（1G）是指模擬的移動電話，第二代手機(jī)（2G）通常使用GSM或者CDMA這些十分成熟的標(biāo)準(zhǔn)，具有穩(wěn)定的通話質(zhì)量和合適的待機(jī)時間。3G是英文3rdGeneration的縮寫，指第三代移動通信技術(shù)，到最新的4G第1章

移動APP界面設(shè)計基礎(chǔ)智能手機(jī)概述智能手機(jī)具有獨立的操作系統(tǒng)，像個人電腦一樣支持用戶自行安裝軟件、游戲等第三方服務(wù)商提供的程序，并通過此類程序不斷對手機(jī)的功能進(jìn)行擴(kuò)充，同時可通過移動通訊網(wǎng)絡(luò)來實現(xiàn)無線網(wǎng)絡(luò)接入注：以前智能手機(jī)的定義是有操作系統(tǒng)和中央處理器等軟硬件的手持設(shè)備。目前這個說法是錯的（例如：大多非智能手機(jī)和智能手機(jī)一樣使用英國ARM公司架構(gòu)的CPU，非智能手機(jī)也有操作系統(tǒng)如芬蘭諾基亞S40、美國摩托羅拉P2K、英國索尼愛立信A200、中國臺灣MTK（三星、LG、夏普、中國品牌和山寨手機(jī)使用）第1章

移動APP界面設(shè)計基礎(chǔ)手機(jī)智能操作系統(tǒng)的種類第1章

移動APP界面設(shè)計基礎(chǔ)手機(jī)智能操作系統(tǒng)的發(fā)展史2001年6月，塞班公司發(fā)布了SymbianS60操作系統(tǒng)，作為S60的開山之作，他把智能的概念做了一個很大。塞班系統(tǒng)以其龐大的客戶群和終端占有率獨霸世界智能中低端市場1996年微軟發(fā)布了WindowsCE操作系統(tǒng)，從此微軟慢慢滲透操作領(lǐng)域。2007年6月，蘋果OS登上了歷史的舞臺，從此手指觸控的概念開始進(jìn)入我們的生活，iphoneOS的設(shè)計，將創(chuàng)新的移動、可觸摸寬屏、網(wǎng)頁瀏覽、游戲、地圖等這幾種功能完美地融為一體2023年9月當(dāng)蘋果和NOKIA兩個公司還沉溺于彼此的爭斗之中時，Andiord操作系統(tǒng)這個由Google研發(fā)團(tuán)隊設(shè)計的小機(jī)器人悄然出現(xiàn)在世人面前，良好的用戶體驗和開放性的設(shè)計，讓Android很快地打入了智能市場。第1章

移動APP界面設(shè)計基礎(chǔ)前幾年5大主流手機(jī)品牌操作系統(tǒng)品牌主要支持操作系統(tǒng)國家/地區(qū)主要機(jī)型諾基亞SymbianS60歐盟N97，E72，C5，X6，N95，6700S

黑莓BlackBerryOS加拿大9650，9630，870

摩托羅拉Android，Linux+java美國ME600，CILQ，Droid，A1200，V8

蘋果公司iPhoneOS美國iPhone，iPhone3GS，iPhone4

HTCWindowsMobile，Android臺灣HTCHero，HTCHD2等

第1章

移動APP界面設(shè)計基礎(chǔ)最近幾年主流手機(jī)品牌操作系統(tǒng)第1章

移動APP界面設(shè)計基礎(chǔ)各種智能操作系統(tǒng)優(yōu)缺點SymbianOS〔塞班〕支持廠商：芬蘭諾基亞〔英國索尼愛立信、韓國三星已宣布退出塞班陣營〕SymbianOS(中文譯音“塞班系統(tǒng)〞)由諾基亞、索尼愛立信、摩托羅拉、西門子等幾家大型移動通訊設(shè)備商共同出資組建的一個合資公司，專門研發(fā)操作系統(tǒng)。優(yōu)點：過去Symbian系統(tǒng)一直占據(jù)智能系統(tǒng)的市場霸主地位，系統(tǒng)能力和易用性等各方面很強(qiáng)！缺點：一般配置的機(jī)型反映較慢，對主流的媒體格式的支持性較差，不同版本的軟件兼容性不好。第1章

移動APP界面設(shè)計基礎(chǔ)各種智能操作系統(tǒng)優(yōu)缺點WindowsMobile〔微軟〕支持廠商：中國臺灣HTC、韓國三星電子、韓國LG、英國索尼愛立信、阿聯(lián)酋i-mate，目前各大山寨廠商也同樣生產(chǎn)著大量WM產(chǎn)品WindowsMobile是Microsoft用于PocketPC和Smartphone的軟件平臺。WindowsMobile將熟悉的Windows桌面擴(kuò)展到了個人設(shè)備中。優(yōu)點：界面和操作都和電腦上的Windows十分接近，對于機(jī)友來說十分熟悉又上手；各種保存在電腦或里的信息、資料可以輕松實現(xiàn)共享；有大量的應(yīng)用軟件可供用戶選擇。缺點：占用系統(tǒng)資源高、容易系統(tǒng)崩潰第1章

移動APP界面設(shè)計基礎(chǔ)各種智能操作系統(tǒng)優(yōu)缺點MacOS〔蘋果iphone的系統(tǒng)〕支持廠商：蘋果公司優(yōu)點：全觸摸設(shè)計，真的是一次革命，娛樂性能強(qiáng)，第三方軟件多缺點：系統(tǒng)封閉第1章

移動APP界面設(shè)計基礎(chǔ)各種智能操作系統(tǒng)優(yōu)缺點Android〔Google公司〕支持廠商：美國摩托羅拉、中國臺灣HTC、韓國三星、韓國LG、英國索尼愛立信，聯(lián)想，中興等Android是Google開發(fā)的基于Linux平臺的開源操作系統(tǒng)。它包括操作系統(tǒng)、用戶界面和應(yīng)用程序——移動工作所需的全部軟件，而且不存在任何以往阻礙移動產(chǎn)業(yè)創(chuàng)新的專有權(quán)障礙。谷歌與開放聯(lián)盟合作開發(fā)了Android，這個聯(lián)盟由包括中國移動、摩托羅拉、高通、宏達(dá)和T-Mobile在內(nèi)的30多家技術(shù)和無線應(yīng)用的領(lǐng)軍企業(yè)組成。優(yōu)點：具備觸摸屏、高級圖形顯示和上網(wǎng)功能，界面強(qiáng)大，可以說是一種融入全部Web應(yīng)用的單一平臺第1章

移動APP界面設(shè)計基礎(chǔ)操作系統(tǒng)對比第1章

移動APP界面設(shè)計基礎(chǔ)關(guān)于手機(jī)手機(jī)分辨率手機(jī)屏幕的分辨率對于手機(jī)UI設(shè)計而言是一個極其重要的參數(shù)，這關(guān)系到一套UI界面在不同分辨率屏幕上的顯示效果。16∶9、720p、VGA和QVGA等術(shù)語就是指手機(jī)的分辨率，一塊方形的屏幕橫向有多少個點，豎向有多少個點，相乘之后的數(shù)值就是這塊屏幕的像素。但是為了方便表示屏幕的大小，通常用橫向像素與豎向像素相乘的方式來表示。市場上較為常見的手機(jī)屏幕分辨率主要包括以下6種分辨率：QVGA、HVGA、WVGA、QCIF、SVGA、WXGA。第1章

移動APP界面設(shè)計基礎(chǔ)關(guān)于手機(jī)屏幕顏色這里所指的屏幕顏色實質(zhì)上是色階的概念。色階是表示手機(jī)顯示屏亮度強(qiáng)弱的指數(shù)標(biāo)準(zhǔn)，也就是通常所說的色彩指數(shù)。目前手機(jī)的色階指數(shù)從低到高可分為：最低單色，其次是256色、4096色、65536色、26萬色、1600萬色。256色=28即8位彩色，以此類推，4096色=212；65536色=216，即通常所說的16位真彩色；26萬色=218，也就是18位真彩。第1章

移動APP界面設(shè)計基礎(chǔ)電信運營商電信運營商是指提供固定電話、移動電話和互聯(lián)網(wǎng)接入的通信服務(wù)公司。中國四大電信運營商分別是中國電信，中國移動，中國聯(lián)通，中國廣電。并且中國移動通信集團(tuán)公司是全球第一大的移動運營商。2016年3月7日，中國廣播電視網(wǎng)絡(luò)有限公司向工信部提交了基礎(chǔ)電信業(yè)務(wù)經(jīng)營許可申請材料，申請在全國范圍內(nèi)經(jīng)營互聯(lián)網(wǎng)國內(nèi)數(shù)據(jù)傳送業(yè)務(wù)、國內(nèi)通信設(shè)施服務(wù)業(yè)務(wù)。2016年5月5日[1]，工信部向中國廣播電視網(wǎng)絡(luò)有限公司頒發(fā)《基礎(chǔ)電信業(yè)務(wù)經(jīng)營許可證》。中國廣電公司將成為真正意義上的“第四大基礎(chǔ)電信運營商”第1章

移動APP界面設(shè)計基礎(chǔ)UI設(shè)計什么是UI設(shè)計UI的本意是用戶界面，是英文User和Interface的縮寫。從字面上看是用戶與界面兩個部分組成，但實際上還包括用戶與界面之間的交互關(guān)系。UI設(shè)計是為了滿足專業(yè)化、標(biāo)準(zhǔn)化需求而對軟件界面進(jìn)行美化、優(yōu)化和規(guī)范化的設(shè)計分支，具體包括軟件啟動界面設(shè)計、軟件框架設(shè)計、按鈕設(shè)計、面板設(shè)計、菜單設(shè)計、標(biāo)簽設(shè)計、圖標(biāo)設(shè)計、滾動條即狀態(tài)欄設(shè)計、安裝過程設(shè)計、包裝及商品化等。第1章

移動APP界面設(shè)計基礎(chǔ)UI設(shè)計主要性能UI設(shè)計需要保證作品的設(shè)計目標(biāo)一致、元素外觀一致、交互行為一致、可理解、可達(dá)到和可控制。相關(guān)控件UI控件的三要素為繪制、數(shù)據(jù)和控制。首先，展現(xiàn)在人們視線里的是可見的，那就是繪制，每一個控件都有自己的樣子，就跟人的相貌一樣。然后是數(shù)據(jù)，控件也需要自己的數(shù)據(jù)，如果沒有數(shù)據(jù)這些控件的使用將會變得沒有意義。最后一個就是控制了，最典型的就是utton了，這是用戶與界面交互的關(guān)鍵。第1章

移動APP界面設(shè)計基礎(chǔ)UI設(shè)計手機(jī)UI設(shè)計手機(jī)UI設(shè)計是手機(jī)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計。置身于手機(jī)操作系統(tǒng)中的人機(jī)交互窗口，設(shè)計界面必須基于手機(jī)的物理特性和軟件的應(yīng)用特性進(jìn)行合理設(shè)計，界面設(shè)計師首先應(yīng)對手機(jī)的系統(tǒng)性能有所了解。手機(jī)UI設(shè)計一直被業(yè)界稱為產(chǎn)品的“臉面”，好的UI設(shè)計不僅使軟件變得有個性、有品位，而且使軟件的操作變得舒適、簡單、自由，充分體現(xiàn)軟件的定位和特點。FaceUI的設(shè)計師根據(jù)多年設(shè)計第三方應(yīng)用的經(jīng)驗，提出了6個手機(jī)UI設(shè)計的技巧，分別為一目了然、輸入便捷、呈用戶所需、屏幕方向可旋轉(zhuǎn)、應(yīng)用個性化和精心細(xì)節(jié)，希望使新手機(jī)應(yīng)用在發(fā)布前提升質(zhì)量，最大化發(fā)掘該應(yīng)用的潛力，從而最小化用戶差評和低下載量這種不良結(jié)果。第1章

移動APP界面設(shè)計基礎(chǔ)UI設(shè)計手機(jī)UI設(shè)計特點與平面UI設(shè)計相比，手機(jī)UI設(shè)計有著更多的局限性，最主要的限制來自于手機(jī)屏幕的尺寸，手機(jī)UI設(shè)計有4個特征。(1)手機(jī)界面交互過程不宜設(shè)計得過于復(fù)雜，交互步驟不宜太多。這可以提高操作的便利性，進(jìn)而提高操作效率。(2)手機(jī)的顯示屏相對較小，能夠支持的色彩也比較有限，可能無法正常顯示顏色過渡過于豐富的圖像效果。(3)不同系統(tǒng)的手機(jī)支持的圖像格式、音頻格式和動畫格式不一樣。(4)不同型號的手機(jī)屏幕比例不一致，所以設(shè)計時還要考慮圖片的自適應(yīng)問題和界面元素圖片的布局問題。第1章

移動APP界面設(shè)計基礎(chǔ)UI設(shè)計手機(jī)UI與平面UI的區(qū)別手機(jī)UI的平臺主要是手機(jī)的APP客戶端。而平面UI的范圍則非常廣泛，包括絕大部分UI的領(lǐng)域。手機(jī)UI的獨特性，例如尺寸要求、控件和組件類型，使平面設(shè)計師需要重新調(diào)整審美。手機(jī)的界面設(shè)計完全可以做到完美，但需要無數(shù)設(shè)計師的共同創(chuàng)新和努力。很多設(shè)計師存在的問題是不能夠合理布局，不能夠合理地轉(zhuǎn)化網(wǎng)站設(shè)計的構(gòu)架理念到手機(jī)界面的設(shè)計上，常常會覺得手機(jī)界面限制非常多，覺得創(chuàng)意性發(fā)揮空間太小，表達(dá)的方式也非常有限，甚至讓設(shè)計師覺得很死板。但真實的情況并不是這樣，通過了解手機(jī)的空間，應(yīng)用合理的創(chuàng)意，同樣可以完成優(yōu)秀的UI設(shè)計。需要注意的是，手機(jī)UI設(shè)計受到手機(jī)系統(tǒng)的限制。因此，在設(shè)計手機(jī)UI時，要先確認(rèn)適用的系統(tǒng)。第1章

移動APP界面設(shè)計基礎(chǔ)設(shè)計中的色彩搭配色彩的意向色彩有各種各樣的心理效果和情感效果，會引起受眾各種各樣的感受和遐想。例如，看到綠色，會聯(lián)想到樹葉和草坪的形象；看見藍(lán)色，會想到大海和藍(lán)天的形象。當(dāng)看見某種色彩或者聽到某種色彩的名稱時，人們心里往往會自動描繪出這種色彩帶來的感受。手機(jī)APPUI設(shè)計的用色規(guī)范色輪圖是研究顏色相加混合的一種實驗工具。手機(jī)APP標(biāo)準(zhǔn)色分為重要、一般、弱3種使用規(guī)范，主要內(nèi)容：重要標(biāo)準(zhǔn)色、一般標(biāo)準(zhǔn)色、較弱標(biāo)準(zhǔn)色。第1章

移動APP界面設(shè)計基礎(chǔ)設(shè)計中的色彩搭配UI調(diào)色板調(diào)色板以一些基礎(chǔ)色為基準(zhǔn)，通過填充光譜來為Android、Web和iOS環(huán)境提供一套完整可用的顏色。在進(jìn)行設(shè)計時需要限制顏色的數(shù)量，在眾多基礎(chǔ)色中選出3個色度以及1個強(qiáng)調(diào)色。強(qiáng)調(diào)色用于后背，可有可無。APP界面設(shè)計中色彩運用原理與對比原則手機(jī)APP界面要給人簡潔整齊、條理清晰之感，依靠的就是界面元素的排版和間距設(shè)計，還有色彩的合理、舒適度搭配。其色彩運用原理與需要遵循的對比原則如下。設(shè)計色調(diào)的統(tǒng)一、標(biāo)準(zhǔn)界面的采用、有重點色、考慮色盲色弱用戶、顏色方案的測試、遵循對比原則、色彩類別的控制。第1章

移動APP界面設(shè)計基礎(chǔ)設(shè)計中的色彩搭配色彩的搭配方法當(dāng)不同的色彩搭配在一起時，受色相、彩度、明度的影響，會使色彩的效果產(chǎn)生變化。兩種或者多種淺色搭配在一起不會產(chǎn)生對比效果，同理多種深色搭配在一起也不吸引人。但是，當(dāng)一種淺色和一種深色混合在一起時，淺色會顯得更淺，深色會顯得更深。第1章

移動APP界面設(shè)計基礎(chǔ)圖標(biāo)的格式JPEG格式JPEG格式是目前網(wǎng)絡(luò)上最流行的也是最常見的圖像格式，是可以把文件壓縮到最小的格式，而且還是一種很靈活的格式，具有調(diào)節(jié)圖像質(zhì)量的功能，允許用不同的壓縮比例對文件進(jìn)行壓縮，支持多種壓縮級別。JPEG格式壓縮的主要是高頻信息，壓縮比率通常在10∶1到40∶1之間。壓縮比越大，品質(zhì)就越低；反之，壓縮比越小，品質(zhì)就越好。它對色彩信息保留較好，適用于互聯(lián)網(wǎng)，可以減少圖像的傳輸時間，可以支持24位真彩色，也普遍應(yīng)用于需要連續(xù)色調(diào)的圖像。下面是JPEG格式的優(yōu)缺點。第1章

移動APP界面設(shè)計基礎(chǔ)圖標(biāo)的格式PNG格式PNG全稱為便攜式網(wǎng)絡(luò)圖形，是被網(wǎng)絡(luò)接受的最新圖像文件格式。PNG能夠提供長度比GIF小30%的無損壓縮圖像文件，它同時提供24位和48位真彩色圖像支持以及其他諸多技術(shù)性支持。由于PNG非常新，所以并不是所有的程序都可以用它來存儲圖像文件，但Photoshop可以處理PNG圖像文件，也可以用PNG圖像文件格式存儲。下面是PNG格式的優(yōu)缺點。優(yōu)點：支持高級別無損耗壓縮、支持Alpha通道透明度、支持伽瑪校、Web瀏覽器支持正。缺點：較老的程序或瀏覽器不支持、PNG提供的壓縮量較小、對多圖像文件或動畫文件不提供支持、支持錯。

第1章

移動APP界面設(shè)計基礎(chǔ)圖標(biāo)的格式ICNO格式icon是一種圖標(biāo)格式，用于系統(tǒng)圖標(biāo)、軟件圖標(biāo)等，這種圖標(biāo)擴(kuò)展名為*.icon、*.ico。常見的軟件或windows桌面上的那些圖標(biāo)一般都是ICON格式的。icon元素包括兩個可選的子元素：small-icon子元素和large-icon子元素。文件名是Web應(yīng)用歸檔文件(WAR)的根的相對路徑。部署描述符并沒有使用icon元素。但是，如果使用XML工具編輯部署描述符，XML編輯器可以使用icon元素。圖標(biāo)是特殊類型的小位圖，最大尺寸為32×32像素。[1]

第1章

移動APP界面設(shè)計基礎(chǔ)圖標(biāo)的格式GIF格式圖形交換格式簡稱GIF，是CompuServe公司在1987年開發(fā)的圖像文件格式。GIF文件的數(shù)據(jù)是一種基于LZW算法的連續(xù)色調(diào)的無損壓縮格式，其壓縮率一般在50%左右。它不屬于任何應(yīng)用程序，幾乎所有相關(guān)軟件都支持，公共領(lǐng)域有大量的軟件在使用GIF圖像文件。其他常用格式圖片格式作為計算機(jī)儲存圖片的方式，除了上文講到的3種最常用格式，還有很多其他格式，如BMP、TIFF、PSD和AI等。第1章

移動APP界面設(shè)計基礎(chǔ)手機(jī)界面設(shè)計的尺寸標(biāo)準(zhǔn)分辨率分辨率就是屏幕圖像的精密度，是指顯示器所能顯示的像素多少，泛指量測或顯示系統(tǒng)對細(xì)節(jié)的分辨能力。分辨率越高，代表圖像質(zhì)量越好，越能表現(xiàn)出更多的細(xì)節(jié);但相對的，因為記錄的信息越多，文件也就會越大。例如，分辨率為240×320像素的手機(jī)屏幕，橫向每行有240個像素點，縱向每列有320個像素點，那么該手機(jī)屏一共有320×240=76800個像素點。在同樣大的物理面積內(nèi)，像素點越多，顯示的圖像越清晰。以三星S5和三星S6來說，它們的屏幕尺寸都是5.1，但是三星S5的分辨率是1920×1080=2073600個像素點，三星S6的分辨率是2560×1400=3584000個像素點，因此三星S6顯示的圖像比三星S5要高。第1章

移動APP界面設(shè)計基礎(chǔ)手機(jī)界面設(shè)計的尺寸標(biāo)準(zhǔn)英寸英寸是長度單位，1英寸=2.539999918厘米。手機(jī)的屏幕尺寸統(tǒng)一使用英寸來計量，其指的是屏幕對角線的長度，數(shù)值越高，屏幕越大。市場上包括手機(jī)在內(nèi)的很多電子產(chǎn)品的屏幕尺寸均使用英寸為計算單位，這是因為電子產(chǎn)品屏幕尺寸計算時使用的是對角線長度，而業(yè)界一般情況下也是將對角線的長度默認(rèn)為屏幕尺寸的規(guī)格。網(wǎng)點密度網(wǎng)點密度通常被叫作DPI，一般是指每英寸的像素，類似于密度，即每英寸圖片上的像素點數(shù)量，用來表示圖片的清晰度。DPI越高，顯示的畫面質(zhì)量就越精細(xì)。第1章

移動APP界面設(shè)計基礎(chǔ)手機(jī)界面設(shè)計的尺寸標(biāo)準(zhǔn)屏幕密度屏幕密度又叫作PPI，是圖像分辨率所使用的單位，意思是在圖像中每英寸所表達(dá)的像素數(shù)目。從手機(jī)UI設(shè)計的角度來說，圖像的分辨率越高，所打印出來的圖像也就越細(xì)致與精密。實踐證明，PPI低于240，人的視覺可以察覺有明顯的顆粒感；PPI高于300則無法察覺。理論上講超過300PPI才沒有顆粒感。屏幕的清晰程度其實是由分辨率和尺寸大小共同決定的，用PPI指數(shù)衡量屏幕清晰程度更加準(zhǔn)確。第1章

移動APP界面設(shè)計基礎(chǔ)常用軟件工具PhotoshopAdobePhotoshop簡稱PS，是美國Adobe公司旗下最為出名的圖像處理軟件系列之一，是集圖像掃描、編輯修改、圖像制作、廣告創(chuàng)意、圖像輸入與輸出于一體的圖形圖像處理軟件。Photoshop的