2022-09-28 14:42 编辑：lilintao 点击： 次 A+
最近双十一发现电脑显示器2K屏幕和4K屏幕价格下降了很多，价格已经到可以接受的地步。然后当拿到高清屏的时候你是不是觉得网站上的图标或者图片看起来有点模糊呢？
某游戏论坛icon模糊
一、高清屏分辨率
我们以2K和4K高清屏分辨率来说一个是2880*1800、3840*2160。在Win10下系统推荐会默认帮大家把分辨率调整成150%，也就是说你浏览器访问网站时的分辨率并不是4K正常分辨率，而是2560*1440。以此类推2K系统默认设置成1920x1200。(注意这里MacOS系统不一样，以15.6寸来说系统会设置成1440x900)所以为什么你看的时候就会显示模糊了，系统自动为你拉大了1.5倍，这个时候要是网站图片不适高清图，图标不适矢量图就会出现模糊。
这里在Win10下我个人喜好设置到175%会看上去更清晰更大一点，眼睛会舒服很多。而设置到175%时，就会由默认的分辨率3840*2160，变成2195*1235了。
如果你电脑是MacOS系统可以在系统偏好设置-显示器进行调试，外接显示也是在这里调试。
外接显示器
二、怎么让你的设计稿不模糊
1.改变图片大小
如果你网站使用的是位图，而你又用了高清屏系统那么自动会帮你图片拉大到1.5倍或者2倍，如果你还是以你原来的1倍设计稿切图的话，被拉大的图片自然就会变成模糊。
图片被拉大边缘模糊
知道原理以后你是不是就可以对症下药了，这个时候你在做图的就把尺寸设置成2倍或者3倍大小开始制作，或者你图片是用的矢量工具画的那么你在导出的时候就可以导出为了2倍或者3倍稿。
导出图片设置
2.制作图标利用SVG格式
我们在制作图标的时候可以把图标格式导出为SVG格式，这样就可以按1倍导出，因为SVG格式是矢量的可以无限放大缩小，图片都不会模糊。而且还可以在程序里面设置任意颜色，减少切图的工作量，现在很多网站都在使用，不过这里banner不适合。
矢量图拉大也没有模糊
而SVG格式制作也很方便，现在主流的设计软件都支持SVG格式导出。
主流设计软件都支持导出
3.把你图标转换成iconfont
我们都知道现在很多网站或者组件库都有图标库，而这些图标库图标都会打包到一个字体库里面，其原理就和SVG格式一样。只是字体库方便转换而且也减少网站带宽资源。你可以根据自己的需要自己生成公司产品的字体库方法很常见，上传完以后交给前端开发调用就可以了。这里我们可以去国内最有名的阿里巴巴矢量图标库去制作。
这就是我自己项目的字体库
三、总结
2K屏和4K屏幕以后肯定会慢慢普及，而网站又是一个企业对外的形容，如果这个时候看到你的网站图片模糊或者显示不正常的时候，在客户和用户心中就会大打折扣。这里只是浅谈了怎么快速让你的网站图标或者图片适应现在的趋势，这里图片模糊只是一个开始，还有后面适配不同屏幕大小的现实内容多少的问题，几年前响应式设计在国外就很出名，只是当时移动互联网的发展，造成现在PC端网站很少有人使用，现在整体发展缓慢下来了是不是可以考虑一下网站的用户体验问题了。尤其是现在B端设计，都是大屏全屏布局，要是在高清屏下面没有很好的设置显示布局的断点，就会造成显示内容的错位或者有横向滚动条，这个时候也是考验设计师全局观和经验了。我相信以后的设计师会更加在项目中有话语权，同时体验设计师也会在B端设计中发挥重要作用。