向研发交付设计稿时，需要注意两个方面

向研发交付设计稿时，需要注意两个方面

一个网页做出来，必须交给产品研发的项目，离不开这两个关键部分，即网页标注和图片裁剪。

产品开发的一个步骤，UI设计师跟产品开发是合不来的，UI做出来的图纸必须在这里完成。所以要从产品开发的角度考虑难点问题，这样可以减少多余的沟通成本，提高工作效率。

每个产品开发都有不同的气质。精英团队里，有的产品R&D要你把每个区域都标清楚，否则他会一直约你出去，有的产品R&D不要。这些都要逐渐到磨合期，想办法让彼此感觉舒服。这里的关键点:我写一些我自己的工作和产品R&D合作的总结，以及一些已经在互联网上整合的文章。内容也比较基础，专家可以无视我。

一个网页做出来，必须交给产品开发的项目，都离不开这两个关键部分。

网页页面标注切图网页页面标注1、以哪些企业开展标注

我们来看看这众多的企业:px，dp，sp。

px：pixel清晰度，电子显示屏上构成一幅图画或相片的最基础模块，设计方案时应用的企业。dp: dip，Density-independentpixel,是安卓编程用的长度单位换算，1dp表明在显示屏像素数相对密度为160ppi时1px长短sp: scale-independentpixel，安卓编程用的文字大小企业。

请与R&D产品部沟通好，实际上应该使用哪些公司来进行贴标。现在有些室内设计师还是用px标注设计图纸，但是如果不危及他的开发设计和其他可以计算清楚的前提条件，理论上是可以的。但这并不是最好的选择。建议应用dp或sp。

怎么算？

(1)px至dp

安卓屏幕尺寸不一样。根据其每英寸屏幕像素，可分为以下规格和型号:

当屏幕每英寸像素值为160ppi时，1dp定义为1px，即在MDPI屏幕分辨率为320*480时，1dp=1px。

根据mdpi，这款显示器的相对密度比为:LDPI:MDPI:HDPI:XHDPI:XXHDPI:XXXHDPI=0.75:1:1.5:2:3:4。即在HDPI相对密度下，1dp=1.5px；在xHDPI条件下，1dp=1.5px..诸如此类。

所以我们在使用1080*1920(即xxHDPI)的应用屏幕分辨率绘制图形时，假设间距为48px，标记时应该是16dp。

(2)px到sp

Dp和sp都是Android开发设计企业。sp类似于dp，但是sp可以根据客户对文本大小的偏好进行缩放。是安卓系统软件允许客户自定义文字大小(小，一切正常，大，超大)，如下图。如果sp是企业，当文字改为“大号”时，会在内部进行字体样式的相对缩放，但dp不好。一般可以考虑1sp=1dp。

进入系统软件的机器和设备以可调的文本大小显示信息。

在这个阶段，也有一些特殊的工具可以帮助你更强有力地进行标注，你就不用自己去计算了。建议善用能提高效率的特殊工具。

2、间距

有很多地方是必须标注的，比如图片和文字的间距，文字/图片和页面两边的间距，文字和文字的间距等等…

标记的方式也可以不同。它可以以外框和周围元素为规范，也可以告诉实际坐标…

重点是字与字之间的间距:在具体的开发设计中，两种字体样式之间的间距对手机上显示信息的实际作用要大于标注图。这是因为在一种字体风格中，英文字母的高度很可能是不同的。系统软件会默认设置字体样式升高一个高度，但是每个手机上升高的高度也不一样。你可以根据你的图纸标注，然后产品研发会进行区分和调整。ui也必须一起跟踪它。

间距标注还必须考虑到在不同型号上显示信息会出现什么问题，这个问题严重不严重，这个比例大不大等等。

3、文字大小及大小

在一个网页下，常见的字体大小有:12、14、16、20和34sp。

除了标注文字的大小，还必须标注字体样式的大小。你应该能够设置字符间距，行距等。按照要求。

也适用于其他字体风格的包装。

4、颜3色

(1)根据元素的类型，必须标注以下项目:背景色(遮罩色)、字体风格色、关键色、点击色...

如果用不同的颜色表示不同的情况，也必须标明。

(2)按颜色总数:纯色、多色(颜色渐变)

如果是颜色渐变，渐变的视角也要注明是从左到右，从上到下还是从中间到外围。

是否已经清晰等...

这里强烈要求基本的设计标准(包括颜色、文字大小等。)可以在新项目开始时创建。创建之后，不一定要扔到共享资源里，一定要让每一个承担这个新项目的UI和R&D人员都知道。

这里稍微补一点:如果你的文字清晰可辨，在标注的时候可以选择以下方法:由于产品开发使用十六进制编码，如果你为产品开发80%的白色，实际上可以给出匹配的编码:#CCFFFFFF，前两位是CC表示清晰，后六位是FFFFFF表示实际颜色值。

最后提示:如果不知道如何投标，一定要和产品开发沟通！而且不需要标注每一张设计效果图，可以保证产品研发的顺利进行。

切图

Android系统的规格很多，要按照各个显示器兼容无疑是不切实际的。所以为了更好的处理这个问题，Android显示器有自己原有的固定相对密度，Android系统会根据这个显示器的不同相对密度进行兼容。

这和前面提到的企业有关系，下图是不同屏幕分辨率下匹配图像的倍数关系。剪多少套，要看具体开发设计。这里建议大家安装裁剪软件，一键导出几套，非常方便。网上有很多这部分的例子，但是很少讲。

截图自五色云

在剪图之前，你要知道什么图可以剪，这些图一定要剪。

下图是一个例子:

来自AceCleaner的截图

要使用的区域是(亮红色部分):四个关键功能标志、侧栏通道、右上商店通道及其红点(相切九)。

不需要剪切的区域是(灰黑色部分):2个图形和上面的小动画图片。

一般来说，在程序代码不可用的时候，我希望你把图片剪下来。该计划的一大好处是它可以减少包装的大小。

记得缩小！记得缩小！记得缩小！

除了这两个部分，还有交互技术，显示动画的实际效果有详细的描述，这些写的方法很多，下次再讨论。

文章作者@Jerrie，未经批准，严禁截取。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zz/779455.html