移动UI界面设计01 初识移动UI设计ppt课件.pptx
初识移动App设计,课程目标,了解UI行业了解移动端三大操作系统了解手机App的设计流程掌握iOS、Andorid系统的设计规范熟练使用PS进行图标和界面的设计,2/36,本章任务,了解手机UI设计师需要掌握的技能了解实际企业中App的设计基本流程掌握图标的基本概念掌握简易图标的设计方法,制作Apple Watch App图标,3/36,目录,APP设计的基本流程移动UI设计相关理论讲解简易图标的设计方法,4/36,APP设计的基本流程,5/36,APP设计的基本流程,PM：产品经理UI：用户界面设计ID：交互设计GUI：图形用户界面设计,6/36,APP设计的基本流程,“需求”长这样,7/36,APP设计的基本流程,移动UI设计师要做什么呢？原型图界面设计图标设计切图标注,8/36,目录,APP设计的基本流程移动UI设计相关理论讲解简易图标的设计方法,9/36,移动UI设计相关理论讲解,移动UI三大操作系统,Android,iOS,Windows Phone,10/36,移动UI设计相关理论讲解,移动UI设计常用软件,Photoshop,Illustrator,Axure,11/36,移动UI设计相关理论讲解,移动UI常见储存格式,12/36,移动UI设计相关理论讲解,尺寸相关的术语概念和标准屏幕尺寸分辨率,分辨率不同的显示效果,13/36,移动UI设计相关理论讲解,尺寸相关的术语概念和标准屏幕密度：又叫做像素密度，是每英寸屏幕所拥有的像素数屏幕密度越大，显示画面细节就越丰富,Android系统不同的屏幕密度和尺寸,14/36,移动UI设计相关理论讲解,设计中经常会遇到如下的单位和定义px（Pixels）：对应屏幕上的实际像素点dpi(Dots Per Inch)：每英寸所能印刷的网点数in(Inches)：英寸、屏幕物理长度单位mm（Millimeters）：毫米、屏幕物理长度单位在设计时主要考虑屏幕密度，以此为新建画布的大小物理尺寸并不能作为设计尺寸来进行使用,15/36,课堂练习：移动UI设计相关理论讲解,请问你自己的手机是什么系统？屏幕密度是多少？,将手机屏幕截图，导入到电脑中可以通过微信、qq等功能，将图片导入到电脑中注意原图与缩略图的区别,16/36,目录,APP设计的基本流程移动UI设计相关理论讲解简易图标的设计方法,17/36,简易图标的设计方法,图标的概述图形化的标识，英文缩写icon，它源自于生活中的各种图形标识，是计算机应用图形化的重要组成部分,启动图标,18/36,简易图标的设计方法,图标的概述广义,交通指示牌图形标志、男女公共厕所图形标志,19/36,简易图标的设计方法,图标的概述狭义,启动图标,20/36,简易图标的设计方法,图标的分类按照图标属性可以分为启动图标栏图标小图标,iOS系统启动图标,Android系统启动图标,21/36,简易图标的设计方法,图标的分类按照图标属性可以分为启动图标栏图标小图标,栏图标,22/36,简易图标的设计方法,图标的分类按照图标属性可以分为启动图标栏图标小图标,小图标,23/36,简易图标的设计方法,图标的分类按表现形式可以分为2D、3D,2D风格,3D风格,24/36,简易图标的设计方法,图标的分类按设计风格可以分为像素图标、写实图标、扁平化图标手绘图标等,像素图标,写实图标、拟物图标,25/36,简易图标的设计方法,图标的分类按设计风格可以分为像素图标、写实图标、扁平化图标手绘图标等,扁平化图标,手绘图标,26/36,简易图标的设计方法,使用何种风格的图标关键取决于App的需求和主要用户群体的喜好在设计图标的时候，不能天马行空的进行风格定义，而是要考虑App的整体定位和用户到底喜欢什么样的风格,简单阐述你手机中的某一款App为什么采用这样的设计风格,27/36,简易图标的设计方法,接到一个设计icon的任务大家是怎样展开思维来进行设计的呢？设计总监说：“你来做一个闹钟的图标吧。”你该怎么做？,28/36,简易图标的设计方法,图标的设计步骤,29/36,需求描述使用Photoshop制作Apple Watch App图标实现思路使用钢笔工具、形状工具勾勒轮廓使用直接选择工具配合转换点工具调整线锋通过形状之间的相减、相交等细节刻画填充颜色，添加图标底座,演示案例：制作Apple Watch App图标,30/36,需求描述使用Illustrator制作低面像素风格天气App启动图标实现思路简单勾勒云朵、闪电的形状使用钢笔工具或多边形工具制作低面像素风格的三角形确定主色调，然后为每一个三角形填充颜色绘制投影，为背景增加渐变效果,演示案例：低面像素风格天气App启动图标设计,31/36,课堂练习：手机端常用图标设计,需求描述使用Photoshop中的矢量工具绘制图标实现思路使用形状工具绘制主体形状使用钢笔工具，合理叠加形状,32/36,课堂练习：多彩风格电子设备图标设计,需求描述使用Illustrator绘制多彩风格电子设备图标实现思路使用钢笔工具、形状工具绘制主体形状填充相应的颜色修正细节,33/36,本章总结,手机UI设计师需要掌握什么样的技能？实际企业中App的设计基本流程是怎么样的？简易图标应该怎么设计？,34/36,
