




版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進行舉報或認領(lǐng)
文檔簡介
初識移動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
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 對賭協(xié)議跟投資協(xié)議書
- 電工師傅帶徒弟協(xié)議書
- 揭陽公積金抵扣協(xié)議書
- 電梯補簽協(xié)議書
- 聯(lián)姻合作協(xié)議書
- 遺產(chǎn)贈予協(xié)議書
- 追資投資協(xié)議書
- 碰傷調(diào)解協(xié)議書
- 美國后勤協(xié)議書
- 工程股份制合同協(xié)議書
- 經(jīng)典音樂配樂課
- 南宋官窯教學(xué)課件
- 呼吸功能的監(jiān)測與護理
- 嬰兒椅設(shè)計研究報告總結(jié)
- 自動化機構(gòu)設(shè)計基礎(chǔ)
- 厭學(xué)怎么辦-主題班會課件
- 公務(wù)用車租賃服務(wù)采購項目比選文件
- 新建混凝土路面道路工程施工工程投標書(技術(shù)方案)
- 旁站記錄新表(腳手架拆除)
- 低壓柜開關(guān)更換施工方案
- 織金新型能源化工基地污水處理廠及配套管網(wǎng)工程-茶店污水處理廠環(huán)評報告
評論
0/150
提交評論