移動UI設計基礎課件

移動UI設計基礎課件移動UI設計基礎移動UI設計基礎2UI即UserInterface的簡稱。UI設計則是指對軟件的人機交互、操作邏輯和界面美觀的整體設計。UI設計概論什么是UI設計UI即UserInterface的簡稱。UI設計則是指對軟3UI設計是為了滿足專業(yè)化、標準化需求而對軟件界面進行美化、優(yōu)化和規(guī)范化的設計分支。具體包括軟件啟動界面設計、軟件框架設計、按鈕設計、面板設計、菜單設計、標簽設計、圖標設計、滾動條即狀態(tài)欄設計、安裝過程設計、包裝及商品化等。UI設計概論UI設計是為了滿足專業(yè)化、標準化需求而對軟件界面進行美化、優(yōu)4UI設計概論什么是APPAPP即手機軟件，也就是安裝在手機上的軟件，完善原始系統(tǒng)的不足與個性化。不同系統(tǒng)下載的APP其文件格式也各不相同。iOS系統(tǒng)和Android系統(tǒng)是目前主流的兩大手機APP平臺。UI設計概論5UI設計概論移動APPUI與平面UI的區(qū)別移動UI的平臺主要是手機的APP客戶端上。而平面UI的范圍則非常廣泛，包括了絕大部分UI的領域。手機UI的獨特性，比如尺寸要求、控件和組件類型是的很多平面設計師要重新調(diào)整審美基礎。UI設計概論6UI設計概論制作AppUI的常用軟件——PhotoshopUI設計概論7UI設計概論制作AppUI的常用軟件——IllustratorUI設計概論8UI設計概論制作AppUI的常用軟件——3DSMaxUI設計概論9UI設計概論制作AppUI的常用軟件——ImageOptimizerImageOptimizer是一款圖像壓縮軟件，可以對JPG、GIF、PNG、BMP和TIFF等多種格式的圖像文件進行壓縮。UI設計概論10UI設計概論制作AppUI的常用軟件——IconcoolstudioIconcoolstudio是一款非常簡單的圖標編輯制作軟件，里面提供了一些最常用的工具和功能，如畫筆、漸變色、矩形、橢圓和選區(qū)創(chuàng)建等。此外他還允許從屏幕中截圖以進行進一步的編輯。UI設計概論11手機界面設計尺寸的度量單位英寸分辨率屏幕密度網(wǎng)點密度手機界面設計尺寸的度量單位英寸分辨率屏幕密度網(wǎng)點密度12手機界面設計尺寸的度量單位英寸市場上包括手機在內(nèi)的很多電子產(chǎn)品的屏幕尺寸均使用英寸為計算單位，這是因為電子產(chǎn)品屏幕尺寸計算時使用的是對角線長度，而業(yè)界一般情況下也是將對角線的長度默認為屏幕尺寸的規(guī)格。常見的手機尺寸有3.5英寸、4英寸、4.3英寸、4.7英寸、5英寸、5.1英寸、5.5英寸和5.7英寸等規(guī)格。手機界面設計尺寸的度量單位英寸市場上包括手機在內(nèi)的很多電子產(chǎn)13手機界面設計尺寸的度量單位分辨率分辨率就是屏幕圖像的精密度，是指顯示器所能顯示的像素的多少，泛指量測或顯示系統(tǒng)對細節(jié)的分辨能力。分辨率越高代表圖像質(zhì)量越好，越能表現(xiàn)出更多的細節(jié);但相對的，因為紀錄的信息越多，文件也就會越大。屏幕密度屏幕密度又叫做PPI，是圖像分辨率所使用的單位，意思是在圖像中每英寸所表達的像素數(shù)目。從手機界面設計的角度來說，圖像的分辨率越高，所打印出來的圖像也就越細致與精密。手機界面設計尺寸的度量單位分辨率分辨率就是屏幕圖像的精密度，14手機界面設計尺寸的度量單位網(wǎng)店密度網(wǎng)點密度通常被叫做DPI，般是指每英寸的像素，類似于密度，即每英寸圖片上的像素點數(shù)量，用來表示圖片的清晰度。在同樣的寬高區(qū)域，低密度的顯示屏能顯示的像素較少，而高密度的顯示屏則能顯示更多的像素。幾款目前手機的分辨率和密度。

手機尺寸手機型號屏幕分辨率屏幕密度三星s9/s9+1440×2960px568ppi/532ppi華為Mate10系列三星GalaxyS7、S61440×2560px443ppiOPPOR15、VIVOX211080×2280px403ppiiPhoneX1125×2436px458ppiiPhone8/7/6Plus1080×1920px401ppiiPhone8/7/6750×1334px326ppi手機界面設計尺寸的度量單位網(wǎng)店密度網(wǎng)點密度通常被叫做DPI，15常見的圖片格式位圖PNG格式GIF格式JPEN格式PSD格式TIFF格式BMP格式常見的圖片格式位圖PNG格式GIF格式JPEN格式PSD格式16常見的圖片格式PNG優(yōu)勢缺點1.支持高級別無損耗壓縮1.較老的程序或瀏覽器不支持2.支持Alpha通道透明度2.PNG提供的壓縮量較小3.支持伽瑪校正3.對多圖像文件或動畫文件不提供支持4.支持交錯

5.Web瀏覽器支持

PNG全稱為便攜式網(wǎng)絡圖形，是網(wǎng)上接受的最新圖像文件格式。PNG能夠提供長度比GIF小30%的無損壓縮圖像文件。它同時提供24位和48位真彩色圖像支持以及其他諸多技術性支持。常見的圖片格式PNG優(yōu)勢缺點1.支持高級別無損耗壓縮1.17常見的圖片格式Gif圖形交換格式簡稱GIF，是CompuServe公司在1987年開發(fā)的圖像文件格式。GIF文件的數(shù)據(jù)是一種基于LZW算法的連續(xù)色調(diào)的無損壓縮格式。其壓縮率一般在50%左右，它不屬于任何應用程序。幾乎所有相關軟件都支持，公共領域有大量的軟件在使用GIF圖像文件。優(yōu)勢缺點1.采用無損壓縮，可以保證圖像的品質(zhì)1.不支持動畫2.支持256種真彩色2.在存儲無透明區(qū)域，顏色極其復雜的圖像時，文件體積會變得很大，不如JPEG3.支持透明存儲，失真小，無鋸齒3.IE6不支持PNG的透明屬性4.體積教小，被廣泛的應用于網(wǎng)絡傳輸

常見的圖片格式Gif圖形交換格式簡稱GIF，是CompuSe18常見的圖片格式JPGJPEG格式是目前網(wǎng)絡上最流行的也是最常見的圖像格式，可以把文件壓縮到最小的格式。對色彩的信息保留較好，適合應用于互聯(lián)網(wǎng)，可減少圖像的傳輸時間，可以支持24bit真彩色，也普遍應用于需要連續(xù)色調(diào)的圖像。JPEG格式的優(yōu)缺點如下表所示。優(yōu)勢缺點1.攝影或?qū)憣嵶髌分С指呒墘嚎s1.有損耗壓縮會使圖片質(zhì)量下降2.利用可變的壓縮比控制文件大小2.壓縮幅度過大，不能滿足打印輸出3.支持交錯3.不適合存儲顏色少、具有大面積相近顏色的區(qū)域，或亮度變化明顯的簡單圖像4.JPEG廣泛支持網(wǎng)絡標準

常見的圖片格式JPGJPEG格式是目前網(wǎng)絡上最流行的也是最常19常見的圖片格式矢量圖AI格式CDR格式EPS格式常見的圖片格式矢量圖AI格式CDR格式EPS格式20AppUI的設計原則視覺一致性原則視覺簡易性原則從用戶的考慮角度出發(fā)AppUI的設計原則視覺一致性原則視覺簡易性原則從用戶的21手機界面的色彩搭配與視覺效果冷暖色調(diào)的對比色彩的冷暖設計個人生理、心里記憶固有經(jīng)驗等多方面的原因所控制，是一個相對感性的問題。色彩的冷暖是互為依存的，其相互襯托以及相互聯(lián)系，并且主要通過它們之間的互相對比體現(xiàn)出來。一般而言，暖色光使物體受光部分色彩變暖，而背光部分則相對呈現(xiàn)冷光傾向，冷色光正好與其相反。手機界面的色彩搭配與視覺效果冷暖色調(diào)的對比色彩的冷暖設計個人22手機界面的色彩搭配與視覺效果色彩的意向色彩有各種各樣的心理效果和情感效果，會引起受眾各種各樣的感受和遐想。紅、橙、黃色常使人們能夠聯(lián)想起東方旭日和或是燃燒的火焰，有溫暖的感覺，因而被成為“暖色”；而藍色常使人們聯(lián)想起高空的藍色、陰影處的冰雪，有寒冷的感覺，所以被稱為“冷色”；綠、紫給人們的感覺時不冷不暖，因而被稱為“中性色”。當看見某種色彩或者聽到某種顏色的名稱時心里會自動描繪出這種色彩帶來的感受。手機界面的色彩搭配與視覺效果色彩的意向色彩有各種各樣的心理效23手機界面的色彩搭配與視覺效果色彩的搭配技巧當不同的色彩搭配在一起時，受色相彩度明度的影響會使色彩的效果產(chǎn)生變化。兩種或者多種淺色搭配在一起不會產(chǎn)生對比效果，同樣的，多種深色搭配在一起也不吸引人。但是，當一種淺色和一種深色混合在一起時，淺色就是顯的更淺，深色顯的更深。明度和色相也會產(chǎn)生同樣的對比效果。手機界面的色彩搭配與視覺效果色彩的搭配技巧當不同的色彩搭配在24手機界面的色彩搭配與視覺效果APP界面配色原則手機APP界面要給人簡潔整齊，條理清晰感，依靠的就是界面元素的排版和間距設計，還有色彩的合理、舒適度搭配?？傮w而言配色應遵循以下4條原則，分別是協(xié)調(diào)統(tǒng)一、有重點色、色彩平衡和對立色調(diào)和。手機界面的色彩搭配與視覺效果APP界面配色原則手機APP界面25手機界面的色彩搭配與視覺效果APPUI設計的角色規(guī)范重要標準色：重要顏色中一般不超過3種。一般標準色：一般標準色通常都是相近的顏色，而且比重要顏色弱，普遍用于普通級信息及引導詞。較弱標準色：較弱標準色普遍用于背景色和不需要顯眼的邊角信息。手機界面的色彩搭配與視覺效果APPUI設計的角色規(guī)范重要標26App的設計流程簡單大方的設計理念獨一無二的設計創(chuàng)意全面分析應用需求確認APP的設計工作App的設計流程簡單大方的設計理念獨一無二的設計創(chuàng)意全面分27App的設計流程案例-繪制相機圖標App的設計流程案例-繪制相機圖標28App移動端的設計趨勢專注用戶體驗使用模糊的背景簡單的導航模式大膽而醒目的字體運用更簡單的配色用戶界面的情景感知App移動端的設計趨勢專注用戶體驗使用模糊的簡單的導航大膽29App移動端的設計趨勢案例-繪制登錄界面App移動端的設計趨勢案例-繪制登錄界面30兩大主流手機系統(tǒng)的發(fā)展歷程iOS系統(tǒng)Android系統(tǒng)兩大主流手機系統(tǒng)的發(fā)展歷程iOS系統(tǒng)Android系統(tǒng)31不同系統(tǒng)UI視覺的主要組成要素及特征iOS的特征-優(yōu)點外觀設計精美操作系統(tǒng)硬件配置不同系統(tǒng)UI視覺的主要組成要素及特征iOS的特征-優(yōu)點外觀32不同系統(tǒng)UI視覺的主要組成要素及特征iOS的特征-缺點封閉性帶來的問題審美疲勞過度依賴iTunes不同系統(tǒng)UI視覺的主要組成要素及特征iOS的特征-缺點封閉33不同系統(tǒng)UI視覺的主要組成要素及特征Android的特征-優(yōu)點開源聯(lián)盟技術應用不同系統(tǒng)UI視覺的主要組成要素及特征Android34不同系統(tǒng)UI視覺的主要組成要素及特征Android的特征-缺點應用的質(zhì)量不高開源導致產(chǎn)品體驗差異很大運行效能不高不同系統(tǒng)UI視覺的主要組成要素及特征Android35手機系統(tǒng)的發(fā)展前景

Android應用程序多，應用更新快，手機硬件豐富覆蓋高中低三個檔次。但其占用資源大，同等配置的手機，其流暢性最差，體驗最差，安全性較差。iOS應用程度多，應用更新得也很快，手機占用資源少，運行流程，用戶體驗較好，安全性較好，但其價格昂貴。手機系統(tǒng)的發(fā)展前景Android應用程序36專家支招

App屏幕設計禁忌App文字設計禁忌App按鈕圖標設計禁忌APP選項設計禁忌APP空間設計禁忌專家支招App屏幕設計禁忌App文字設計禁忌App37謝謝觀賞謝謝觀賞38移動UI設計基礎課件移動UI設計基礎移動UI設計基礎40UI即UserInterface的簡稱。UI設計則是指對軟件的人機交互、操作邏輯和界面美觀的整體設計。UI設計概論什么是UI設計UI即UserInterface的簡稱。UI設計則是指對軟41UI設計是為了滿足專業(yè)化、標準化需求而對軟件界面進行美化、優(yōu)化和規(guī)范化的設計分支。具體包括軟件啟動界面設計、軟件框架設計、按鈕設計、面板設計、菜單設計、標簽設計、圖標設計、滾動條即狀態(tài)欄設計、安裝過程設計、包裝及商品化等。UI設計概論UI設計是為了滿足專業(yè)化、標準化需求而對軟件界面進行美化、優(yōu)42UI設計概論什么是APPAPP即手機軟件，也就是安裝在手機上的軟件，完善原始系統(tǒng)的不足與個性化。不同系統(tǒng)下載的APP其文件格式也各不相同。iOS系統(tǒng)和Android系統(tǒng)是目前主流的兩大手機APP平臺。UI設計概論43UI設計概論移動APPUI與平面UI的區(qū)別移動UI的平臺主要是手機的APP客戶端上。而平面UI的范圍則非常廣泛，包括了絕大部分UI的領域。手機UI的獨特性，比如尺寸要求、控件和組件類型是的很多平面設計師要重新調(diào)整審美基礎。UI設計概論44UI設計概論制作AppUI的常用軟件——PhotoshopUI設計概論45UI設計概論制作AppUI的常用軟件——IllustratorUI設計概論46UI設計概論制作AppUI的常用軟件——3DSMaxUI設計概論47UI設計概論制作AppUI的常用軟件——ImageOptimizerImageOptimizer是一款圖像壓縮軟件，可以對JPG、GIF、PNG、BMP和TIFF等多種格式的圖像文件進行壓縮。UI設計概論48UI設計概論制作AppUI的常用軟件——IconcoolstudioIconcoolstudio是一款非常簡單的圖標編輯制作軟件，里面提供了一些最常用的工具和功能，如畫筆、漸變色、矩形、橢圓和選區(qū)創(chuàng)建等。此外他還允許從屏幕中截圖以進行進一步的編輯。UI設計概論49手機界面設計尺寸的度量單位英寸分辨率屏幕密度網(wǎng)點密度手機界面設計尺寸的度量單位英寸分辨率屏幕密度網(wǎng)點密度50手機界面設計尺寸的度量單位英寸市場上包括手機在內(nèi)的很多電子產(chǎn)品的屏幕尺寸均使用英寸為計算單位，這是因為電子產(chǎn)品屏幕尺寸計算時使用的是對角線長度，而業(yè)界一般情況下也是將對角線的長度默認為屏幕尺寸的規(guī)格。常見的手機尺寸有3.5英寸、4英寸、4.3英寸、4.7英寸、5英寸、5.1英寸、5.5英寸和5.7英寸等規(guī)格。手機界面設計尺寸的度量單位英寸市場上包括手機在內(nèi)的很多電子產(chǎn)51手機界面設計尺寸的度量單位分辨率分辨率就是屏幕圖像的精密度，是指顯示器所能顯示的像素的多少，泛指量測或顯示系統(tǒng)對細節(jié)的分辨能力。分辨率越高代表圖像質(zhì)量越好，越能表現(xiàn)出更多的細節(jié);但相對的，因為紀錄的信息越多，文件也就會越大。屏幕密度屏幕密度又叫做PPI，是圖像分辨率所使用的單位，意思是在圖像中每英寸所表達的像素數(shù)目。從手機界面設計的角度來說，圖像的分辨率越高，所打印出來的圖像也就越細致與精密。手機界面設計尺寸的度量單位分辨率分辨率就是屏幕圖像的精密度，52手機界面設計尺寸的度量單位網(wǎng)店密度網(wǎng)點密度通常被叫做DPI，般是指每英寸的像素，類似于密度，即每英寸圖片上的像素點數(shù)量，用來表示圖片的清晰度。在同樣的寬高區(qū)域，低密度的顯示屏能顯示的像素較少，而高密度的顯示屏則能顯示更多的像素。幾款目前手機的分辨率和密度。

手機尺寸手機型號屏幕分辨率屏幕密度三星s9/s9+1440×2960px568ppi/532ppi華為Mate10系列三星GalaxyS7、S61440×2560px443ppiOPPOR15、VIVOX211080×2280px403ppiiPhoneX1125×2436px458ppiiPhone8/7/6Plus1080×1920px401ppiiPhone8/7/6750×1334px326ppi手機界面設計尺寸的度量單位網(wǎng)店密度網(wǎng)點密度通常被叫做DPI，53常見的圖片格式位圖PNG格式GIF格式JPEN格式PSD格式TIFF格式BMP格式常見的圖片格式位圖PNG格式GIF格式JPEN格式PSD格式54常見的圖片格式PNG優(yōu)勢缺點1.支持高級別無損耗壓縮1.較老的程序或瀏覽器不支持2.支持Alpha通道透明度2.PNG提供的壓縮量較小3.支持伽瑪校正3.對多圖像文件或動畫文件不提供支持4.支持交錯

5.Web瀏覽器支持

PNG全稱為便攜式網(wǎng)絡圖形，是網(wǎng)上接受的最新圖像文件格式。PNG能夠提供長度比GIF小30%的無損壓縮圖像文件。它同時提供24位和48位真彩色圖像支持以及其他諸多技術性支持。常見的圖片格式PNG優(yōu)勢缺點1.支持高級別無損耗壓縮1.55常見的圖片格式Gif圖形交換格式簡稱GIF，是CompuServe公司在1987年開發(fā)的圖像文件格式。GIF文件的數(shù)據(jù)是一種基于LZW算法的連續(xù)色調(diào)的無損壓縮格式。其壓縮率一般在50%左右，它不屬于任何應用程序。幾乎所有相關軟件都支持，公共領域有大量的軟件在使用GIF圖像文件。優(yōu)勢缺點1.采用無損壓縮，可以保證圖像的品質(zhì)1.不支持動畫2.支持256種真彩色2.在存儲無透明區(qū)域，顏色極其復雜的圖像時，文件體積會變得很大，不如JPEG3.支持透明存儲，失真小，無鋸齒3.IE6不支持PNG的透明屬性4.體積教小，被廣泛的應用于網(wǎng)絡傳輸

常見的圖片格式Gif圖形交換格式簡稱GIF，是CompuSe56常見的圖片格式JPGJPEG格式是目前網(wǎng)絡上最流行的也是最常見的圖像格式，可以把文件壓縮到最小的格式。對色彩的信息保留較好，適合應用于互聯(lián)網(wǎng)，可減少圖像的傳輸時間，可以支持24bit真彩色，也普遍應用于需要連續(xù)色調(diào)的圖像。JPEG格式的優(yōu)缺點如下表所示。優(yōu)勢缺點1.攝影或?qū)憣嵶髌分С指呒墘嚎s1.有損耗壓縮會使圖片質(zhì)量下降2.利用可變的壓縮比控制文件大小2.壓縮幅度過大，不能滿足打印輸出3.支持交錯3.不適合存儲顏色少、具有大面積相近顏色的區(qū)域，或亮度變化明顯的簡單圖像4.JPEG廣泛支持網(wǎng)絡標準

常見的圖片格式JPGJPEG格式是目前網(wǎng)絡上最流行的也是最常57常見的圖片格式矢量圖AI格式CDR格式EPS格式常見的圖片格式矢量圖AI格式CDR格式EPS格式58AppUI的設計原則視覺一致性原則視覺簡易性原則從用戶的考慮角度出發(fā)AppUI的設計原則視覺一致性原則視覺簡易性原則從用戶的59手機界面的色彩搭配與視覺效果冷暖色調(diào)的對比色彩的冷暖設計個人生理、心里記憶固有經(jīng)驗等多方面的原因所控制，是一個相對感性的問題。色彩的冷暖是互為依存的，其相互襯托以及相互聯(lián)系，并且主要通過它們之間的互相對比體現(xiàn)出來。一般而言，暖色光使物體受光部分色彩變暖，而背光部分則相對呈現(xiàn)冷光傾向，冷色光正好與其相反。手機界面的色彩搭配與視覺效果冷暖色調(diào)的對比色彩的冷暖設計個人60手機界面的色彩搭配與視覺效果色彩的意向色彩有各種各樣的心理效果和情感效果，會引起受眾各種各樣的感受和遐想。紅、橙、黃色常使人們能夠聯(lián)想起東方旭日和或是燃燒的火焰，有溫暖的感覺，因而被成為“暖色”；而藍色常使人們聯(lián)想起高空的藍色、陰影處的冰雪，有寒冷的感覺，所以被稱為“冷色”；綠、紫給人們的感覺時不冷不暖，因而被稱為“中性色”。當看見某種色彩或者聽到某種顏色的名稱時心里會自動描繪出這種色彩帶來的感受。手機界面的色彩搭配與視覺效果色彩的意向色彩有各種各樣的心理效61手機界面的色彩搭配與視覺效果色彩的搭配技巧當不同的色彩搭配在一起時，受色相彩度明度的影響會使色彩的效果產(chǎn)生變化。兩種或者多種淺色搭配在一起不會產(chǎn)生對比效果，同樣的，多種深色搭配在一起也不吸引人。但是，當一種淺色和一種深色混合在一起時，淺色就是顯的更淺，深色顯的更深。明度和色相也會產(chǎn)生同樣的對比效果。手機界面的色彩搭配與視覺效果色彩的搭配技巧當不同的色彩搭配在62手機界面的色彩搭配與視覺效果APP界面配色原則手機APP界面要給人簡潔整齊，條理清晰感，依靠的就是界面元素的排版和間距設計，還有色彩的合理、舒適度搭配?？傮w而言配色應遵循以下4條原則，分別是協(xié)調(diào)統(tǒng)一、有重點色、色彩平衡和對立色調(diào)和。手機界面的色彩搭配與視覺效果APP界面配色原則手機APP界面63手機界面的色彩搭配與視覺效果APPUI設計的角色規(guī)范重要標準色：重要顏色中一般不超過3種。一般標準色：一般標準色通常都是相近的顏色，而且