专栏首页PHP在线你知道了吗?2015年网页设计的9大趋势

你知道了吗?2015年网页设计的9大趋势

其实在此之前已经有很多小伙伴翻译或总结过类似文章来分析优秀网页设计的趋势,不过我还是希望我总结的东西能更宏观一点并为大家带来一些新的东西。

稍后看官们可能会觉得我说的这几点可能你们都见过或者自己也在一些项目中运用起来,没错,没见过就不叫趋势, 哈哈!而将这些东西进行总结然后运用在自己今后的设计中,这样我们才能紧跟潮流并逐渐引领潮流,否则将只是走马观花。

我们通过几个网站以及看官记忆中的网站一起探索吧,虽是管中窥豹,但趋势可见一斑!

一、平面设计在网页设计中的崛起

以前我们可能会觉得平面设计和网页设计以及UI设计有很大的区别,会平面设计的人可能未必能做好网页设计,但这样的观念是时候革新了。实际上好的平面设计师会将自己的平面设计功底融合到网页设计当中,如果我们在学网页设计的时候只是参照网站设计,那我们永远无法突破。

不论是用平面设计作为背景也好,或者是用平面设计的元素作为网页控件或者装饰也好,实际上好的平面设计会大大提高网站的视觉冲击力。所以未来的UI设计师也必须是一个不错的平面设计师了,或者统称为视觉设计师,加油!

GROBA

WIT

二、全屏首页(首页大图、视频背景、特效背景、交互式首页)

全屏首页是一种欢迎页面或者着陆页的形式,当前网站五花八门,能在第一时间内传达网站或企业的精神并吸引用户继续浏览的重任逐渐落在了这个全屏首页 的肩上。不论是图片背景还是视频背景,视觉冲击力和痛点抓取力度成为了首页的重任,这也是筛选潜在客户的一个方式。首屏的文案也尤为重要。

(1)首页大图背景

首页大图的形式相信大家都不陌生了,通常都是高质量的摄影图片,或者在纯色背景上的产品图片等等。优势不言而喻,那就是具有很棒的视觉传达效果和冲击力。而且随着网速的不断提升,几秒内加载一个百K的高清背景对用户来说不是什么问题。

(2)首页视频背景

使用视频作为首页的背景在视觉上更加具有冲击力,好的视频宣传片更是为网站如虎添翼。但是缺点亦较为明显,目前国内网速相对仍然较慢,(即便是 30M的光纤,在很多地方其实都是共享网速,高峰期看个在线视频都会卡),而视频背景通常都是网页打开即直接播放的,在网速达不到一定标准的情况下,视频 会卡顿播放,体验很差。而且为了让视频播放流畅,实际上很多网站的视频都是压缩成成分辨率比较低的视频,清晰度和图片相差较大。希望以后能出现视频缓冲或 者预加载技术等方式来提升整个浏览效果,关键还是网速。

JONAS ERIKSSON

该网站视频背景就相当具有震撼力,快速将自己的作品展示给观众,让观众充满好奇。

(3) HTML5特效背景

我们以粒子特效背景为例。相对于视频背景而言,使用新的网络语言制作的背景在加载速度、成像质量等方面都优于视频背景,而且特效背景也具有很棒的视觉体验。

FiberSensing

(4)交互式首页

交互式首页指的是在网页上做一些可以用鼠标或者键盘控制的元素来与用户发生互动,这样用户在首页停留的时间会更久,同时却很享受这个过程,提高用户 体验的同时提升网站的趣味性和企业形象。交互式页面设计经常会运用到诸多HTML5或者CSS3技术,比如前面提到的粒子特效。

Suanier

鼠标可控制转盘,且通过不同的转向透视与错位形成了立体的层次效果。

三、全屏富式导航

传统网页设计中,导航菜单一般会放置在页面顶部或者侧面,但越来越多的电脑端网站却将菜单全部隐藏在汉堡图标中。

这种设计起初只是导航,称之为“全屏导航”;而到后期,随着设计的革新和创意的加入,这个页面的内容也越来越丰富,页面加入了社交媒体的链接,加入了联系方式,甚至有的还加入了留言板等等,我们称之为“全屏富式导航”。

这种形式的导航在用户体验上其实还是有些风险的,因为多了一次点击,而且会导致很多用户忽略细节性内容,难以达到最优设计,而这种菜单通常也需要建 立在用户对汉堡菜单的标志具有相当的熟悉程度基础之上。目前,我们建议使用这种菜单的网站会有一个引导性的提示来告知用户更多信息的入口,或者除了菜单一 个入口外增加其他入口。用户体验的一个准则是将用户需要的信息主动呈递给用户或是能让用户在三次点击内找到自己需要的信息,所以这种隐藏在一个图标里的菜 单目前还是略有风险。不过这种风险会随着普及程度降低。

四、三维视觉效果的崛起

这一点将对网页设计师提出了更高的要求,网页设计中会融入产品的三维动态展示,这可能会要求网页设计中包含UI与交互设计、工业设计与渲染、视频剪 辑、精通HTML5的前端等等。也正是因为这种设计门槛较高,所以增长速度较慢;但随着产品专题站的爆炸式增长,在产品介绍里使用三维已成为越来越多的网 页设计师的选择。

实现三维预览效果的方式很多,有的是通过WebGL技术,有的是通过鼠标控制视频播放的技术,也有许多三维动态展示其实是多张不同角度的图片拼接而成,一帧一帧进行播放。

BLIZEYEWEAR

MAC PRO

五、动效将更加普及和广泛

期初,网站动效会集中在页面内部的元素,而随着网页技术和创意的不断发展,动效在网页中变得无处不在。单页面网站中浏览模块之间的切换不再局限于单 纯的推动切换或渐变切换;而多网页的网站网页之间的切换也变得更加柔和,通过不同页面关闭和打开之间动画效果的衔接,你会以为你从头到尾都在一个网页上。

页面内部元素的动效,大至banner小至一个button,鼠标悬浮或者焦点的改变,这些元素都融入了太多丰富的动效。甚至于GIF动图也在网页中逐渐崛起以补充一些代码难以实现的动效。

前面提到的网站中多数都有精致的动效哦。

DIVI(wordpress)

该网站就是通过GIF实现的一些页面中展示性的动效。

JOHO’s

其实我们提过的很多特效都在该网站得到了体现,运用了大量的网页新技术,比如WebGL技术、序列帧动画……尤其在页面切换时的动效。

六、单页网站走势继续上升

同样,随着网速以及网络技术的上升,单页式网站依旧呈现上升趋势,这种网站最显著的优势是信息不容易遗漏,如果访问一个站点通过点击又点出了许多子 站或者网页,而这些网页和主页之间的逻辑比较混乱或者不能一目了然,那这个网站的浏览体验一定是很差的。而单页网站解决了这个问题,你看到的或者跳转的页 面,其实还都是在这一个页面上。而AJAX异步加载等技术也解决了庞大单页网站的加载速度问题。

AQUATILIS

点击页面中的按钮,新的内容将会将原来的页面向左推动,关闭后恢复原来的位置,就好比左侧的页面是一个时间轴,而你则挨个浏览轴上的内容,用户体验很赞。

七、网页音效

越来越多的网页设计会在页面中加入一些音效,可以是网页背景音效,也可以是页面滚动音效,也可以是焦点改变时元素的音效。而这些音效共同的特点是都 很精致轻微,轻轻点缀,就像转动保险柜旋钮发出的声音一样,清脆悦耳。这样不会给浏览者增加无谓的困扰。而越来越多的浏览器为了防止用户被困扰,增加了关 闭当前页面音效的功能。

MY/STATIC/SELF

不过这个网站的音效并不柔和悦耳,是一种酷酷的恐怖的科技感

八、移动优先的响应式设计继续盛行

响应式设计已经是老生常谈了,相信大家都清楚什么是响应式设计。之前很多人也分析过响应式设计的利与弊,我也不再赘述。

很多国内的网站在建站之初不会选择响应式设计,原因也是比较符合我国国情的,流量少、网速慢、4G普及程度不够等诸多原因,导致我们在手机端浏览一 个响应式的企业网站的时候会耗用较长时间的加载,而根据5秒原则,用户5秒内打不开一个网站,就会选择关闭。目前国内BAT的网站基本还是移动和电脑分开 设计,而国内很多建站公司的响应式企业建站,也含有一部分噱头在内。

不过,响应式设计在国际和国内却依旧稳步上升,随着智能手机技术的不断革新,移动端的上网用户已经逐渐追击电脑上网用户,而中国移动网名的数量在世界上是领先的。移动端网站的设计越来越被重视,而响应式设计正是一个不错的解决方案。

九、中文网站中矢量字体的使用逐渐上升

我们经常在国外的网站上看到网站内使用一套字体作为自己的网站字体,即使用户本地没有这个字体,网站也会很轻易加载到字体并在浏览器中运用。而纵观 中文网站,90%以上的网站内字体不是宋体就是微软雅黑,想用几个不一样的字就得做成png图片,原因很简单,中文字库太大。一套Helvetica标准 字体大小是81.68KB,而一套微软雅黑常规体大小是20.5MB,你难道要用户打开网页时加载20.5MB的数据吗?

但是随着中文在线字库的崛起以及在线制作矢量图标字体工具的发展,包括字蛛计划,我们可以使用矢量素材作为我们的字体了,而不仅限于矢量图标。

GOGORO

本文分享自微信公众号 - php(phpdaily)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2015-08-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 赏析|看看国际一线品牌化妆品网站长成什么样

    原文出处: ifeiwu-@飞屋睿UIdesign 国际一线化妆品品牌是如何打造自己的官网的?在这个行业里,名牌效应是否也会蔓延至网站的展示上?已经深深被...

    wangxl
  • 未来Web设计的7大趋势

    原文出处: Medium 译文出处:朵璞 1. 手势取代点击 我们都已经忘记滚动条曾经是有多麻烦,大多数用户都得煞费苦心地把鼠标移至屏幕右侧来移动这古...

    wangxl
  • MySQL 在并发场景下的问题及解决思路

    对于数据库系统来说在多用户并发条件下提高并发性的同时又要保证数据的一致性一直是数据库系统追求的目标,既要满足大量并发访问的需求又必须保证在此条件下数据的安全,为...

    wangxl
  • 2015 Top10 最成功的网页设计趋势

      如果你打算在2015年重新设计你的网站,那么你可能有必要了解设计优秀网页的趋势。尽可能早地考虑网页设计特点是一个好主意。

    貟王軍
  • 我们常说的SEO推广到底是什么?

    根据人们的使用习惯和心理,在搜索引擎中排名越靠前的网站,被点击的几率就越大,相反,排名越靠后,得到的搜索流量就越少。据数据统计,我国中小企业中,占了绝大部分都会...

    耐思智慧
  • 十个网页设计的常见错误及解决办法

    以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。 网页设计师总是在不断的犯错误,可这并不表示他们不够出色...

    奔跑的小鹿
  • 30秒钟评价一个网页

    当你已经做好准备要开发一个网站时,你一定希望你开发出的网站能给用户最好的用户体验。 能够准确快速的评价一个网站是一门艺术,也是一门科学,但这种艺术或科学是可以很...

    前朝楚水
  • 【编程技巧】30秒钟评价一个网页

    当你已经做好准备要开发一个网站时,你一定希望你开发出的网站能给用户最好的用户体验。 能够准确快速的评价一个网站是一门艺术,也是一门科学,但这种艺术或科学是可以很...

    程序员互动联盟
  • [SEO知识讲解] 收录的内容被纳入底层库的解决办法

    在前面的文章中,谈到了网站有收录没排名的解决办法,对于解决办法,只做了大致的讲解,本文就此问题,继续探讨:如果被收录的内容已经被纳入底层库中,该如何有效解决?

    AlexTao
  • 零基础html5+div+css+js网页开发教程#001网页开发概述

    首先我们马上问道的小伙伴我们这个网页也需要它有什么作用呢?我们学网页肯定是有些网页的一个作用的,那么大家看到的现在的很多的网页,在Windows系统上面我们使用...

    刘金玉编程

扫码关注云+社区

领取腾讯云代金券