2019年的网页设计:未来是高清晰度

发布时间:2019-09-02 15:37:11 阅读:47

高清设备现在比以往更容易获得。

今天高清显示器的盛行并非巧合,设计与新的和富有想象力的视觉技术相结合,将这些细节变为现实。但是将HD应用于网页设计可能与其显示中的精细细节一样复杂。在本文中,我们将介绍开始时需要了解的基础知识,从技术细节到一些最有用的应用程序,甚至包括一些免费的在线资源。

Wonderfully Wild的网站用户界面的屏幕截图

照片来源:http//www.wonderfullywild.co.uk/

定义高清设计

在我们探索高清背景技术之前,我们首先需要检查媒体的技术细微差别。

拥有高清显示器的用户数量- 从电视机到电脑再到手机 - 每天都在增长。Apple等品牌的标准Retina显示器等品牌正在迅速普及。虽然很难跟踪实际数字,但我们知道HD正在稳步成为核心设计考虑因素,因为即使是替代4K显示器也要低于600美元

当你考虑到21世纪初期网页设计从CRT发展到LCD时代的时候,很明显,可负担性只会带来更高要求的视觉设计创新。

Crush Design网站用户界面的屏幕截图

照片来源:http//www.crushdesign.be/

当我们谈论高清晰度时,像素是一个自然的焦点。

让我们快速回顾一下Designmodo中最好的像素参考指南之一:

  • 设备像素是显示的最小物理单位。
  • 像素密度是给定空间中显示的像素数。
  • 分辨率是设备整个宽度或高度上的像素数。
  • 每英寸像素数(DPI或PPI)是将显示器的物理宽度除以显示的水平像素数时得到的像素数。
  • 高DPI是每英寸200像素或更高的显示密度。另一方面,标准DPI通常设置为每英寸72像素。

简而言之,HD设备的像素数是标准清晰度屏幕的两倍。事实上,下一代Apple 5K视网膜显示器更加强大,因为它的最大输出为5120×2880像素当然,更多的像素意味着更多的细节和更清晰,更清晰的图像 - 这也意味着这些屏幕对任何视觉缺陷的设计都不太宽容。

背景图形:光栅与矢量

现在我们已经介绍了高清设计的像素细微差别,让我们来讨论一下如果你使用静态高清背景图像,它会如何影响文件格式。

几乎从网站设计的最初几天开始,设计师就将图像保存到每英寸72像素 - 这包括从照片到图形元素的所有内容。紧凑的尺寸改善了加载时间,同时仍然提供了足够的分辨率以便很好地渲染。通常接受jpg 格式,例如jpg,gif和png。

Squarespace的网站用户界面的屏幕截图

照片来源:Squarespace

然而,高清网页设计需要重新思考和使用矢量格式(而印刷设计师已经做了很多年,这是一个相对较新的网络概念)。这就是可缩放矢量格式或SVG的用武之地。与其他矢量图形格式一样,SVG图形使用连接的点和线而不是像素来创建可以缩放到任何尺寸而不会降低质量的图像。

Jay Yadev向SVG解释说:“这种图像格式的好处是,当你增加图像的大小时,它将始终保持清晰,并且永远不会像素化......它允许你使用不同尺寸的相同图像而不会损失质量图像。SVG图像的尺寸也非常小。“

Femme Fatale的网站用户界面的屏幕截图

图片来源:蛇蝎美人通过awwwards

但格式并非没有限制。例如,将照片转换为SVG将不起作用,因为原始图像是使用像素组合的,并且永远不会以比实际图像更大的尺寸正确渲染。

高清为网页设计师带来了与他们思考和规划图像的方式几乎完全一致的印刷设计师。它归结为栅格与矢量

以下是了解何时使用每种类型文件的一般指导原则:

  • 使用光栅(由像素组成)用于照片或使用像素创建的格式。
  • 使用矢量(由点和线组成)用于原始图稿,例如徽标,图纸或用户界面工具或按钮。

除了选择正确的格式外,还要确保尝试一些CSS技巧,以确保图像在浏览器中正确定位和显示。如果您不是CSS专家,请随时查看一些替代方法

进入高清视频背景

随着屏幕显示分辨率的提高(可能达到我们甚至无法说明差异的程度),HD将继续发展成为一种广泛接受的设计模式 - 特别是当开始使用高清图像背景的设计师现在过渡到高清视频背景。

高清视频仍然是新的,我们到目前为止看到的大部分内容都不是那么复杂 - 大多数只是一个不同视觉处理的短循环。分层在视频之上,您通常会找到高对比度文本(通常是白色或黑色)和/或幽灵按钮

Yoani网站用户界面的屏幕截图

照片来源:http//wagamama.yoani.co.jp/#

高清背景还为使用各种颜色提供了自然机会,其中包括从彩虹式纹理到与高清图像或视频配对的鲜艳色彩。如上所示,Wagamama使用带有鲜艳色彩的全屏视频作为加载页面,为用户在整个站点的其余部分准备同样明亮的色彩。

另一种用法是“静止”高清视频,它与目前在网站上最受欢迎的快节奏动作视频形成鲜明对比。将静态动作与视频相结合(无论是将照片拼贴拼接为动画幻灯片,还是只是以更柔和的方式思考视频制作)都是保持现代感的一种聪明方式,同时保持更加平静的氛围。如果做得好,结果就是具有更好节奏的视觉体验。

Bellroy的网站用户界面的屏幕截图

照片来源:http//bellroy.com/live-life-outside

钱包罩制造商Bellroy(上图)使用全屏高清视频背景,实际移动很少。宁静的视频显示,特色产品在落雪的自然运动中无动于衷,缓慢的节奏效果强调了尽管元素的耐久性。三维外观(通过智能使用前景和背景创建)吸引您的注意力,而不会像标准的背景视频循环那样过多。

典型视频背景的另一个变体是模糊它。模糊的背景是引诱用户的预告片,使他们想要与网站互动,作为揭示真实情况的手段。

Fernando的网站用户界面的屏幕截图

照片来源:http//fernando.is/all-about/

对于高清视频,模糊技术仍然有效,因为即使细节不是这样,动作仍然可以辨别。虽然Fernando Maclen网站的上述示例通过模糊视频并且仅允许用户点击其外部投资组合链接而保持其“超级简约”的标题,但这并不是实现此技术的唯一方式。

对于更复杂的网站,您可以使用号召性用语来显示全清晰视频,因为启动页面会转换为传统的分段目标网页(视频作为顶部)。

高清背景的未来

鉴于人类对视觉效果的迷恋,HD不会在不久的将来出现。事实上,设计师现在对基本面感到满意,所以看看这种策略在未来几年内如何扩展将会很有趣。

随着越来越多的设计师尝试高清视频,我们将继续看到以熟悉和创造性方式使用的分层效果。模糊和彩色叠加将成为焦点,因为它们有助于吸引用户发现可发现性

Color Plan的网站用户界面的屏幕截图

照片来源:http//www.colorplanpapers.com/

更多的设计师将尝试在使用3D效果时将前景与背景合并虽然这是一个容易理解的概念,但要解释起来有点困难。

查看上面的Color Plan Papers网站:背景中的浮动圆圈增加了一种有趣的动画效果,但是在鼠标悬停时,气泡会急剧扩大并以清晰的焦点引起用户的注意。效果虽然简单,但却将背景带到了前景,模糊了维度世界之间的界限。

高清为设计师打开了很多大门,留下了他们想象力的最大限制。通过实现更精细的细节,HD为设计人员提供了更多自由,可以使用我们可能尚未想象的技术进行实验和玩耍。

要了解更多当前的网页设计技巧,请查看免费的Definitive 2016 UX设计趋势包该软件包解释了超过350页的技术和300多个跨Web,UX和移动设计的示例。


我们在微信上24小时期待你的声音
解答:网站优化,网站建设,搜索引擎优化,APP 开发,小程序开发

非常感谢您有耐心的读完这篇文章:"2019年的网页设计:未来是高清晰度",此文章仅为提供更多信息供用户参考使用或为学习交流的方便。如果对您有帮助,请收藏我们的网址:https://www.91webs.cn


18617670560