跳到主要内容

设计4K就绪网站的4个技巧

本周只存20%。使用代码SAVE 20在任何信用包上

你可能已经眨了眨眼,错过了它,但在过去的几年中,解决方案已经发生了一些变化。作为一种实验性和尖端技术,4K屏幕现在已司空见惯:电视屏幕,电脑显示器甚至智能手机。

随着4K每英寸像素数量增加四倍,网页设计师需要确保他们的网站在最新屏幕上看起来尽可能好。当然,如果你已经遵循了原则响应式网页设计,这将使您获得大部分的方式,以确保您的网站在任何地方看起来都很好。但除此之外,这里有四个你在4K时代特别需要注意的领域......

01.使用可缩放图形

Icons, logos and other graphics should be created as scalable, not raster images

图标,徽标和其他图形应创建为可缩放的,而不是光栅图像

为了使您的网站在4K屏幕上看起来不错,您需要尽可能使用可缩放而非光栅图像。

对于栅格格式(包括jpegs,GIF和PNG),每个图像都包含固定数量的像素,因此随着它们的大小增加,它们会变得更像素化和模糊。相比之下,可缩放格式(称为SVG(可缩放矢量图形))基于几何形状。这意味着无论它们多大,它们都将保持清洁。

当然,您仍然需要为照片使用光栅格式。这意味着您需要使用媒体查询为4K和5K Retina屏幕提供高分辨率版本的照片,并为移动设备提供更小,更低分辨率的版本,以避免在3G和4G连接上破坏您网站的性能。 (如果你正在处理大量图像,那值得注意Photoshop CC允许您同时导出多个尺寸的单个图像。)

但是,徽标,绘图,用户界面工具,按钮等应始终创建为SVG。这可以在Adobe Illustrator,CorelDraw和Affinity Designer等软件中完成。要了解有关可扩展图形的更多信息,请阅响应式SVG的10条黄金法则

02.考虑更大的显示器

The New York Times website, as screengrabbed by Jon Yabkonski on a large monitor

纽约时报网站,由Jon Yabkonski在一台大型显示器上播放的屏幕

在考虑您的网站在4K中的外观时,请记住,更高的分辨率正在使更大,更大的屏幕更受欢迎。

因此,尽管我们只是习惯于在1920x1080显示器上观看我们网站的想法,但我们现在必须考虑它们在2,560像素宽的显示器上的外观。许多网站在这些屏幕上难以阅读,其中文本和内容可能看起来收缩和缩小,并且空白过多。

这个Jon Yabkonski的精彩文章CSS Tricks解决了这些更广泛的显示器所面临的技术挑战,并提出了一些解决方案。

03.使用4K视频

Stock libraries like iStock by Getty Images can provide a wide range of 4K footage

像iStock by Getty Images这样的股票库可以提供各种4K镜头

因为我们的眼睛以静止图像无法与之竞争的方式自然地响应运动,所以视频是吸引网站访问者注意力的流行工具。但是,无论您是将视频标题,视频背景或战略视频片段添加到您的网站,现在,您必须以4K格式提供服务,以避免在最新设备上看起来笨拙和过时。

现在有许多廉价而简单的方法可以拍摄4K镜头,其中包括许多最新版本剧照相机POV运动相机智能手机提供4K拍摄功能。或者,如果你没有时间,或者需要一些你无法拍摄的东西,比如无人机镜头,那么大多数图书馆现在都有大量4K视频内容供你下载。

有关使用4K视频的更多信息,请查看新一代4K视频对设计师意味着什么

04.购买4K显示器

Buying a monitor like the Acer S277HK takes all of the guesswork out of ensuring your site works in 4K

购买像Acer S277HK这样的显示器可以避免所有猜测,确保您的网站以4K工作

在一天结束时,确保您的网站在4K显示器上看起来不错的最佳方法是 - 显而易见 - 购买4K显示器。好消息是它可以以250英镑的价格上涨,尽管和所有事情一样,你得到的是你付出的代价。

您将在我们的姐妹网站TechRadar上找到最新的监视器综述这里,如果您的工作涉及3D,动态图形和/或视频编辑,您可能想要结帐本综述太。

阅读更多:



翻译字数超限