020-29815005
预约专线时间:09:00-23:59

【UI设计培训】UI设计规范原理之安卓iOS适配方案

新闻来源:本站 日期:2021-12-31
关于app适配的问题,安卓为了解决适配这一问题,发明了一个单位叫DP,DP的官方解释是:逻辑像素单位。我们可能很难理解这个是什么东西。DP是一个相对的单位,并不是一个绝对值,1DP对应的是液晶屏幕上的一颗小液晶。接下来优漫教育小编来介绍一下:UI设计规范原理之安卓iOS…

  关于app适配的问题,安卓为了解决适配这一问题,发明了一个单位叫DP,DP的官方解释是:逻辑像素单位。我们可能很难理解这个是什么东西。DP是一个相对的单位,并不是一个绝对值,1DP对应的是液晶屏幕上的一颗小液晶。接下来优漫教育小编来介绍一下:UI设计规范原理之安卓iOS适配方案。


【UI设计培训】UI设计规范原理之安卓iOS适配方案


  市场上有很多分辨率不同的屏幕,安卓为了方便管理这么多不同分辨率的屏幕与机型,巧妙的设计了不同的分辨率以方便适配,这5个是常见通用的分辨率,分别为MDPI、HDPI、XHDPI、XXHDPI、XXXHDPI。

  MDPI是安卓最原生的分辨率,所以设计师在设计安卓UI的时候,要以MDPI为准。MDPI对应的是160分辨率,所以当iPhone1的分辨率是165的时候,安卓系统就会自动识别到它的分辨率在160左右,然后四舍五入归类到MDPI,如果是一个326分辨率的屏幕,安卓系统就会自动归类到XHDPI,对应的就是320分辨率。

  安卓就是通过这些常用的分辨率,把所有的机型都进行了一些四舍五入的归类,设计师在面对这么多机型的情况下,只要理解好这5个分辨率,就可以很好的管理和适配设计稿。

  再来说说这些分辨率的换算逻辑。如下图所示,MDPI就是最原生的1x图,HDPI就是MDPI的1.5倍,XHDPI就是2倍,以此类推。

  以设计工具来说,设计的时候要以MDPI为准。

  在标注尺寸的时候,例如宽度为360,如果单位是PX,那么在不同分辨率的屏幕下显示的就是不一样的结果,这个时候需要把PX在标注的时候换成DP,换成DP之后,安卓就会基于1倍、1.5倍、2倍、3倍、4倍的换算方式,自动把标注的尺寸在不同的分辨率下进行换算。

  如果单位是PX,就可以看到红色区域在不同分辨率下,160乘以160PX为单位的色块,它显示的就会不一样。如果在标注的过程当中,160后面的单位是DP,这个时候在不同分辨率显示的情况下,它都是一样的,因为在标注的过程中,安卓系统已经进行了1倍、1.5倍、2倍、3倍、4倍的换算。所以在设计安卓UI的时候,要以MDPI为准进行最原生的设计稿设计,标注的时候,需要把尺寸单位设置为DP。

  在平时的设计工作当中,不仅仅要进行标注,还要进行导图。有很多东西是通过前端工程师代码编写出来的。

  我们标注了它的宽度是360DP,这个时候就不需导出任何的图,前端工程师会用代码把尺寸写出来。

  但是在页面设计中会出现很多位图,比如说头像,这个就必须导出图片,一旦导出图片,那它的单位就不是DP了,因为导出的格式通常都是JPG或PNG的图片,所以它就变成了一个以PX为单位的图片,这张以PX为单位的图片在不同分辨率的情况下就会出现不一样的显示效果。所以我们在导图过程当中,需要去了解前端的工作环境。可以看到前端的工作环境里有5个文件夹,分成MDPI、HDPI、XHDPI、XXHDPI、XXXHDPI,这个时候就需要把PX和DP进行一个换算。如果这张图是40PX乘以40PX,就需要把这张图放在MDPI文件夹,HDPI就是40PX乘以1.5得到了60PX,放到HDPI文件夹里。所以同一张图片我们需要导出5个尺寸,分别给到前端工程师,当系统监测到手机用的是什么样的分辨率的情况下,它就会调用文件夹里面的切图,就能完美的显示了。

  以上就是有关“UI设计培训】UI设计规范原理之安卓iOS适配方案”相关内容,学习ui设计培训,可以参考优漫教育提供的ui学习路线,该学习路线内容包含ps软件入门、AI与品牌设计、视觉表达技法、web视觉设计、图标设计、产品交互、移动端设计等,根据优漫提供的ui学习路线图,可以让你对学好ui需要掌握的知识有个清晰的了解 。