Android APP界面标注_第1页
Android APP界面标注_第2页
Android APP界面标注_第3页
Android APP界面标注_第4页
Android APP界面标注_第5页
已阅读5页,还剩1页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

1、Android APP界面标注、尺寸换算和APP标注工具众所周知,对追求高还原的移动APP产品来说,移动APP设计稿上的精确尺寸标记是必不可少的的一步。很多设计师都抱怨APP程序员做的效果太差,跟设计图相差太多,你有没有提供最规范的Android APP界面标注尺寸呢? 有没有提供设计师的UI设计规范给程序员呢?其实,作为一名移动APP设计师,这些我们都应该在于Android程序员沟通好的基础上,尽最大的努力为他们提供最全的设计规范和设计标注、测量等信息。下面是某安卓设计师的实践和工作总结。值得参考,也可以说是设计 Android APP的最佳实践:1. 画布大小定位 720 x 1280,7

2、2 dpi2. 只使用偶数单位的尺寸,比如 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 屏幕

3、的分辨率最常见的是 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个安卓

4、字体的换算方式: 有两种算法:算法一根据 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 的手机屏幕放大到了 Photosh

5、op 里,放大倍数是 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多次推荐!图片+标签让你的照片时尚时尚最时尚。给图片打上标签,标签可以是品牌,地点,人物以

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论