iOS和Android标注和切图的地输出的方法
日常工作或者生活中，我们唱功的切图工具是截图的方式，二十几上切图是指将设计稿切成便于制作成页面的图片，并完成html+css布局的静态页面。一般来说，把一张设计图利用到切片工具把自己所需的切成一张张小图，然后用div+css完成静态页面书写，完成css布局。而切图的主要目的是让网页稿有了交互性，实现你平时看到的各种各样的功能。那么本文讲讲如何地输出ios和android标注和切图。
现在有很多产品为了降低设计成本并保持多平台体验的一致性，都以ios为主做一套交互设计，应用于ios和android两个平台。但是在标注与切图的环节，如何的与开发对接，似乎并没有什么更高明的办法。很多团队的做法是先做一套ios的ui+标注+切图，再在ios的基础上缩放一套android的ui+标注+切图。事实上这样的做法是低效，且无效的。为什么且如何做呢?
首先本文大前提是，交互以ios的设计为主导，应用于ios和android两个平台。本文描述的方法更适用于人力资源较为匮乏的设计团队。
对于设计环节。
我对ios和android使用同一套ios的交互设计这种做法不置可否，毕竟好多人都已经这么干了。而很多情况下，到底用一套交互还是两套，这个问题是被设计部门的话语权、项目的周期、人力资源等多个因素影响的，并不是简单的节操问题。所以这里不讨论到底一套交互对不对，只讨论这种情况下怎么干活。
那么既然是同一套设计，如果仅仅是为了达到的交付物标准，输出两套几乎完全一样的ios和android的ui图，这种事情略显蛋疼。据我所知有一些设计团队都在不明真相地这么干着。
来看设计环节的交付物。
ios和android开发需要的设计交付物至少要有：高保真ui图，标注，切图。
高保真ui图所起到的作用是，开发会参照其画页面，仅仅是获知页面样子的一个手段，并非什么高精度的事情。仅仅基于这一条，设计师就没有必要出ios和android两套样子一样只是大小不同的图的，对于开发来说，他们只需要看到页面样子即可。
标注和切图的作用是，开发会按照标注的尺寸，把切图按照高保真ui图的摆放方式做到界面上。那么问题来了，ios的开发和android开发所需要的标注和切图是不一样的。如何在一套ios的高保真ui图上做出两套标注和切图呢?
众所周知ios设计的像素尺寸是640*960/1136，android主流的hdpi模式下的像素尺寸是480*800。如图，他们的换算关系是，ios像素尺寸的75%是android的像素尺寸
于是很多设计团队就基于这个75%的关系去做android的图了，但是这不是个好方法，这是一个设计和开发没有成为好基友的状态下所使用的方法。
我们知道android开发所使用的单位并非像素，而是一个叫做dp/sp的单位，人家压根就不用像素，你费劲半天调一个480*800又有啥用呢?你给他标注上，这个宽度300像素，又有啥用呢?设计不懂开发，开发也不懂设计，android不懂ios，ios也不懂android，很多同志就在这种“矩阵式的彼此的不理解”中凑合干着。
我们以480*800像素尺寸下做的设计图为基准。开发将部件尺寸换算成dp尺寸的方法是，像素尺寸*2/3。这也是为什么要让android部件尺寸能让3整除的原因。所以在hdpi模式，480*800像素尺寸设计图中，开发看到300px宽度的标注，会定义其为宽200dp，到这里android开发才得到一个他们真正会用于开发的数值。
这整个过程，设计师做ios尺寸图并标注，设计师调整ios尺寸图为android尺寸并标注px，android开发看着设计师交付的标注，再将其换算成dp，很长的一个过程。
其实经过以上整个过程之后，我们已经得出了一个更简单的换算关系：ios像素尺寸*75%=android像素尺寸，android像素尺寸*2/3=android的dp尺寸。进而得出：ios像素尺寸*75%*2/3=android的dp尺寸。所以，ios里一个宽600px的东西，在android的hdpi模式下，正好300dp，正好是50%，很容易算是吧?
在这个关系的指导下，我们可以在同一套ui图上做适用于两个平台的标注。只要android的开发知道，标注600px的东西，在hdpi模式下等于300dp这个换算关系，一切都简单了。当然，平台的区别要留意，例如ios使用十进制色值，android使用16进制，ios可以绘制圆角和阴影，android更倾向于用.9.png等。这些差异要在同一套标注中体现出来，让两端的开发各取所需。(如果你发现标注软件中无法在同一张图上标十进制和十六进制色值，你可以用文字标注替 代其中一个，qq的截屏工具中也是带色值提示的，办法很多不再赘述。)
至此，已经可以做一套标注，让android和ios的开发共同使用了。当然前提是你要告诉开发这个标注怎么看，怎么用!
下面看切图
在ios切图与android切图的转换中，是可以使用75%的换算关系的。也就是说ios的切图缩小75%之后，就是android的hdpi模式下的切图，而android开发还需要其他dpi模式的切图，按照如下关系换算即可。
我们会发现xhdpi模式和hdpi模式的换算比例也是75%。也就是说xhdpi模式下切图尺寸跟ios下是一样的。所以ios的切图可以直接适用于android的xhdpi模式。至于除hdpi和xhdpi之外的其他模式，如果需要适配，就需要单独处理图片了。
要注意的是切图在缩放之后像素会糊在一起，很可能需要重新调整，还有各种虚边情况，尤其是那些带透明阴影的，都要重新调，但是这个工作量显然要比重新调ui重新切，要小多了。
至此，我们设计一套适配ios的高保真ui，基于该ui做一套适用于ios和android两类开发人员的标注，再输出一套可适用于ios和 android的xhdpi模式的切图，再调整一套android的hdpi模式切图，基本上大部分工作就已经完成了。
☆★长沙UI培训教学目的
ui设计师的灵魂是设计思想，有了创意还要有交互逻辑、规范、用户体验、营销知识，具有把控整个项目进展的能力。系统学习UI设计内容，从UI中会涉及到的用户体验与交互这块开始学习。其次重点学习网页界面设计、响应式设计、软件界面设计、移动端界面设计。目的让学生制作出符合UI规范的界面，并能独立完成相对应的原创作品。在教导设计中，也会涵盖每一块UI制作的具体流程，提生的思维与逻辑分析能力，产品研发与策划能力。
☆★长沙UI培训教学内容
主要包括Axure用户体验；网页UI设计；移动端UI设计几大模块。
1.Axure用户体验：学习Axure软件，了解UI设计前期原型设计的流程，具体围绕网页的原型设计与软件的原型设计。并讲解页面之间的跳转、交互状态效果。学习Axure软件，了解移动端的基本原型搭建，了解交互相关的控件与人机交互中的合理想象。主要以APP的原型为主进行学习。学习Axure软件，了解动效设计，例如下拉弹出菜单，轮播图的展示，音乐播放器的时间线效果等。学习交互设计文档的制作，集合整体框架内容，注明页面跳转层级，与设计到各种交互状态的说明。了解用户体验的重要性。从前期产品的开发，到后期的设计。主要学习在功能上、设计上如何提高用户体验。
2.网页UI设计：了解网页设计的趋势、设计流程。区分不同系统、浏览器、分辨率等对网页设计的要求。关注时下流行的网页设计风格。学习网页设计规范，栅格化系统格式塔心理学。模块与细节的规范，网络广告设计讲解。学习网页界面的色彩搭配。了解各种页面导航与按钮的设计法则。系统学习广告banner的设计方式。了解网页中的瀑布流、通栏、F式布局等。学习掌握光影学。加强创意构图的设计形式。了解表单的设计与用户体验的融入。系统学习响应式页面设计的布局、模式与方法。锻炼学生在设计页面的同时符合SEO的设计规范。
3.移动端UI设计：了解移动端界面设计的发展趋势。移动端设计与PC端中的不同点。分块讲解不同系统、不同品牌机的不同设计法则与风格。了解图标的设计分类与不同系统操作平台中的图标设计规范。锻炼布尔运算与图形造型。提高绘制图形能力。了解图标设计中的结构与光影学。具体配色原则等。
分析图标的表现形式2d/3d与流行趋势。重点加强想象力的提升与创作能力。设定主题，独立创作一整套的系统图标。学习主题风格的统一化与衍生方式。了解APP当中的控件、功能性图标。学习控件中的具体搭建与配色。训练正负形图标的设计。了解产品开发流程，从前期的MPD到思维导图，低保真到高保真的具体工作流程。
学习IOS端的设计规范。了解APP的安卓端设计规范。系统学习APP中主要页面的各种设计形式与规则方法。通过实战，以分组的形式开发一个产品。从需求整理到调研，再到数据整合。最终完成基本的原型设计与交互文档。了解导航在APP中的重要性。如何通过不同类型的导航引导用户使用该产品。系统学习导航的12种分类。
学习APP中的启动页、引导页的界面设计形式。重点学习归纳产品的主要功能进行引导展示。学习APP中的配色形式与色彩心理学。系统了解登录、注册页面中的用户体验。还有个人页面的展示设计。将APP中的内容信息通过合理的展示方式进行表现。学习APP中的列表式构图、九宫格、圆心点放射、陈列馆、轮播式构图。了解手机交互中的热点区域，按键区等。系统地分析不同终端的适配法则。系统讲解IOS端、安卓的切图原则。
了解两个不同终端的切图方式与不同。man软件对APP的注释方法。了解平台的公众号。学习公众号的设计流程与基本要求准则。
☆★ID模块
1.介绍软件/新建画布/页面认识/软件优化
2.视图工具参考线/导出预览模式/渐变填色，文字填色
3.文字输入编辑(字号、字体、分栏等)
4.文字群组与复合路径、对齐和分布
5.排列、锁定、隐藏、路径查找器(焊接、相交、修剪)
6.基础图形绘制与填色
☆★CDR模块
1.软件介绍(应用领域、优势、缺点)/软件界面(调色板)
2.基本操作(新建文件、设置文件大小、出血、保存、导出、再制等)
3.排版需注意的事宜(字号、字体、出血、文字安全框等)
4.文本格式：文字方向、字符格式、段落格式、段落文本换行(图文混排)、分栏
5.基础绘图(矩形、椭圆、多边形、图纸、螺旋线、完美形状、智能绘图)
6.移动工具、填色(内部、轮廓)/视图工具(抓手、缩放、显示性能)
7.排列、锁定、造形/图框裁剪/群组与结合、对齐和分布
8.手绘、艺术笔/贝塞尔、钢笔/折线、三点曲线、连线、度量工具
9.形状工具：A.直接编辑基本形状/文字;B.转换成曲线后编辑
10.涂抹、粗糙、变换工具/裁切、刻刀、橡皮檫、虚拟段删除/线条填色
11.均匀、渐变、图样、纹理、PS填充/交互式填充、网状填充吸管油漆桶
12.交互调和、轮廓
13.变形、阴影、透明
14.立体(立体字设计、扁平投影效果、添加纹理立体字、渐变立体字)
15.封套
16.位图处理/转换(跟踪位图)位图遮罩/滤镜效果(卷页)/效果菜单
17.表格处理/插入条码、0LE对象(图表)/对象管理器/页面设置、打印
☆★AI模块
1.介绍软件/新建文件设置/软件界面认识/文字工具/文字大小改变、旋转、复制
2.其他格式：制表符、文字属性复制轮廓/简历制作
3.选择工具、基础绘图学习/颜色填充、渐变工具、吸管工具/锚点编辑工具
4.钢笔铅笔工具、路径橡皮擦、美工刀、剪刀、群组与复合路径、对齐和分布
5.排列、锁定、隐藏、路径查找器(焊接、相交、修剪)、剪切蒙版
6.描边面板/对象/路径/内部填充(网格工具、实时上色)
7.变形工具/封套扭曲/变换工具
8.画笔/符号/符号喷枪工具
9.混合工具(带过，CDR中详说)、透明蒙版(结合剪切蒙版使用)
10.外观面板、图形样式/描边、外观的使用/图层面板(多图层整理)
11.图表/位图转矢量图/透明度面板(中叠加方式的使用)
12.效果菜单(凸出和斜角、绕转、风格化)软件相互间格式的处理
☆★DW模块
表格切片认识DW界面、工作区，熟练DW基本操作，学习表格，切片
框架网页掌握超链接、锚链接、富媒体、框架网页、浮动框架的使用，建立简单的传统网页站点
html+css学习CSS三种嵌入形式、选择符、盒模型、浮动等，熟悉页面布局方法
盒模型html+css:项目列表与导航，常用css样式、css3样式补充，居中等
横版网页掌握和熟悉横版网页的制作技巧和注意事项，让与众不同
竖版网页熟练掌握竖版的制作规范和技巧，不再做的“小白”
表单制作表单，表单创建与表单样式
下拉菜单下拉列表，dl、dt、dd下拉效
卡式选项spry卡式、折叠式、工具提示
JS套用与发布学会如何套用和调用已有的JS代码，让妙趣横生，引人夺目
☆★五大学习模块 逐级提升设计能力
1. 平面设计模块：PS、ID、AI、CDR四大平面软件。
2. 电商设计模块：电商设计知识和技能、装修店铺以及电商运营、DW、代码。
3. UI设计模块：AXURE、原型设计、交互设计、用户体验、网页界面设计。
4. 移动端设计模块：ICON设计、手机主题设计、APP设计、平台。
5. 岗前就业课：补充学习其他硬件UI设计、AE动效设计、互联网营销知识;参加设计项目战，沉淀个人作品，积累实际工作经验。
☆★UI研修阶段
原型设计学习Axure软件，了解UI设计前期原型设计的流程，具体围绕网页的原型设计与软件的原型设计。并讲解页面之间的跳转、交互状态效果
交互设计学习Axure软件，了解动效设计，例如下拉弹出菜单，轮播图的展示，音乐播放器的时间线效果等
学习交互设计文档的制作，集合整体框架内容，注明页面跳转层级，与涉及到各种交互状态的说明
用户体验了解用户体验的重要性。从前期产品的开发，到后期的设计。学习在功能上、设计上如何提高用户体验
网页设计鉴赏与规范了解网页设计的趋势、设计流程。区分不同系统、浏览器、分辨率等对网页设计的要求。关注时下流行的网页设计风格
学习网页设计规范，栅格化系统格式塔心理学。模块与细节的规范，网络广告设计讲解
各类的设计学习学习网页界面的色彩搭配。掌握各种页面导航与按钮的设计法则。系统学习广告banner的设计方式
了解网页中的瀑布流、通栏、F式布局等。学习掌握光影学。加强创意构图的设计形式
了解表单的设计与用户体验的融入。系统学习响应式页面设计的布局、模式与方法。锻炼学生在设计页面的同时符合SE0的设计规范
手机主题设计了解移动端界面设计的发展趋势。移动端设计与PC端中的不同点。分块讲解不同系统、不同品牌机的不同设计法则与风格
了解图标的设计分类与不同系统操作平台中的图标设计规范。锻炼布尔运算与图形造型。提高绘制图形能力
了解图标设计中的结构与光影学。具体配色原则等。分析图标的表现形式2d/3d与流行趋势。重点加强想象力的提升与创作能力
设定主题，独立创作一整套的系统图标。学习主题风格的统一化与衍生方式
了解APP当中的控件、功能性图标。学习控件中的具体搭建与配色。训练正负形图标的设计与图标的迭代更新
产品APP研发了解产品开发流程，从前期的PRD到思维导图，低保真到高保真的具体工作流程。学习I0S端的设计规范
了解APP的安卓端设计规范。系统学习APP中主要页面的各种设计形式与规则方法
通过实战，以分组的形式开发一个产品。从需求整理到调研，再到数据整合。最终完成基本的原型设计与交互文档
产品APP设计学习APP中的启动页、引导页的界面设计形式。重点学习归纳产品的主要功能进行引导展示
学习APP中的配色形式与色彩心理学。系统了解登录、注册页面中的用户体验。还有个人页面的展示设计
将APP中的内容信息通过合理的展示方式进行表现。学习APP中的列表式构图、九宫格、圆心点放射、陈列馆、轮播式构图等
了解手机交互中的热点区域，按键区等。系统地分析不同终端的适配法则
系统讲解I0S端、安卓的切图原则。了解两个不同终端的切图方式与不同点。学习mark man软件对APP的注释方法
端掌握平台的公众号运营与要求
ui需要视觉基础
视觉基础是构成设计语言的小单位，在这一部分，需要运用到我们上面的原子设计理论来寻找页面中的小元素。以一个简单的Button为例，拆解出了基础的四个元素，分别是：色彩，字体，栅格，图标。在移动产品界面的设计中，还会有一些元素比如声音，文案和动效等也是需要考虑的，但都没有前面的四个元素重要，因为没有一个界面可以脱离这四个元素而存在。我们将其暂定为视觉基础四要素。如果在设计过程中尽早的定义这些模块，就能创造更好的界面和交互体验。
以上就是UI设计培训课程的全部内容介绍，如需了解更多的UI设计培训班、课程、价格、试听等信息，也可以点击进入 UI设计 相关频道，定制专属课程，开始您的学习之旅。