移動UI界面設(shè)計-01-初識移動UI設(shè)計課件

初識移動App設(shè)計初識移動App設(shè)計課程目標了解UI行業(yè)了解移動端三大操作系統(tǒng)了解手機App的設(shè)計流程掌握iOS、Andorid系統(tǒng)的設(shè)計規(guī)范熟練使用PS進行圖標和界面的設(shè)計2/36課程目標了解UI行業(yè)2/36本章任務(wù)了解手機UI設(shè)計師需要掌握的技能了解實際企業(yè)中App的設(shè)計基本流程掌握圖標的基本概念掌握簡易圖標的設(shè)計方法制作AppleWatchApp圖標3/36本章任務(wù)了解手機UI設(shè)計師需要掌握的技能制作Apple目錄APP設(shè)計的基本流程移動UI設(shè)計相關(guān)理論講解簡易圖標的設(shè)計方法4/36目錄APP設(shè)計的基本流程4/36APP設(shè)計的基本流程5/36APP設(shè)計的基本流程5/36APP設(shè)計的基本流程PM：產(chǎn)品經(jīng)理UI：用戶界面設(shè)計ID：交互設(shè)計GUI：圖形用戶界面設(shè)計6/36APP設(shè)計的基本流程PM：產(chǎn)品經(jīng)理6/36APP設(shè)計的基本流程“需求”長這樣7/36APP設(shè)計的基本流程“需求”長這樣7/36APP設(shè)計的基本流程移動UI設(shè)計師要做什么呢？原型圖界面設(shè)計圖標設(shè)計切圖標注8/36APP設(shè)計的基本流程移動UI設(shè)計師要做什么呢？8/36目錄APP設(shè)計的基本流程移動UI設(shè)計相關(guān)理論講解簡易圖標的設(shè)計方法9/36目錄APP設(shè)計的基本流程9/36移動UI設(shè)計相關(guān)理論講解移動UI三大操作系統(tǒng)

Android

iOS

WindowsPhone10/36移動UI設(shè)計相關(guān)理論講解移動UI三大操作系統(tǒng)Androi移動UI設(shè)計相關(guān)理論講解移動UI設(shè)計常用軟件Photoshop

Illustrator

Axure11/36移動UI設(shè)計相關(guān)理論講解移動UI設(shè)計常用軟件Photosh移動UI設(shè)計相關(guān)理論講解移動UI常見儲存格式12/36移動UI設(shè)計相關(guān)理論講解移動UI常見儲存格式12/36移動UI設(shè)計相關(guān)理論講解尺寸相關(guān)的術(shù)語概念和標準屏幕尺寸分辨率

分辨率不同的顯示效果13/36移動UI設(shè)計相關(guān)理論講解尺寸相關(guān)的術(shù)語概念和標準分辨率不同移動UI設(shè)計相關(guān)理論講解尺寸相關(guān)的術(shù)語概念和標準屏幕密度：又叫做像素密度，是每英寸屏幕所擁有的像素數(shù)屏幕密度越大，顯示畫面細節(jié)就越豐富Android系統(tǒng)不同的屏幕密度和尺寸14/36移動UI設(shè)計相關(guān)理論講解尺寸相關(guān)的術(shù)語概念和標準Andro移動UI設(shè)計相關(guān)理論講解設(shè)計中經(jīng)常會遇到如下的單位和定義px（Pixels）：對應(yīng)屏幕上的實際像素點dpi(DotsPerInch)：每英寸所能印刷的網(wǎng)點數(shù)in(Inches)：英寸、屏幕物理長度單位mm（Millimeters）：毫米、屏幕物理長度單位在設(shè)計時主要考慮屏幕密度，以此為新建畫布的大小物理尺寸并不能作為設(shè)計尺寸來進行使用15/36移動UI設(shè)計相關(guān)理論講解設(shè)計中經(jīng)常會遇到如下的單位和定義15課堂練習(xí)：移動UI設(shè)計相關(guān)理論講解請問你自己的手機是什么系統(tǒng)？屏幕密度是多少？將手機屏幕截圖，導(dǎo)入到電腦中可以通過微信、qq等功能，將圖片導(dǎo)入到電腦中注意原圖與縮略圖的區(qū)別16/36課堂練習(xí)：移動UI設(shè)計相關(guān)理論講解請問你自己的手機是什么系統(tǒng)目錄APP設(shè)計的基本流程移動UI設(shè)計相關(guān)理論講解簡易圖標的設(shè)計方法17/36目錄APP設(shè)計的基本流程17/36簡易圖標的設(shè)計方法圖標的概述圖形化的標識，英文縮寫icon，它源自于生活中的各種圖形標識，是計算機應(yīng)用圖形化的重要組成部分

啟動圖標18/36簡易圖標的設(shè)計方法圖標的概述啟動圖標18/36簡易圖標的設(shè)計方法圖標的概述廣義交通指示牌圖形標志、男女公共廁所圖形標志19/36簡易圖標的設(shè)計方法圖標的概述交通指示牌圖形標志、男女公共廁所簡易圖標的設(shè)計方法圖標的概述狹義啟動圖標20/36簡易圖標的設(shè)計方法圖標的概述啟動圖標20/36簡易圖標的設(shè)計方法圖標的分類按照圖標屬性可以分為啟動圖標欄圖標小圖標

iOS系統(tǒng)啟動圖標

Android系統(tǒng)啟動圖標21/36簡易圖標的設(shè)計方法圖標的分類iOS系統(tǒng)啟動圖標And簡易圖標的設(shè)計方法圖標的分類按照圖標屬性可以分為啟動圖標欄圖標小圖標欄圖標22/36簡易圖標的設(shè)計方法圖標的分類欄圖標22/36簡易圖標的設(shè)計方法圖標的分類按照圖標屬性可以分為啟動圖標欄圖標小圖標小圖標23/36簡易圖標的設(shè)計方法圖標的分類小圖標23/36簡易圖標的設(shè)計方法圖標的分類按表現(xiàn)形式可以分為2D、3D2D風(fēng)格3D風(fēng)格24/36簡易圖標的設(shè)計方法圖標的分類2D風(fēng)格3D風(fēng)格24/36簡易圖標的設(shè)計方法圖標的分類按設(shè)計風(fēng)格可以分為像素圖標、寫實圖標、扁平化圖標手繪圖標等像素圖標寫實圖標、擬物圖標25/36簡易圖標的設(shè)計方法圖標的分類像素圖標寫實圖標、擬物圖標25/簡易圖標的設(shè)計方法圖標的分類按設(shè)計風(fēng)格可以分為像素圖標、寫實圖標、扁平化圖標手繪圖標等扁平化圖標手繪圖標26/36簡易圖標的設(shè)計方法圖標的分類扁平化圖標手繪圖標26/36簡易圖標的設(shè)計方法使用何種風(fēng)格的圖標關(guān)鍵取決于App的需求和主要用戶群體的喜好在設(shè)計圖標的時候，不能天馬行空的進行風(fēng)格定義，而是要考慮App的整體定位和用戶到底喜歡什么樣的風(fēng)格簡單闡述你手機中的某一款A(yù)pp為什么采用這樣的設(shè)計風(fēng)格27/36簡易圖標的設(shè)計方法使用何種風(fēng)格的圖標關(guān)鍵取決于App的需求和簡易圖標的設(shè)計方法接到一個設(shè)計icon的任務(wù)

大家是怎樣展開思維來進行設(shè)計的呢？設(shè)計總監(jiān)說：“你來做一個鬧鐘的圖標吧。”你該怎么做？28/36簡易圖標的設(shè)計方法接到一個設(shè)計icon的任務(wù)

大家是怎樣展開簡易圖標的設(shè)計方法圖標的設(shè)計步驟29/36簡易圖標的設(shè)計方法圖標的設(shè)計步驟29/36需求描述使用Photoshop制作AppleWatchApp圖標實現(xiàn)思路使用鋼筆工具、形狀工具勾勒輪廓使用直接選擇工具配合轉(zhuǎn)換點工具調(diào)整線鋒通過形狀之間的相減、相交等細節(jié)刻畫填充顏色，添加圖標底座演示案例：

制作AppleWatchApp圖標30/36需求描述演示案例：

制作AppleWatchApp圖標3需求描述使用Illustrator制作低面像素風(fēng)格天氣App啟動圖標實現(xiàn)思路簡單勾勒云朵、閃電的形狀使用鋼筆工具或多邊形工具制作低面像素風(fēng)格的三角形確定主色調(diào)，然后為每一個三角形填充顏色繪制投影，為背景增加漸變效果演示案例：

低面像素風(fēng)格天氣App啟動圖標設(shè)計31/36需求描述演示案例：

低面像素風(fēng)格天氣App啟動圖標設(shè)計31/課堂練習(xí)：手機端常用圖標設(shè)計需求描述使用Photoshop中的矢量工具繪制圖標實現(xiàn)思路使用形狀工具繪制主體形狀使用鋼筆工具，合理疊加形狀32/36課堂練習(xí)：手機端常用圖標設(shè)計需求描述32/36課堂練習(xí)：多彩風(fēng)格電子設(shè)備圖標設(shè)計需求描述使用Illustrator繪制多彩風(fēng)格電子設(shè)備圖標實現(xiàn)思路使用鋼筆工具、形狀工具繪制主體形狀填充相應(yīng)的顏色修正細節(jié)33/36課堂練習(xí)：多彩風(fēng)格電子設(shè)備圖標設(shè)計需求描述33/36本章總結(jié)手機UI設(shè)計師需要掌握什么樣的技能？實際企業(yè)中App的設(shè)計基本流程是怎么樣的？簡易圖標應(yīng)該怎么設(shè)計？34/36本章總結(jié)手機UI設(shè)計師需要掌握什么樣的技能？34/36初識移動App設(shè)計初識移動App設(shè)計課程目標了解UI行業(yè)了解移動端三大操作系統(tǒng)了解手機App的設(shè)計流程掌握iOS、Andorid系統(tǒng)的設(shè)計規(guī)范熟練使用PS進行圖標和界面的設(shè)計36/36課程目標了解UI行業(yè)2/36本章任務(wù)了解手機UI設(shè)計師需要掌握的技能了解實際企業(yè)中App的設(shè)計基本流程掌握圖標的基本概念掌握簡易圖標的設(shè)計方法制作AppleWatchApp圖標37/36本章任務(wù)了解手機UI設(shè)計師需要掌握的技能制作Apple目錄APP設(shè)計的基本流程移動UI設(shè)計相關(guān)理論講解簡易圖標的設(shè)計方法38/36目錄APP設(shè)計的基本流程4/36APP設(shè)計的基本流程39/36APP設(shè)計的基本流程5/36APP設(shè)計的基本流程PM：產(chǎn)品經(jīng)理UI：用戶界面設(shè)計ID：交互設(shè)計GUI：圖形用戶界面設(shè)計40/36APP設(shè)計的基本流程PM：產(chǎn)品經(jīng)理6/36APP設(shè)計的基本流程“需求”長這樣41/36APP設(shè)計的基本流程“需求”長這樣7/36APP設(shè)計的基本流程移動UI設(shè)計師要做什么呢？原型圖界面設(shè)計圖標設(shè)計切圖標注42/36APP設(shè)計的基本流程移動UI設(shè)計師要做什么呢？8/36目錄APP設(shè)計的基本流程移動UI設(shè)計相關(guān)理論講解簡易圖標的設(shè)計方法43/36目錄APP設(shè)計的基本流程9/36移動UI設(shè)計相關(guān)理論講解移動UI三大操作系統(tǒng)

Android

iOS

WindowsPhone44/36移動UI設(shè)計相關(guān)理論講解移動UI三大操作系統(tǒng)Androi移動UI設(shè)計相關(guān)理論講解移動UI設(shè)計常用軟件Photoshop

Illustrator

Axure45/36移動UI設(shè)計相關(guān)理論講解移動UI設(shè)計常用軟件Photosh移動UI設(shè)計相關(guān)理論講解移動UI常見儲存格式46/36移動UI設(shè)計相關(guān)理論講解移動UI常見儲存格式12/36移動UI設(shè)計相關(guān)理論講解尺寸相關(guān)的術(shù)語概念和標準屏幕尺寸分辨率

分辨率不同的顯示效果47/36移動UI設(shè)計相關(guān)理論講解尺寸相關(guān)的術(shù)語概念和標準分辨率不同移動UI設(shè)計相關(guān)理論講解尺寸相關(guān)的術(shù)語概念和標準屏幕密度：又叫做像素密度，是每英寸屏幕所擁有的像素數(shù)屏幕密度越大，顯示畫面細節(jié)就越豐富Android系統(tǒng)不同的屏幕密度和尺寸48/36移動UI設(shè)計相關(guān)理論講解尺寸相關(guān)的術(shù)語概念和標準Andro移動UI設(shè)計相關(guān)理論講解設(shè)計中經(jīng)常會遇到如下的單位和定義px（Pixels）：對應(yīng)屏幕上的實際像素點dpi(DotsPerInch)：每英寸所能印刷的網(wǎng)點數(shù)in(Inches)：英寸、屏幕物理長度單位mm（Millimeters）：毫米、屏幕物理長度單位在設(shè)計時主要考慮屏幕密度，以此為新建畫布的大小物理尺寸并不能作為設(shè)計尺寸來進行使用49/36移動UI設(shè)計相關(guān)理論講解設(shè)計中經(jīng)常會遇到如下的單位和定義15課堂練習(xí)：移動UI設(shè)計相關(guān)理論講解請問你自己的手機是什么系統(tǒng)？屏幕密度是多少？將手機屏幕截圖，導(dǎo)入到電腦中可以通過微信、qq等功能，將圖片導(dǎo)入到電腦中注意原圖與縮略圖的區(qū)別50/36課堂練習(xí)：移動UI設(shè)計相關(guān)理論講解請問你自己的手機是什么系統(tǒng)目錄APP設(shè)計的基本流程移動UI設(shè)計相關(guān)理論講解簡易圖標的設(shè)計方法51/36目錄APP設(shè)計的基本流程17/36簡易圖標的設(shè)計方法圖標的概述圖形化的標識，英文縮寫icon，它源自于生活中的各種圖形標識，是計算機應(yīng)用圖形化的重要組成部分

啟動圖標52/36簡易圖標的設(shè)計方法圖標的概述啟動圖標18/36簡易圖標的設(shè)計方法圖標的概述廣義交通指示牌圖形標志、男女公共廁所圖形標志53/36簡易圖標的設(shè)計方法圖標的概述交通指示牌圖形標志、男女公共廁所簡易圖標的設(shè)計方法圖標的概述狹義啟動圖標54/36簡易圖標的設(shè)計方法圖標的概述啟動圖標20/36簡易圖標的設(shè)計方法圖標的分類按照圖標屬性可以分為啟動圖標欄圖標小圖標

iOS系統(tǒng)啟動圖標

Android系統(tǒng)啟動圖標55/36簡易圖標的設(shè)計方法圖標的分類iOS系統(tǒng)啟動圖標And簡易圖標的設(shè)計方法圖標的分類按照圖標屬性可以分為啟動圖標欄圖標小圖標欄圖標56/36簡易圖標的設(shè)計方法圖標的分類欄圖標22/36簡易圖標的設(shè)計方法圖標的分類按照圖標屬性可以分為啟動圖標欄圖標小圖標小圖標57/36簡易圖標的設(shè)計方法圖標的分類小圖標23/36簡易圖標的設(shè)計方法圖標的分類按表現(xiàn)形式可以分為2D、3D2D風(fēng)格3D風(fēng)格58/36簡易圖標的設(shè)計方法圖標的分類2D風(fēng)格3D風(fēng)格24/36簡易圖標的設(shè)計方法圖標的分類按設(shè)計風(fēng)格可以分為像素圖標、寫實圖標、扁平化圖標手繪圖標等像素圖標寫實圖標、擬物圖標59/36簡易圖標的設(shè)計方法圖標的分類像素圖標寫實圖標、擬物圖標25/簡易圖標的設(shè)計方法圖標的分類按設(shè)計風(fēng)格可以分為像素圖標、寫實圖標、扁平化圖標手繪圖標等扁平化圖標手繪圖標60/36簡易圖標的設(shè)計方法圖標的分類扁平化圖標手繪圖標26/36簡易圖標的設(shè)計方法使用何種風(fēng)格的圖標關(guān)鍵取決于App的需求和主要用戶群體的喜好在設(shè)計圖標的時候，不能天馬行空的進行風(fēng)格定義，而是要考慮App的整體定位和用戶到底喜歡什么樣的風(fēng)格簡單闡述你手機中的某一款A(yù)pp為什么采用這樣的設(shè)計風(fēng)格61/36簡易圖標的設(shè)計方法使用何種風(fēng)格的圖標關(guān)鍵取決于App的需求和簡易圖標的設(shè)計方法接到一個設(shè)計icon的任務(wù)

大家是怎樣展開思維來進行設(shè)計的呢？設(shè)計總監(jiān)說：“你來做一個鬧鐘的圖標吧。”你該怎么做？62/36簡易圖標的設(shè)計方法接到一個設(shè)計icon的任務(wù)

大家是怎樣展開簡易圖標的設(shè)計方法圖標的設(shè)計步驟63/36簡易圖標的設(shè)計方法圖標的設(shè)計步驟29/36需求描述使用Photoshop