1. David Wu首页
  2. web前端
  3. HTML

Android APP界面标注、尺寸换算和APP标注工具

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

众所周知,对追求高还原的移动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 的资源交给工程师

具体的如下图:

Android界面设计入门

 

下面是一些解答你疑问的安卓术语啦!

为什么要选择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标注工具

第一个:马克鳗

马克鳗 APP标注工具

 

 

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

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

 

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

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

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

 

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

Sketch.app-Measure-标注神器

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

 

下载地址和安装步骤:

1、https://github.com/utom/sketch-measure 下载最新的版本, 并解压;

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

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

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/5400

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

邮箱地址不会被公开。 必填项已用*标注