网页设计中最热门的技术之一是高清背景,这是由高清显示器日益普及所实现的。但是,当您创建商标以视觉复杂性为特征的图案时,这并非易事。
在本文中,我们将研究网页设计的未来。这不是一个问题,如果高清网络设计将主导网络,而是在高清晰度显示器变得普遍,足以必要改进的视觉设计。让我们开始吧。我们将探讨如何使用图像,视频或动画来构建高清背景,并将所有内容分层。
图片
超大。雄伟。全屏。当涉及背景图像时,这些是现代网页设计中最具描述性的词语。设计师不仅在考虑高清,而且他们正在将占据整个屏幕的背景带入高清。
这种设计技术之所以有效,是因为用户天生就具有视觉效果。毕竟,视觉主导着我们对周围世界的许多潜意识解释。最重要的是,令人愉悦的图像可以带来更好的用户体验,部分原因是我们认为有吸引力的对象工作得更好。表面上看似苛刻,但在设计上,感知才是现实。
高清晰度的屏幕分辨率为用户提供了绝佳的机会,可以观看到以前无法获得的细节级别的图像。较小的图像细节(上图中使用的各种色调所使用的纹理(均如上图所示))为界面的视觉效果增光添彩,为举足轻重的第一印象做出了贡献。
以下是利用HD图像发挥优势的五种方法:
将恒星图像作为焦点–仅仅因为照片是背景,并不意味着就不能成为焦点。一张精美的照片会与用户建立情感联系,因此请了解图像如何影响设计的视觉层次的细微差别。
考虑多个图像–使用我们在Web UI模式中描述的滑块或卡片样式的框架来处理内容丰富或投资组合的网站。 在图像上使用效果–模糊或彩色叠加会增加或改变图像的重点(例如,全局红色调会更加有活力)。
这在HD上效果很好,因为由于其高分辨率,基础图像仍然可以辨认。
考虑图像在不同屏幕尺寸下的显示方式–规划各种尺寸的背景图像,以使背景图像适合任何断点处的位置,并且不会停留在纯色框的顶部(反过来成为实际背景) )。
在框架外思考–照片背景不应符合相机的标准1到1.5纵横比,并且可能包含从其各自背景中切出的图像。
背景图片可以产生简单的视觉趣味。当您从强调您的品牌,产品或信息的精美照片开始时,该技术最有效。请记住,使用背景照片也可以包含多张图像,只需确保设计框架和周围的元素分别支持每张图像。
高清视频背景
高清视频背景可能是一年中最受欢迎的技术之一-尤其是结合了快节奏的动作和丰富的视觉效果。从AirBnB之类的巨头到几乎每种流派的较小站点,流视频正迅速成为Web设计领域的重要组成部分。
最早利用背景视频的网站本身就是电影。例如,“ Pi的一生”网站使用电影的实际预览作为背景(以及可下载格式)。
视频作为一种设计技术的出现与其新颖性有关。在引入HTML5(以及具有高清视频功能的智能手机)之前,全屏视频背景并不是许多浏览器和Internet连接都无法处理的。关于高清视频的任何讨论都必须考虑到制作。无论是像一个超现实主义的多处理Dunckelfeld的黑色和白色背景视频或更现实的目标蒙太奇一样的Airbnb,你需要这样的影片与而不分心与饱和度和帧速率播放。仅拥有视频剪辑是不够的。制作出色电影的所有电影技术-取景,缩放和平移仅举几例-对于网络视频也同样重要,即使用作背景也是如此。
网站建设设计框架中使用高清视频的五项准则:
1. 注意视频的长度和时长–背景视频应讲述一个视觉故事,让用户在几秒钟内就可以感受到。在10到30秒之间的某个时间是循环时间的好目标。
2.关闭声音–对于大多数用户来说,声音仍然是两极分化的自动播放元素。如果要使用声音,请将默认设置为静音。
3.专注于加载时间–尽管高清视频很有趣,但它不应影响您的网站。如果用户在缓慢的加载时间内离开视频,您的视频有多神奇都没关系
4.考虑替代方案–某些设备无法渲染高清。检入Google Analytics(分析)以显示最受欢迎的设备,然后进行相应设计。通常,您会发现要使用静态映像作为备份选项。
5.坚持高质量的视频–无论您是拍摄自己的视频,聘请他人来制作视频还是使用股票视频,在视频质量方面都必须做到一流。它不仅必须在高清框架中工作,而且实际上必须具有高清画质。就像照片一样,视频在任何分辨率下都无法达到原始拍摄效果。
尽管高清背景最近越来越流行,但将其作为一种趋势销毁并不完全公平。相反,它们是最终与技术进步相匹配的有用性的产物。这意味着人们不会简单地对高清设计感到厌烦,而将注意力转移到下一个重大事物上。作为视觉丰富的行业中不断增长的一部分,这使得创建它们绝对是值得学习的技术。