酬诚APP众包

当前位置: 酬诚APP众包  >   APP开发教程  >   详细页面

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

资讯分类 :APP开发教程 来源 : 酬诚APP众包 浏览次数 : 15 发布时间 : 2017-07-18





Part 1    根底概念


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


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


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


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






Image title


能够测验算算自个手机的屏幕密度~




②Android自身设定的屏幕密度


安卓尺度许多,按每个屏幕去适配必定不现实;所以为了处理这个疑问,安卓手机屏幕有自个初始的固定密度,安卓会依据这些屏幕不相同的密度自个进行适配。这一点内容掌握到能满意自个规划作业需要就能够。以下是Android的密度区分以及代表的分辨率,这儿你能够发现现已和规划稿尺度和切图输出开端挂钩了


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


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,以此类推。


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




Image title


②运用哪种尺度做规划稿?


答:经过上图你会发现,xHDPI下,倍数联系为2,并且xHDPI就如今的市场来看,还算归于干流机型;这样无论是标示,仍是干流机型都能统筹的到,所以引荐运用720*1280尺度做规划稿,这么即便你标示的是px,工程师也能够换算的对比方便。如今有一种状况对比遍及,公司做了IOS版别的规划稿,如今要给安卓用,应当怎样办?


IPhone的屏幕密度现已到达xHDPI了,一般用750*1334的IP 6尺度做规划稿;


理论上,IP 6的切图本来能够给xHDPI运用;和咱们的安卓工程师交流,要求是把IP 6的规划稿更改尺度到720尺度下,对各个控件进行微调,从头供给标示。也即是说,我需要供给两套标示,一套给IOS的标注,一套给Android的标示。(这是我如今伙伴的要求,实际状况依据自身环境决议)


③:你需要供给几套切图资本?


答:理论状态下,假如你想统筹到如今还存在的各个机型,应当为不相同的密度供给不相同尺度巨细的切图但这无疑进步了无穷的作业量,并且还也许浪费很大的资本空间,实际上,许多机型现已不占有干流市场了,并且许多奇葩的分辨率也没必要去思考适配,所以,详细输出几套需要看公司的商品需要而定。


一般我是这么干的:


选择最大尺度供给一套切片资本,交给工程师处理,适配到各个屏幕密度。这儿要注意,这个“最大尺度”,指的并不是如今市面上Android手机出现过的最大尺度,而是指如今流

行的干流机型中的最大尺度,这么可节约很大的资本控件。对于最大尺度选择多少,你需要和你们的安卓工程师交流,每个安卓工程师对这个疑问的定论并不相同。本来如今Assistor PS这个PS外挂对输出不相同屏幕密度的切片处理的非常方便,本来也没有想象中那么巨大的作业量。


Image title


安卓最小可操作尺度


48dp:这和IOS的最小点击区域性质是相同的,都是思考到手指点击的灵敏性的疑问,规划可点击控件的时分要思考到这一点,对于这个规划文档里现已清晰解释了,更多的内容能够去下载规划文档查看。




安卓规划运用的字体:


方正兰亭黑简体            没发现和手机字体作用彻底相同的字体,假如做规划稿的话,兰亭黑对比挨近,能够思考运用。


西文字体:Roboto      Android西文默许字体。




这儿谢谢 @bigyang 供给的字体:


在Android 5.0以后,运用的是思源黑体,字体文件有2个称号,“source han sans”和“noto sans  CJK”。


思源黑体是Adobe和Google领导开发的开源字体,支撑繁简日韩,有7种字体粗细能够自个去下载,我这儿就不上载了,究竟LZ行事风格对比粗狂,规划稿也不是非常在乎和手机作用一模相同~




Part3  作业的一些方法


这部分不仅仅约束在Android渠道,说的是一种作业方法




Q1:IOS的切片怎样供给给工程师?


答:在前面,咱们知道了怎样切片,可是一款APP,少说也有几十个界面,莫非你要把一切界面的切片资源放到一同给工程师吗?对于这一点,我和IOS工程师进行了交流,本来我如今是把一切的图放到一个文件夹给他的,由于咱们的商品需要的切片并不多,并且咱们伙伴很久了,我的命名习气和分类习气他都现已了解了,很简单就找到;理论上,最佳的方法是每一个页面的切片资本独自放在一个文件夹里边,文件夹命好名,这么工程师可以直接套页面运用了,


Image title


大致是这个意思,终究的文件夹我就不逐个翻译了,你懂就行;由于我以前也写过一点程序,所以不习惯用中文命名文件夹和文件了。然后你的@2x,@3x的切片资本放到对应的文件夹内就能够了。这个是我自己的作业习气,不过你能够思考要不要这么做;假如你和工程师联系不错,并且是一对好基友,那本来没必要搞这么多文件夹。可是假如你做的商品切片资本许多,并且公司有需要对比规范的作业流程,主张你能够思考这种方法。不过也许会添加你的作业量,自个取舍吧。


Q2:Android的切片怎样供给给工程师?


答:IOS的切片有@2x,@3x之分,那么Android的切片依据dpi的不相同,本来和IOS的相似,只不过是依照dpi来进行资本文件夹的命名,


Image title


     依据不相同的分辨率进行切片归类,可是你看到了,假如切片格外多,供给三套乃至更多套岂不是要累死了?如今我运用的方法即是只供给最大分辨率的切片,交给安卓工程师自个去缩放适配其他分辨率吧,所以和你的伙伴交流一下。本来如今绝大多数公司限于人力物力的约束,没有这么严格的作业方法,基本上即是一个文件夹,命名好了就供给给工程师了。这儿仍是提示各位,没有固定的作业方法和方法,任何方法都是为了进步作业效率而进行的。


Part4   题外话


     许多兄弟纠结,自个规划水平前进慢,乃至呆在如今的公司没前进反而由于天天的事务需要还让步了!刚入行的人,一定要找个好师傅带着你,这么你会少走许多弯路,规划水平缓职业素养会日新月异。


那没有师傅带怎样办?

     假如是刚参加作业,主张第一年先了解作业流程和了解职业信息动态,积累了自己著作,以后跳槽吧。对于规划水平的进步疑问,本来真实检测规划水平的,仍是平面规划,这一点我之前不相信,由于我没触摸过平面规划,大学专业即是游戏美术,底子触及不到平面;可是触摸作业以后,发现平面规划水平高的人,假如把思想变换一下,在页面和UI规划上都不会差,所以我自己引荐有空研讨研讨平面规划,对规划水平的进步很有协助,主张是研讨日本的平面规划,其一是规划水平高,其二是更契合亚洲规划的习气。


啥是规划?

     规划即是处理疑问,所以不要一味的寻求视觉作用,规划不是搞艺术。许多人会发现作业好多年的规划师作业做的东西不炫也不酷,就以为他们的规划水平很烂,但本来他们能够做出炫彩屌炸天的著作,可是作业不是炫技,规划不是绘画,处理疑问才是意图。期望许多兄弟不要犯这种只知道寻求视觉却扔掉终究需要的低级过错。


        无论你是外包公司、程序员还是app开发微信开发小程序开发网站建设需求者,在选择平台时。一定要根据自己的情况,以及平台特色,选择适合自己的众包平台。

      【酬诚众包】专业提供靠谱的软件开发APP制作微信小程序开发网站开发团队,为企业打造用户满意的PC、移动APP。软件外包一个酬诚就够了。

    酬诚APP开发制作众包

90天超长保障 90天超长保障
15天包退 15天可退
权威测试 权威测试
100%实名认证 100%实名认证
一站式服务 一站式服务