最近发现电脑显示器的2K屏和4K屏的价格下降了很多，价格已经达到了可以接受的水平。你是否认为网站上的图标或图像在高清屏幕上看起来有点模糊？

游戏论坛图标模糊

第一，高分辨率屏幕

我们采用2K和4K高清屏幕分辨率2880*1800、3840*2160。在Win10系统中推荐会帮你将分辨率调整为默认的150%，也就是说你的浏览器访问网站的分辨率不是4K的正常分辨率，而是2560*1440。2K系统的默认设置是1920x1200。(注意，MacOS在这里是不同的，它被设置为1440x900为15.6英寸。)那么为什么在你看的时候会出现模糊呢，系统会自动为你放大1.5倍，而这个时候如果网站图片不是高清的，图标不是矢量图像就会出现模糊。

在Windows 10中，我个人倾向于将其设置为175%，这样看起来更清晰、更大，你的眼睛也更舒服。当设置为175%时，3840*2160的默认分辨率变为2195*1235。

如果你有MacOS，你可以在System Preferences - Display和external Display中调试它。

外部显示

二、如何让你的设计稿不模糊

1. 调整图像大小

如果你的网站使用位图，并且你使用的是高清系统，那么图像将被放大到1.5倍或2倍。如果您仍然使用原来的1x设计裁剪图像，则放大后的图像将变得模糊。

这幅画被放大和模糊了

如果你知道原则，你就能做正确的事。此时，在制作图片时，可以将大小设置为2或3倍即可开始制作。或者，如果你用矢量工具绘制图片，你可以将它们导出到草稿的2到3倍。

导出图片设置

2. 制作SVG格式的图标

当我们制作图标时，我们可以将图标格式导出为SVG格式，这样我们就可以以1x的速度导出，因为SVG是矢量格式，你可以无限放大和缩小而不会模糊图像。而且还可以在程序中设置任意颜色，减少工作量，现在很多网站都在使用，但是这里的横幅并不适合。

矢量图被放大而不模糊

SVG格式的制作也非常方便，现在主流的设计软件都支持SVG格式的导出。

主流设计软件支持导出

3.将你的图标转换为图标字体

我们都知道许多网站和组件库都有图标库，这些图标库被打包成一个字体库，就像SVG一样。但是字体库很容易转换，也减少了网站的带宽资源。您通常会根据自己的需要生成自己的字体库，然后将其上传到前端并调用。这里我们可以去国内最著名的阿里矢量图标库制作。

这是我自己项目的字体库

3总结

2K屏和4K屏会慢慢普及，而网站都是企业对外的描述，如果这个时候看到你的网站图片模糊或者显示异常，在客户和用户心中都会大打折扣。这里只是讲速度，让你的网站图标或图片以适应当前的趋势，这里的图片只是一个开始，有一个背后的实际内容不同屏幕大小的问题，几年前响应设计在国外很有名，但在移动互联网的发展，导致电脑网站很少使用，现在全面发展放缓，有可能考虑网站的用户体验？尤其是现在设计的B端，都是大屏全屏布局，如果在高清屏下面没有很好的设置显示布局断点，就会造成显示内容错位或者横滚动条，这个时候也是对设计师整体观感和经验的考验。我相信未来的设计师会在项目中拥有更多的话语权，体验设计师也会在B终端的设计中扮演重要的角色。