从隐藏的导航到跳出的菜单，到更多视频，再到可穿戴到分屏，最新的潮流变化与潮流，时刻影响着网页设计的走向，以下是尚略广告 上海网站设计建设公司期待在2017年看到网页设计会发生的变化。

实际上关于网站设计趋势，之前尚略设计公司，之前已有一篇文章“ 2017年9个最前沿的网页设计流行趋势”进行了介绍。这篇是另外的一些思考，供网页设计师们参考学习。后续尚略还将继续对网页网站的发展，进行相关研究。

1. 隐藏的导航和弹出式菜单

网站网址： https://www.spotify.com/us/

当移动设备的浏览比电脑端的浏览更加流行的时候，屏幕空间是宝贵的商品。

特点和菜单隐藏起来，直到需要它们的时候。这给屏幕留下更多令人愉悦的元素的空间，如图片或者视频，也创造出干净简约的设计，让人更加容易集中精力。

选择一个网站建设：16个最好的工具

移动友好，隐藏的导航也提高了更大屏幕设备的用户体验。奇怪的是，隐藏导航菜单事实上更强调了导航；用户能够在一段时间集中在一件事情上，当他们需要打开菜单的时候，导航就占据了比网站其它部分更加中心的位置。”

案例网址： http://take-your-pulse.com/en-US

优点：

节省屏幕空间

强调导航

简约的设计更加容易集中精力

提高第一屏的外观感受

整体设计结构的更加灵活性

最佳实践：

单色覆盖。为了最大化简化的优点，大多数弹出菜单使用单色背景或者覆盖，而不是容易分散注意力的或者零碎的背景。你不会想让用户把时间花在寻找菜单上面 - 为网站页面保留好的东西。

网站网址： http://www.alerkyahcity.com/

大的，简单的排版。与上面的东西相呼应，夸大，大胆，易读的排版让导航菜单更清晰更高效，也填补了空间。设计师通常用大写的文字进一步加强效果。

网站网址： https://www.bvaccel.com/

汉堡式和X图标（用菜单标签更好）。在这一点上，标准被接受的代表弹出菜单的用户界面模式是汉堡式图标，当激活后会变成X图标，这样用户就知道如何关闭了（尤其它出现在右上角的时候）。我们一直建议增加一个“菜单”的标签防止混淆。

网站网址： http://designova.net/reflex/index07.html

推开或者覆盖内容。弹出的菜单很少会占据整个屏幕。给原始内容留出一些空间能够让移动端变的更易读，也会给电脑端创造出有趣的模仿移动端的浏览体验。

网站网址： http://veille.reputationsquad.com/#accueil

2. 可穿戴设备的灵感

网站网址： http://thelobster-movie.com/

正如移动浏览影响着电脑浏览设计一样，可穿戴设备也影响着网页设计。2015年可穿戴设备大火了一把，用户开始期待在其它设备上有同样用户界面的风格。

尽管可穿戴设备浪费不起多余的空间，同样简约的原则适用于在其它设备上更快更容易的浏览。“少即是多”的理念在任何屏幕尺寸上都适用。

网站网址： https://www.fitbit.com/uk

优点：

流线型的用户体验

更少的干扰和困惑

极简风格减少了下载时间

最佳实践：

容器和卡片。卡片已经成为持续的趋势了，可穿戴设备给它们带来了新的生机。可穿戴风格的结构包括独立容器和卡片，这导致在大屏幕上的可扫描性的提高。

网站网址： http://www.adidas.com/us/home-show

大的可伸缩向量图形图标。确保它们在高清设备上也能放缩，也简单易懂。

网站网址： http://play2give.org/

严格的配色。配色开始回归基础。双色配色或者单色和黑白色越来越流行。

网站网址： http://tramastudio.net/

大面积空白。为了在不同设备之间保持连续，设计更倾向于大面积空白，或者极简主义风格。这不是美学的选择：它能在小设备上节省屏幕空间，减少下载时间，提高可视性，创造出更加浓郁的氛围。

网站网址： http://www.filipnordin.com/

3. 设计材料简化

网站网址： https://www.dropbox.com/business/

设计材料简化，或者称之为MDL，为网页设计优化了纸张设计语言。有了指导手册，六个模板以及开放源代码，MDL让材料设计对任何网站或者网页app设计师来说都变得唾手可得。

同样也可以应用基于物理的界面：分层，运动，阴影等等，这些都被真正使用起来，是我们和真实世界互动的一面镜子。

网站网址： https://www.paypal.com/us/webapps/mpp/pay-online

优点：

传统的材料设计的提高，但是保留了原始的优点

“逼真的”界面中更良好的易学性

在所有设备上都可以使用，跨平台可得性（不是基于JavaScript）

最好的实践：

基于物理力学。通过与真实世界中的物理原则保持一致来利用MDL的能量，那就是：

阴影看起来应该是从从一个自然光源中出现的

物体应该有重量和厚度

运动是对用户互动的反应

网站网址： http://www.rumchata.com/age-gate

定制。利用MDL的多样组成图书馆来互相组合，看看哪个适合你。

网站网址： http://waaark.com/

平面配色。MDL的在使用平面配色时效果最好：明亮大胆的色彩，通常一个主色彩一个强调色。这对前面两个简约美学的趋势来讲也适用。

网站网址： http://www.lovefila.com/ 

4.网站分屏效果

网站网址：暂缺。

分屏就像是把你的网站用两部分独立的卡片切割开来（其中的一个可能包含了小一点的传统卡片）。

分屏允许内容的多样性：一般可能用吸引注意力的图片，另外一半是导航菜单。整个布局用自然视觉的层级创造出了令人愉悦的美学效果。

网站网址： http://www.renaterechner.at/en/

优点:

在没有给用户造成负担的前提增加了两种视觉内容的质感

传达出两种内容的强烈联系

创造出迷人有活力的第一屏

最好的实践:

使用成对的内容。分屏总是暗示着关系 - 协调或者对比 - 在两个选择出的内容之间，所以谨慎选择。这包括两种元素之间同等的重要性，两种相反的元素，或者两个主要的用户选择。

网站网址： http://oneofakindshowchicago.com/

有活力的视觉效果。生动的照片，明亮的色彩，绚丽的排版，这些都会给分屏加分，只要没有过度使用而令人精力涣散就好了。

常见的模式当用户的光标悬停在一面时，另外一面变灰，这样用户可以一次集中在一个视觉效果上。

网站网址： http://www.baesman.com/

在屏幕之间创造流动性。每一屏都应该是独立的，但也不是完全独立于其他屏。记住在两个屏幕之间引导用户实现视觉设计核心原则。试着通过使用单个元素覆盖两个屏幕的方式来统一，例如网站的名称。或者在两个屏幕上都使用同样夺人眼球的色彩，就像BUMP所做的那样。

网站网址： https://www.needabump.com/

5. 更多视频

网站网址： https://www.designhotels.com/original-experiences

作为一个已经确立的趋势，视频在内容和超大背景尺寸上都维持了流行。

2017年视频的最大不同是数量，而不是质量。我们会看到同样风格的视频在更多的网站被更高频率地使用，有令人愉悦的惊喜形式，也可能不会超出期待的基线。但是未来还会有更多视频的应用，例如互动的故事叙述，如下面所描述的。

网站网址： http://www.muller.it/

优点：

吸引用户

情感联系的强大容量

可能增加网站停留时间

比精致图片更加多样

最佳实践：

高品质。视频的视觉重要性是双刃剑，次要的缺点会吸引更多注意力。尽可能使用高清视频，并用专业的视频技巧来处理。

网站网址： https://nameourship.nerc.ac.uk/

创造对比。尤其当你使用视频背景时，和屏幕上的其它元素形成对比。覆盖的文字一定高对比强烈引起注意，通常通过对比色彩。同样，使用有限的动画和其它动图，否则界面就太混乱了。

网站网址： http://www.visithumboldt.com/

互动性的故事叙述。把故事和其它新型的流行趋势结合起来，互动性的故事叙述，当用户点击或者下拉时一个故事会不断发生进展，模拟游戏。视频的剧院和情感的特点提高了故事叙述技术技巧期望达成的所有事情。

网站网址： http://www.converse.com/uk

自动静音。 没有人喜欢被突然出现的声音吓一跳的体验。设置视频自动静音为默认状态，加上打开的选项。

网站网址： https://eyezen-challenge.com/

“无视频”。如果你想要在精致图片和视频之间找到折中的话，试试无视频，这是一种整体上静止但是只有小范围移动来体现其视频属性。想想一些自然情景，如只有飘落的雪花或者瑟瑟的落叶，或者一对情侣在一段时间之后的移动，下面写着BUNDY BUNDY 。

网站网址： http://bundy.madebywild.com/

6. VR虚拟现实元素

网站网址： http://www.samsung.com/us/explore/gear-vr/

展望2017，我们能够看到VR元素已经开始渗透到现代网页设计中了。

我们不需要VR设备来复制它浸入式的元素，正如我们在未来一年中的网页设计中将要看到的。移动端和电脑设备的扁平屏幕已经可以很好地被操作来攫取VR的一些优势了。

网站网址： https://store.google.com/category/virtual_reality

优势：

浸入式迷人的用户体验

引领潮流

直觉的现实界面

最好的实践:

合适比例。VR和网页设计的不同是，对VR来说，元素必需根据现实世界中的视角来缩放。人不一定和实际人类大小一致，但是当用户移动的时候尺寸一定是变化的。

网站网址： https://aframe.io/examples/showcase/shopping/

距离的重要性。在VR中，距离意味着用户如何和特定元素互动。在没有平面，2D平面的便利性的前提下，VR设计师不得不在项目中结合模拟现实空间的圆形的，360度视角。

网站网址： http://film.livyatanim.com/

注意细节。VR可能还很年轻，但是目前为止已经足够成熟来建立自己最佳的实践：

避免过度使用快速动画，这会减少恶心。

使用天际线作为连续的参照系。

设计用户不需要对周围看得太多来了解大致情况的视觉。

拥抱完全的真实或者完全的想象 - 避免混用.。

网站设计建设教程知识，尚略广告，上海网站设计公司，上海网站建设公司策划设计部原创翻译发布。

本文网址：https://www.shinerayad.com/news_info.asp?id=2516，源自：http://www.creativebloq.com/features/6-web-design-trends-worth-knowing-for-2017，转载请注明出处。