每当我看到今年网页设计流行趋势之类的链接我都会特别激动点开来看,但没多久就失望的关掉窗口。这些趋势要么是去年的东西,要么就是插画、动效之类的一直没变过的元素。动效设计本身就是一个大趋势啊…讲真,如果你要是把视频背景全屏化写进2016年度趋势里,你最好先去上网看看再做决定。没人会喜欢这种吊人胃口但没有任何营养的东西。不说废话了,下面是2016上半年的五大真正的网页设计趋势。
1. 全屏化&固定式页面 (Full screen & not scrollable)
不可滚动的网页设计终于越来越受欢迎了。一个导航栏固定在顶部、可以一直滚动的网页是标准的主页设计,按着导航栏的顺序访问网页也挺不错的,但是很多人对于 scroll-jacking(通过重新定义鼠标滚动速度、幅度达到控制可视区域视觉效果的方式 by李奇)都不是很喜欢,对网页进行一些限制会有别样的效果。键盘导航 (Keyboard navigation) 在这类网页设计中最为常见。
案例:
Facebook Privacy Basics
https://www.facebook.com/about/basics/get-to-know-facebook/working-together/
Fantasy
http://fantasy.co/work
KLM 50 Travels
https://www.ifly50.com/en_se/50
2. 标题固定于一侧 (Sticky headline to the side)
大部分网页都喜欢设计的看上去像是一个设计工作室或是设计研究所,不过最近滚动时把标题固定在段落一侧的设计挺受欢迎的。这个趋势只发生在桌面端,要是移动端访问这些链接的话就没这效果了。
案例:
Code & Theory
http://www.codeandtheory.com/about-us
Stack Overflow
http://stackoverflow.com/research/developer-survey-2016work-salary
DDB Sthlm
http://www.ddb.se/
3. 把logo作为页面加载时的过渡 (The logo is the loader)
这是一个明显的趋势,在很多设计机构网站在今年都用上了。这种设计让网页看上去非常棒,而且能够给用户一个非常直观的感觉:这个网页就是品牌的一部分。
案例:
Instrument
http://www.instrument.com/
Fubiz
http://www.fubiz.net/category/motion/
This Also
http://thisalso.com/projects/google-identity
4. 可交互的背景图像 (Disrupted background images)
背景全局化差不多流行于2013年的网页设计,现在来看并不是什么新鲜事了,但它被提升到一个新的高度:当鼠标进行操作时对背景图像添加一些效果。
案例:
Make me pulse
http://www.makemepulse.com/
Active Theory
https://activetheory.net/
Details
http://www.details.ch/
5. 夸张的动画效果 (Over the top animations)
现在的技术完全能够实现,所以为什么不用?使用得当的话能带来一种视觉享受和奇妙的体验。如果使用不当的话这个网站就是一堆乱码,所以还是要合理使用。
案例:
Waaark
http://waaark.com/
Animocons
http://tympanus.net/Development/Animocons/
Rally Interactive Beta
http://beta.rallyinteractive.com/national-parks/