初识移动App设计

初识移动App设计初识移动App设计第1页课程目标了解UI行业了解移动端三大操作系统了解手机App设计流程掌握iOS、Andorid系统设计规范熟练使用PS进行图标和界面设计2/36初识移动App设计第2页本章任务了解手机UI设计师需要掌握技能了解实际企业中App设计基础流程掌握图标基础概念掌握简易图标设计方法制作AppleWatchApp图标3/36初识移动App设计第3页目录APP设计基础流程移动UI设计相关理论讲解简易图标设计方法4/36初识移动App设计第4页APP设计基础流程5/36初识移动App设计第5页APP设计基础流程PM：产品经理UI：用户界面设计ID：交互设计GUI：图形用户界面设计6/36初识移动App设计第6页APP设计基础流程“需求”长这么7/36初识移动App设计第7页APP设计基础流程移动UI设计师要做什么呢？原型图界面设计图标设计切图标注8/36初识移动App设计第8页目录APP设计基础流程移动UI设计相关理论讲解简易图标设计方法9/36初识移动App设计第9页移动UI设计相关理论讲解移动UI三大操作系统

Android

iOS

WindowsPhone10/36初识移动App设计第10页移动UI设计相关理论讲解移动UI设计常见软件Photoshop

Illustrator

Axure11/36初识移动App设计第11页移动UI设计相关理论讲解移动UI常见储存格式12/36初识移动App设计第12页移动UI设计相关理论讲解尺寸相关术语概念和标准屏幕尺寸分辨率

分辨率不一样显示效果13/36初识移动App设计第13页移动UI设计相关理论讲解尺寸相关术语概念和标准屏幕密度：又叫做像素密度，是每英寸屏幕所拥有像素数屏幕密度越大，显示画面细节就越丰富Android系统不一样屏幕密度和尺寸14/36初识移动App设计第14页移动UI设计相关理论讲解设计中经常会碰到以下单位和定义px（Pixels）：对应屏幕上实际像素点dpi(DotsPerInch)：每英寸所能印刷网点数in(Inches)：英寸、屏幕物理长度单位mm（Millimeters）：毫米、屏幕物理长度单位在设计时主要考虑屏幕密度，以此为新建画布大小物理尺寸并不能作为设计尺寸来进行使用15/36初识移动App设计第15页课堂练习：移动UI设计相关理论讲解请问你自己手机是什么系统？屏幕密度是多少？将手机屏幕截图，导入到电脑中能够经过微信、qq等功效，将图片导入到电脑中注意原图与缩略图区分16/36初识移动App设计第16页目录APP设计基础流程移动UI设计相关理论讲解简易图标设计方法17/36初识移动App设计第17页简易图标设计方法图标概述图形化标识，英文缩写icon，它源自于生活中各种图形标识，是计算机应用图形化主要组成个别

开启图标18/36初识移动App设计第18页简易图标设计方法图标概述广义交通指示牌图形标志、男女公共厕所图形标志19/36初识移动App设计第19页简易图标设计方法图标概述狭义开启图标20/36初识移动App设计第20页简易图标设计方法图标分类按照图标属性能够分为开启图标栏图标小图标

iOS系统开启图标

Android系统开启图标21/36初识移动App设计第21页简易图标设计方法图标分类按照图标属性能够分为开启图标栏图标小图标栏图标22/36初识移动App设计第22页简易图标设计方法图标分类按照图标属性能够分为开启图标栏图标小图标小图标23/36初识移动App设计第23页简易图标设计方法图标分类按表现形式能够分为2D、3D2D格调3D格调24/36初识移动App设计第24页简易图标设计方法图标分类按设计格调能够分为像素图标、写实图标、扁平化图标手绘图标等像素图标写实图标、拟物图标25/36初识移动App设计第25页简易图标设计方法图标分类按设计格调能够分为像素图标、写实图标、扁平化图标手绘图标等扁平化图标手绘图标26/36初识移动App设计第26页简易图标设计方法使用何种格调图标关键取决于App需求和主要用户群体喜好在设计图标时候，不能天马行空进行格调定义，而是要考虑App整体定位和用户到底喜欢什么样格调简单阐述你手机中某一款App为何采取这么设计格调27/36初识移动App设计第27页简易图标设计方法接到一个设计icon任务

大家是怎样展开思维来进行设计呢？设计总监说：“你来做一个闹钟图标吧。”你该怎么做？28/36初识移动App设计第28页简易图标设计方法图标设计步骤29/36初识移动App设计第29页需求描述使用Photoshop制作AppleWatchApp图标实现思绪使用钢笔工具、形状工具勾勒轮廓使用直接选择工具配合转换点工具调整线锋经过形状之间相减、相交等细节刻画填充颜色，添加图标底座演示案例：

制作AppleWatchApp图标30/36初识移动App设计第30页需求描述使用Illustrator制作低面像素格调天气App开启图标实现思绪简单勾勒云朵、闪电形状使用钢笔工具或多边形工具制作低面像素格调三角形确定主色调，然后为每一个三角形填充颜色绘制投影，为背景增加渐变效果演示案例：

低面像素格调天气App开启图标设计31/36初识移动App设计第31页课堂练习：手机端常见图标设计需求描述使用Photoshop中矢量工具绘制图标实现思绪使用形状工具绘制主体形状使用钢笔工具，合理叠加形状32/36初识移动App设计第32页课堂练习：多彩格调电子设备图标设计需求描述使用Illustrator绘制多彩格调电子