详细解析循环视频在网站设计中的应用

循环是HTML5中布尔属性的视频标签，像IE 9这样最新版本的浏览器才支持。将一系列的简短视频循环播放是它的主要特征，此功能使网站看起来更加动感，因而受到各网络开发社区的热烈追捧，我们在很多网站上都能看到它。

这种重复播放的短视频适用于各类网站，从在线档案整合网站到移动应用程序网站。网络开发者偏好5到10秒的短视频，并力求在短时间内将主题及目标表述清楚，例如，通过不断变化的报告类视频来展示机构的潜力。网站的循环视频有助于引发人们更多的关注，激发兴趣，完善用户体验，让更多人产生共鸣并逐渐建立信任。

让我们以一些优秀的网站为例，学习他们如何克服众多设计障碍，用超赞的循环视频使网站更加丰富。

循环视频网站案例

Primal

Primal包含了一组5秒左右的视频伴着一声尖叫作为奇特的开场。其首页是一个双关的循环视频。

Webgriffe

Webgriffe是一个极具个性的品牌，网站用一系列循环的短视频很好地展现了“欢迎”的概念，大气简洁的视觉设计令人难忘。接下来的视频也以同样的方式引导观者了解品牌的每一个工作流程。

Spacejunk

Spacejunk，从第一秒，就留给用户深刻的印象，感觉图像更加精致。一系列令人兴奋的专业视频像是在这里无限重复执行一项重要的任务。

Haigh and Hastings

Haigh and Hastings作为一系列循环视频的优秀代表,采用复杂的导航菜单,并利用高质量的图像来做为背景。

Eva

该页面巧妙地把信息分为三个部分，你的眼睛会下意识的被兴趣点吸引，层次感让信息更加明确，你可以快速过滤到不重要的信息。

Newrow

这个视频循环的主要目标是鼓励那些想要充分享受生活的人，以及那些接受新式教育的人。这个主页将标语奇妙的进行了处理，分裂成“创造性地”和“有效地”两个部分。

Gracepoint

Gracepoint是个“单页”网站，它引导在线参观者们关注福克斯电视台的犯罪题材的影视剧。尽管它只有三个子页面，但是创作团队设法在仅有的画面中通过阴郁的动态摄影风格传达一种凶险的气氛。

Pastamancini

Pastamancini让人感到纯洁和自然，同样得益于一系列的短视频功能，围绕自然风光、乡村美景进行了选景拍摄，完美的解决了静态网站带来的视觉疲劳。

Dalbello

在这里，你可以看到风景如画的雪山场景视频，勇往直前、带着激情挑战极限运动，通过一轮又一轮的重复动作来强化训练。这些情绪、氛围被完美地融入了整个网站设计，并借助光影来完善整个主题。

Distill

Distill 关注原创，主要为那些需要免费高清视频的个人或商业项目提供资源。欢迎界面是一幅流水潺潺的郊区美景视频，它是阐述网站理念的一个极具代表性的作品，不需要你有多专业，我们关注的是原创，是你发现的美景。

Drygital

Drygital 呈现的是精彩有趣的动态短视频，它们都被蒙上了一层微妙的阴影色调，目的就是为了有效的凸显logo标识、标语以及响应背景上的按钮。

Trif

Trif看起来非常深邃，给人带来一种复杂的感觉，创作团队选择了一系列迷幻、模糊但耐人寻味的视频，相信一定会吸引到你。

Mr. Stefan Braun’s

Mr. Stefan Braun的官网洋溢着积极乐观的情绪、令人激动的氛围和无限的乐趣，派对主题视频记录着他们的日常，使网站设计的风格更具个性化。如果你是夜店小达人，这个网站一定有你喜欢的东西。

Z+

使用神奇的gif动画短片来预示未来APP工作流程对于移动开发者是一个多么重要的设计趋势。 Z +的官方网站上包含的几个视频就给这个小而美的游戏做了一些微妙的预演。

Boo Cat Club

作为网站建立的初衷，不仅用琅琅上口的标语“唤醒与活力”来为boo cat 俱乐部定义，同时还配上了几个短视频来传达愉悦心情。这种设计更加有效的鼓励在线用户对网站进行继续访问。

Triptych

Triptych的首页由三幅完美连接的静态照片组成，配以极好的微妙动效构成其非凡生动的视觉感受，犹如“三联画”。

I am Baaz

设计团队为网站加入了些许创意，在制作网站的同时，用五个专业录像机负责视频的拍摄，并结合了一些装饰性印刷效果。

Vesper Hotel

首页视频借助晚霞美景使在线访客相信黄昏旅馆能提供给他们一个难忘的、没有瑕疵的畅快享受。

Tours Altitude

Tours Altitude打破了传统的以其视频为中心的主页设计模式。首页涵盖了一些动感十足的视频，也许可以激发潜在的游客。此外，首页下方被划分出7个小区域，当鼠标放在任意一个区域中，区域中就会快速闪现相关图像。

Umbrella Here

网站通过视觉效果，来传达公司的总体印象。通过一些精彩的循环视频配上优秀的背景图像可以很好的宣传即将推出的产品。

结束语

Vine短视频，成为业余电影制作的一大趋势，已经影响了很多网站的设计。一系列循环短视频霸占了网页头版，让网站更加引人入胜，并能在一定程度上取悦用户。

我们是DATS翻译小组，我们爱设计爱英语，通过翻译设计的文章共同学习进步，虽然我们还有许多不足，但是只要把每个人的微小的力量聚集起来，总有一天会发出耀眼的光芒~ 欢迎到主页关注我们。

翻译由 小Y、月影苍狼 、为神马、HeroLiang 、Lyn 、12 、张潜瑶 、Aria 、Panda 、color~馨悦~♬ 、Summer、HELLOMAN 共同翻译完成。