androidui适配
‘壹’ Android应用的UI设计图要做多大分辨率
Android应用的UI设计图要做的分辨率为:1920*1080;
一般来说安卓常见的分辨率为:320*480;480*800;540*960;720*1280;1920*1080;
但对于UI设计来说,尽可能保持设计的分辨率达到技术开发的标准,一般都以720*1280或1920*1080为主,但为了避免技术协调的冲突,则以1920*1080为主,不会出现大的错误。
‘贰’ UI设计稿IOS和安卓如何适配
方案一
IOS与Android共用一套效果图 1242*2208
IOS与Android常用的尺寸中,最大尺寸的为i6+的尺寸,即1242*2208px
IOS常用尺寸为1242*2208750*1334640*1136640*960
其中750*1334640*1136640*960同为@2x,1242*2208为@3x
所以750*1334640*1136640*960只做一套640*1136就好了
Android常用尺寸为1080*1920720*1280480*800
他们之间相邻是可以整除1.5的,也就是1080除以1.5等于720,720除以1.5等于480
即,这三个尺寸可以等比缩放大小,只做一套1080*1920就可以了。
那么,问题来了。
IOS要做两套尺寸,1242*2208与640*1136
Android要做一套尺寸,1080*1920
这样不就是三套了吗?
其实,i6+的尺寸1242*2208整除1.15就刚好等于1080*1920
也就是说,1242*2208与1080*1920是可以等比缩放的
那么,i6+与Android的尺寸只做一套1242*2208就可以了。
现在就剩下IOS的640*1136
1242*2208可以直接缩放成640*1136吗?
如果要等比缩放肯定不行,因为他们之间不能整除
但是,如果我们把1242*2208的尺寸直接放到PS里等比缩小宽度到640,会发现原本2208的高度变成了1138,也就是比1136多了2px,2px的误差其实无关紧要了,硬着头皮改成1136去!
现在,你会发现,里面的图标,其实1138跟1136的大小都是一样的。
为什么提到图标呢?因为我们的交付物只要一套效果图与五套切图就好了。
一套效果图1242*2208
五套切图12426401080720480
最后,注意缩放后的图标要细调一下。由于转换有误差,共用一套效果图是有一定的风险的,例如UI细节上的风险。开发前,设计师与技术人员要先共同确认此适配方案,全程沟通,及时改正UI方面的问题。
方案二
IOS与Android共用一套效果图750*1334
上面提到,750*1334640*1136640*960同为@2x,所以750跟640用同一套图标,同一套字体就可以了,至于其他的尺寸大小,只要跟着尺寸延伸就没问题了。
750*1334应用到1242*2208,则需要把@2x的图标放大导出成@3x,也就是把字体图标放大1.5倍,其余的,直接放大到1242就行了。
至于Android的版本,我个人的做法是把750*1334直接换算成为1080*1920,因为只有1px之差,我就忽略了。换算出了1080*1920,那么Android的其他尺寸也就好办啦~同样,我们的交付物只要一套效果图与五套切图就好了。
一套效果图750*1334
五套切图12426401080720480
方案三
IOS与Android各做两套效果图
原理跟方案一、二差不多,但为了追求细节上的完美,可以多做一套效果图,即两套效果图
1242*2208与640*1136
1242*2208适配i6+Android三种尺寸
1242*2208整除1.15等于1080*1920
1080*1920整除1.5等于720*1280
720*1280整除1.5等于480*800
640*1136适配i6i5i5s等尺寸
方案四
如果需要更完美,那就需要做三套效果图了
1242*2208640*11361080*1920
还可以再加一套640*960
总之,分开做的越多套效果图,出来的效果就越精细。反之,看起来可以就行了。
‘叁’ IOS与Android的UI设配方案
IOS与Android共用一套设计效果图 1242*2208
IOS与 Android常用的尺寸中,最大尺寸为6p的尺寸,即1242*2208px
IOS常用尺寸: 1242*2208 750*1334 640*1136 640*960,其中750*1334 640*1136 640*960 同为@2x 1242*2208为@3x,所以750*1334 640*1136 640*960只做一套640*1136就好。
Android 常用尺寸:1080*1920 720*1080 480*800,他们之间相邻是可以整除1.5的,也就是1080除以1.5等于720,720除以1.5等于480,即这三个尺寸可以等比缩放大小,只做一套1080*1920就可以。
那么问题来了。
IOS要做两套尺寸,1242*2208与640*1136
Android要做一套尺寸,1080*1920
这样不就是三套设计图了吗?设计师们会被气死的?
其实,6p的尺寸1242*2208整除1.15就刚好就等于1080*1920,也就是说,1242*2208与1080*1920是可以等比缩放的。
现在就剩下IOS的640*1136。
那么就有人问,那IOS的1242*2208可以直接等比缩放成640*1136。答案是不可以的,因为他们之间不能整除的,但是我们把1242*2208的设计图直接在Photoshop里面直接等不缩放到宽度为640的尺寸,我们会发现原本的2208变成了1138,也就是说比1136多了2个像素,2个像素的误差对于没有有强迫证的也就无所谓了,2个像素的误差我们会将1138硬改成1136,现在你会发现,里面的图标,1136跟1138大小其实是一样。
为什么提到图标呢?因为我们交付的物只需要一套效果图与五套切图就好了。即
一套效果图 1242*2208
五套切图 1242*2208 640*1136 1080*1920 720*1080 480*800
最后注意缩放的图标要细调一下,由于转换有误差,共用一套效果图是有一定风险的,例如UI细节上的风险。开发前,设计师与开发人员要先共同确认此适配方案,要全程沟通,及时改正UI方面的问题。
IOS与Android共用一套设计效果图 750*1334
上面提到过,750*1334 640*1136 640*960 同为@2x,所以750跟640用同一套图标,同一套字体,至于其他尺寸大小,只要跟着尺寸延伸就没问题啦。尺寸750*1334应用1242*2208,则需要把@2x导出成@3x,也就是把字体放大1.5倍,其余的直接放到1242就可以啦。
至于Android版本,我个人的做法是把750*1334直接换算成1080*1920,因为只有1PX像素只差,直接忽略。换算出1080*1920,Android的其他尺寸就按他们之间的规律处理就可以啦。
因为我们交付的物只需要一套效果图与五套切图就好了。即
一套效果图 750*1334
五套切图 1242*2208 640*1136 1080*1920 720*1080 480*800
IOS与Android各做两套设计效果图
原理跟方案一、二差不多,但为了追求细节上的完美,可以多做一套设计图,即两套设计图:1242*2208和640*1136.
1242*2208适配6P、Android三种尺寸。
1242*2208整除1.5等于1080*1920:
1080*1920整除1.5等于720*1280:
720*1280整除1.5等于480*800:
640*1136适配6 5 5S等尺寸。
如果追求完美,那就需要三套图。即:
1242*2208 640*1136 1080*1920
还可以加上一套640*960,总之分开做越多套,出来的效果图就会越精细,反之,你懂得,不过这也取决设计师本人和公司领导的决策,会不会给那么多时间。不说废话了,希望能帮到各位!
‘肆’ 安卓系统UI设计尺寸怎么定
众所周知,安卓系统是开源的,国内又有超多的手机厂商,小米、魅族、华为、oppo、三星等,每一个品牌有属于自己的UI设计规范,但是我们主要分析UI界面尺寸规范。
1、字体
安卓系统中文采用的是思源黑体,英文字体为robot字体。
只使用偶数单位 24 pt,28 pt,36 pt等字体大小
2、mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi、dp、px到底是什么意思?
讲图标之前先来分析一下一排英文的意思:
mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi都是表示的屏幕密度大小,依次数值越大,其分辨率越高。常用的是xxhdpi和xxxhdpi。
dp是安卓系统专用的长度单位,设备独立像素的意思。不同设备有不同的显示效果,这个和设备硬件有关。多为图标使用,文字则用sp(放大像素),主要用于字体显示best for textsize。
px是像素的意思, 不同设备显示效果相同。
安卓各屏幕密度关系如下:
3、图标
不同手机品牌的图标的标志是不一样的,对应不同大小屏幕的尺寸如下:
应用图标的尺寸:
快捷图标的尺寸:
系统图标的尺寸:
4、应用栏的尺寸
从左到右依次是:① 应用栏高度:56dp;应用栏左右内边距为16dp;应用栏图标上下左内边距为16dp;应用栏标题左内边距为72dp;应用栏标题下边距:20dp;
②应用栏高度为128dp;
③操作栏高度为56dp;标题栏高度:80dp;标题栏底部内边距:8dp;描述区域高度:72dp;描述区底部内边距:16dp。
5、列表高度
垂直边框、水平外边距、边框左右外边距各16dp;带有图标或者头像的内容有72dp的左边距。
垂直边距
①状态栏:24dp;②工具栏:56dp;③子标题:48dp;④列表项:72dp
垂直边框、水平外边距、边框左右外边距各16dp;带有图标或者头像的内容有72dp的左边距。
垂直边距
①状态栏:24dp;②工具栏:56dp;③标题和列表项:48dp;④子标题:48dp;⑤内容区域间距离为8dp
6、界面适配
安卓多屏幕支持的基础是它能够管理应用程序的布局和位图可绘制对象的渲染以适当的方式对当前屏幕配置的能力。该系统处理的大部分工作由布局缩放以适合屏幕尺寸/密度和缩放位图可绘制在屏幕密度正确呈现您的应用程序在每个屏幕的配置,来优化用户界面设计,带来更良好的用户体验。
如何做到安卓界面适配呢?大家一定要很清楚的了解分辨率、屏幕大小、密度的关系;明白实际密度和系统密度的关系,dp、sp、px的区别;明白dp与px的转换。这里不做过多阐述,后期写一篇具体的~
安卓的界面规范就讲到这里,要明白设计界面规范的意义是确保设计的统一性与合理性,规范维护的是项目的统一,为了项目利益最大化,高效化。所以作为UI设计师的我们,如果一点设计规范不遵守,全靠自己想当然,那就别发给前端人员啦,他也看不懂。