提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
全屏背景已在网页设计中占很大一部分。
在这篇文章中,我想介绍一些背景图片和视频的主要用途。
艺术地使用全屏背景已在网页设计中占很大一部分。不同的全屏背景设计,从登陆页到帮助页,及许多社交网络
应用都很不错。这是提醒品牌公司或做项目的人注意到的很好的方式。
在这篇文章中,我想介绍一些背景图片和视频的主要用途。主要集中在易用性,用户体验,和内容优先上的不断增长。
图片与视频
全屏背景通常由两种:图像或视频。图像包括照片,插图,甚至是移动的拼贴画或幻灯片。
视频很直接,但难以实现与浏览器的支持。
对于这两种情况一个重要的原则是,背景应保持从属关系和不是必须的。如果全屏图像或视频被删除,内容仍然
应该正确读取和相应地组织起来。明智的做法是使用纯色背景。不过目前浏览器的支持是在不断进步的。
InVision(http://www.invision app.com/)网页使用了大背景图,自然的黑色使文本反差大而突出。这个独立的图像创建是使用Backstretch plugin (https://github.com/srobbin/jquery-backstretch)的插件,这个插件的优点是图片会随着屏幕的大小变化而变化尺寸。使静态背景图更容易管理,因为有一个静止图像衬托在整个头部内容的导航与标志下。
当涉及管理颜色时,对比background video (http://webdesignledger.com/inspiration/11-great-examples-of-video-backgrounds-in-web-design)这个网站 ,更流畅。Story & Heart (https://www.storyandheart.com/)网站采用了全屏视频,在不同的场景间转换。每一个场景中的文字是很明显的 - 当使用BG进行视频时,这是我们的目标拍摄。只是需要用太多精力来动态改变文字颜色为视频的更新,这就需要携手共创统一的色调在视频中。
首页设计
首页是最常见和最有用的地方在全屏内容的网页上。其他的网站都致力于具体内容如隐私政策或购物列表。
我想着重展现一个有很大影响力的网站--Coulee Creative (http://couleecreative.com/)网站 ,因为这个网站做的恰到好处。首先这个网站全面响应手机屏幕。降低阈值替换视频背景平铺图像背景,这在移动端是很有用的。
同样的,它的头部并不意味着能动态调整到完整的浏览器高度。它仅占用基于视频的固定大小。不是每一个首页都基于高度和
宽度充分扩张 -- 每个项目都有它最好的方法。
我最喜欢的一个创意机构的网站-- Underbelly (http://underbelly.is/)网站。这个网站的首页采用了全屏图像,同时响应一个固定的高度。最初的页面加载,告诉我们沟通是非常重要的。我发现背景图像和蓝色的匹配有助于很好地传达该公司的品牌。
充满活力的对比
前景色与背景色之间透明度的对比。例如白色的文字在黑色页面上具有非常高的对比度 - 这正是我们实现全屏背景时想要的设计。
这是一个很奇怪的例子,大多数情况下,它很独特,可能浮于页面顶部的上面。 网站core4 (http://www.core4.sk/),用flash嵌入办公室走廊的背景视频。不仅如此,而且它使用一个现场直播功能实时播放视频。
所以,如果什么都会出现在背景视频上,那该如何把这项工作做好呢?页面内容要使用背景颜色在主文本后面,这样可读性好。同样,顶部的导航链接放置在一个黑暗的角落里,使导航文字清晰易读。
这是一个很好的策略,如果你创建一个背景视频,不同网段之间循环播放。
重要的文本放在暗的地方,或者说,不能给文本纯色背景。记着全屏内容要有完整的内容。
如果该页面不可读,无法使用,那么即使背景图片很好,也不能弥补较差的对比度。
全屏幻灯片
谈到全屏图像有两种类型的背景设计。一个是静态的固定图像,而另一个是动态的旋转图像。这些旋转幻灯片很受欢迎,因为他们可以展示相关的设计内容或摄影图片。
网站Coal Headwear (https://www.coalheadwear.com/)--采用了全屏旋转图像去展示模特不同的帽子和配饰的搭配。
这是一种常见的营销技术,销售基于真实世界里,常见用途的产品的情况。
有趣的是当你向下滚动网页,幻灯片会固定在整个页面的背景上。
网站上的其他页面也使用全屏背景从幻灯片拍摄静态照片。
你不可能找到任何地方都是一个不错的效果,但这样展示的结果很棒。
L’attrape rêve (http://www.lattrapereve.fr/)网站,是一个艺术商店的网站,它采用了全屏视频在首页上。但背景实际上是一个多个视频旋转的传送带,你可以在它们之间切换。所有的内容呈现在黑白色调上,使之有足够的对比度,来突出文字的展示。
就个人而言,我不推荐视频幻灯片,仅仅是因为它们非常密集的创建和呈现在浏览器中。这种布局有特定的目标受众,所以它运行非常流畅,无论在我的台式机或笔记本电脑上。
可调整大小的布局
如果你一直在关注设计趋势,在过去的几年里,响应式设计不应该是一个新概念。它已经成为现代网络设计的基石,允许单一布局和任何屏幕分辨率。
随着全屏背景的发展,很多网站使用全屏背景和保持响应式设计特性。网站Seed Spot (http://www.seedspot.org/)2014就是一个有非常干净的照片幻灯片的例子。
网站标题使用固定高度的幻灯片,很多时候,我觉得这是一个卓越的方法相比全屏高度来说,因为文字内容成为主焦点,同时放背景内容的标题。响应设计具有全屏,以及在实施时,需要可变高度的背景。
所有这些技术适用于任何类型的网站。全屏内容已经变得更加广泛,而且大多数Web浏览器都支持。
作者简介
杰克Rocheleau是一个具有创造性的作家和UI设计师。您可以在他Twitter上的邮箱@jakerocheleau (http://twitter.com/jakerocheleau)留言,或浏览他的个人网站JakeRocheleau.com (http://jakerocheleau.com/)。
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册