您的位置: 首页 >科技 >

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

2020-07-09 16:40:32 来源:

当然,高清技术普及还有一段时间,但从统计数据来看,它的发展速度确实很快。随着苹果视网膜显示屏(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像素宽,但由于模糊效果,它在大屏幕上看起来很好。清晰的前景文字也抓住了用户的注意力,使背景效果更加无缝。

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

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

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

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


郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

Copyright 平安财经网 All Rights Reserved 版权所有 复制必究 联系QQ280 715 8082

本站除标明“本站原创”外所有信息均转载自互联网 版权归原作者所有。