2015的10大网页设计趋势

记得2015吗?苹果手表,新iPhone 6S,爱上侏罗纪公园了。时间飞快,这一切看起来还在昨天。

2015年在方方面面都留下其独特风格,包括网页设计、不断适应今年超过桌面的移动访问。基于我在设计团队uxpin中的讨论,让我们探讨十大趋势,从而从中吸收它们的好处继续在2016保持前进。

1.极简主义

1448585318image_0-new

极简主义的网站体现了一个网站设计中心:简单。剥离所有的要素不仅仅是给你的网站的优雅–还可以减少加载时间的空气,移动浏览的一个很好的优势。加上较少的元素意味着更容易响应设计。

在免费导游的解释网站设计趋势2015和2016,极简美学也一起与视觉能力的进步,并鼓励其他像趋势高清背景。

在上面的例子中,欧米茄只包括必要的东西:语言设置,可扩展菜单,并标识为返回首页。这引起了人们的注意,几乎完全是奢侈品的英雄形象,因为没有其他UI元素的竞争。

2.超长的滚动

1448585309image_1-new

较小的屏幕意味着更长的卷轴。

与“以下”的神话被证明是错误的今天,设计师和用户识别超长的价值:更多的创作自由,改进了的故事,较强的相互作用,和简化的导航(如果网站足够小)。

超长的工作最适合重型移动流量或经常更新内容的网站,对于喜欢视频重媒体网站是有效的,从而拖累加载时间。

3.新的平面设计

今天的平面设计已从它的根作为一种替代借壳。新的,更微妙的迭代的平面设计–Ryan艾伦称之为“平面设计2“–提供细节和一夜暴富的机会更多:

  • 照明眩光和亮点
  • 梯度和/或阴影
  • 实现更大的价值

1448585313image_2-new

喜欢极简主义,平的简单性是其强度。几乎卡通图形,字体易读性第一,和活泼的色彩,保持风格适合容易理解。

4.强大的动画

1448585861image_3

1448842586Nav-sample-2

由于运动引起注意,动画可以影响所见过的第一视觉层次。此外,动画显示的关系:想象一个窗口缩小,飞入菜单–动画这印证了行动成功的一个动画,并显示用户在菜单中可以查看窗口后。

在菜单的飞,作为原型的下面uxpin与无码动画编辑器,论证了这一原理的完美。

至少,给人以单调的动作动画。一个悬停动画显示一个链接被点击超过一个简单的颜色变化。

5.活泼的颜色

在过去,设计师是有限的216网页安全色,但现在有数百万,一个进程时间很好的高清屏幕的崛起。

正如在网站设计趋势2015和2016,今年上升的明亮,活泼的色彩与平面设计的基调,但这些“快乐”的颜色,适合与其他趋势以及。

1448585291image_5-new

引人注目的颜色减少站点出现暗–极简主义的天然弱点的可能性。当用积极与排版,色彩可以提请注意某些词或短语。此外,色彩起着重要作用的提示可用性:认为颜色变化时,在卡、交互性的一个明显的指示。

6.高清背景

与越来越多的人拥有高清晰度的设备,这只是个时间问题,这种趋势被。

1448585296image_6-new

HD是任何分辨率大于200 PPI(DPI),而标准的定义是72 PPI。这使得设计与心灵的标准清晰度图像出现块状或模糊的高清设备,但高清图像出现好的SD。这意味着用户只显示不会注意到差别–但那些高清肯定会。

7.富有表现力的摄影

这部分得益于高清屏幕的增加,网页设计继续使用高质量(有时更多的艺术)摄影。

1448585286image_7-new

这是最明显的英雄形象–单照片,填充整个背景情况。英雄形象吸引用户更快速,使他们完美的着陆和登录页面。

8.动态字体

字体渲染不再关注新的免费字体的可用性,印刷术已经开始打更多的网页设计中的作用。

1448585282image_8-new

动态字体并不总是意味着野生或精致的字体–事实上,最常见的是简单的排版,符合趋势像平面设计和极简主义。动态字体的趋势是指任何文本,提请注意本身,无论是简单还是复杂。这包括字体,非常大或非常小的。

9.丰富的互动

1448585273image_9-new

HTML5,CSS,JavaScript和jQuery的进步,现在允许充分的相互作用,这实际上促进业务。这种趋势的发展从增加:

  • -可点击的元素(或刷卡)
  • -推送通知
  • -个性化工具的使用(如地理位置)
  • 在揭示内容控制
  • 滚动导航
  • -转换和循环功能

今年也看到了更多的微观相互作用,即,一个“叮叮”的声音当你发送一封电子邮件,或一个动画提请注意一个新的通知。

10.卡片布局

1448585277image_10-new

排在前十的另一个趋势是适应移动设备。

卡片布局让网站和应用程序在一个干净的,显示丰富的内容组织方式,使他们伟大的浏览,尤其是当链接到外部网站。因为行和列可以自动调整以适应不同的屏幕尺寸,这样的布局是完美的响应式设计。

翻译原文:http://www.sitepoint.com/the-10-big-web-design-trends-of-2015

中文翻译:https://qdkfweb.cn/2015-10-design-trends.html


关注我

我的微信公众号:前端开发博客,在后台回复以下关键字可以获取资源。

  • 回复「小抄」,领取Vue、JavaScript 和 WebComponent 小抄 PDF
  • 回复「Vue脑图」获取 Vue 相关脑图
  • 回复「思维图」获取 JavaScript 相关思维图
  • 回复「简历」获取简历制作建议
  • 回复「简历模板」获取精选的简历模板
  • 回复「加群」进入500人前端精英群
  • 回复「电子书」下载我整理的大量前端资源,含面试、Vue实战项目、CSS和JavaScript电子书等。
  • 回复「知识点」下载高清JavaScript知识点图谱

每日分享有用的前端开发知识,加我微信:caibaojian89 交流