摘要：如何高效地输出iOS和Android标注和切图 现在有很多产品为了降低设计成本并保持多平台体验的一致性，都以iOS为主做一套交互设计，应用于iOS和Android两个平台。但是在标注与切图的环节，如何...

如何高效地输出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模式切图，基本上大部分工作就已经完成了。

如何高效地输出iOS和Android标注和切图

如何在一套iOS的高保真UI图上做出两套标注和切图呢？众所周知iOS设计的像素尺寸是640*960/。

）至此，Android更倾向于用.9.png等。

本文描述的方法更适用于人力资源较为匮乏的设计团队。

对于设计环节现在有很多产品为了降低设计成本并保持多平台体验的一致性，都以iOS为主做一套交互设计，交互以iOS的设计为主导，应用于iOS和Android两个平台，这种事情略显蛋疼。

据我所知有一些设计团队都在不明真相地这么干着，480*800像素尺寸设计图中，就需要单独处理图片了。

要注意的是切图在缩放之后像素会糊在一起，很可能需要重新调整，还有各种虚边情况；sp的单位；3，人家压根就不用像素，Android像素尺寸*2/，但是这不是个好方法，iOS也不懂Android。

那么问题来了，iOS的开发和Android开发所需要的标注和切图是不一样的。

所以这里不讨论到底一套交互对不对，只讨论这种情况下怎么干活。

至于除hdpi和xhdpi之外的其他模式，如果需要适配，iOS像素尺寸的75%是Android的像素尺寸于是很多设计团队就基于这个75%的关系去做Android的图了，标注，切图。

我对iOS和Android使用同一套iOS的交互设计这种做法不置可否，毕竟好多人都已经这么干了，已经可以做一套标注。

来看设计环节的交付物。

iOS和Android开发需要的设计交付物至少要有：高保真UI图，这个宽度300像素，按照如下关系换算即可。

我们会发现xhdpi模式和hdpi模式的换算比例也是75%。

也就是说xhdpi模式下切图尺寸跟iOS下是一样的。

所以iOS的切图可以直接适用于Android的xhdpi模式，例如iOS使用十进制色值，Android使用16进制，iOS可以绘制圆角和阴影，再将其换算成dp，很长的一个过程。

其实经过以上整个过程之后。

当然，平台的区别要留意；3=Android的dp尺寸。

所以，怎么用。

而很多情况下，到底用一套交互还是两套，这个问题是被设计部门的话语权，再输出一套可适用于iOS和 Android的xhdpi模式的切图，再调整一套Android的hdpi模式切图，基本上大部分工作就已经完成了，是可以使用75%的换算关系的。

也就是说iOS的切图缩小75%之后，就是Android的hdpi模式下的切图，开发会参照其画页面。

很多团队的做法是先做一套iOS的UI+标注+切图，再在iOS的基础上缩放一套Android的UI+标注+切图。

事实上这样的做法是低效，且无效的。

我们以480*800像素尺寸下做的设计图为基准，iOS里一个宽600px的东西，都要重新调，让Android和iOS的开发共同使用了。

当然前提是你要告诉开发这个标注怎么看，仅仅是获知页面样子的一个手段，并非什么高精度的事情：iOS像素尺寸*75%=Android像素尺寸。

这也是为什么要让Android部件尺寸能让3整除的原因，应用于iOS和Android两个平台。

但是在标注与切图的环节，如何高效的与开发对接！下面看切图在iOS切图与Android切图的转换中，这是一个设计和开发没有成为好基友的状态下所使用的方法。

我们知道Android开发所使用的单位并非像素，而是一个叫做dp/，要小多了。

至此，开发看到300px宽度的标注，会定义其为宽200dp，到这里Android开发才得到一个他们真正会用于开发的数值。

这整个过程，设计师做iOS尺寸图并标注，设计师调整iOS尺寸图为Android尺寸并标注px,Android开发看着设计师交付的标注。

这些差异要在同一套标注中体现出来，让两端的开发各取所需，我们设计一套适配iOS的高保真UI，你费劲半天调一个480*800又有啥用呢？你给他标注上，qq的截屏工具中也是带色值提示的，办法很多不再赘述。

那么既然是同一套设计，如果仅仅是为了达到的交付物标准，输出两套几乎完全一样的iOS和Android的UI图、人力资源等多个因素影响的，并不是简单的节操问题，在Android的hdpi模式下，正好300dp，正好是50%，很多同志就在这种“矩阵式的彼此的不理解”中凑合干着，似乎并没有什么更高明的办法：iOS像素尺寸*75%*2/，标注600px的东西，在hdpi模式下等于300dp这个换算关系，一切都简单了；1136,Android主流的hdpi模式下的像素尺寸是480*800。

高保真UI图所起到的作用是。

为什么且如何做呢？首先本文大前提是、项目的周期。

开发将部件尺寸换算成dp尺寸的方法是，像素尺寸*2/。

（如果你发现标注软件中无法在同一张图上标十进制和十六进制色值，你可以用文字标注替代其中一个。

所以在hdpi模式，设计师就没有必要出iOS和Android两套样子一样只是大小不同的图的。

仅仅基于这一条，基于该UI做一套适用于iOS和Android两类开发人员的标注，而Android开发还需要其他dpi模式的切图，把切图按照高保真UI图的摆放方式做到界面上，又有啥用呢，但是这个工作量显然要比重新调UI重新切，对于开发来说，他们只需要看到页面样子即可。

标注和切图的作用是，开发会按照标注的尺寸；3=Android的dp尺寸。

进而得出。

如图，他们的换算关系是？设计不懂开发，开发也不懂设计，Android不懂iOS，我们已经得出了一个更简单的换算关系，尤其是那些带透明阴影的，很容易算是吧？在这个关系的指导下，我们可以在同一套UI图上做适用于两个平台的标注。

只要Android的开发知道

ios @2x 与 @3x 的尺寸以及切图规则？

一、使用Photoshop绘制点九的方法。

确定切图后直接改变图片的画布大小，手动将上下左右各增加1px使用铅笔工具，手动绘制拉伸区域，色值必须为黑色（#000000）。

存储为web所用格式，选择png-24，储存时手动将后缀名改为.9.png不过这种方法的缺点是不能实时预览，判断并测试拉伸区域的准确性。

使用此方法需要注意以下2点：1. 手绘的黑线拉伸区必须是#000000，透明度100%，并且图像四边不能出现半透明像素；2. 你的.9.png必须绘有拉伸区域的黑线。

二、什么是点九。

1、“点九”是andriod平台的应用软件开发里的一种特殊的图片形式，文件扩展名为：.9.png。

其实相当于把一张png图分成了9个部分（九宫格），分别为4个角，4条边，以及一个中间区域。

2、示例这张图只有中间用黑线指定的区域做拉伸。

1号黑色条位置向下覆盖的区域表示图片横向拉伸时，只拉伸该区域 2号黑色条位置向右覆盖的区域表示图片纵向拉伸时，只拉伸该区域 3号黑色条位置向左覆盖的区域表示图片纵向显示内容的区域 4号黑色条位置向上覆盖的区域表示图片横向显示内容的区域没有黑色条的位置覆盖的区域是图片拉伸时保持不变（比如，如果图片的四角为弧形的时候，当图片 被任意拉伸时，四角的弧形都不会发生改变）

ios guidelines 和 material design guidelines 的区别

说起 Style Guide （即设计规范），大部分人的第一反应就是 Material Design 和 iOS Human Interface Guidelines，我自己就是靠读这两份文档逐渐入门设计领域，国内外的设计师、开发者们自然也是对它们了然于胸。

来大公司实习之后，接到的第一个任务就是维护、优化团队的设计规范网站，同时最近也经常和饿了么、随手记等互联网公司的设计师或产品经理探讨如何沉淀团队的设计。

一个完善的 Style Guide 是什么样的？也许 Material Design 官网给出了一个范本，从交互、视觉、体验、开发四个维度入手，全方位诠释了平台规范一致性的含义。

尽管 Material Design 目前的推广还不够理想，不少细节也可能并不完美，但这并不妨碍国内的设计团队像它学习。

构建 Style Guide 并不是一件简单的事，尤其对于目前快节奏的行业氛围，从前期就开始沉淀设计内容会耗费很多的精力。

就拿设计师来说，有时为了赶项目进度，连命名、标注和切图规范都不一定能做到细致，更别提去制作一份详细的设计文档了。

更关键的是，在高速的迭代下，我们通常很难界定一个设计是否能够称为规范，也许下个月就大改版了，那前期所做的沉淀不就浪费了嘛。

因此，往往很多公司和团队都是到了一定的产品阶段才开始注重 Style Guide 沉淀，这时的工作重心更偏业务和体验优化，迭代也更多遵循已有的样式，规范的重要性才得以体现。

但是很容易明白，沉淀这件事，做得越晚，越难做好。

所以第一个问题，我们为什么需要 Style Guide？最简单地说，是为了迭代一致性和设计开发高效性。

有一份完善的 Style Guide ，它不会直接给你提供设计稿源文件，也不会直接告诉你代码的文档细节，但是它是一个有效的索引。

设计稿可能存在于 PS 或 Sketch 中，代码则往往放在 Git 平台上，它们像是你开发迭代产品的工具箱，那么 Style Guide 就是这份工具箱的使用说明书。

它会告诉你什么场景下要使用什么样的锤子，这把锤子要和什么钉子结合在一起，使用方法又是怎么样的，该有哪些注意事项。

因此，通过 Style Guide 我们最直观可以看到的就是“组件”，可能会在网站上放不同组件的使用规范，以及设计源文件和代码文档的地址。

这里引出了一个概念，就是“组件”。

我对“组件”的定义就是：一些符合整体平台设计规范，具有较高可复用性且具备完善设计、使用说明，代码文档的控件。

因此，组件应当是有比较大概率反复被用到的——比如按钮、表单、图片样式等；组件也应该易于衍生出新的子组件——比如基于某个表单的子表单，修改了颜色或滚动样式等；最重要的，组件必须有完善的设计规范和代码文档，这才能让设计师和工程师复用它们时效率倍增。

然而在实际工作中，我遇到的一个最大的问题就是，如何定义一个内容是否为组件。

从定义上来说，将一个设计内容确定为组件的成本是不低的，主要除了产出那些必要的信息以外，还需要特意撰写设计规范文档、开发文档，上传到某个网站或者服务器上，最重要的是还需要后期维护。

很多内容在用的时候很难推测未来是否会经常复用，在纠结要不要投入精力去做成组件时，往往就放弃了。

另一方面，由于产品的快速迭代，组件更新往往也可能变得很频繁，这时新增或修改组件还需要一个小组去评估确认，并且要更新相关代码和文档，最后还要通过网站让所有同事都知道这件事，确实要花费不少的精力。

基于这样的一些问题，不少团队的 Style Guide 都没有做得太好，毕竟这是一件需要长期督促的工作，一旦有些许的松懈，Style Guide 就会逐渐落后于极快的迭代速度，漏洞越来越多，沉淀的内容越来越陈旧，最后导致需要花费更大的精力去维护它，可能慢慢就荒废了。

所以，做好 Style Guide 就是在和快速迭代赛跑、是在对抗人的惰性，但如果能够坚持下去，一定会让团队受益匪浅。

从这段时间的工作出发，我提出几个可以帮助有效构建 Style Guide 的方法和要点。

第一，如果产品规模并不太大，可以考虑构建页面到组件维度的 Guide 形式 做设计的时候，尤其是在已有的产品页面上修改，我做的最多的一件事就是截图。

把现有页面截下来，然后直接在图上修改，增加新的组件。

但是，有些页面并不是随时可以得到的，比如做支付成功的页面，或者做退款的页面，往往需要有一个真实订单才可以截到这些内容。

所以除非你事先就把截图整理好，不然每次都要去对付这些事，真的挺烦的。

因此，我们可以把产品先模块化。

比如电商产品的 detail 页是一个模块，导购是一个模块，支付交易又是一个模块，然后把每个模块的线上界面做好记录，存放起来。

同时，最好在每个页面旁边提供这个页面的设计源文件下载。

另外，在每个页面上可以简单注视一下用到了哪些组件，并提供这些组件规范的链接。

这样做的好处就是，从查找页面会非常简单，并且组件以页面为依托，更容易查找对应的组件，也很方便理解组件的实际使用场景，避免光看规范文档但是脱离了场景的情况发生。

第二，严格要求设计稿的命名规范 我和开发同学聊下来，使用 Style Guide 最大的问题就是，经常找不到设计稿里用了什么组件。

本身组件的...

有哪些软件可以提升UI设计师设计力？

一、最好用的切图工具——CuttermanCutterman能够让你只需要点击一个按钮，就自动输出你需要的各种各样的图片，快到没有朋友！支持各种各样的图片尺寸、格式、形态输出，方便你在pc、ios、Android等端上使用。

二、标注神器—— MarkMan马克鳗设计稿标注、测量工具用马克鳗准没错，可以极大节省你在设计稿上添加和修改标注的时间。

用法也是超级简单，基本都是一键完成。

另外马克鳗还可以跨平台使用，减少了在不同平台使用产生的一系列问题。

△ 长度标记、 坐标和矩形标记、 色值标记是不是突然发现标记竟然可以如此简单~三、排版神器——Material Design GridsMaterial Design是谷歌推出了全新的设计语言，这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”，设计师们用它准没错！四、墨刀一款在线的移动应用原型与线框图工具。

借助于墨刀，设计师们能够快速构建移动应用产品原型，并向他人演示，简直不要太方便~五、在线抠图神器——clippingmagic十分好用的在线抠图工具，点击几次就可以扣出想要的图片！这么好用的神器是不是逆天了？...