移動端APPUI設(shè)計與交互基礎(chǔ)教程第5章APP界面設(shè)計與實戰(zhàn)課件

1、設(shè)計與交互基礎(chǔ)教程MOBILE APP UI DESIGN AND INTERACTION BASIC COURSE 移動端APP UI05APP界面設(shè)計與實戰(zhàn)本章在講解基本概念的基礎(chǔ)上，向讀者介紹iOS與Android的設(shè)計規(guī)范，并結(jié)合實際工作案例，從產(chǎn)品定位和競品分析開始，一步步向讀者講解設(shè)計師是如何完成頁面設(shè)計的。5.1 認(rèn)識APP應(yīng)用程序及其相關(guān)概念1Screen Size（屏幕尺寸）2px3pt4ppi（像素密度）5dpi6分辨率5.1.1 常見術(shù)語5.1 認(rèn)識APP應(yīng)用程序及其相關(guān)概念7倍率8dip與dp9sp5.1.1 常見術(shù)語圖5-2 倍率示意圖5.1 認(rèn)識APP應(yīng)用程序及其相

2、關(guān)概念1iOS系統(tǒng)下iPhone設(shè)備屏幕尺寸2Android系統(tǒng)下設(shè)備屏幕尺寸5.1.2 常見手機屏幕尺寸5.2 設(shè)計規(guī)范1iPhone界面尺寸2iPhone圖標(biāo)尺寸5.2.1 iOS設(shè)計規(guī)范5.2 設(shè)計規(guī)范3字體規(guī)范5.2.1 iOS設(shè)計規(guī)范5.2 設(shè)計規(guī)范1Android界面尺寸2Android圖標(biāo)尺寸3字體規(guī)范5.2.2 Android設(shè)計規(guī)范5.2 設(shè)計規(guī)范1全局邊距2卡片間距5.2.3 邊距與間距圖5-6 全局邊距圖5-7 微信“我的”頁面卡片間距5.2 設(shè)計規(guī)范3內(nèi)容間距5.2.3 邊距與間距圖5-8 內(nèi)容間距5.2 設(shè)計規(guī)范1列表式布局2卡片式布局5.2.4 內(nèi)容布局5.2 設(shè)計

3、規(guī)范5.2.5 常用顏色5.3 “UI社”APP產(chǎn)品設(shè)計與實現(xiàn)1市場背景分析2目標(biāo)用戶與優(yōu)勢3產(chǎn)品介紹4盈利模式5.3.1 產(chǎn)品定位與背景簡要分析5.3 UI社”APP產(chǎn)品設(shè)計與實現(xiàn)5.3.2 競品分析圖5-11 競品分析的一般步驟5.3 UI社”APP產(chǎn)品設(shè)計與實現(xiàn)5.3.3 “UI社”產(chǎn)品架構(gòu)梳理圖5-18 “UI社”產(chǎn)品功能架構(gòu)（部分）5.3 UI社”APP產(chǎn)品設(shè)計與實現(xiàn)5.3.4 繪制低保真原型圖5.3 “UI社”APP產(chǎn)品設(shè)計與實現(xiàn)5.3.5 “UI社”APP的視覺規(guī)范1顏色規(guī)范2字體規(guī)范3模塊規(guī)范5.3 “UI社”APP產(chǎn)品設(shè)計與實現(xiàn)5.3.6 APP產(chǎn)品啟動圖標(biāo)的制作5.3.7 “引導(dǎo)頁”效果圖制作5.3.8 “登錄頁”效果圖制作5.3 “UI社”APP產(chǎn)品設(shè)計與實現(xiàn)5.3.9 “首頁”效果圖制作5.3.10 “發(fā)現(xiàn)頁”效果圖制作5.3 “UI社”APP產(chǎn)品設(shè)計與實現(xiàn)5.3.11 “上傳頁”效果圖制作5.3.12 “動態(tài)頁”與“動態(tài)詳情頁”效果圖制作5