为什么UI设计切图后成品模糊?

哈喽,大家好!我是5PLUS。为了帮助更多准备入行的小伙伴对UI设计培训的疑问,整理一些比较细致知识分享给大家。

冯:

如果是因为技术套用后出现的模糊,可能没提供3倍图,这样在更高分辨率时,图标就会模糊,因为被人为放大了,PNG是位图,是不能无限放大的。

这跟你建立界面的初始分辨率有关系,比如你是按照640与750分辨率为基础画布,那么图标本身就是2倍图(关于倍图关系,建议去百度一下相关技术类文章)。放到更高分辨率的手机上,就会被人为变大,由于是位图,放大后有些图标会有明显的失真。

我习惯用高倍图(1080分辨率)做基础画布,这样缩小的时候有很多图标是不会失真的,失真的一部分重绘也方便,这个倒没有规范,按照你个人喜好来就行了。

目前比较普遍的解决方案就是要针对3倍图进行一次图标的重绘,提供3倍图让技术能向上兼容更高分辨率,技术通过代码根据用户的手机分辨率来判断使用那个倍图。 按照这个道理,你可能还要提供1倍图,向下兼容。 就我的了解,目前没有什么准确的规定,设计师最终要完成的就是各个终端都能保持良好的效果,技术团队的习惯也会影响你输出的方法,所以最好是与技术团队沟通一下。

补充:如果是倍图输出的问题,关于命名与文件夹规范也请及时与技术团队同步或沟通,确定一致性与可用性。 如果是在电脑端出现模糊,应该跟手机端一个意思,使用了等比放大适应分辨率的代码,这样你基础设计如果不是高分辨率,放大后自然是模糊的。 这与你PS中使用那种格式来绘制没什么关系,跟输出有关系。如果直接输出就模糊,那估计只可能是存储PNG时使用了8位色,而通常我们存储的都是24位色PNG。

另外关于切图如果想系统的说清楚,还是蛮多,能满足输出与技术要求就好。

本页面最后更新于 2020年12月10日 10:38