UI界面設計重慶工程職業技術學院信息工程學院汪應第1章移動APP界面設計根底第1章

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

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

移動APP界面設計基礎手機智能操作系統的種類第1章

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

移動APP界面設計基礎前幾年5大主流手機品牌操作系統品牌主要支持操作系統國家/地區主要機型諾基亞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界面設計基礎最近幾年主流手機品牌操作系統第1章

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

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

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

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

移動APP界面設計基礎操作系統對比第1章

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

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

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

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

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

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

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

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

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

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

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

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

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

第1章

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

第1章

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

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

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

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

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