这篇文章将简明直接地告诉你如何处理，让展示稿最清晰！

相信有些设计师会困惑于自己的设计展示稿有时候视觉感受上不够清晰，自然也不知晓如何更清晰，因为不明白具体原因。首先可以确定的是，这不是因为你近视了。这里我可以先说出输出更清晰的设计稿的核心思路：

做展示稿的时候，力求画板的所有元素（包括画板自身）输出时可以通过常见倍数导出。

原因是，尺寸为1000px×1000px的一张清晰的位图，分别导出为999px×999px以及500px×500px的位图，前者的视觉观感是不如后者的。

注意：这里说的是视觉观感，也就是视觉感受上的清晰（可以想象一下摄影范畴的的清晰），而不是可以看到的内容大小。

这里用一张喜欢的设计师 Tran Mau Tri Tam ✪ 的设计稿做为例子：

800px的原图 

799px的图，视觉观感不够清晰，很模糊

400px的图，单说视觉观感，足够清晰 

接下来是具体操作。

以dribbble为例，展示稿尺寸默认为1600×1200，那么你需要在设计展示稿的时候，尽可能让自己的画板尺寸在矢量设计工具里与1600×1200（目标尺寸）保持常见倍数的关系。

假设这张展示稿是展示了一个响应式的网页，有Desktop、Tablet、Phone这三个尺寸，而且设计稿为1x大小，宽度分别为1440、720、400，那么，为了保持完美的像素视觉感受，最好的做法，就是把设计稿原封不动地放置到展示稿的画板上，然后再根据目标尺寸的常见倍数的尺寸去调整到一个较为理想的网页与展示稿的比例。

常见的倍数，也就是50%, 75%, 100%, 150%, 200%...

对应的画板尺寸，便是800×600, 1200×900, 1600×1200, 2400×1800, 3200×1600...

换个说法，就是0.5x, 0.75x, 1x, 1.5x, 2x嘛。

推荐为不同的设计社区导出不同宽度的展示稿。

原因相同，即使导出的设计展示是清晰的，但是在网页中展示的实际大小构不成一个较好的倍数，比如不是0.75倍或0.5倍，而是类似0.999倍这样不太常见的比例，那么就不会比针对优化的更清晰。

一个极端的例子，会用浏览器的审查元素的设计师可以实际验证一下：

通过修改css，使这张图片显示尺寸变为799px，可以看出同样会很模糊 

至此，你应该感受到了设计稿保持清晰的思路，再回顾一下：

做展示稿的时候，力求画板的所有元素（包括画板自身）输出时可以通过常见倍数导出。

Powered by Froala Editor