恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
全屏网页背景的应用
0.0°
2014-12-15 自译外文 规范/资料 原作者: Jake Rocheleau 举报 7642 51 12 1

全屏背景已在网页设计中占很大一部分。
在这篇文章中,我想介绍一些背景图片和视频的主要用途。

艺术地使用全屏背景已在网页设计中占很大一部分。不同的全屏背景设计,从登陆页到帮助页,及许多社交网络

应用都很不错。这是提醒品牌公司或做项目的人注意到的很好的方式。


在这篇文章中,我想介绍一些背景图片和视频的主要用途。主要集中在易用性,用户体验,和内容优先上的不断增长。


图片与视频

全屏背景通常由两种:图像或视频。图像包括照片,插图,甚至是移动的拼贴画或幻灯片。

视频很直接,但难以实现与浏览器的支持。


对于这两种情况一个重要的原则是,背景应保持从属关系和不是必须的。如果全屏图像或视频被删除,内容仍然

应该正确读取和相应地组织起来。明智的做法是使用纯色背景。不过目前浏览器的支持是在不断进步的。


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/)。

更新:2014-12-15

收藏

51人已收藏

viewworld909

越努力,越幸运。

  • 31

    作品

  • 307

    粉丝

  • 48

    关注

  • #每周临摹#ps制作文字长阴影
  • 在Photoshop里设计一个圣诞节的电子邮件通讯
  • 如何在ps里创建扁平图标
  • 5个思路来设计网站上看到的大块横幅
相关标签
网页 背景

    猜你喜欢

      2014-12-15 自译外文 规范/资料 原作者: Jake Rocheleau 举报 7642 51 12 1

      全屏网页背景的应用

      0.0°

      你确定要举报全屏网页背景的应用

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2014年12月15日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      12
      51
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录