今天25学堂跟大家来聊一聊 Android APP标注尺寸入门教程和app标注工具。

众所周知,对追求高还原的移动APP产品来说,移动APP设计稿上的精确尺寸标记是必不可少的的一步。很多设计师都抱怨APP程序员做的效果太差,跟设计图相差太多,你有没有提供最规范的Android APP界面标注尺寸呢? 有没有提供设计师的UI设计规范给程序员呢?

其实,作为一名移动APP设计师,这些我们都应该在于Android程序员沟通好的基础上,尽最大的努力为他们提供最全的设计规范和设计标注、测量等信息。

下面是某安卓设计师的实践和工作总结。值得参考,也可以说是设计 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标注工具

第一个:马克鳗

第二个:苦逼APPUI设计师的标注切图的利器—PxCook

虽然25学堂介绍了好几款移动APP的切图工具和标注的工具。

第三个:nice - 标记生活的美好 是一款给图片标注的APP。非常棒,值得体验。

年轻人最爱玩的App!App store多次推荐!图片+标签让你的照片时尚时尚最时尚。

给图片打上标签,标签可以是品牌,地点,人物以及任何你想表达的情绪和想法。用标签表达你的快乐与哀愁。

第四个:Sketch.app Measure 标注神器

这是一款Sketch设计软件的插件,只适合苹果电脑使用。

下载地址和安装步骤:

2、打开 Sketch.app, Menu (菜单) -> Plugins (插件) -> Reveal Plugins Folder… (显示插件文件夹...);

3、将解压的文件夹复制到 Plugins Folder(插件文件夹)

android 尺寸转换工具,Android APP界面标注、尺寸换算和APP标注工具相关推荐

  1. Android.mk转换到Android.bp方法

    1.源码在:build/soong/androidmk2.编译源码后,androidmk生成工具位置 # out/soong/host/linux-x86/bin/androidmk3.使用命令 栗子 ...

  2. android app 界面元素资源,免费的用户界面设计工具、工具包和资源

    来源:免费的用户界面设计工具,工具包和资源    发贴会员:图图网-sunqilong 都是一些UI界面与设计使用的元素,软件,网站等.内容很丰富,适合网页设计师,用户体验设计师,界面设计师,产品设计 ...

  3. android 优秀app界面设计,基于Android系统的App界面设计.doc

    基于Android系统的App界面设计 摘 要:智能手机时代的来临改变了大多数人的生活习惯,时至今日智能手机已经成为了人们工作生活中的一部分,在工作生活中发挥着重要的作用.App作为智能手机应用程序的 ...

  4. 手机APP界面设计规范:如何定义视觉规范

    25学堂|APP设计|网页设计师加油站 首页 APP界面设计 APP设计模板 APP产品秀 UI设计干货 APP图标 Html5CSS3 APP设计教程 优秀设计 APP创业 当前位置: 首页 > ...

  5. APP界面防劫持,处于后台时弹窗提示

    当程序处于后台时弹窗提醒,防止其他APP界面劫持 1. 实现对APP所有Activity生命周期的监控 顶层activity中onStope方法被执行,则认为程序处于后台.由于Activity被销毁或 ...

  6. android mk与bp,Android.bp你真的了解吗

    Android.bp你真的了解吗 前言 最近在捣鼓Android 9 和10的build系统,看到一篇比较好的博客,大名鼎鼎的gityuan的,奉上链接理解Android.bp,为了方便学习和更多的人 ...

  7. app调html页面,app界面管理(风格色调).html

     APP界面管理(风格色调) $axure.utils.getTransparentGifPath = function() { return 'resources/images/transpare ...

  8. app开发周期需要多久 开发一个app要多长时间

    在移动互联网时代,手机成为主要的工具,各式各样的App快速改变着大家的生活,手机App开发自然成了市场热门需求.但是App开发技术门槛比较高,很多人并不了解细节.开发制作一款专业的手机App大概需要多 ...

  9. android 标注 比例换算,Android APP界面标注、尺寸换算和APP标注工具

    众所周知,对追求高还原的移动APP产品来说,移动APP设计稿上的精确尺寸标记是必不可少的的一步.很多设计师都抱怨APP程序员做的效果太差,跟设计图相差太多,你有没有提供最规范的Android APP界 ...

最新文章

  1. GO语言struct语法
  2. 从无到有算法养成篇:一文读懂有关Tree的前世今生
  3. [云炬创业学笔记]第一章创业是什么测试7
  4. FineUI 选中多行获取行ID
  5. SAP UI5 BindingParser
  6. EL toString()功能,对象转换字符串
  7. 敏捷开发总结(1)软件研发过程
  8. 《SpringBoot从菜鸟到老鸟》之SpringBoot 如何配置全局的异常捕获
  9. 腾讯花85亿买岛;微信发原图或泄露位置信息?高通逼因特尔把Modem芯片业务卖给苹果?小米9官网正式下架……...
  10. 文章读后感--社会文明分析总结
  11. 最新快手JS逆向分析
  12. GZip压缩的js文件IE6下面不能包含script标签
  13. vector容器中是否应该放指针?解决方法
  14. 为什么使用梯度下降法或者梯度上升法
  15. L1-003 个位数统计 (15 point(s))
  16. HTTP请求/响应原理
  17. 苹果CMS接入GOGO支付实现个人收款回调详细教程(附插件)
  18. word必备快捷键使用
  19. linux lzma c语言接口,编译squashfs和lzma
  20. centos 5.2自动安装的php不支持mysql?

热门文章

  1. 技术面试官的9大误区
  2. one 主格 复数 宾格_数字 主格宾格复数所有格
  3. 【django】图形验证码接口设计、后端逻辑、前端逻辑【15】
  4. DDSM 数据集格式转换 LJPEG to PNG
  5. QQ Account
  6. 8bit位图保存为1bit
  7. oracle rebuild online,Oracle index rebuild online 与 rebuild 及 drop index 后重建
  8. 奇安信2022面试题
  9. Jenkins端口号修改
  10. 降龙十八掌搞定rt3070 USB WIFI模块在android2.3平台上上网[基于x210开发板]