2020年的现代网站设计是什么？20个例子让你印象深刻（下）

从客户在项目开始前提出需求，到设计师试图弄清楚如何结合最新和流行的元素，弄清现代网站设计的外观是我们在工作中所面临的最大的挑战之一。

实际情况是，你可能很容易说出现代网页设计不应该是什么样子的，当你看到某个过时的设计时，便会知道。 在这里，我们收集了20个典型的最新示例，以帮助你探索如何制作现代的网站设计。

续上

11.视频，包括竖版（Video ,It Might Be Vertical)

网站设计中所使用的视频方向逐渐趋向于90度的竖版（基于响应性手机端）。

从生活在垂直空间中的社交媒体“故事”类型，到大多数用户开始普遍使用手机观看内容，这正是视频向垂直转变的原因。 这同样也适用于网站设计（尽管仍然有很多水平视频）。

垂直视频在分屏格式下表现出色，例如“ This is Beyond”（上图），因为它在堆叠有分屏“屏幕”的台式机和移动设备上都看起来很棒。

12.压缩加载速度（Zippy Load Speeds）

大部分用户在邓露你的站点灰注意到的第一件事就是你的网站是否能够快速加载（大多数情况下都是不尽人意的）。 缓慢的加载速度是一个阻力，将使用户更快的离开你的站点。

所以，现代的网站设计必须在美观的同时保持快速的加载速度。

13.针对搜索进行优化（Optimized for Search）

现代网站设计中最重要的元素之一可能是你一般看不到的元素——针对搜索进行优化。

用户将如何找到它？

14.分层元素（Layered Elements）

分层可以创建深度，帮助移动并指导用户完成在线浏览。 这就是为什么分层元素在设计项目中如此重要的原因。

这点，DM在其主页中使用图层作为主导航的一部分。 彩条在图像上延伸，并在悬停状态下显示描述（请注意，该设计的另一个亮点是每种颜色都与随附照片中的强调色相匹配）。

15.音频（Sound）

音频是一种越来越流行的现代设计元素（只要确保用户可以打开和关闭它即可）。

音频体验为内容提供了更深层的含义，并增强了用户互动。 技巧是，如果你想让人们真正听到声音，则声音必须清晰而有目的。

16.渐变（Gradients）

渐变是一个不断发展的趋势。

从例如上面的鲜艳的渐变到插图或文本元素中的细微渐变，这种颜色趋势不断出现。 它借鉴了其他流行元素，可以帮助创造深度和视觉趣味，而不会影响其余的设计。

17.有趣的悬停动画（Interesting Hover Animations）

通过有趣的悬停动画使用户感到高兴和惊奇。 微妙的运动和动作远离快速移动的一切，并提供了一种更安静，更集中的用户体验。

此外，这些悬停状态可以帮助指导用户如何与内容进行交互和互动，或者提供正确的惊喜来阻止用户离开设计。

18.认真“讲故事”（Serious Storytelling）

Let Girls Dream使用用户提交的内容讲述增强能力的故事。 该设计具有交互功能，从文本和视频故事到上传你的梦想和信息的地方。 还有一个动画视频预告片将温暖你的心。

所有这些元素都将用户带入了一个很棒的故事中。

19.设备一致性（Device Consistency）

现代网站旨在在多种设备类型和大小上工作。 用户在不同时间从不同设备访问设计时期望应该保持一致性。

如果你没有保持一致的外观和风格，则有可能造成用户混乱（这可能导致他们离开网站）。 Fort Studio通过出色的动画背景，版式和展示位置出色地完成了工作，无论你如何访问网站，都可以创建一致的用户体验。

20.创意用户体验（Creative User Experiences）

Ask the AI Ball基于该趋势来创建与你期望的体验不同的交互体验。 如果你希望用户在设计上花费更多的时间，则它必须具有创造力并提供有价值的体验。

很难找到这个神奇的方式，所以你需要保持在常规的做法上思考。

总结

当你登陆网站时，就会大致了解这个站点的一些信息。 这就是你需要不断进行现代网页设计迭代更新的原因。 上面的所有示例都具有一个共同的主题，你可能会看到现代网站设计的许多元素相互交叠。

这些技巧和趋势可以帮助你提高可用性和简单性。 网站访问者可能不会在你的网站上花费大量时间，因此你需要使其外观更具视觉吸引力并且一目了然。