1、iOS系统与Android系统图标设计规范课程回顾n APP设计的基本流程n 移动UI设计相关理论讲解n 简易图标的设计方法2/31本章任务n 掌握Android图标设计规范和设计方法n 掌握iOS图标设计规范和设计方法n 掌握双系统下启动图标设计的异同n 学会绘制App Store启动图标、Android系统电影启动图标、双系统下商店启动图标3/31目录n iOS系统图标设计规范n Android系统图标设计规范n 双系统下启动图标的设计4/31iOS系统图标设计规范n iOS图标概述 启动图标 栏图标 小图标5/31iOS系统图标设计规范n iOS系统图标规范l采用圆角矩形l默认一般采用顶
2、部光源l在设计的时候，圆角部分是不需要进行设计的，这部分是通过程序来实现的6/31iOS系统图标设计规范n 在设计iOS启动图标的时候，可以将Photoshop中图层样式的光源统一成90度7/31iOS系统图标设计规范n 为方便适配，iOS系统的启动图标存在着多种设计尺寸8/31尺寸（px）用途512*512Ad Hoc 发布测试的证书iTunes 数字媒体播放应用程序，是供Mac和PC使用的一款免费应用软件，能管理和播放数字音乐和视频57*57iPhone/iPod touch的App Store和主屏幕114*114高分辨率的iPhone4主屏幕72*72主屏幕，为了兼容iPad29*29
3、Spotling和设置App50*50Spotling,为了兼容iPad58*58高分辨率的iPhone4的Spotling和设置App1024*1024在App Store商场显示iOS系统图标设计规范9/31iOS系统图标设计规范n 在设计的时候，优先从10241024px开始设计n 尽量使用矢量图层或矢量软件进行绘制n 要考虑印刷设计要求10/31iOS系统图标设计规范n 设计启动图标时应充分考虑l是整个应用品牌的重要组成部分l独特的、整洁的、打动人心的、让人印象深刻的l在不同的背景以及不同的规格下都同样美观l如果要考虑印刷，分辨率应该设置为300dpil为了考虑多尺寸适配，栏图标和小图
4、标的尺寸都应该是双数11/31演示案例演示案例：App Store启动图标设计n 需求描述l为iOS系统制作启动图标l熟练掌握iOS系统启动图标的设计规范和技巧n 实现思路l新建1024x1024像素的画布l使用钢笔工具绘制毛笔头形状l使用布尔运算绘制图形l使用渐变工具填充颜色12/31课堂练习课堂练习：iOS系统商店类App启动图标设计n 需求描述l为iOS系统制作启动图标l熟练掌握iOS系统启动图标的设计规范和技巧n 实现思路l新建1024x1024像素的画布l使用钢笔工具绘制基础形状l使用布尔运算绘制图形13/31课堂练习课堂练习：iOS系统启动图标设计n 需求描述l为iOS系统制作启动
5、图标l熟练掌握iOS系统启动图标的设计规范和技巧n 实现思路l新建1024x1024像素的画布l使用钢笔工具绘制基础形状l使用布尔运算绘制图形14/31目录n iOS系统图标设计规范n Android系统图标设计规范n 双系统下启动图标的设计15/31Android系统图标设计规范n Android启动图标概述 启动图标 操作、工具栏图标 小图标16/31Android系统图标设计规范n Android系统启动图标及规范Android系统启动图标尺寸48x48dpldpi36*36pxmdpi48*48pxhdpi72*72pxxhdpi96*96pxxxhdpi144*144pxGoogle
6、 Play 512*512px17/31Android系统图标设计规范n Android系统比较开放，并没有对启动图标在风格上有过多的硬性要求n 原生态的Android系统图标风格特征l使用一个独特的剪影l使用三维的正面视图l看起来稍微有点从上往下的透视效果，使用户能看到一些景深 原生Android系统启动图标样式18/31Android系统图标设计规范n Android系统图标栏图标及规范19/31Android系统图标设计规范n Android系统图标栏图标及规范设计尺寸焦点区域尺寸Android系统手机操作栏图标32x32dp24x24dpldpi24x24px18x18pxmdpi32
7、x32px24x24pxhdpi48x48px36x36pxxhdpi64x64px48x48pxxxhdpi96x96px72x72px20/31Android系统图标设计规范n Android系统小图标及规范21/31Android系统图标设计规范n Android系统小图标及规范设计尺寸焦点区域尺寸Android系统小图标设计尺寸16x16dp12x12dpldpi12*12px9*9pxmdpi16*16px12*12pxhdpi24*24px18*18pxxhdpi32*32px24*24pxxxhdpi48*48px36*36px22/31演示案例演示案例：Android系统电影启
8、动图标设计n 实现思路l新建1024x1024像素的画布l使用钢笔工具绘制整体形状，通过布尔运算剪切右下角的切口和两边的矩形镂空部分l使用形状工具、钢笔工具通过波尔运算绘制高山白日形状l使用图层样式设置内阴影以增加浅色高光效果23/31课堂练习课堂练习：Android系统启动图标设计n 需求描述l制作Android系统启动图标l熟练掌握Android系统启动图标的设计规范和技巧n 实现思路l使用钢笔工具绘制基础形状l使用布尔运算绘制图形24/31目录n iOS系统图标设计规范n Android系统图标设计规范n 双系统下启动图标的设计25/31双系统下启动图标的设计n 启动图标在双系统下是可以
9、完全一样的 iOS系统启动图标 Android系统启动图标26/31双系统下启动图标的设计n 考虑双系统下启动图标的差异化表现 设计师提交的稿件 iOS系统启动图标 Android系统启动图标27/31演示案例演示案例：双系统下商场启动图标的设计l先绘制iOS系统启动图标p1024x1024像素p绘制一个圆角180度的1024像素的圆角矩形p使用钢笔工具和矢量形状绘制主体形状，填充合适的颜色p使用钢笔工具绘制阴影，并调整图层的不透明度l再更改为Android系统启动图标p在iOS系统启动图标的基础上，复制文件，重命名p将图像尺寸缩小为512x512像素p重新调整圆角正方形的数值p对其余图层进行图层蒙版剪切28/31本章总结n iOS系统启动图标的设计规范是什么？n Android系统启动图标的设计规范是什么？n 原生的Android启动图标的圆角与iOS系统启动图标圆角哪个更大？29/31本章作业本章作业n 完成本节课所有的演示案例、课堂练习n 临摹下列按钮和图标lAndroid系统启动图标设计liOS系统启动图标设计n 请教员根据班级情况布置预习30/31
