Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Inspiration
Webdesign

目前的网页设计趋势

by
Length:LongLanguages:
This post is part of a series called Weeks of Web Design Inspiration.
Sorry About This: 40 Examples of 404 Pages
Designing Comments, Discussion, and Feedback For the Web

Chinese (Simplified) (中文(简体)) translation by Fuhuan (you can also view the original English article)

全屏模式是目前网络上最为熟悉的浏览模式之一。 青菜萝卜各有所爱,让我们来看看一些优秀的全屏模式例子,并进行分析。

关于设计融合的一个注释

设计融合是指设计到最后都成为同一种风格,比如现在手机都在模仿苹果。 最近看了下面的内容:

他的观点是,目前的网页设计师普遍缺乏创造力,总是在追寻同一种风格。 全屏幕设计就是一个完美的例子。 作为设计师,我们是否该通过这种方式来取巧? 我们是否忽略了推动边界的突破? 是否因为懒惰才制作静态界面?

正如Paul Boag所说,我们只是成熟的网页设计环境的一部分。 我们正在制作用户想要的网页吗?他们期望什么?要做些什么才能使我们的产品更易于使用?

设计的标准越多,就越像裹脚布。——Paul Boag

好好思考吧。 同时,让我们来看看一些全屏网页设计。

上上下下,左右左右!

许多全屏网页都精确的标明了它们的尺寸,使用JAVA或者CSS来确保可见部分完美适配浏览器大小。 一旦完成后,可以用CSS定位将元素放置在顶端,不用担心窗口大小的调整。

暂时使用这种模式来粘贴到平面底部的辅助导航,一些上一个或者下一个的链接。 背景图片使用background-size:cover; 在一个巨大的数字元素。

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

詹姆斯·特珀(James Tupper)将自己的脸部图形定位在背景位置的中心 。 使用原生CSS高度:100,巨大的黄色块等于视口高度。

了解有关这两种CSS技术的更多信息:

生活杂志Lagom,Elliot Jay和Samantha Stocks的创意,使用了一个完整填充屏幕的主页。 这里没有滚动(除非在小屏幕上查看)。 Lagom使用底部边缘来放置社交链接。

Soul是一个Shopify模板,其中一个布局是一个全屏幕滑块,导航链接位于右侧。

保持滚动请↓

使用全屏网页的话,可能会导致用户没有意识到能滚动界面。 我们的主页采用了滚动的图表来提醒用户应该下拉试试。

比如平淡的说:“嘿,看这里。”。

该主页采用了一种新的技术,能确保下一部分的一小部分能在窗口底部被预览到。 还有一个查找更多的控件,所以从不担心客户不会下拉查看更多的信息。

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

视频

前Envato用户体验设计师DamirKotorić因为对航空摄影的热爱而创立了Falcon Films。 视频在Falcon Films主页中扮演重要角色是合理的。看看背景,然后观看无人机镜头的演出。

Damir再次使用了原生CSS来制作一个全屏部分。

景观达到同样的效果; 一个全屏幕,autoplaying视频与额外的showreel,但使用JavaScript来获得全屏。  自动播放mp4视频文件本身是1.3Mb,此外没有别的需要你下载了。

范儿

我们还没有提到的一件事就是全屏给我们提供到的:一块画布! 用这个画布空间来展示一个产品,一个公司,一个想法,就是这个模式的重点。 它消除了其他内容的混乱,并集中与消息和个性。

早期的景观例子采用了美丽的钴蓝遮罩,看起来非常棒。

虽然说这是双色调图像,所以可以将当前的图像大小缩小。 而不用担心会影响到视觉效果。

在彭博商业周刊设计大会使用一个抽象的排版布局做出点。 设计融合?  不在这里,伙计。

我有没有提到Envato Tuts +翻译项目? 可能提过了吧?无论如何,我喜欢这个主题的RTL脚本的演示 - 检查了Proland,Bootstrap内置了几个全屏布局选项的登陆页面模板。

有没有你喜欢的?

全屏网页还能用上很多年呐。 为什么? 就因为它能有效的向用户接受网站。 你还喜欢什么? 你还从哪里见过这些模式。 请分享下你的看法。

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.