移动UI界面设计-01-初识移动UI设计

初识移动App设计课程目标了解UI行业了解移动端三大操作系统了解手机App的设计流程掌握iOS、Andorid系统的设计规范熟练使用PS进行图标和界面的设计2/36本章任务了解手机UI设计师需要掌握的技能了解实际企业中App的设计基本流程掌握图标的基本概念掌握简易图标的设计方法•制作AppleWatchApp图标3/36目录APP设计的基本流程移动UI设计相关理论讲解简易图标的设计方法4/36APP设计的基本流程5/36APP设计的基本流程PM：产品经理UI：用户界面设计ID：交互设计GUI：图形用户界面设计6/36APP设计的基本流程“需求”长这样7/36APP设计的基本流程移动UI设计师要做什么呢？原型图界面设计图标设计切图标注8/36目录APP设计的基本流程移动UI设计相关理论讲解简易图标的设计方法9/36移动UI设计相关理论讲解移动UI三大操作系统•Android•iOS•WindowsPhone10/36移动UI设计相关理论讲解移动UI设计常用软件•Photoshop•Illustrator•Axure11/36移动UI设计相关理论讲解移动UI常见储存格式12/36移动UI设计相关理论讲解尺寸相关的术语概念和标准屏幕尺寸分辨率•分辨率不同的显示效果13/36移动UI设计相关理论讲解尺寸相关的术语概念和标准屏幕密度：又叫做像素密度，是每英寸屏幕所拥有的像素数屏幕密度越大，显示画面细节就越丰富•Android系统不同的屏幕密度和尺寸14/36移动UI设计相关理论讲解设计中经常会遇到如下的单位和定义px（Pixels）：对应屏幕上的实际像素点dpi(DotsPerInch)：每英寸所能印刷的网点数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制作AppleWatchApp图标实现思路使用钢笔工具、形状工具勾勒轮廓使用直接选择工具配合转换点工具调整线锋通过形状之间的相减、相交等细节刻画填充颜色，添加图标底座演示案例：制作AppleWatchApp图标30/36演示案例需求描述使用Illustrator制作低面像素风格天气App启动图标实现思路简单勾勒云朵、闪电的形状使用钢笔工具或多边形工具制作低面像素风格的三角形确定主色调，然后为每一个三角形填充颜色绘制投影，为背景增加渐变效果演示案例：低面像素风格天气App启动图标设计31/36课堂练习课堂练习：手机端常用图标设计需求描述使用Photoshop中的矢量工具绘制图标实现思路使用形状工具绘制主体形状使用钢笔工具，合理叠加形状32/36课堂练习课堂练习：多彩风格电子设备图标设计需求描述使用Illustrator绘制多彩风格电子设备图标实现思路使用钢笔工具、形状工具绘制主体形状填充相应的颜色修正细节33/36本章总结手机UI设计师需要掌握什么样的技能？实际企业中App的设计基本流程是怎么样的？简易图标应该怎么设计？34/36