《移动终端UI设计》教学ppt课件 09切图与标注.pptx

模块9 切图与标注切图工具和标注工具切 图标 注为一款APP首页页面切图CONTENT学习目标1、了解切图工具、标注工具的类型、特点及使用方法。2、熟练掌握在 UI 设计中切图的策略、方法和技巧。3、熟练掌握在 UI 设计中制作标注的策略、方法和技巧。PART 01切图工具和标注工具59.1.1 Cutterman切图工具Cutterman是目前用得比较多的一款切图工具，也是现在主流的设计师切图利器。其主要功能如下。（2）支持 iOS平台输出（3）支持 Android平台输出（4）支持各种图片格式输出（7）跨平台，多版本支持 Mac系统、Windows系统（6）使用固定尺寸输出统一大小的icon（5）多个图层合并、单独输出（1）一键切图69.1.1 Cutterman切图工具Cutterman 不支持绿色免安装版本 Ps，推荐安装官方完整版 Photoshop CC 及以上版本。到Cutterman 官方地址 https:/ 进行下载、安装就可以使用了。其应用界面如图 9-1 所示。79.1.1 Cutterman切图工具9.1.2 Assistor PS切图标记软件Assistor PS 是一款专业的切图标记软件，同时兼容 Windows 系统和 Mac 系统。它除了可以一键全自动切图外，还具有创建引导框、参考线、单位转换器、取色器、圆角矩形转换，按照固定间隔复制图层等功能，可以对设计师的工作提供非常大的便利。Assistor PS 应用界面如图 9-2 所示。89.1.1 Cutterman切图工具与其他切图标记软件不同的是，Assistor PS 是完全独立于 Photoshop 本身的，Assistor PS 旨在提高切图标记的效率及速度。它虽然不是一个插件，但是它与 Photoshop 是连通的，当在 Photoshop 中选择一个图层后，即可使用它的功能。其主要功能如下。（1）轻松创建标记文档，一键导出图层。（2）快速转换单位数值。（3）快速创建参考线。（4）圆角矩形调整。（5）按照固定的间隔复制图层。99.1.3 PxCook 工具CABDPxCook 的标注功能也是很强大的，它的优点在于将标注、切图这两项设计集成在一个软件内，支持 Windows 和 Mac 平台。通过简单的拖曳点选就可以实现自动标注功能，无论用 Photoshop，还是用Sketch 设计都可以。值得注意的一点是 PxCook 可以生成前端代码，对设计师来说非常有帮助。官网下载地址为 http:/ 9-3 所示。PxCook（像素大厨）既是一款标注工具，也是非常好用的切图工具。它的切图功能需要远程连接 Ps，然后与 Cutterman 一样，只需要单击一个按钮，其就自动输出需要的各种各样的图片，并可以对切片进行无损缩放。同时支持对图层样式的缩放。109.1.3 PxCook 工具PART 02切 图129.2.1 APP切图命名规范1.规范命名的意义（1）自身层面。（2）团队层面。（3）开发层面。139.2.1 APP切图命名规范2.命名格式程序开发环境都是使用英文的，所以切图命名全部用英文字母。一个大型项目会分为很多模块，每个模块由不同的设计师来独立完成，还会有人专门管理公共的组件，如 tabbar、navbar等，这种情况下就会分为两种切图，一种是通用类型的切图，还有一种就是各个模块特有的切图。注意：命名中不能含有空格，为了避免麻烦，全部使用小写英文字母是最基本的规则。149.2.1 APP切图命名规范通用切片命名格式为：组件 _类别_功能 _状态2x.png。例如，设置标签栏中的图标为主页默认图标，命名为：tabbar_icon_home_default2x.png。这样从文件名就可以知道当前图所在的位置，并且可以知道是哪一张图，比较直观。模块特有切图命名规则为：模块 _类别 _功能 _状态2x.png，可以命名为：mail_icon_search_pressed2x.png。有些时候，可能一个单词并不能清楚地描述功能。例如，有两个名字相同的搜索图标，大小不一，这种情况就可以这样命名：mail_icon_search_big_default2x.png，我们的原则就是清晰地表达出切片的具体内容并没有重复的名称。159.2.1 APP切图命名规范3.常用缩写如果所有命名都写为全称，那么名字会特别长，所以行业内会将一些常用的英文单词进行缩写。至于怎样缩写，只要整个团队能够达成共识并输出一份缩写清单，则任何缩写规则都是可以的。表 9-1和表 9-2提供了一些命名时常用的英文单词列表，在切片命名时可以参考使用。169.2.1 APP切图命名规范179.2.2 切图注意事项输出格式尺寸为偶数最小点击区域问题为了减小包的大小，所有切图尽量压缩后再发给开发人员1234189.2.3 通用切图法Cutterman 是 Photoshop 的一款插件，需要事先下载安装，可以去网站上查看相关的教程，在此不再赘述。1.图标切图（1）在 Photoshop 中打开素材文件“美食主界面.psd”，执行“窗口”“扩展功能”“Cutterman-切图神器”命令，启动 Cutterman 工具，如图 9-4 所示。提示：可以分别为 iOS、Android、Web 切图，应该先选择切哪种系统下的，然后选择切哪种分辨率的。199.2.3 通用切图法（2）设置图标应用类型为 iOS，默认将它设置为 2X 的分辨率，输出 iOS 的图为 2X 和 3X 两种尺寸。单击“设置”按钮，在打开的界面中可以设置其他参数，如图 9-5 所示。209.2.3 通用切图法（3）设置图标应用类型为 Android，输出 Android 的图为 HDPI、XHDPI、XXHDPI、XXXHDPI 四种尺寸。单击“设置”按钮，在打开的“设置”界面中选中“输出 mipmap”复选框，可以将图片存储于mipmap 夹，否则默认存储于 Drawable 文件夹下，如图 9-6 所示。219.2.3 通用切图法（4）按 Shift 键选中所有图标所在的层，如图 9-7 所示。单击“Cutterman”面板上的“导出选中图层”按钮，即可切出图标，并存储到指定的 moveui 文件夹中。（5）单击图 9-7 中的文件夹按钮，查看输出的切图，得到如图 9-8 所示的文件夹与文件，并存储到指定的 moveui 文件夹中。输出 iOS 图标为两种类型，Android 图标为四种类型，文件名为 Photoshop 中图层的名称，iOS 图标文件名自动添加了分辨率类型。注意：在正式切图时，图层名称需要修改为小写英文字母，这样生成的图片文件名也就是对应的英文，程序设计人员在使用时就不用再修改了。229.2.3 通用切图法239.2.3 通用切图法249.2.3 通用切图法2.顶部栏目的背景切图顶部导航栏如果是渐变样式，切图只需要切一小条，程序设计人员使用时平铺拉伸就可以了；如果是单一颜色，也可以不用切图，只要标注颜色就可以了；但如果是花纹背景，就必须切整条导航栏。（1）合并图层切图。以“流量银行”界面顶部导航栏为例，该部分由三个图层构成，切图时可以将三个层同时选中，再选中“Cutterman”面板上的“合并导出选中的图层”复选框，如图 9-9 所示。单击“导出选中图层”按钮，就可以输出想要的图片了。合并后以图层名称“管理”命名图片文件名，如图 9-10所示。259.2.3 通用切图法269.2.3 通用切图法（2）编组切图。选中“Cutterman”面板上的“合并导出选中的图层”按钮，在 Photoshop 中将三个图层进行编组并放入“导航栏”组中，切图时选中这个组，单击“导出选中图层”按钮，同样可以得到想要的图片，如图 9-11 所示。提示：此时输出的文件是以组名称“导航栏”来命名的，注意在正式切图时，也要修改成英文字母。279.2.3 通用切图法3.固定大小切图有些时候，我们希望输出的图不是原始尺寸，而是某一固定的尺寸，可以通过设置面板上的“固定尺寸”输入需要的宽和高，单击“导出”按钮。此时图片会根据设置的宽和高居中显示，四周留白。也可以利用遮罩切图，如图 9-12 所示，设置“固定尺寸”为“4444”像素，选中图标所在的层，单击“遮罩”按钮。此时会为选中的每一层添加遮罩层，并命名为特殊的名称“#”，同时为其进行编组。注意：若设置的宽和高小于图片的原始尺寸，则会对输出的图像进行缩放。289.2.3 通用切图法299.2.3 通用切图法在执行导出命令之前，先将各编组修改成规范的名称，接下来取消选中“合并导出选中的图层”复选框。单击“导出选中图层”按钮完成切图。此时查看输出文件如图 9-13 所示，其中，2X 图的大小是 44 像素 44 像素，而 3X 图的大小是 2X 图的大小 1.5 倍，即 66 像素 66 像素。309.2.4 Android点九切图法1.什么是点九切图点九切图法是 Android一种特殊的图片格式，将图片分成 9个部分（九宫格），分别为 4个角，4条边，以及一个中间区域，如图 9-14所示。上方区域 2表示横向拉伸的区域，左边区域 4表示纵向拉伸的区域，下方区域 8表示横向显示内容的区域，右方区域 6表示纵向显示内容的区域。其中，1、3、5、7、9四个角和中心内容能保持等比例放大和缩小而不影响其原始宽高比例，可以保持边框线、圆角等不变形。用这种方法切图的文件，其文件扩展名为“.9.png”，所以称为点九切图法。提示：点九图灵活度大，可复用，程序包少，程序的运行效率高。319.2.4 Android点九切图法使用点九切图法，只用一张点九图去适配不同的分辨率即可，而不需要每个都单独制作一张图片，从而大幅减少了安装包的大小。而且程序不需要进行专门的处理就可以实现其拉伸，也减少了代码量和开发工作量。图 9-15 所示为原图拉伸比较的效果图。注意：普通切图应用效果无论是圆角还是边框线都发生了变形，而点九切图却能很好地保持原图效果。329.2.4 Android点九切图法2.基本形状点九切图（1）使用“圆角矩形工具”绘制圆角矩形，放大到 800%，添加参考线，如图 9-16（a）所示。使用“铅笔工具”设置其大小为“1 像素”，颜色为纯黑色“#000000”（必须是纯黑）。在圆角矩形的可拉伸部位绘制直线，如图 9-16（b）所示。339.2.4 Android点九切图法（2）存储为 Web 所用格式，选择 png-24，存储时手动将后缀名改为“.9.png”。在 Android 开发应用过程中，会在标黑线处进行缩放，而不会影响到没有标黑线处的效果，长短、宽高、大小变化都可以保证图片的原始效果。不用担心黑线，程序会自动把“*.9.png”图片边缘的黑线去掉，如图 9-17 所示。349.2.4 Android点九切图法3.下拉框点九切图下拉框一般样式为圆角矩形，带有单色或过渡颜色的背景，最主要的是带有一个下拉箭头，其主要特点是宽度多变，且下拉箭头位置不变。使用点九切图可先将图形分成两个部分，不参与拉伸的带箭头部分，只标注了内容填充区域，保持原效果；另一部分制作 1 像素黑线，如图 9-18 所示，应用时，程序员会用两张图完美拼合成任意宽度的下拉框。359.2.4 Android点九切图法4.聊天背景切图聊天背景图如图 9-19 所示，要保证四个圆角及右边三角形不变。横向拉伸时，保证四个圆角不变即可，所以只需标注圆角以外的区域。注意：纵向拉伸时，要保证三角区域及圆角不变，所以需要在三角区域及圆角区域以外进行标注。369.2.4 Android点九切图法绘制圆角矩形，再使用“钢笔工具”设置“合并形状”为圆角形状，添加三角形状。规划出可拉伸区域和内容显示区，使用“铅笔工具”绘制 1 像素黑线，如图 9-20 所示。保存为.9.png 文件。379.2.4 Android点九切图法5.复杂背景切图当我们遇到有纹理的背景或按钮时，切图原则为：找到纹理的规律，用最小的切图去平铺。如图 9-21所示的按钮，我们的目标是把按钮分成三段，保留左右圆角部分，找到中间纹理可复用平铺的部分，同时确保中间纹理可以与左右两张图无缝连接，这样按钮的长度就变成可控的了，其可以适用于不同的场景。PART 03标 注399.3.1 了解标注大部分设计师标注完成后的界面如图 9-22 所示，标注的信息太多且杂乱无章，将这样的标注直接给程序员后，程序员是崩溃的。409.3.1 了解标注图 9-22 中的标注虽然仔细标注了每个元素的大小和颜色值等，但没有任何的视觉逻辑导向，更没有 将视觉信息一目了然地展示给程序员。程序员在处理界面构架时都是一块一块地进行排布划分的，最后再 来实现视觉的样式还原。所以设计师应该按照类型去完成标注，先标注每个模块的间距、字体颜色和大小，再标注布局和演示。在程序开发界面之前，设计师会和程序员进行沟通，将产品的常用设计规范梳理出来。注意：为了加强组件 的可复用性，按钮控件样式会单独进行标注，另外还会把可复用的组件标注出来，并细分到每个状态。这些文档都会共享在服务器上，以方便设计师和程序员进行调用。419.3.1 了解标注通常我们需要标注的内容有：（1）文字：字号、颜色。（2）段落文字：字号、颜色、行距。（3）布局控件属性：控件宽高、背景色、透明度、描边、圆角大小。（4）列表：列表高度，列表颜色，列表内的上、下、左、右间距。（5）间距：控件之间的距离，左、右边距。（6）全部属性：导航栏文字字号、颜色，左、右边距，默认间距等。429.3.2 编辑制作标注1.创建标注项目（1）这里使用 PxCook作为标注工具，启动 PxCook，执行“项目”“新建项目”命令，弹出“创建项目”对话框，选择适应环境 iOS、Android或 Web，单击“创建本地项目”按钮，如图 9-23所示。439.3.2 编辑制作标注（2）把已经设计好的 UI 界面的 PSD 文件拖曳到标注项目内容区，如图 9-24 所示，即可添加标注文件，标注项目就创建完成了。449.3.2 编辑制作标注（3）PxCook 工具有两种标注模式，一种是设计模式，为默认标注模式；另一种是开发模式，当对界面元素进行标注时，同时会产生相应的程序代码，方便程序员的设计开发。如图 9-25 所示，设置标注单位为“px”，测量数据设置为“取整”，选中“单位”复选框，使标注数据带有单位。459.3.2 编辑制作标注2.界面框架标注为了让标注变得有条理，设计师首先会通过制作框架标图来展示界面，即需要将界面的整体布局标注清楚，包括界面顶部导航栏、主要内容区、界面底部导航区，明确界面布局要求的具体细节，如图 9-26所示。对于一个 APP 中的其他界面，相同的布局可以直接参照相同布局执行，不同的界面布局，再另做标注。469.3.2 编辑制作标注保存标图。标注完成后，执行“项目”“导出标注”“当前面板（.png）”命令，将标注文件导出，如图 9-27 所示。也可以保存为后缀为 pxcp 的项目文件，方便设计师与程序员进行修改。479.3.2 编辑制作标注3.功能菜单和按钮标注界面上的图标按钮需要标注其大小、颜色、左右边距及背景颜色。单击按钮需要标注其大小、填充颜色及圆角半径，按钮文本，文本字体、字号、颜色、对齐方式等，如图 9-28 所示。489.3.2 编辑制作标注底部导航按钮需要标注整体大小及背景颜色，图标按钮标注大小、颜色、间距等，标题文本同样需要标注字体、字号、颜色及对齐方式。如图 9-29 所示为界面底部导航按钮标注。499.3.2 编辑制作标注4.间距标注间距标注是指专门标注控件之间的距离、左右边距、文本块间距等的标注，如图 9-30 所示。控件的大小及颜色等都不需要在此处标注，所以这种标图适用于辅助程序员对界面进行排版布局。509.3.2 编辑制作标注5.文字标注专门对界面中涉及的文字进行标注，包括文字的字体、字号、颜色及对齐方式等，段落文字还要标注其行距，如图 9-31 所示。PART 04为一款APP首页页面切图529.4.1 切图分析对目标界面进行分析，在如图 9-32 所示的界面中，有些图形是可以拉伸或直接用代码写出来的。例如，色块、线条、圆形和矩形类的图形，可以直接通过代码来实现，就不需要生成切图。除此之外，还有一些不规则的图形和图片，如界面顶部的 Banner 图和图标等，这些是不可以直接用代码写出来的，只能通过切图来实现开发。观察图 9-32 所示界面的下部，该区域包含文字、图标、圆形、矩形和一些分隔线。其中，图标是需要切图的；文字只需要标注字体、字号和颜色值；日历数字的圆形背景可以进行开发，只需要标注尺寸和颜色值即可；分隔线也可以进行开发，只需要标注描边的粗细值及线条长度值和颜色值即可。注意：注意这些元素都需要标注尺寸、位置及间距。539.4.2 切图实战1.准备切图工具启动 Photoshop，打开素材文件“首页切图.psd”。执行“窗口”“扩展功能“Cutterman切图神器”命令，准备切图工具。选择“Cutterman”面板上的“iOS”选项，选中“3X”“2X”分辨率，再选中“Android”选项，同时选中“HDPI”“XHDPI”“XXHDPI”“XXXHDPI”四个类型。549.4.2 切图实战2.界面顶部切图界面顶部包含图标、标题文字和一张 Banner 图，其中图标和 Banner 图需要进行切图处理，标题文字只需要标注字体、字号和颜色值即可，同时还要标注这些元素的尺寸、位置及间距等。如图 9-33 所示，选中两个图标所在的层，选中两个 Banner 图层，单击“导出选中图层”按钮，将切好的图保存到指定的文件夹中。559.4.2 切图实战内容区域包含四个由圆角矩形、图标和一些文字构成的圆角图标。3.图标切图86%如果是单纯的圆角矩形可以不用切图，但这些圆角矩形上还有渐变和投影，虽然可以进行开发，但开发成本很高，因此最好进行切图。图标需要切图，而文字则不需要切图，只需要标注字体、字号和颜色值等即可。具体步骤如下。569.4.2 切图实战（1）整理构成圆角图标的图层（背景图层除外）并进行编组，分别命名为素材图标、培训图标、管理图标和任务图标，这里是非标准命名，正式切图须使用规范命名。在切图工具中设置固定尺寸为 144 像素 120 像素，单击“遮罩”按扭，为每个图标组添加遮罩，如图 9-34 所示。579.4.2 切图实战（2）单击“Cutterman”面板中的“导出选中图层”按钮，完成图标切图。单击 Cutterman 面板右下角的文件夹按钮，查看切图情况，如图 9-35 所示。我们看到自动生成 Android 和 iOS 两个文件夹，Android 下包含四套图片，大小各不相同；iOS 包含两套图片，扩展名为 3x.png 及 2x.png，以适配不同分辨率的手机。589.4.2 切图实战（3）利用相同的办法为其他图标切图，这类图标有着不同的状态，如默认、选中、点击和禁用。一般设计师会设计两种状态，即选中和非选中，这两种状态都要切图，如图 9-36 所示为整理后的图标。599.4.2 切图实战4.圆角背景切图圆角背景切图需要考虑拉伸变形的问题，所以一般采用点九切图。本例中的背景填充为渐变颜色，为左右线性渐变，所以该背景图片可以纵向拉伸，不可以横向拉伸。点九切图绘制 1 像素黑线标记，如图 9-37 所示。因为该背景带有向下的投影效果，所以下边黑线绘制到了投影以外。609.4.2 切图实战完成点九图制作后，将图片导出，保存为后缀名为“.9.png”的文件，如图 9-38 所示。61课后提升1.判断题（1）Cutterman 不支持绿色免安装版本的 PS。（）（2）与其他切图标记软件不同的是，Assistor PS 是完全独立于 Photoshop 本身的。（）（3）在开发软件时，图片名称可以为中英文，因此切图也可以用中英文命名。（）（4）规范的命名可以极大地节省程序开发的时间，减少很多不必要的沟通与重复切图的工作。（）（5）在 JPG 和 PNG 两种格式图片大小相差不是很大的情况下，推荐使用 JPG；如果图片大小相差很大，推荐使用 PNG。62课后提升2.选择题（1）一般程序里面有三种命名方法，它们是（）。A.匈牙利命名法 B.帕斯卡命名法C.骆驼命名法 D.高尔基命名法（2）切图时规范的命名意义在于（）。A.规范的命名对文件整理有很大的帮助，后期修改文件、图层时更加方便快捷B.规范的命名也显得我们自身比较专业C.如果命名不统一，大家就很难达成共识，任务交接时需要很大的学习成本D.规范的命名对于团队协同也有极大的推动作用（3）点九切图法是 Android 的一种特殊图片格式，将图片分成九个部分，分别为四个角，四条边及（）。A.一个轮廓 B.一个中间区域C.一个中心点 D.一个分界线63课后提升（4）专门对界面中涉及的文字进行的标注主要有（）。A.文字字体 B.字号C.颜色 D.对齐方式（5）APP UI 设计中涉及的主要标注有（）。A.界面框架标注 B.功能菜单C.按钮标注 D.间距标注3.实操题（1）仔细观察图 9-39，运用本模块所学知识，对该图进行切图和标注，并导出切图文件和标注文件。（2）仔细观察图 9-40，运用本模块所学知识，对该图进行切图和标注，并导出切图文件和标注文件。64课后提升演示完毕 谢谢观看