第五章8-使用Ps进行App界面设计的辅助工具介绍-备课笔记

编号28编号28-01学习任务八、App界面设计的辅助工具介绍一、课程说明与要求1.课程说明本次课主要讲解App界面设计的辅助工具介绍，包括切图插件、尺寸标注插件及图片优化等三方面的内容，当界面设计定稿之后，UI设计师需要对设计稿进行切片并标注，以文件夹的形式提交到原型设计师受众提供给开发工程师或原型设计师，便于和开发人员进行交接，在实际工作中，不清楚该怎么切图和标注的时候多和开发人员沟通交流，良好的沟通才是解决问题的方法。在项目管理中，最重要的一个环节就是沟通，通过沟通不断的调动相关人员的创造性及主动性，发挥沟通的协调功能，也是构建和谐团队的重要手段，这样可以提高制作人员的工作效率，更好的促进团队的持续、健康、平稳发展；……………【思政融入（沟通协调重要性，提升团队凝聚力）】2.工具材料准备说明本课的作业作品实践需要同学们提前准备软件和素材文件，教师将以下界面设计辅助工具介绍的需准备软件素材发到微信群中。工具材料备注cutterman每台电脑安装pxcook每台电脑安装切图及标注素材案例每人下载二、学情分析与课程导入1.学情分析本课程授课对象为艺术专业学生，学生没有接触过关于标注等插件的使用方法，以及在交互设计方面应用的知识，普遍认知不强，为此我们强调进行引导教学，融入市场多元化理念。另一方面，学生对新兴的事物接受比较快，对所选择的专业感兴趣，获取知识的主动性较强。2.课程导入我们讲设计稿的切图和尺寸标注，那么ios、Android平台如何切图，切图需要切几套，哪些需要切图编号28-0编号28-02三、理论知识讲解（一）PS-一键切图………【重点】1.文件整理命名项目名称+设计师名字+日期文件夹包括：切图，标注图，效果图2.切图插件（Cutterman）打开PS>“窗口”菜单下>“扩展功能”里的“Cutterman切图神器”，打开面板；这里主要讲针对App移动端的一些导出功能。插件特点：●支持iOS平台●支持Android平台●支持多个图层合并导出，也可以逐一导出●按固定尺寸导出●利用图层蒙版进行切图导出编号28编号28-033.页面切图（1）以750x1334px作为设计稿标准尺寸：●便于向上和向下适配●设计Android版本只需做小的设计调整，提升设计效率编号28编号28-04●从中间尺寸向上和向下适配的时候界面调整的幅度最小，最方便适配。●大屏幕时代依然以小尺寸作为设计尺寸，会限制设计师的设计视角。

●设计安卓版本时只需做最小的设计调整，提升设计效率。（3）哪些需要切图只要是无法用代码来实现和表达出来的，就需要切图（比如图标、图片）（4）切图需要几套●ios版本在实际工作中，iOS只需要切2套图就可以，分别为：@2x和@3x●Android版本一般情况下，我们提供2套切图资源就可以满足原型设计师或者开发工程师的适配，分别是XHDPI、XXHDPI2套切图资源。编号28编号28-05（5）切图的命名在图片的命名中尽量不要有中文、特殊符号以及空格，使用下划线进行连接。在命名中很多可以是缩写，开发人员一般也是按照这样来分类。4.页面切图注意事项（1）同一模块内，切图大小应保持一致（2）切图输出大小必须保持为偶数（3）为了减小包的大小，切图尽量压缩后再提交给开发人员编号28编号28-06（二）尺寸标注插件………【难点】当界面设计定稿之后，我们需要对界面进行标注给原型设计师或者开发工程师，便于原型设计和开发工程师在还原界面的时候进行参考。1、常用插件（1）Markman是一款基于AdobeAiR平台的一款标注工貝，需要先安装Adobeair，支持Windows和mac平台。（2）AssistorPS独立于Photoshop，可以提高切图标记的效率及速度，参考线辅助，圆角大小，按固定间隔复制图层功能还是很好用的。（3）Pxcook它是基于AdobeAiR的跨平台桌面应用程序，是一款切图标注设计工具软件。优点是将标注、切图这两项集成在一个软件内完成，支持Windows和Mac双平台。编号28-编号28-07（1）界面介绍软件的标注分为设计模式和开发模式：●设计模式，主要是设计师来进行智能标注和手动标注，我们建议只标注出交互设计师需要特殊注意的部分就可以了，这样可以大大减少我们的工作量，同时也不会影响设计图的整体性，便于观看。●开发模式，主要用于交互设计师通过点选的方式直接查看设计稿中各个元素的尺寸，间距，以及样式等等。同时，PxCook也为开发设计师自动生成了对应平台的代码，可以大大加快工程师的开发效率。（2）标注功能尺寸标注文本样式标注区域标注元素内部间距标注矢量图层样式编号28编号28-08（3）标注数值的修改所有尺寸数值都可手动更改，自由度非常高。（4）单位换算Px即Web或PC标注单位。Dp即作为Android的标准单位。Pt作为iOS的标准单位。3、页面标注需要标注的内容：（1）文字：字体大小、字体颜色（2）图标：大小、区域（3）布局控件属性：控件宽高、填充颜色、圆角大小（4）间距：控件之间的距离、左右边距（5）段落文字：字体大小、字体颜色、行距注：标注颜色格式是使用16进制，还是RGB，需要和开发工程师商量，按照开发习惯，一般采用16编号28编号28-09【互动参与讨论，页面标注的内容，教师做总结】（三）图片压缩优化TinyPNG下载APP安装时，除了网络环境，影响加载速率和用户体验的最关键因素就是文件大小了。减小文件大小的方法有很多，大多数的压缩方式，图片会变得模糊不清，目前提供压缩图片压缩技术的平台很多，TinyPNG是目前压缩速度和压率最好的。使用时只需要打开网站，把要压的图片上传，等待压缩完成后下载就可以。编号28编号28-10（一）布置训练任务任务1：从提供的案例作品进行不同平台的切图任务2：熟悉切图的命名方法及常用控件的命名（二）实战项目案例……………【重点】从提供的案例中进行标注操作，加深对标注方法的理解教师重点指导：pxcook软件的基本操作；标注的要点及注意事项。【实训指导：学生初次接触标注插件及App切图的方法，并进行设计制作实践，教师应多引导，帮助学生分析软件操作时的要点，指导学生完成设计稿首页的尺寸标注】五、课堂总结今天，我们主要学习并了解使用PS插件进行切图以及尺寸标注的方法，也结合相关理论知识做了一些练习，想必同学们通过练习对不同平台的切图和命名方法有了一定的了解和掌握。希望同学们课后继续对设计完成的作品进行切图和标注方面的操作练习，这样有助于你们对知识点的更深入的理解，便于和原型设计开发人员进