AndroidAPP界面标注技术分析.docx

Android APP界面标注、尺寸换算和APP标注工具 众所周知，对追求高还原的移动APP产品来说，移动APP设计稿上的精确尺寸标记是必不可少的的一步。很多设计师都抱怨APP程序员做的效果太差，跟设计图相差太多，你有没有提供最规范的Android  HYPERLINK /tag/app%e7%95%8c%e9%9d%a2%e6%a0%87%e6%b3%a8/ \o 查看APP界面标注中的全部文章 \t _blank APP界面标注尺寸呢？ 有没有提供设计师的UI设计规范给程序员呢？ 其实，作为一名移动APP设计师，这些我们都应该在于Android程序员沟通好的基础上，尽最大的努力为他们提供最全的设计规范和设计标注、测量等信息。 下面是某安卓设计师的实践和工作总结。值得参考，也可以说是设计  HYPERLINK /tag/android-app/ \o 查看Android APP中的全部文章 \t _blank Android APP的最佳实践： 1. 画布大小定位 720 x 1280，72 dpi 2. 只使用偶数单位的尺寸，比如 96 px 的列表项高度，16 px 的边距，64 px 的图标边长 3. 只使用 24 pt，28 pt，36 pt 和 44 pt 的字体 4. 设计完成以后，所有尺寸的 px 值除以 2 作为 dp 数值交给工程师 5. 所有字体的 pt 值除以 2 作为 sp 数值交给工程师 6. 所有切图变成三份，分别是原始大小、缩小 1.5 倍，缩小 2 倍，分别作为 xhdpi，hdpi，mdpi 的资源交给工程师 具体的如下图： ? 下面是一些解答你疑问的安卓术语啦！ 为什么要选择720*1280来作为设计稿，而且分辨率设置为72 因为 320 dpi 屏幕的分辨率最常见的是 720 x 1280，以这个尺寸作为画布尺寸，是最带感的，这样的设计稿就和应用在最多数的 320 dpi 的机器上运行起来的样子一样。 而且挑密度最大的，因为图片缩小比放大好，放大会失真，选 320 dpi 作为目标屏幕，为其他屏幕提供图片时，只需要缩小。 72 dpi 是 Photoshop 的默认设置，不要改就好，这个数字和后面的换算有关系。 ? Android 4.0 以后的设计规范中建议只使用四种字号，分别是 12 sp，14 sp，18 sp 和 22 sp，这也是 Android framework 用到的全部字号。 下面25学堂根据前辈的一些经验，分享2个安卓字体的换算方式： ? 有两种算法： 算法一 根据 dp 的定义「在 160 dpi 的屏幕上，1 dp 大约等于 1 px」，那么在 320 dpi 的屏幕上，1 dp 约等于 2 px，我们就是为 320 dpi 做的设计，所有 px 值除以 2 就是 dp 值。字体略复杂一点，1 pt = 1 / 72 inch，即在 72 dpi 的画布上，1 pt = 1 px，我们的画布就是 72 dpi，又有 1 sp 约等于 2 px（同 dp 的定义），所以 1 sp = 2 pt，所有 pt 值除以 2 就是 sp 值。 算法二 可以想象是把一个 320 dpi 的手机屏幕放大到了 Photoshop 里，放大倍数是 320 / 72，即手机上的 1 dp，在画布上就是 320 / 72 dp，而 1 dp = 1 / 160 inch，所以在画布上就是 2 / 72 inch，而画布是 72 dpi，所以在画布上就是 2 px，即手机上的 1 dp 对应画布上的 2 px。字体的计算一样，只是多一个在 72 dpi 上，1 pt = 1 px 的转换。 至此，都算清楚了，在这个画布上，px 到 dp，pt 到 sp 都是除以 2 的关系。 最后，给 320 dpi 做的图片，到 240 dpi，160 dpi 上就要分别缩小 1.5 倍和缩小 2 倍。 ? 第二部分：常用的一些APP HYPERLINK /tag/%e6%a0%87%e6%b3%a8%e5%b7%a5%e5%85%b7/ \o 查看标注工具中的全部文章 \t _blank 标注工具 第一个：马克鳗 ? 第二个：苦逼APPUI设计师的标注切图的利器—PxCook 虽然25学堂介绍了好几款移动APP的切图工具和标注的工具。 ? 第三个：nice – 标记生活的美好 是一款给图片标注的APP。非常棒，值得体???。 年轻人最爱玩的App！App store多次推荐！图片+标签让你的照片时尚时尚最时尚。 给图片打上标签，标签可以是品牌，地点，人物以及任何你想表达的情绪和想法。用标签表达你的快乐与哀愁。 ? 第四个：Sketch.app Measure 标注神器 这是一款Sk