2017 年网页设计的十大趋势

又迎来了崭新的一年,让我们来了解网页设计的发展趋势吧。“2016 年是对话式商务的元年。”“GIFs 是伟大的。它们无处不在。”


又迎来了崭新的一年,让我们来了解网页设计的发展趋势吧。

2017 年网页设计的十大趋势

随着技术的蓬勃发展,它们已经深入到了我们日常生活的方方面面,而用户们也越来越注重线上的体验。

自身、互动、相关这三个关键词,是用户期望通过他们的 UX 设计来满足的体验。而这也意味着网页设计师将要面临更加严峻的网站开发挑战,他们需要感知用户的体验,并贯穿到网站开发的全过程。

2017 年会出现哪些新趋势?

去年,我写了篇关于 2016 年七大网页设计趋势的文章。它受到了众多网友的关注。因此,我决定不再更新去年的文章,而与大家分享一篇关于 2017 年网页设计趋势见解的新文章。

让我们开始吧!

1. 传统网页设计的消亡

网页设计正从传统的概念中逐渐的消亡。或像 Eric Meyer 在最近的 Offscreen 杂志中所说的,他停止称自己为网页设计师,而是称自己为“体验设计师”。

在传统的网页设计中,设计的作用更多是让研发人员看起来不错,而现如今网页设计已演变的不仅如此了。

网页设计师(或体验设计师)不再只是使网站“看起来美丽”。 相反,他们需要研究用户的体验以及他们之间的故事。

2. 对话式 UI

2016 年是对话式交互发展的重要的一年,作为 hashtag 的创始人以及前 Google 员工Chris Messina 说:

“2016 年是对话式商务的元年。”

Chris 在这篇文章里提到,人们将通过聊天应用,通讯应用和其他自然语言界面来与公司、服务商和机器人进行交互。作为通讯应用平台(例如 Slack,Facebook Messenger 或 WeChat)也超越了社交网络应用的下载,企业开始思考如何利用这一变化。

2017 年网页设计的十大趋势

因此,对话式用户界面(例如网站)的设计,将成为大多数网页设计师在 2017 年关注的重点。

2017 年网页设计的十大趋势

虽然,仍然有诸多问题尚未解决,但请放心:对话式界面将成为 2017 年里的一个主要的话题。

3. GIFs 和其他动画

众多的网站和应用程序正在使用着动画,而 GIFs 也逐步的成为了主流。

作为 Buffer 网站的内容制作官 Ash 说:

“GIFs 是伟大的。它们无处不在。”

现在它已经内置到 Facebook 和 Twitter 中,你也可以将 GIFs 用于你的网页设计。

但不要过度的依赖它们——虽然,它们很好的吸引了用户的注意。GIFs 可让你提供更丰富的产品体验,演示工作流程,或者为你的客户提供简单的指导。

2017 年网页设计的十大趋势

随着多款 GIF 制作工具的出现(如 Photoshop,Giphy 或 record.it),网页设计师在其设计的过程中也不会受到限制。

4. 下一代响应式设计

响应式设计将继续占据着主导地位,因为它是实现最佳用户体验的有效方式之一。CSS media queries 为网站提供了灵活性,并根据访问网站的不同设备进行调整。

2016 年 4 月,谷歌对网站的排名算法进行了调整,并对网站内容进行了优化。我们看到了不少公司正忙于重新提升他们网站的 Google 排名。

作为建站者,我们必须接受这种情况。虽然,没有一个通用标准,但我确信的是网站提供的选项越少,响应的时间越短,那么网站的转化率就会得到提升。

2017 年网页设计的十大趋势

5. 极简主义的网页设计

在 2017 年极简主义将会达到一个全新的高度。当用户点击首页后,呈现的将是类似于“卡片”一样的展现,它们成为了用户获取网站更多信息的入口。而对于网站本身,多图片的展示也可用于可视化的专题推荐,并可以促使用户进行点击。

2017 年网页设计的十大趋势

Netflix 就是一个比较成功的网站示例。卡片图像不仅能够诠释节目或电影的更多内容,而且可以减少网站的使用空间。

总体上,人们更青睐那些在视觉上清晰、简单的网页设计。

6. 数据可视化

现如今,数据和分析越来越重要。而大品牌服务商正为用户提供了一个查看自己网站的统计数据的机会。

2017 年网页设计的十大趋势

通过可视化的数据展示来增加用户与数据间的交互。当涉及让用户更好的表达时,丰富多彩的图表会特别有用。例如你可以使用 Tableau 来创建吸引用户注意的图表。

7. 减少图库图片,增加真实照片

这是一个简单却有趣的网页设计趋势。 在过去几个月浏览网站的过程中,我们发现使用图库图片的网站在不断的减少。作为用户,我们更愿意看到那些能够表明公司或业务的照片,而不只是一张通用的图片。

我也有这样的感觉,网页设计师宁可不选择图片,也不会使用图库图片。

摄影是一种艺术的表现形式,却被人们遗忘了若干年。但在2017年它会强势回归。然而,铭记于心的事情是你网站的服务目的是什么。因此,上述的一切,包括网站图像的选择,请务必要这样做。

个人照片(团队照片)同样很受欢迎——请给品牌一个门面

2017 年网页设计的十大趋势

不仅真实图像的使用率在不断的增长,而且像卡通、漫画以及其他插图的使用比例也在增加。尤其是在一些科技类的社区中,通常会用一则漫画来谈论特定的主题或阐述一些细节。

8. Material Design

近年来,由 Google 推出的材料设计语言正稳步的推广到其应用程序中,包括 Gmail,Google 地图,Google 云盘和 YouTube 。而早在 2013 年,材料设计就以搜索词的形式出现了,但直到 2015 年它才成为了主流。

它是一种在页面上创建具有意义的层次排版结构的设计方法,在移动和响应用户动作的同时,将用户的焦点绘制到不同的区域。他们称后者为材料动效。而材料设计则是利用几何形状从视觉上来增强他们网站的体验。

由于它具备极大的灵活性,以及所有设备的兼容性,它也越来越受欢迎。

这是一个关于材料设计及其未来的持续讨论。要详细了解材料设计,请参阅Google上的简介

9. 长滚动页网站

它是一个拥有利弊的长滚动页网站。总而言之,我们看到了越来越多的长滚动页网站的出现,例如 Facebook,Twitter 或 Instagram 。它们看似无底,然而又很成功。

在 Facebook,Twitter 和 Instagram 网站上,用户通过长时间滑动页面,来不断的刷新与浏览新的内容。作为慵懒的人类,我们已经习惯了现在的行为方式。许多网站也都在摒弃菜单和标签选项,取而代之的是将所有内容放在一个长长的页面上。而网站也可以拆解为图像、文字与视频,用以增添一些让人们感到有趣的体验。

那么,就继续愉快地滚动吧!

2017 年网页设计的十大趋势

10. 字体排印越来越大

字体排印越来越大,并且更大胆。

2016 年我们已经看到了字体的大小与外观设计的增长,但这种趋势不会很快就停止。品牌名称将会变得更大、更醒目,甚至会全屏出现。而动态的颜色与纹理也将添加到那些有趣、充满活力的字体中,并创造出一个让你“哇”的效果。

2017 年网页设计的十大趋势

无论是用于绘图,还是用来吸引用户的注意,字体排印工作都在有条不紊的进行着。而大型字体的排印可以有效地打破网格的界限,尤其针对那些拥有较长滚动页面的网站。

总结

虽然,我们认为这份列表上的所有内容都相当不错的,但不要尝试将每一个趋势都纳入到你设计的新网站上。它们中的一些适合为企业服务,而你也可以选择一些客户需要和想要的样式和功能。同时,不要尝试太多不必要的功能,这样会立刻降低网站的用户体验。所以,请谨慎的选择,最重要的是要有创意。

感谢你的阅读,如果觉得文章不错,不妨点个赞。

注:

  • 由于译者水平有限,欢迎大家多多指正;
  • 本文版权归原作者所有。

 

原文地址:10 Web Design Trends for 2017

原文作者: Thomas Peham

译者:IT程序狮

本文由 @IT程序狮 翻译发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/25100/

(0)
CatherineCatherine
上一篇 2017-05-10 15:10
下一篇 2017-05-10 16:52

相关推荐

  • 那些上亿人都在看的Banner都是怎么设计出来的?

    每到一年一度的大促季,会场、页面、互动游戏,都在紧张设计之中,这些精美的页面和互动游戏,如何与用户产生联系?必然需要一条与用户连接的纽带 —— 它就是BANNER。有些人可能认为资源位的设计相对简单,但其实不然,小小的资源位承载着重大的使命,设计上自然也是下了一番功夫,那这一次的双11我 们是怎么做的?请听我细细道来…..

    2017-05-30
  • 如何基于反馈迭代用户体验?

    作为互联网从业者,大家都知道,任何一款互联网产品的迭代,都一定离不开用户反馈和数据。如何通过这两个部分对产品的现状进行分析,并且提出产品功能迭代和体验优化是所有产品经理和设计师日常工作都需要面对的课题。作为一名城市规划建筑师,你接到一个任务,是要在横穿城市是一条河上造一座桥,你拿到这个任务的时候你会想些什么,“我该在哪个位置造这座桥?”,“我该造一座什么样的桥呢,斜拉桥还是拱桥?”还是“这座桥是木制、铸铁还是钢筋混凝土?”,这些都不对,首先应该想的是“为什么要建桥?”,如果你得到的答案是需要将人送到河对岸去,那么基于这个目标,你还觉得一定需要造桥,挖个隧道是不是也可以,建个轮渡也行啊。如果答案是需要将某些信息送到对岸去呢?整个命题就发生了巨大的变化。这就是设计思维在思考问题时的重要意义。

    2017-05-20
  • 手机“携号转网”磕绊多,用户体验太遭罪,手机跳槽为何这么难?

    轻点下图  纵横带您“听新闻”携号转网来自新闻纵横00:0005:59工业和信息化部在2010年和2013年,分两批在天津、海南和江西、湖北、云南五个省市,试点手机号码“携号转网”业务。但是到今年初,仍然有试点省份的用户反映,办理过程不如预期的顺利,质疑运营商故意设置障碍。记者调查发现,“携号转网”业务在不同的省份试点效果存在差异,主管部门坦承,有运营商为了挽留用户“搞小动作”,但试点工作整体向前推进,一些技术问题逐步解决。湖北武汉的白...

    2018-04-10
  • 前Apple员工谈交互设计的未来

    作者:Bret Victor  |  翻译:包子,校审:Chen Jing本文长度2731字,建议阅读5分钟现在,有很多流行的有关未来交互设计的想象。机缘巧合下,设计未来的交互界面成为了我的工作。我有机会用真正能工作的原型来做设计,而不是如图所示用绿光屏和After Effects合成的特效。我对视频中的一些交互表示怀疑,因为我尝试过实现它们,而制作视频的动画师显然没有。但是,这不是这个视频真正存在的问题。我觉得这个视频真正出了问题的地...

    2018-01-30
  • 交互设计如何备考?二战学姐带你领略考研那些事

    姜嘉琪本科南京大学,信息管理与信息系统专业清华大学美术学院公布拟录取名单一周之后,心里那种不真实感终于平复下来。这是我第二年参加考试,至此也算是最好的结果了。为什么考研我本科的专业其实也算是个“交叉学科”,范围广必然深度不足,所以我一度非常迷茫,不知道未来究竟想做什么。后来上了一门《人机交互》的选修课,第一次了解到设计上的微妙差别给使用者带来的不同体验,经过反复思考,我觉得产品交互设计这个领域可以算是我个人兴趣、能力、期望最佳的结合点,...

    2018-04-20
  • 超全面!聊天机器人的界面交互设计实战经验总结

    最近在做智投App的机器人Neo的原型设计,是一个chatbot 聊天机器人 ,整理了一下关于 聊天机器人 设计的一些心得。一. 背景:这是Neo的第一个版本。Neo通过问答的方式了解用户的基本信息…

    2017-08-02
  • AR场景下的交互设计研究——以中文输入为例 - UXPA中国2016行业文集

    增强现实场景下的交互设计研究         ——以中文输入为例1门文,百度时代总部,北京  2胡也畅, 邵颖,国际商业机器(中国)投资有限公司 摘要:随着近些年一系…

    2017-08-01
  • 信息的收集、甄别和呈现

    史蒂芬说:用户调研帮助我们去理解其他人需求,从而我们可以用充分的,有灵感的设计解决方案来对他们的需求做出更快捷的反馈。用研同时也帮助我们避开自己的偏见,因为我们必须频繁的为跟我们生活截然不同的人们设…

    2014-11-11
  • 19.怎样绘制用户体验的地图 | 打造产品思维30讲

    19.怎样绘制用户体验地图来自时间前哨00:0015:06这一节讲用户体验地图和用户故事。用户体验地图就是通过画一张图,用一种讲故事的方式,从一个特定用户的角度出发,记录下他与产品或者服务进行接触、进入、互动的完整过程。开始做产品经理的人容易犯的错误,就是用管理员的视角来规划产品。我经常看到这种全局型的产品设计图,复杂、全面、没重点,这肯定是错的。我一般会告诉这种产品经理,请按照一个用户使用的路径,把这个产品设计图再画一遍。从一开始用户...

    2018-03-20
  • UI中的文字设计总结与分析

    对于设计师来说,文字是一个可以很好提升产品用户体验的武器,希望这篇文章能够给各位设计师带来收获。

    2017-08-04