Web未来设计趋势是什么?相信这一类的文章已经汗牛充栋。就笔者看来,未来Web设计基本上还是以用户体验及简洁至上原则为主。

1.手势取代点击

还记得曾经是如何滚动网页的吗?将鼠标移到屏幕的右边缘,然后拖动古代称为“滚动条”的玩意儿:

稍微专业点的可能会使用鼠标滚轮,光标键或触控板,这已经领先于大多数的用户了。

但是2015年,滚动比点击更受欢迎。在移动设备上,你可以用你的手指随意滑动来滚动页面。精确点击目标实际上是很难的——这和我们在桌面上养成的习惯截然相反。

因此,我们希望越来越多的网站能够内置为滚动第一,点击第二个的设置。当然,这正是我们现在无处不在的设计方式:

随着移动设备渐渐掌控市场,我们对此趋势的预测完全是有充分理由的。现在的网站已经没有那么多需要点击的内容,更多的是滚动。链接少了,按钮多了,“可点击”区域大了,需要滚动的页面高了。

那些将文章分成多页的网站估计马上会明白,文章内容应该做成单页的,哪怕很长很长,甚至可以像时代杂志学习,做成无限滚动网页:

虽然说将来web是否会扩张到类似于手表这样的装备上还是个未知数,但是,如果这个设想成真的话,那么我可以打赌以后将会成为手势的天下。

2.折叠将要消亡

既然滚动这么省事,并且设备尺寸趋于多种多样,于是乎,“折叠”慢慢变得无关紧要起来。

设计师现在完全可以选择不在页面顶部填鸭式地塞满所有东西。当前的一个设计趋势是——全屏图片,上面一个标题,滚动页面,然后才能看到具体的文章内容:

现在设计师可以像做杂志那样放一些大图片到自己的网页上。2015年的设计可能会占据更多的空间——特别是垂直方向——比如说类似的大型图片。

3.用户速度更快,网站更简化

现在几乎每个年轻的成年人本身就是一个专业的web用户。甚至即使是业余的都表现得很专业:使用多个标签,刷新页面。

与此同时,我们变得越来越不耐烦。如果你想使一个脾气温和的人发火,只要让他的互联网慢一分钟就够了。

现在的网站不仅要速度更快(技术问题),而且还要更易于理解。那些会减慢用户速度的设计和那些完全加载不出来的效果是一样的。

简单的设计更易于浏览,这意味着接收起来更快。一眼望去,新颖的设计更吸引人的眼球:

这可能就是skeuomorphic design消亡的最大原因:用户变得更有感知力,缺乏耐心,一些繁杂的内容拖垮了速度。

App因其超小的美丽接口把大多数网站都比下去了。之所以网站会完败是因为最小化的接口拥有更好的执行力。

扁平化的设计仅仅是个开始。真正的趋势是简单化和直接化,预计2015年这方面的影响将会更加深远。

4.像素将会被废弃

在桌面上,1个点就是1像素。甚至有人还知道平均1英寸由多少像素组成:72 dpi。但是现在,很多人已经不知道什么是像素了。

随着响应式设计的普及,我们使用更多的是网格和百分比。当然还是有一个区域依然坚守着像素:点阵图。

几乎所有的web都是构建在图像的基础上。随着视网膜显示屏和新式浏览器逐步的盛行,矢量图将成为2015年的宠儿。

从基于字体的图标和谷歌材料设计上面来看,这种趋势已经可见一斑。网站加载速度更快,缩放图标到任意大小也不会失真。这使得它们非常适合新式的Web浏览器。

虽然技术已经存在,但依然需要时间来让专业人员改变他们的习惯,以便于创造更高品质的显示。一旦平均桌面显示达到视网膜级(如新的iMac),估计设计师只能纷纷效仿。

5.动画又回来了

以前我们说,如果你想让网站显得过时,就放一些GIF和Flash动画。但现在,动画元素逐渐在网页设计上大放光彩。

扁平化设计虽好,但终归看上去毫无特色,甚至略显无聊。动画则可以让网站用更少的空间传递更多的信息,显得独树一帜。

移动app俨然颠覆了大家的看法,它们用动画来传达意思,现在网站紧随其步伐。

一些新技术,如CSS动画,使得我们不需要考虑插件、速度和兼容的问题就可以很容易地增强设计。并且Web组件(具体看第6点)还可以提供加速功能。

GIF动画又回来了,效果惊人。你会发现这篇文章中使用了大量GIF动画,这是以前无法想像的。

6.组件是新的框架

Web技术变得越来越复杂。即使是很简单的任务,包括Google Analytics 和Facebook上的Like按钮,都迫使设计师不得不嵌入很多乱七八糟的代码到网页上。而如果我们换写例如下面这样的代码就会简单多了:

<google-analytics key=”UA-12345–678">

我们可以使用Web组件,然而这还没有被大多数设计师所认可和习惯。 2015年是web组件雄起的一年。

谷歌材料设计打响了第一炮,它在所有新式浏览器的支持下,提供了来自于Android app的多种多样的动画和互动组件,以及像这样的简单标签:

照这样的趋势来看,2015年出现更多的基于组件的架构也就丝毫不令人意外了,比如说Bootstrap 4.0?

7.社交饱和,以及直接邮件的崛起

社交媒体已经取得了巨大的成功,但很多内容供应商对此并不满意。

然而问题是已经饱和了。每天有数十亿的帖子诞生,Facebook只收录用户最有可能喜欢和分享的那一些。这意味着你发布的内容可能只有很小很小比例的人群看得到。 (当然你可以付费,就没有这个烦恼了)。

社交是不会消失的,2014年,很多知名博客,例如Tim Ferriss,已经将注意力转移到了良好的老式邮件列表上。因为他们意识到,电子邮件比社交媒体有一个显著的优势:愿意查阅邮件的人群比例要高得多。

我预计这种帖子社交的趋势将在2015年大放光彩。

不可预测的趋势:CSS shapes

除了设计师,很多人都不会去关注这一技术。 CSS shapes允许你布局成某种形状,如圆形:

看上去超酷,有木有?但是除非有浏览器的支持,否则你就会有很大的风险——很有可能需要投入大量的时间和精力来为新老浏览器分别制作两种设计。但是除了设计师,我相信没有多少用户会注意到这一点。虽然这真的很酷。

推荐阅读:

10个让人身临其境的404页面

20大UI设计原则

2015平面设计软件排行

7大未来Web设计趋势相关推荐

  1. 设计: 未来Web设计的7大趋势

    原文出处: Medium   译文出处:朵璞 1. 手势取代点击 我们都已经忘记滚动条曾经是有多麻烦,大多数用户都得煞费苦心地把鼠标移至屏幕右侧来移动这古老的滚动条: 作为一名专业人士,想必你一定用过 ...

  2. [转] WEB设计趋势与潮流

    原载于 <程序员>杂志2010年第7期. 作者:西乔 原文永久链接: http://blog.xiqiao.info/2010/07/19/719 19年前,世界上第一个网页诞生,它没有设 ...

  3. 老外谈设计: 2015年WEB设计趋势

    2019独角兽企业重金招聘Python工程师标准>>> 老外谈设计: 2015年WEB设计趋势 Web设计2015年将有那些变化和发展趋势呢?本篇中将分析总结了国外Web设计未来发展 ...

  4. 2016年及以后的Web设计趋势

    Webdesign trends 2016: "What separates design from art is that design is supposed to be functio ...

  5. 2012搭建web服务器_2012年值得关注的15个Web设计趋势

    到目前为止,2011年已经在设计和互联网技术方面带来了惊人的变化. Web开发已成为进入学习领域的一个流畅得多的主题,更不用说无数个对简化流程有用的开源库了. 然而,似乎全球设计界还远远没有投入. 我 ...

  6. 2018 年值得关注的 Web 设计趋势

    英文原文:Web Design Trends To Watch Out For In 2018 原文地址:https://usersnap.com/blog/web-design-trends-201 ...

  7. 10 个顶级web设计趋势,让你的应用程序脱颖而出

    英文 | https://appmasterio.medium.com/top-10-mobile-app-ui-design-ideas-in-2022-appmaster-io-5068d1adb ...

  8. web全屏_当前的Web设计趋势:全屏全屏主页

    web全屏 全屏启动是当前网络上最常见的模式之一. 有些人喜欢它,有些人讨厌它,但是无论您有什么感觉,我们都可以看看一些值得注意的例子,并在讨论过程中谈论最佳实践. 关于设计融合的注意事项 术语&qu ...

  9. 广州天象网络技术有限公司未来的设计趋势二

    06.服务于残障人士的建筑会不断涌现 给健全的人设计房子并不是什么新鲜事,但残疾人和老人同样需要舒适.便捷的生活空间.未来的五年,会有更多的设计师关注这个领域. 07.智能的会变得更智能 如果恒温器都 ...

  10. 分享29个超赞的响应式Web设计

    原文自:http://www.csdn.net/article/2013-01-16/2813678-responsive-design-websites 最近几年,响应式Web设计不断印入人们眼帘, ...

最新文章

  1. android获取时区时间格式,考虑时区的日期/时间转换-Android
  2. 如何防范SpringBoot 相关漏洞?
  3. C++的速度比Java快2.1%:来自计算100万以内质数的实验数据对比
  4. Mac OS 错误代码 -8072的可行解决方法
  5. 国际计算机思维比赛,少儿编程领域中,你所不知道的国际计算思维大赛
  6. JSP自定义标签_用简单标签控制标签体执行10次
  7. 【剑指offer】【leetcode精选题集】【Java】剑指offer题解合集 更新中
  8. 宏定义中有浮点数_GEO是什么?还可以定义新的数据类型吗?
  9. UI设计素材|卡券界面设计
  10. 全球硬科技开发者大会(成都)开幕 蓝光发展等超300名开发者「乘风」数字升级...
  11. 拓端tecdat|二手闲置物品交易数据快照
  12. arcgis 视频教程 ArcGIS Pro 从0到1
  13. cat3 utp是不是网线_科普向:关于网线必须了解的基本知识!
  14. 信鸽 ios tag推送 php,信鸽推送(iOS)踩过的坑
  15. 汉诺塔_-Chaz-_新浪博客
  16. 【ArcGIS】安装ArcGISDesktop10.6报错A service pack is required on this oprating system.
  17. 【19/04/18 膜赛】土豪聪要请客(stol)
  18. Cisco:CCNA专业英文词汇(1)
  19. 用纯css实现一个图片拼接九宫格
  20. [每日一氵] C语言函数不要返回数组地址

热门文章

  1. Torch7下搭建卷积神经网络框架
  2. c语言监控程序,OpenCV实现简单摄像头视频监控程序
  3. 网络通信基础(网络通信基本概念+TCP/IP 模型)
  4. 卫星地图数据在公路管理规划的应用
  5. Qt6 QML Book/网络设置/本地文件
  6. 预约挂号医院管理项目----service_OSS模块—对象存储
  7. mysql容器 kubernetes_Kubernetes创建mysql容器 互联网技术圈 互联网技术圈
  8. 《老路用得上的商学课》41-50学习笔记
  9. 全球晶圆代工产业将面临10年来首次负成长
  10. 三分钟学习Java泛型中T、E、K、V、?的含义