《交互数字内容设计》课件——第十章 交互界面设计输出.pptxVIP

;APPUI设计师需要给出的APP切片资源有3套：

1、标注图（以750为宽度尺寸为基准标注）

2、2x切图（以750为宽度尺寸为基准切图）

3、3x切图（以1242为宽度尺寸为基准切图）

1242*2208pxiphone6plus设计版尺寸

;设计切图的原则;2.图标切图输出应根据标准尺寸输出并且考虑到手机适配;在切图资源输出中图标切图输出是至关重要的部分。因为在开发中由于各机型的屏幕分辨率不同，需要针对一些大屏机型进行适配。为了适配大分辨率手机（例如iphone7plus）图标在切图的时候需要输出@2x和@3x的切图，其中@2x的切图可以满足双平台大部分机型的适配要求，@3x是用来适配iphone手机的各种plus版本的手机，@3x是@2x尺寸的1.5倍，例如一个图标切图@2x尺寸是44px，那么@3x尺寸是66px。;Tinypng网址：?/;4.可点击部件应当注意其点击区域不小于88px;5.可点击部件要把相关状态都切图输出，比如正常状态、点击状态。

在切图过程中不仅要输出正常状态的切图，更要注意不要遗漏其他状态的切图。这个也是设计师经常会出现的失误，比如在按钮切图的过程中可能会忽略点击切图的状态。所以设计师在做设计图是最好尽量把页面中会出现的各种状态展示出来，避免后期切图的时候遗漏状态。;10.1.2.切图输出类型

1.桌面图标切图输出

app的桌面图标会被运用在很多不同的地方展示，比如手机桌面、APPstore、手机的设置列表，所以app桌面图标需要很多个不同尺寸的切图输出。两个平台对相应桌面图标设计输出尺寸也不尽相同，在输出的时候要把双平台的这些尺寸全部输出切图。桌面图标切图只需要提供直角的图标切图即可，手机系统会自动生成圆角效果。

;2.图片类切图输出

图片类切图主要是指启动页、新手引导页、默认提示、广告图等需要完整切图的图片。同一类型的图片切图一般要保持同样的大小尺寸以便于工程师开发使用。另外一般这些切图的文件较大在切图过程中需要控制切图文件的大小。;3.动效元素切图输出

动效元素切图一般是指在app中加载动效所需要的切图元素，比如qq的下拉加载动效就是由若干张切图连续播放形成的动画效果。这些图片按照序号排序播放我们页把他们叫???序列切图。序列切图是在做UI设计的过程中必然会遇到的问题，这种切图要求要保证动效播放时的流畅自然，是需要设计师仔细斟酌的。

;;5.无需切图的部分

在设计切图输出中很多元素是不需要输出的，直接使用系统原生的设计元素修改参数即可。作为设计师需要知道哪些元素是需要切图，哪些元素是使用系统自带的避免不必要的切图。比如文字、卡片背景、线条和一些标准的集合图形是不需要提供切图的。例如搜索框只需要在标注中表明尺寸大小、圆角大小、描边粗细、色值即可，工程师会根据设计效果通过代码实现这种效果。;10.1.3UI界面切图命名规范

?

关于UI界面的切图命名的规范，关键是在于团队能够有一个统一的规则。

规范的命名方式可以提高开发人员的开发效率和整个开发团队的友好合作。

?

命名规则

模块_类别_功能_状态.png

举个栗子：nav_button_search_default.png

释义为：导航_按钮_搜索_默认.png;2.常用命名（1）常用界面

;（2）系统控件;（3）功能命名;（4）常见状态;10.1.4注意事项在切图文件和切图命名中，应注意以下几点：（1）不要出现大写，字母必须为小写；（2）不要有中文、特殊符号和空格；（3）同类切图，尺寸大小应保持一致；（4）App安装包的大小与切图内容有关，切图完后，要压缩图片的大小。（5）icon图标一定要用png格式.

;10.1.5切图工具Cutterman

;10.2标注App标注可以让工程师及时了解界面开发元素的尺寸大小，Android和iOS标注的规范存在一定的差异性，特别要重点关注App设计稿的标注单位。10.2.1iOS系统与Android系统界面标注的区别1.iOS标注（1）采用750*1334px设计稿进行标注；（2）距离和字号用pt/px为单位；2.Android标注（1）采用720*1280px设计稿进行标注；（2）距离用dp，字号用sp为单位；

;10.2.2标注规范1.文字标注文字属性，只需要标注颜色、字号、间距、位置等最基本的要素

;2.图标标注图标属性，需要标注图标大小、位置、间隔、边距等最基本元素

;3.段落标注段落属性，需要标注字体大小、字体颜色、行间距、字间距等。4.布局控件控件属性，需要标注控件宽高、背景色、透明度、描边、圆角大小等

;5.位置标注元素属性，需要标注元素宽高、颜色、方位间距、侧边距以及与其他元素之间的相对距离等

;10.2.3注意事项（1）同类标注属性，标