用心将技术和服务遍布全中国
乃至世界...

用心做好每一项服务

用技术和服务为核心,结合营销、内容、创意、设计、研发等多维度为您做到更好

这才是真正的2022网页设计趋势

每当我看到今年网页设计流行趋势之类的链接我都会特别激动点开来看,但没多久就失望的关掉窗口。这些趋势要么是去年的东西,要么就是插画、动效之类的一直没变过的元素。动效设计本身就是一个大趋势啊…讲真,如果你要是把视频背景全屏化写进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/

  • 关注微信

猜你喜欢

深圳市傲网科技信息技术有限公司

龙岗:深圳市龙岗区和中心12楼

坪山:深圳市坪山区投资大厦406室

电话:0755-84289786

邮箱:web@szaow.com

咨询:13715268808 (微信) 王经理

【网站建设】【小程序开发】【系统定制】【网络推广】【企业邮箱】

随便看看

17

技术从业经验

多一份方案,会有收获...

联系我们,免费获得专属《策划方案》及报价

在线咨询 微信交谈
拒绝骚扰,我们只为您带来惊喜...
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

在线咨询

免费通话

24小时免费咨询

请输入您的联系电话

免费通话

微信扫一扫

微信联系
网站模板
服务商城
返回顶部