02-乐动云课程项目-教育类iOS手机App设计-2

乐动云课程项目-教育类iOS手机App设计-2课程回顾教育类App相关理论乐动云课程项目需求分析&设计规划iOS系统界面设计规范回顾乐动云课程手机App首页设计乐动云课程详情页的设计2/48本章任务iOS系统启动图标设计规范回顾了解侧边栏导航与TAB导航掌握乐动云课程侧边栏页的制作方法掌握界面标注的方法3/48目录iOS系统启动图标设计规范回顾乐动云课程App启动图标设计侧边栏导航和TAB导航乐动云课程App侧边栏界面设计切图、标注规范及设计技巧4/48iOS系统启动图标设计规范回顾iOS系统图标规范采用圆角矩形默认一般采用顶部光源在设计的时候，圆角部分是不需要要进行设计的，这部分是通过程序来实现的5/48iOS系统启动图标设计规范回顾在设计iOS启动图标的时候，

可以将Photoshop中图层样式的光源统一成90度6/48iOS系统启动图标设计规范回顾为方便适配，iOS系统的启动图标存在着多种设计尺寸7/48尺寸（px）用途512*512AdHoc发布测试的证书iTunes数字媒体播放应用程序，是供Mac和PC使用的一款免费应用软件，能管理和播放数字音乐和视频57*57iPhone/iPodtouch的AppStore和主屏幕114*114高分辨率的iPhone4主屏幕72*72主屏幕，为了兼容iPad29*29Spotling和设置App50*50Spotling，为了兼容iPad58*58高分辨率的iPhone4的Spotling和设置App1024*1024在AppStore商场显示8/48iOS系统启动图标设计规范回顾在设计的时候，优先从1024*1024px开始设计尽量使用矢量工具或矢量软件进行绘制可能会印刷9/48iOS系统启动图标设计规范回顾设计启动图标时应充分考虑：是整个应用品牌的重要组成部分独特的，整洁的，打动人心的，让人印象深刻的在不同的背景以及不同的规格下都同样美观如果要考虑印刷，分辨率应该设置为300dpi为了考虑多尺寸适配，栏图标和小图标的尺寸都应该是双数10/48目录iOS系统启动图标设计规范回顾乐动云课程App启动图标设计侧边栏导航和TAB导航乐动云课程App侧边栏界面设计切图、标注规范及设计技巧11/48演示案例：

乐动云课程App启动图标设计需求描述为乐动云课程设计启动图标图标设计尺寸：1024×1024px分辨率：72ppi实现思路根据Logo设计启动图标遵守iOS系统启动图标的设计规范使用钢笔、形状工具绘制12/48目录iOS系统启动图标设计规范回顾乐动云课程App启动图标设计侧边栏导航和TAB导航乐动云课程App侧边栏界面设计切图、标注规范及设计技巧13/48侧边栏导航和TAB导航你需要设计一个含有许多页面和模块的页面，但是东西多的不能在一屏内显示，你该如何处理界面布局呢？14/48侧边栏导航和TAB导航

顶部TAB导航侧边栏导航底部TAB导航15/48侧边栏导航和TAB导航常见的手机界面导航有侧边栏导航和TAB导航侧边栏导航抽屉导航或抽屉栏16/48侧边栏导航和TAB导航常见的手机界面导航有侧边栏导航和TAB导航侧边栏导航侧边栏导航在手机端的重要性是为了解决手机界面太小的问题，在手机端界面中引入一个三条线的符号来作为侧边栏导航的入口，即“更多”按钮，也称汉堡包按钮17/48侧边栏导航和TAB导航常见的手机界面导航有侧边栏导航和TAB导航TAB导航又叫标签导航或标签栏18/48侧边栏导航和TAB导航常见的手机界面导航有侧边栏导航和TAB导航TAB导航官方推荐的标签栏最多只能有五个，当标签多于五个的时候，可将多出的标签收录到“更多”按钮中设计时还要考虑双系统下用户的使用习惯在实际工作中，有时会采用iOS的底部导航进行界面布局设计19/48侧边栏导航和TAB导航侧边栏导航、TAB导航的差异侧边栏导航TAB导航别称侧边栏、抽屉栏标签栏优势让主屏幕有更大的显示区域能容纳更多的分类条目增加和删减分类条目更容易直接放在界面上，简单直观用户使用方便，一目了然劣势需要有一个明显的标志来引导用户增加用户的学习成本需要多一个步骤才能找到分类信息侵占主屏幕显示区域只能容纳有限的几个分类条目增加和删减分类条目受限制适用范围适用于分类条目比较多的导航适用于分类条目比较少的导航Pad和web端比较常见20/48目录iOS系统启动图标设计规范回顾乐动云课程App启动图标设计侧边栏导航和TAB导航乐动云课程App侧边栏界面设计切图、标注规范及设计技巧21/48演示案例：

乐动云课程App侧边栏界面设计需求描述界面设计尺寸：750×1334px分辨率：72ppi字体：华文细黑或苹方实现思路将首页盖印后转化为智能对象，缩小放置在右侧使用文字工具罗列文字，注意大小和颜色使用形状工具绘制图标22/48目录iOS系统启动图标设计规范回顾乐动云课程App启动图标设计侧边栏导航和TAB导航乐动云课程App侧边栏界面设计切图、标注规范及设计技巧23/48切图、标注规范及设计技巧为什么要切图、标注？要对哪些元素进行切图、标注？24/48切图、标注规范及设计技巧APP界面组成元素文字：设计师需要设计好字号大小和颜色，程序员根据标注内容对文字内容进行文字输出形状：纯色填充的分割线、矩形按钮、正圆按钮、圆角矩形按钮等，可以由代码输出。设计师需要设计好相关颜色和尺寸图标：代码无法实现特殊形状，比如箭头、心形、星形等。图标需要设计师在PS中绘制完毕，然后切成小图片提供给程序员使用图片：代码无法实现图片。需要由设计师提供图片，裁切成合适大小，切图提供给程序员使用25/48切图、标注规范及设计技巧设计师在完成界面设计后，需要对界面进行合理标注，界面上需要标注的元素包括：所有控件的位置：一般标注左上角的坐标图片、可点击区域、按钮的尺寸文字的字号和字色线的宽度和颜色浮层或按钮的透明度百分比26/48切图、标注规范及设计技巧设计师在完成界面设计后，还需要对某些元素进行单独的切图：不需要进行切图：部分文字、形状、颜色等可以由代码直接实现出来27/48图中哪些部分是需要进行切图的？那些不需要？切图、标注工具Photoshop、Cutterman、马克鳗、parker、蓝湖、pxcook像素大厨等切图、标注规范及设计技巧28/48PxCook像素大厨特点&优势免费，易安装操作便捷、灵活支持PSD文件，可自动识别文字，颜色，距离等支持iOS、Android系统界面切图、标注操作，自动转换dp、px、pt等安装方法切图、标注规范及设计技巧29/48使用PxCook像素大厨标注基本操作方法打开示例项目智能标注生成尺寸标注生成文本样式标注生成区域标注切图、标注规范及设计技巧距离标注区域标注颜色标注文字标注30/48标注常见注意事项注意iOS、Android系统的选择，即标注单位的选择相同的控件元素只标一次即可小于最小点击尺寸的图标按钮需要在四周增加空白像素，即标注热区范围切图、标注规范及设计技巧31/48演示案例：

使用像素大厨对

乐动云课程手机App首页进行标注需求描述使用像素大厨对乐动云课程手机App首页进行标注实现思路新建iOS项目将psd源文件倒入像素大厨对文字、图片、距离、颜色的必要元素进行标注32/48课堂练习：

使用像素大厨对

乐动云课程详情页进行标注需求描述使用像素大厨对乐动云课程详情页进行标注实现思路新建iOS项目将psd源文件倒入像素大厨对文字、图片、距离、颜色的必要元素进行标注33/48使用PxCook像素大厨切图打开方法切图、标注规范及设计技巧34/48使用PxCook像素大厨切图基本操作方法选择输出类型Web、iOS、Android选择输出尺寸选择保存路径切图、标注规范及设计技巧35/48切图中常见的注意事项启动图标的切图方式切图、标注规范及设计技巧切图效果图36/48切图中常见的注意事项需要设计出按钮在各个状态下的样式，并切图切图、标注规范及设计技巧正常状态点击状态

不可点击状态按钮按钮按钮37/48切图中常见的注意事项需要设计出按钮在各个状态下的样式，并切图切图、标注规范及设计技巧38/48切图中常见的注意事项考虑图片未加载状态时的占位图片样式，并切图切图、标注规范及设计技巧39/48切图中常见的注意事项对于尺寸小于可点击范围尺寸的按钮，需要在四周增加空白像素，这时切图要与标注相互对应切图、标注规范及设计技巧40/48切图中常见的注意事项标签栏的切图方式切图、标注规范及设计技巧41/48切图中常见的注意事项全屏类切图

注意控制图片文件的大小切图、标注规范及设计技巧Tinypng42/48切图中常见的注意事项局部切图

注意切图要与标注相互对应切图、标注规范及设计技巧43/48切图中常见的注意事项注意换算关系其中iOS系统的双倍图可以与

Android系统的XHdpi相对应切图、标注规范及设计技巧44/48演示案例：

使用像素大厨对

乐动云课程手机App首页进行切图需求描述使用像素大厨对乐动云课程手机App首页进行切图只导出2x图片实现思路对psd源文件中的图层进行重命