高清晰度网页设计如何生存

当然，高清技术普及还有一段时间，但从统计数据来看，它的发展速度确实很快。随着苹果视网膜显示屏(retina display)的性能达到旧ppi的两倍，HD不再是一个特别的惊喜，而是成为一种普遍期待，这只是时间问题。

但是，当你的用户仅仅需要去买一个高清设备来欣赏它的时候，设计师就必须在他们的终端上投入更多的工作。

在这篇文章中，我们将解释一些快速的技术，以适应你的设计过程，为将来的HD。

简单地说，高清晰度设备显示图像与更高密度的像素每英寸(ppi或dpi，互换)。从技术上讲，任何大于200 ppi的都被认为是高清晰度。相比之下，典型的标准清晰度显示器——互联网的基础——只有72 ppi。

目前，这些设备的现状是:

与此同时，新推出的Retina iMac、MacBook Pro和MacBook Air的ppi都在220 ppi左右。

我们看到的是，随着技术战争的继续，所有数字产品的分辨率都在稳步上升。因此，越来越多的设计师加入进来，我们看到了网站高清背景(以及其他图片)的兴起。更清晰的图像为设计师们打开了很多创意之门，但同时也带来了一系列我们仍在努力解决的新问题。

当然，更高的分辨率意味着更多的数据，这意味着更长的加载时间。现在，HD的设计师们正在努力减少文件的重量，无论是在其他地方腾出空间，还是采用其他的设计方法(我们将在下面讨论)。

另一个主要因素是标准72 ppi在HD设备上的视觉效果。最好的情况是，它们没有什么效果，尤其是与其他已经适应了高清的网站相比。随着越来越多的网站改用高清，标准网站显得越来越缺乏，这个问题只会随着时间的推移而恶化。

另一个需要考虑的问题是，你是否应该疏远一群人来迎合另一群人。据报道，在2012年，至少有一半的美国家庭拥有至少一台苹果设备，所以如果你选择HD，它肯定不会被忽略。

此外，高清视觉效果，无论是视频还是图像，价格都更高。这意味着你要为加载时间更长的内容支付更多的费用。即使你提供自己的内容，创建高清图像所必需的工具仍然是昂贵的。

问题是，高清设计的好处值得吗?我们在UXPin的设计师回答是肯定的——即使你现在仍然可以通过标准定义，HD的流行只会继续增长。你越早适应，就越能为未来做好准备。

幸运的是，你不是唯一一个对HD头疼的设计师。到目前为止，设计师已经发现了一些解决高清设计问题的变通方法和新方法。

正如在《免费电子书网页设计趋势2015》中描述的那样。2016年，我们列出的方法将帮助你量身定制你的设计过程到高清，而不必牺牲太多。

在讨论缩放矢量图形(SVG)的兴起之前，我们应该先解释一下光栅图形。

光栅(或位图)图形主要由jpg、png和gif组成。这些图像的特征是像素到像素的转换，这意味着一个位图像素被读取为一个设备像素。这在很大程度上是正常的，但现在高清正在打破这种平衡。在HD设备上，一个位图像素被四个设备像素读取。这会使标准清晰度的图像看起来模糊。

光栅图形的另一个问题是移动设备上缩放的增加。任何经常使用移动设备上网的人以前都遇到过这种情况——为了在更小的屏幕上更好地看到图像，你试着放大，却发现你把图像变得更模糊，而不是更清晰。

有几种方法可以解决这个问题，其中一种就是SVG。

svg使用连接点和线而不是像素来创建图像。这意味着文件可以考虑像素分辨率的差异以及放大和缩小。简单地说，svg可以区分屏幕类型并进行必要的调整，而光栅图形总是相同的。要想看到矢量的最佳状态，去上面的Les Jardins de la Poudriere和发挥窗口大小。

SVGs是完美的“修复”，不仅为高清显示，但始终响应设计。唯一的问题——也是一个大问题——是照片和其他已经存在的图像。照片总是光栅图形，因为图像本身是在有限的像素上创建的。为了正确地显示照片，必须使用另一种方法。

传统上，图像是在浏览器中呈现的，这正是出现这些问题的地方。如果你渲染你的图像在HTML(宽度&但是，您可以更多地控制它们的查看方式，并且有时可以避免难看的模糊。

最简单的解决方案是将图像的大小设置为它实际大小的一半，这样当转换为高清时，它就能正常显示。对于编码的技巧和技巧——包括媒体询问如何根据设备改变尺寸——Paula Borowska在DesignModo的这篇文章中解释了细节。

随着高清视频背景的日益流行，设计师们正在寻找创造性的解决方案来缓解加载压力。其中最具创意的不是简化视频的质量，而是简化内容。

这样的高清视频只有很少的运动和/或大部分由静态元素组成。轻微的动作仍然会对用户体验产生积极的影响，但不会导致视频加载过度。

钱包套的制造商贝尔罗伊就是一个很好的例子。为了强调他们产品的耐用性和质量，他们用一个简单的高清视频来展示它在严酷的环境中毫发无损。只有飘落的雪在视频中移动，使得墙和前景中的飘落的雪比视频更接近静止的图像。飘落的雪花给人一种迷人的氛围，又不加重服务员的负担。

从技术角度来看，我们可以看到一些明智的决策在起作用。首先，整个背景使用了相当有限的调色板，这自然会提高加载时间。其次，因为视频在.mp4中渲染，移动的雪花大多有软边，而只有静止的钱包图像有硬边(同样，提高了加载时间)。

最终的结果是视觉上的妥协，效果和它看起来一样好。

就像简化内容而不是质量一样，越来越多的设计师开始欣赏“无焦点”视频设计的灵活性。像“静止”高清视频，这增加了一些高清视频的视觉乐趣，没有那么多的缺点。用户仍然能够辨别运动，这是活跃和活跃的气氛，而艺术风格掩盖了更实际的好处，减少负荷紧张。

Fernando Maclen的网站充分利用了非聚焦视频中隐含的“超级简单”。

这个策略还有一些其他的好处。简洁的元素，如链接、按钮或文本，会吸引更多的注意力，因此背后的力度也更大。这是一个很好的方式来强调某些元素。

无焦点的视频也可以作为诱饵，有条件地保证清晰的版本。虽然Maclen的网站没有这样做，你当然可以在用户点击一个号召行动，完成一个注册，购买一个特定的产品，等等之后显示真实的视频。

在这种情况下，无聚焦的视频只有640像素宽，但由于模糊效果，它在大屏幕上看起来很好。清晰的前景文字也抓住了用户的注意力，使背景效果更加无缝。

这是一个最后的解决方案，但它将在紧急情况下工作。只需减少屏幕上的图像、动画和视频的数量。你可以从高清的视觉效果中得到好处，而不用担心下载时间的问题，也不用买太多高清内容。

随着极简设计技术的兴起(也许正是因为这个原因)，这种策略的好处不仅仅是加载时间。你的站点会感觉更复杂，你会强调更多现有的内容(如果执行得当，会提供更流畅的体验)。

不管你对苹果的感觉如何，你必须承认他们已经改变了我们对互联网的看法——在这种情况下，确实是这样。

高清显示屏显然是未来的趋势，所以没有必要假装这只是一时的风尚，迟早会过去。你越早学会用高清来设计，你就会在未来有更多的立足点。从好的方面来看，可以安慰的是，在未来，网速可能也会提高，以缓解一些加载压力。