登录 | 注册

一款APP,从设计稿到切图(Android篇)

首页 > UI设计 > 交互设计 2018-01-10 15:01:20 浏览次 共 条评论

收藏赞(分享

依旧声明:这里写的依旧只是某一种工作方法,而不是一种规范,你可以参考,但不要照搬,在具体工作中,一定要灵活运用。

汇总贴,整理了之前零散的关于Android的文章……这里我把Android的开发文档,字体,以及不同设计尺寸的文档图片上传了,喜欢的下载;切图的工具在IOS的帖子里,喜欢可以去那下载,这里就不上传了。

如果看了IOS篇,对标注切图的问题会有更全面的理解,建议去看一下……

IOS篇: 一款APP从设计稿到切图过程全方位揭秘

Part 1 基础概念

① 你需要知道的一些铺垫:

手机分辨率:分辨率就是手机屏幕的像素点数,类似480*800、720*1280、1080*1920这个意思……

手机屏幕尺寸:手机对角线的物理尺寸,单位是英寸;比如小米4的尺寸就是5英寸,IPhone 6的尺寸就是4.7英寸……

手机屏幕密度:dpi或PPI,每英寸的像素点数,数值越高显示的越逼真细腻。下面是屏幕密度的计算方法~

 

可以尝试算算自己手机的屏幕密度~

②Android自身设定的屏幕密度

安卓尺寸众多,按每个屏幕去适配肯定不现实;

所以为了解决这个问题,安卓手机屏幕有自己初始的固定密度,安卓会根据这些屏幕不同的密度自己进行适配。这一点内容掌握到能满足自己设计工作需要就可以了……

以下是Android的密度划分以及代表的分辨率,这里你可以发现已经和设计稿尺寸和切图输出开始挂钩了……

 

你需要了解IPhone各个版本的手机屏幕密度:

一款APP,从设计稿到切图(Android篇)

IPhone 4/4s/5/5s/5c/6 ≈320dpi

你会发现单从屏幕密度来说,IPhone可以算是超高密度了。

下面来说说这几个密度:

LDPI 120dpi 低密度 不考虑这个了,消失了……

MDPI 160dpi 中密度 这个目前少见……

HDPI 240dpi 高密度 常见

xHDPI 320dpi 超高密度 常见

xxHDPI 480dpi 超超高密度 常见

xxxHDPI 640dpi 超超高密度 Android4.3推出了对此密度的支持,也就是平板电视的4K分辨率

你的切图会根据这几个密度来决定输出多少套~

Part2 标注切图

你需要知道的Android的一些开发使用的单位:

dp:android开发使用的单位,其实相当于一种比例换算单位,它可以保证控件在不同密度的屏幕上按照这个比例单位换算显示相同的效果。

sp:android开发使用的文字单位,和dp差不多,也是为了保证文字在不同密度的屏幕上显示相同的效果。

①标注设计稿时,使用px还是dp和sp?

答:和安卓工程师沟通,推荐使用dp和sp进行标注。但目前很多设计师对dp和sp这个单位并不理解,所以有些设计师提供设计稿的时候依旧使用px进行标注,这一点去和你的搭档工程师进行沟通,如果不影响他开发以及他能换算清楚的前提下,你可以考虑使用Px,但是我并不推荐。

这里要记住一点(你只需要记住能帮助你工作就可以):

当屏幕密度为MDPI(160PPI)时,1dp=1px

当屏幕密度为MDPI(160PPI)时,1sp=1px

像素字号=屏幕密度/160 * sp字号 可以根据这个去算算设计稿中的像素字号标注为sp是多少,比如xHDPI下,36px的字标注为sp就是18sp,以此类推。

按照不同的屏幕密度换算,也就是下图所示的意思:

 

②使用哪种尺寸做设计稿?

答:通过上图你会发现,xHDPI下,倍数关系为2,而且xHDPI就目前的市场来看,还算属于主流机型;这样无论是标注,还是主流机型都能兼顾的到,所以

推荐使用720*1280尺寸做设计稿,这样即使你标注的是px,工程师也可以换算的比较方便。

现在有一种情况比较普遍,公司做了IOS版本的设计稿,现在要给安卓用,应该怎么办?

IPhone的屏幕密度已经达到xHDPI了,通常用750*1334的IP 6尺寸做设计稿;

理论上,IP 6的切图其实可以给xHDPI使用;和我们的安卓工程师沟通,要求是把IP 6的设计稿更改尺寸到720尺寸下,对各个控件进行微调,重新提供标注。也就是说,我需要提供两套标注,一套给IOS的标注,一套给Android的标注。(这是我目前搭档的要求,实际情况根据自身环境决定)

③:你需要提供几套切图资源?

答:理论状态下,如果你想兼顾到目前还存在的各个机型,应该为不同的密度提供不同尺寸大小的切图。

但这无疑提升了巨大的工作量,而且还可能浪费很大的资源空间,实际上,很多机型已经不占有主流市场了,而且很多奇葩的分辨率也没必要去考虑适配,所以,具体输出几套需要看公司的产品需求而定。

免责声明:本文来源于,由网友提供或网络搜集,仅供个人研究、交流学习使用,不涉及商业盈利目的。如有版权问题,请联系本站管理员予以更改或删除。优知网会定期发布UI设计相关趋势文章,包括 网页设计 UI界面 交互设计 移动端 用户体验 设计理论 作品分享 等领域,敬请关注!

分享到
人收藏5 收藏
 
我要评价