第5章-APP界面设计与实战课件.pptx

1、设计与交互基础教程MOBILE APP UI DESIGN AND INTERACTION BASIC COURSE 工业和信息化“十三五”人才培养规划教材移动端APP UI吴丰 编著APP界面设计与实战本章在讲解基本概念的基础上，向读者介绍iOS与Android的设计规范，并结合实际工作案例，从产品定位和竞品分析开始，一步步向读者讲解设计师是如何完成页面设计的。5.1 认识APP应用程序及其相关概念1Screen Size（屏幕尺寸）2px3pt4ppi（像素密度）5dpi6分辨率5.1.1 常见术语5.1 认识APP应用程序及其相关概念7倍率8dip与dp9sp5.1.1 常见术语图5-2

2、 倍率示意图5.1 认识APP应用程序及其相关概念1iOS系统下iPhone设备屏幕尺寸2Android系统下设备屏幕尺寸5.1.2 常见手机屏幕尺寸5.2 设计规范1iPhone界面尺寸2iPhone图标尺寸5.2.1 iOS设计规范5.2 设计规范3字体规范5.2.1 iOS设计规范5.2 设计规范1Android界面尺寸2Android图标尺寸3字体规范5.2.2 Android设计规范5.2 设计规范1全局边距2卡片间距5.2.3 边距与间距图5-6 全局边距图5-7 微信“我的”页面卡片间距5.2 设计规范3内容间距5.2.3 边距与间距图5-8 内容间距5.2 设计规范1列表式布局

3、2卡片式布局5.2.4 内容布局5.2 设计规范5.2.5 常用颜色5.3 “UI社”APP产品设计与实现1市场背景分析2目标用户与优势3产品介绍4盈利模式5.3.1 产品定位与背景简要分析5.3 UI社”APP产品设计与实现5.3.2 竞品分析图5-11 竞品分析的一般步骤5.3 UI社”APP产品设计与实现5.3.3 “UI社”产品架构梳理图5-18 “UI社”产品功能架构（部分）5.3 UI社”APP产品设计与实现5.3.4 绘制低保真原型图5.3 “UI社”APP产品设计与实现5.3.5 “UI社”APP的视觉规范1颜色规范2字体规范3模块规范5.3 “UI社”APP产品设计与实现5.3.6 APP产品启动图标的制作5.3.7 “引导页”效果图制作5.3.8 “登录页”效果图制作5.3“UI社”APP产品设计与实现5.3.9 “首页”效果图制作5.3.10 “发现页”效果图制作5.3“UI社”APP产品设计与实现5.3.11 “上传页”效果图制作5.3.12 “动态页”与“动态详情页”效果图制作5.3“UI社”APP产品设计与实现5.3.13 “我的页”效果图制作5.3.14 其他页面效果图谢谢观看！