切图标注】APP的UI设计,有没有办法一套切图适配所有分辨率?包括IOS、Android

2021-12-16 17:48发布

2条回答

有一个误区!UI设计的分辨率适配不是美术设计师的工作,而是前端开发人员的工作,美术人员只要提供主要屏幕的图纸即可,其他分辨率前端开发人员在编写代码的时候会自动适配。
但是美术设计人员需要做好以下工作,否则前端人员无计可施!
1.设计页面的时候所有的图标原素必须提供AI格式或者SVG格式的矢量源文件,否则适配屏幕的时候会出现位图的锯齿。
2.进行UI界面设计的时候要满足,无限横向平铺延伸性,避免用复杂的位图做界面缩放。
3.充分去理解扁平化设计。
做好以上几点,就无需担心屏幕适配问题,如果你本身是美术兼前端开发,就就得研究SVG代码的使用了,相关知识属于H5+CSS编码技术,你可以去了解下。

20200921文 - 做更棒的自己!
3楼 · 2021-12-19 16:47


  手机端常用的设计尺寸与它们对应的切图倍数
  iOS:采用 750×1334 来设计,@2x 切图直接适配 750×1334 分辨率的机型,并向上向下适配主流分辨率(@2x/@3x)。
  
  设计稿750x1334px——切图倍数iOS@2x,iOS@3x
  
  Android:采用 720×1280 来设计,XHDPI 切图直接适配 720×1280 分辨率的机型,并向上向下适配主流分辨率(XHDPI/XXHDPI)
  
  设计稿720x1280px——切图倍数XHDPI,XXHDPI
  
  微信小程序(它的单位都是以i6的750px为划分点)
  
  设计稿750x1334px——切图倍数png24
  
  手机端网页、公众号链接等(与微信小程序统一使用i6,方便做单位转化)
  
  设计稿750x1334px——切图倍数

相关问题推荐

没有解决我的问题,去提问