《移動終端UI設計》教學課件01移動終端UI設計概述

模塊1移動終端UI設計概述什么是UI設計什么是移動終端什么是APP設計移動設備屏幕01020304CONTENT智能手機操作系統(tǒng)規(guī)范05學習目標1、了解UI設計的概念、UI設計分類及移動終端UI設計的理念。2、熟悉移動終端應用領域，掌握各種應用類型APP的應用環(huán)境。3、掌握APP界面基本構成，了解構成元素及UI設計流程與規(guī)范。PART01什么是UI設計1.1.1UI設計的概念UI設計UI（userinterface）是用戶界面的簡稱，從字面上看是由用戶與界面兩個部分組成，但實際上還包括用戶與界面之間的交互關系。UI設計是為了滿足專業(yè)化、標準化需求而對軟件界面進行美化、優(yōu)化和規(guī)范的設計分支，分為實體UI和虛擬UI。提示：互聯(lián)網(wǎng)行業(yè)所說的UI設計是虛擬UI，一般是指對軟件的人機交互、操作邏輯、界面美觀的整體設計。1.1.1UI設計的概念UI的實質內容包括手機系統(tǒng)界面、軟件界面、網(wǎng)站的界面、KTV點歌屏界面、游戲操作界面、智能電視界面、汽車導航界面、VR虛擬現(xiàn)實等，這些領域都需要UI設計師。而且隨著用戶體驗越來越重要，手機系統(tǒng)界面、智能電視界面、軟件界面這些常見的界面不再像以前那樣古板，它既需要UI設計師設計出美觀的視覺效果，又要設計好交互體驗，以便用戶使用得更加舒適和方便。如圖1-1所示為友好的UI界面效果圖及界面圖標效果圖。1.1.2UI設計的分類PC端UI設計移動終端UI設計移動終端UI設計的界面也具有各自的特點，如圖1-5~圖1-7所示其他終端UI設計010203PC端UI設計主要指用戶計算機界面設計，其中包括系統(tǒng)界面設計、軟件界面設計和網(wǎng)站界面設計，如圖1-2~圖1-4所示。除了上面所描述的終端設備需要用到UI界面設計外，目前市場上還包含許多其他終端設備，同樣需要用到UI界面設計，如車載系統(tǒng)、ATM等，如圖1-8和圖1-9所示。1.1.2UI設計的分類1.1.2UI設計的分類1.1.2UI設計的分類1.1.2UI設計的分類1.1.2UI設計的分類1.1.2UI設計的分類1.1.3UI設計師技能要求視覺設計交互設計體驗設計312視覺設計是針對眼睛功能的主觀形式的表現(xiàn)手段和結果。交互設計是一種目標導向設計，所有的工作內容都是圍繞用戶行為去設計的。體驗設計是將消費者的參與融入設計中，使消費者感受到美好的體驗過程，它是基于人機交互、圖形化設計、界面設計和其他相關理論進行的設計。PART02什么是移動終端1.2.1移動終端的概念移動終端或稱移動通信終端，原指可以在移動中使用的計算機設備，近年來普遍認定為移動智能終端。移動智能終端擁有接入互聯(lián)網(wǎng)的能力，通常搭載各種操作系統(tǒng)，可根據(jù)用戶需求定制化各種功能。提示：生活中常見的智能終端包括移動智能終端、車載智能終端、智能電視、可穿戴設備等。1.2.1移動終端的概念移動終端特別是移動智能終端，具有如下特性。123451移動性和實時性。2通話功能、上網(wǎng)功能和多媒體功能。3硬件與軟件的可靠性。4基于操作系統(tǒng)的多任務性。5應用程序安裝使用的廣泛性與易用性。1.2.2智能手機智能手機（smartphone）是“像個人計算機一樣，具有獨立的操作系統(tǒng)，可以由用戶自行安裝第三方服務商提供的程序，通過此類程序來不斷對手機的功能進行擴充，并可以通過移動通信網(wǎng)絡來實現(xiàn)無線網(wǎng)絡接入的這樣一類手機的總稱”。提示：手機已從功能性手機發(fā)展到以Android、iOS系統(tǒng)為代表的智能手機時代，是可以在較廣范圍內使用的便攜式移動智能終端，已發(fā)展至4G、5G時代。1.2.2智能手機智能手機的特點如下。020301060504具有開放性操作系統(tǒng)人性化無線接入互聯(lián)網(wǎng)運行速度快功能強大具有PDA功能1.2.3PDA智能終端PDA智能終端又被稱為掌上電腦，可以幫助我們在移動中進行工作、學習、娛樂等。按使用來分類，分為工業(yè)級PDA和消費品PDA。工業(yè)級PDA主要應用在工業(yè)領域，常見的有條碼掃描器、RFID讀寫器、POS機等。工業(yè)級PDA內置高性能激光掃描引擎、高速CPU、WinCE5.0/Android操作系統(tǒng)，具備超級防水、防摔及抗壓能力。如圖1-10所示。提示：PDA終端被廣泛用于鞋服、快速消費品、速遞、零售連鎖、倉儲、移動醫(yī)療等多個行業(yè)的數(shù)據(jù)采集，支持GPRS/4G/WiFi等無線網(wǎng)絡通信。1.2.3PDA智能終端1.2.4平板電腦平板電腦（tabletpersonalcomputer，簡稱TabletPC、FlatPC、Tablet、Slates）是一種小型、方便攜帶的個人計算機，以觸摸屏作為基本的輸入設備。它擁有的觸摸屏（也稱為數(shù)位板技術）允許用戶通過觸控筆或數(shù)字筆來進行作業(yè)而不需要傳統(tǒng)的鍵盤或鼠標。平板電腦的概念由比爾?蓋茨提出，支持Intel、AMD和ARM的芯片架構，從平板電腦的產品來看，它就是一款無須翻蓋、沒有鍵盤、小到可以放入女士手袋，但功能完整的PC，如圖1-11所示。提示：用戶可以利用內建的手寫識別、屏幕上的軟鍵盤、語音識別或一個真正的鍵盤來進行操作。1.2.5車載智能終端車載智能終端具備GPS定位、車輛導航、采集和診斷故障信息等功能，在新一代汽車行業(yè)中得到了大量應用，能對車輛進行現(xiàn)代化管理，車載智能終端將在智能交通中發(fā)揮更大的作用，如圖1-12所示。1.2.6可穿戴設備越來越多的科技公司開始大力開發(fā)智能眼鏡、智能手表、智能手環(huán)、智能戒指等可穿戴設備產品。智能終端開始與時尚掛鉤，人們的需求不再局限于可攜帶，更追求可穿戴，人們的手表、戒指、眼鏡都有可能成為智能終端。PART03什么是APP設計1.3.1APP的概念APP即application（應用程序）的縮寫，指運行在智能手機、平板電腦等移動終端設備上的第三方應用程序。APP設計就是為這些移動終端設計第三方應用程序，包括程序設計和界面設計。APPUI設計主要針對的是APP界面、操作邏輯、人機互動的設計，屬于APP視覺設計，主要是為了讓APP的界面更好看；而APP交互設計是指設計師對APP本身及APP使用者之間的互動機制而進行的分析、預測、定義、規(guī)劃、描述甚至是探索的過程。1.3.2APP的分類12345購物類購物類APP又可分為飲食類、服飾類、家用電器類、旅行出游類、娛樂休閑類等生活服務類生活服務類APP有很多，而且類型廣泛新聞資訊類2019年新聞資訊類APP排行榜如圖1-14所示。社交類2019年社交類APP排行榜如圖1-13所示。短視頻類短視頻類APP在短短兩年的時間內呈現(xiàn)井噴式的增長，據(jù)相關統(tǒng)計，活躍在短視頻類平臺的用戶已然接近6億大關。1.3.2APP的分類1.3.2APP的分類1.3.3APP界面的構成元素1234567按鈕進度條列表框圖標開關搜索欄標簽欄1.3.4APP的設計流程5.服務端開發(fā)6.客戶端開發(fā)7.APP程序測試8.發(fā)布運營9.APP的維護及更新4.數(shù)據(jù)庫搭建3.UI視覺設計2.產品原型設計（見圖1-15）1.用戶需求分析1.3.4APP的設計流程PART04移動設備屏幕1.4.1英寸顯示設備的規(guī)格通常用英寸來表示，如17英寸筆記本電腦顯示器、60英寸液晶電視。手機屏幕也采用了這個計量單位（見圖1-16）。提示：英寸（in，1in≈2.54cm）是一種長度單位，指的是屏幕對角線的長度。1.4.2像素像素（pixel）又稱pictureelement。數(shù)字圖像是由按一定間隔排列的亮度不同的像點構成的，形成像點的單位稱為像素，也就是說，組成圖像的最小單位是像素（px），是畫面中最小的點（單位色塊）。像素的大小是沒有固定長度值的，不同設備上1個單位像素色塊的大小是不一樣的。從計算機技術的角度來解釋，像素是硬件和軟件所能控制的最小單位。提示：像素指顯示屏的畫面上表示出來的最小單位，而不是圖畫上的最小單位。1.4.3分辨率1.屏幕分辨率屏幕分辨率是屏幕每行的像素點數(shù)乘以每列的像素點數(shù)，每個屏幕都有自己的分辨率。2.圖像分辨率圖像分辨率是指每英寸圖像內的像素點數(shù)。提示：圖像分辨率單位稱為像素每英寸。1.4.4網(wǎng)點密度與像素密度在紙質媒介時代，我們常用網(wǎng)點密度（dotperinch，DPI）來描述印刷品的打印精度。DPI常用于設備參數(shù)的描述（如掃描儀、打印機）。例如，設置了打印分辨率為96DPI，那么機器在打印過程中，每英寸（inch）的長度打印了96個點（dot），打印機在每英寸內打印的墨點越多，圖片看起來越精細。這種概念也帶入PC時代的Windows操作系統(tǒng)，Windows操作系統(tǒng)的默認DPI為96。1.4.4網(wǎng)點密度與像素密度像素密度（pixelperinch，PPI）常用于屏幕顯示的描述，用來表示每英寸像素點數(shù)量。在Photoshop中設定某圖的分辨率為72PPI，那么，對應到現(xiàn)實尺度中，屏幕將以每英寸72個像素的方式來顯示圖片。PPI數(shù)值高的顯示屏幕，其畫面看起來也更加細膩。DPI的概念應用在手機屏幕上表示手機屏幕上每英寸可以顯示的像素點的數(shù)量。這時用PPI來描述這個屏幕。屏幕生產工藝越高，每平方英寸能容納的像素就越多。1.4.5視網(wǎng)膜屏幕這個術語最初用在iPhone4手機上，它將960×640的像素壓縮到一個3.5英寸的顯示屏內，也就是說，該屏幕的像素密度達到326像素/英寸。視網(wǎng)膜屏幕是分辨率超過人眼識別極限的高分辨率屏幕，它是蘋果公司發(fā)明的一個營銷術語，并在部分移動產品上使用。PART05智能手機操作系統(tǒng)規(guī)范1.5.1iOS系統(tǒng)1.文字規(guī)范在iOS8系統(tǒng)中，英文和數(shù)字字體為Helvetica，它是比較典型的扁平風格字體，中文字體為HeitiSC（黑體-簡）。在iOS9系統(tǒng)中，英文字體為HelveticaNeue，中文字體為冬青黑。在iOS10系統(tǒng)中，英文字體為SanFrancisco，中文字體為蘋方。文字搭配一般用4和6的梯度搭配。例如，一般文字30像素標題搭配26像素詳情，帶頭列表30像素標題搭配22像素輔助信息。1.5.1iOS系統(tǒng)詳情頁標題文字與詳情文字間距為8的倍數(shù)。例如，24像素、32像素、40像素等。設定行間距與字號比例為1.5倍。對齊原則為段落文字采用“兩端對齊左對齊”，避頭尾為“嚴格”，首行嚴禁放5標點。關于字體大小的問題，頂部操作欄文字大小為34～38像素，標題文字大小為28～34像素，正文文字大小為26～30像素，輔助性文字大小為0～24像素。1.5.1iOS系統(tǒng)2.界面布局規(guī)范以iPhone7的分辨率750像素×1334像素為例，了解界面中的狀態(tài)欄、導航欄、標簽欄和內容區(qū)的尺寸大小和文字大小。1234狀態(tài)欄尺寸為750像素×40像素，字體大小為24像素導航欄尺寸為750像素×88像素，標題文字為34~40像素，按鈕文字一般不大于32像素。內容區(qū)尺寸為750像素×1108像素，字體大小為22~36像素。標簽欄尺寸為750像素×98像素，字體大小為22~24像素。1.5.2Android系統(tǒng)1.文字規(guī)范在實際設計中，Android4.x系統(tǒng)使用中文字體為“DroidSansFallback”，英文字體為“Rotobo”；Android5.x系統(tǒng)使用中文字體為“思源雅黑”，而在實際設計中，中文字體選擇“方正蘭亭黑”，英文仍然使用“Roboto”字體。在進行UI設計時，需要把使用的字體調到像素高度，利用Photoshop里對應的字號進行設計。也就是說，Photoshop里的字號都需要根據(jù)實際情況手動調出來，沒有捷徑。例如，當PPI為240時，對應的像素高度和字體字號如圖1-17所示。1.5.2Android系統(tǒng)2.界面布局規(guī)范以Android手機720像素×1280像素分辨率為例，針對界面中的狀態(tài)欄、導航欄、標簽欄和內容區(qū)的尺寸大小和文字大小進行具體設置。（1）狀態(tài)欄尺寸為720像素×50像素，字體大小為24像素。（2）導航欄尺寸為720像素×96像素，標題文字為34~40像素，按鈕文字一般不大于32像素。（3）內容區(qū)尺寸為720像素×1380像素，字體大小為20~36像素。（4）標簽欄尺寸為720像素×96像素，字體大小為22~24像素。++=課后提升1.判斷題（1）在屏幕尺寸相同的情況下，可顯示的像素越多，畫面就越精細。（）（2）像素密度（DPI）常用于屏幕顯示的描述，也就是每英寸像素點的數(shù)量。（）（3）華為mate20pro手機AppStore中的圖標尺寸為512像素×512像素。（）（4）設計手