集团主站
欢迎来到成都达内官方网站!达内—美国上市公司 亿元级外企IT培训企业!
成都it培训哪家好
成都it培训哪家好
全国服务监督电话:15023458194  |   联系客服   |
当前位置:主页 > 培训课程 > UID >

成都ui设计培训学校UI设计教程:Android与iOS切图规范要点教程

发布者: 成都达内     浏览次数:     发布时间:2018-10-24 10:31:02

这是一篇非常实用的APP切图小教程!成都达内小编结了在Android与iOS切图的要点,以及两者的转换公式。总结起来,有这么几条读者应当牢记...

  成都ui设计培训学校UI设计教程:Android与iOS切图规范要点教程

  内容提要:这是UI设计教程系列第四篇,为大家分享的app切图教程,告诉我们一些APP切图要领和Android与iOS切图规范.

  编按:这是一篇非常实用的APP切图小教程!成都达内小编结了在Android与iOS切图的要点,以及两者的转换公式。总结起来,有这么几条读者应当牢记:

  第一,切图前一定与技术人员进行沟通,减少不必要的修改。

  第二,纯色和渐变图(背景)都只需切一小条即可,技术人员可以平铺获得设计效果。

  第三,默认状态和选中状态需要各切一套。是否需要把文字也切上,需要与技术协商。

  第四,不要忘记标注文字大小、行间距、色值。

  随着移动客户端的普及,GUI设计师也雨后春笋般涌现出来。但是没有经过实践经验的设计师往往在不起眼的切图工作中出现种种问题,成都达内小编为大家总结了在安卓与iOS两个平台中切图的实用经验,希望对刚接触移动客户端设计的童鞋有所帮助。下面是正文教程。

  从2011年开始接触APP,发现了一个共同点就是和每一个技术搭档切图的时候,会遇到不同的问题,因为技术的水平高低有限,所以他们要求你给切图的时候也会不一样,针对切图后来我总结了一套规律分享给大家,希望互相学习~

  第一,android切图规范

  在做android版本设计的时候,尺寸有很多种,这时我们要以一种尺寸为基准,那这个基准尺寸是480px*800px,设计图完成之后就开始切图了,成都达内小编拿一张图为例子讲解:

  成都ui设计培训学校

  当看到上边这张设计图的时候,我们首先分析下应该给技术切哪些图(为了避免以后少改动,建议切图之前最好和技术先沟通下,怎么切);

  1、底部栏目的icon和背景:

  成都ui设计培训学校UI设计教程

  这个一般有2种切法:(有默认和选中之后的效果)

  成都ui设计培训学校UI设计教程

  2、顶部栏目的背景切图:

  成都ui设计培训学校UI设计教程

  由于顶部导航栏的是渐变样式,所以切图只需要切一小条,技术来平铺拉伸就可以~(PS:如果是花纹背景,就必须切整条了,因为花纹切一小条就会被拉伸了~)

  3、标注文字大小和行间距:(以这张图为例子,我标注好了,请看下图)

  成都ui设计培训学校UI设计教程:Android与iOS切图规范要点教程

  需要注意的:

  A:android主要有3种屏,即:

  QVGA和WQVGA屏density=120;

  HVGA屏density=160;

  WVGA屏density=240;

  B:apk的资源包中,

  当屏幕density=240时使用hdpi标签的资源

  当屏幕density=160时使用mdpi标签的资源

  当屏幕density=120时使用ldpi标签的资源;

  C:我们标注的是PX,但是技术的算法是DP,所以需要PX和DP进行转化,PX和DP的转化主要跟密度有关系,当密度density=160即(屏幕尺寸:320*480)时,1PX=1DP;当密度density=240即(屏幕尺寸:480*800)时,1PX=0.75DP;当屏幕的尺寸大于480*800的时候,密度都按照240计算即可;当密度density=120即(屏幕尺寸:240*320)时,这个现在几乎没有人用了,所以我也不知道转化公式。

  注意:因为我们做的是基于480*800尺寸的,大家都知道android的尺寸太多了,要想适配现在流行的尺寸,比如:640*960;720*1280等,唯一的解决办法就是图标可以根据不同尺寸各做一套,也就是图标需要做480、640和720共3套图标,不过如果你们的产品的要求不严格,做一套就可以,只不过是在大于480尺寸的屏幕上有些图标被拉大变虚而已~

  第二,ios切图规范

  在做ios版本设计的时候,尺寸有3种,分别是:320*480、640*960、640*1136;这时我们要以一种尺寸为基准,那这个基准尺寸是640px*960px,设计图完成之后就开始切图了,我拿我之前设计的一张图为例子讲解下:

  成都ui设计培训学校UI设计教程

  当看到上边这张设计图的时候,我们首先分析下应该给技术切哪些图(为了避免以后少改动,建议切图之前最好和技术先沟通下,怎么切);

  1、底部栏目的icon和背景:

  成都ui设计培训学校UI设计教程

  这个一般有2种切法:(有默认和选中之后的效果)

  成都ui设计培训学校UI设计教程

  2、顶部栏目的背景切图:

  成都ui设计培训学校UI设计教程

  由于顶部导航栏的是多颜色的,所以只能切一整条给技术,商圈的图标要单独切出来

  成都ui设计培训学校UI设计教程

  3、二级标题栏目的切图:

  成都ui设计培训学校UI设计教程:Android与iOS切图规范要点教程

  成都ui设计培训学校UI设计教程

  4、主体栏目的切图:

  成都ui设计培训学校UI设计教程

  5、标注文字大小和行间距:(以这张图为例子,我标注好了,请看下图)

  成都ui设计培训学校UI设计教程:Android与iOS切图规范要点教程

  需要注意的:

  A:我们标注的尺寸是像素px,技术那边的实际运用到技术中的是像素的一半,即像素的一半=技术的尺寸;例如:“分类”2个字,我标准的是36px,技术那边的尺寸就是18px;

  B:所有文字,行间距的标注的尺寸都是偶数;因为技术那边都是根据我们的尺寸除以2;

  C:颜色的标注有的技术要求16进制,有的技术要求RGB,由于页面的限制所以我只标注了16进制的,按16进制和RGB都标注的是最好的。

  注意:因为我们做的基于640*960尺寸的,ios共有3套尺寸,因为640*960和640*1136的宽度是不变的,所以图标没有变化重新切,只是行间距需要调整下;320*480尺寸的是640*960的一半,所以技术完全可以根据你标注的640的尺寸做就可以。

  第三,android和ios的转化关系

  1.因为ios的尺寸是640*960,android当密度等于120即(320*480)时,1PX=1DP,所以android和ios的标注像素之间的换算关:即ios像素尺寸*1/2=android dp尺寸;

  2.如果你们的产品同时做android和ios,你只想标注一套尺寸的时候,就可以标注ios版的标注去计算即可。

(责任编辑:范老师)
最新开班
  • 成都Java培训班
    免费试听名额发放中...
  • 成都C++培训班
    免费试听名额发放中...
  • 成都PHP培训班
    免费试听名额发放中...
  • 成都网络工程培训班
    免费试听名额发放中...
  • 成都Unity3D培训班
    免费试听名额发放中...
  • 成都大数据培训班
    免费试听名额发放中...
  • 成都uid培训班
    免费试听名额发放中...
  • 成都会计培训班
    免费试听名额发放中...
  • 成都Python培训班
    免费试听名额发放中...
  • 成都嵌入式培训班
    免费试听名额发放中...
  • 成都web培训班
    免费试听名额发放中...
  • 成都软件测试培训班
    免费试听名额发放中...
在线留言
提交

校区地址:绵阳市涪城区临园路东段68号富临大都会7栋3单元9层12号

联系电话:15023458194

公交路线:富乐路口凯德广场(10路;29路;3路;15路;11路;15a路;71路)

校区地址:成都市锦江区东大街紫东楼段35号明宇金融广场19楼1903室

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市高新区奥克斯广场蜀锦路209号一楼商铺

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都锦江区东大街芷泉街229号东方广场C座3楼303

联系电话:15023458194

公交路线:芷泉街(188路;115路;515路;236路;505路;501路;84路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市武侯区佳灵路3号红牌楼广场2号写字楼11楼1115号

联系电话:15023458194

公交路线:红牌楼东(11路;92路;100路;111路;139路;g28路;快速公交K1/K2) 地铁路线:红牌楼站(地铁3号线)

校区地址:成都市锦江区红星路二段70号四川日报大厦502-2

联系电话:15023458194

公交路线:市二医院站(6路;49路;102路;5路;37路;g92路;) 地铁路线:地铁市二医院(地铁3号线)

校区地址:成都市锦江区东大街紫东段35号明宇广场2306

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:四川省成都市武侯区高新科技孵化园9号园区E座7楼

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都市成华区建设路10号万科钻石广场B座5楼

联系电话:15023458194

公交路线:建设路中(6路;14路;42路;72路;76路;1010路;)

校区地址:成都市高新区奥克斯广场B座1708

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

了解达内动态
关注成都达内教育公众号

首页 | 关于达内 | 课程中心 | 专家师资 | 视频教程 | 学员空间 | 校企合作 | 新闻资讯 | 就业指导 | 网站地图

2016-2025 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56