web全屏

全屏启动是当前网络上最常见的模式之一。 有些人喜欢它，有些人讨厌它，但是无论您有什么感觉，我们都可以看看一些值得注意的例子，并在讨论过程中谈论最佳实践。

关于设计融合的注意事项

术语“设计趋同”是指设计习惯随着时间的流逝变得相似， 趋同的方式 。 最近@jongold发了以下推文：

您目前正在设计两个可能的网站中的哪个？ pic.twitter.com/ZD0uRGTqqm

— gold（@jongold） 2016年2月2日

他的观点是，设计师如今缺乏创造力，而在设计网页时却寻求最接近的可接受惯例。 全屏启动就是一个很好的例子。 作为设计师，我们是否通过使用这种模式走简单的路线？ 我们是否忽略了突破界限和创新的机会？ 网络是否由于懒惰而停滞不前？

或者， 正如Paul Boag所说 ，我们仅仅是成熟的Web设计领域的一部分吗？ 我们是否在建立用户想要的东西？ 他们期望什么，从而使我们的产品更易于使用？

“物体围绕的时间越长，其设计标准就越多” – Paul Boag

我将由您决定。 同时，让我们看一些全屏全屏网页设计！

从上到下，从左到右

许多全屏网站使用JavaScript或CSS来精确确定其尺寸，以确保初始可见部分的大小与当前浏览器窗口的大小完全相同 。 完成此操作后，即使调整了窗口的大小，某些CSS定位也可以将元素置于极端。

Ideas是一个全屏WordPress主题，具有幻灯片，介绍，首页演示等各种选项。它使用位于屏幕底部的渐变色来使图像标题和描述更具可读性。

詹姆斯·特珀（James Tupper）通过将脸部图形放置在background-position: center bottom;来从屏幕底部窥视background-position: center bottom; 。 使用本机CSS height: 100vh;使巨大的黄色飞溅优雅地等于视口高度height: 100vh; 。

艾略特·杰伊 （ Elliot Jay）和萨曼莎· 斯托克斯 （ Samantha Stocks）的创意杂志《生活》杂志拉各姆（Lagom）使用的首页完全覆盖了整个屏幕。 此处不滚动（除非在小屏幕上查看）。 Lagom使用底部边缘来容纳其社交联系。

Soul是Shopify模板，其布局之一是全屏滑块，其导航链接位于右侧。

继续滚动请↓

使用全屏作为介绍形式的危险在于，用户可能没有意识到通过滚动可以找到更多内容。 我们自己的Envato主页使用“滚动”图标来对此加以否定，建议您在首屏下浏览一下。

坦率地选择令人鼓舞的向下箭头说“在这里向下看”。

Kindeo主页使用了我喜欢的技术。 确保下一部分的一小部分始终在视口的底部可见。 还有一个带有“查找更多信息”的箭头，因此用户永远不会在折痕下找到任何东西。

Kilani采用了可疑的自动播放声音的方法。 屏幕右下角有一个静音按钮。 他们建议您进一步滚动的方式也很有趣-将“向下滚动”指令固定到鼠标光标：

视频

Envato的前用户体验设计师DamirKotorić因对航空摄影的热爱而创立了Falcon Films。 视频在Falcon Films主页中发挥重要作用是合理的； 查看背景<video> ，然后观看showreel观看多汁的墨尔本无人机画面。

再次，达米尔使用了原生CSS min-height: 100vh; 创建全屏英雄部分。

景观达到了大致相同的效果。 全屏播放，并自动播放带有附加showreel的视频，但使用JavaScript来获取全屏显示。 自动播放的mp4视频文件本身为1.3Mb，但没有其他东西可以阻塞您的带宽。

样式

我们还没有提到的一件事是全屏为我们提供的东西：画布！ 利用空间来展示产品，公司，创意是此模式的重点。 它消除了其余内容的混乱，并专注于消息和个性。

前面的“景观”示例使用了美丽的钴蓝色（我喜欢它的原因之一），而Voog做了类似的事情，看起来很棒 。

不过我总是这么说–该图像是双色调的，因此可以轻松地将其当前的540Kb切成小块。 稍微模糊一下，然后将JPG质量降低到50％，可以将其降低到50Kb左右，而丝毫不影响效果。

彭博商业周刊设计会议 （您要去吗？）使用抽象的版式布局来表达自己的观点。 设计趋同？ 不在这里，队友。

我是否曾经提到Envato Tuts +翻译项目 ？ 无论如何，我仍然喜欢这个主题的RTL脚本演示，请查看Proland ，这是一个Bootstrap构建的着陆页模板，具有几个全屏布局选项。

有您的填充吗？

全屏首页是一种我们不太可能很快消失的模式。 又为什么呢？ 这是一种向用户介绍各种网站的有效方法。 您最喜欢什么？ 您在哪里还看到过使用此模式的好坏？ 让我们在评论中知道！

翻译自: https://webdesign.tutsplus.com/articles/current-web-design-trends-full-on-full-screen-home-pages--cms-25490

web全屏