跟随这10个趋势,你可以在2018年设计出出众的网页

年底最后一个月是总结头一年,思考和展望下一年的月份。经过2017年一整年的沉淀和总结,在最近的这些设计作品,重设计甚至小幅度的设计改版中,窥见一些即将在2018年流行开来的设计趋势。在网页设计上,这些设计趋势将会深刻地影响着设计师们接下来的设计方向。

1、不对称网格

完美对称的时代已经过去了。虽然分屏设计在2017年流行得一塌糊涂,但是这一趋势在逐步的沉淀和演进之下,开始有了新的变化。

均匀的对称式布局并没有非对称式的分屏设计有表现力,这促使不对称网格开始逐渐流行开来。

为了使得不对称的设计更为有效,设计师需要一些独特的元素让不对称的网格下,整体设计是足够平衡的。在整体布局下,留白,文本和图片等视觉元素需要进行合理的配比,在吸引用户的同时,不至于失衡。

而网格也是这种设计中必不可少的组成部分。虽然整体上不对称,但是网格的约束下,能让各个元素各司其职,不至于随意摆放以致失控。

2、更多明亮的色彩

优设译文:http://www.uisdc.com/web-design-trends-2018

原文作者:CARRIE COUSINS

原文地址:https://designshack.net

2018年快来啦

即将到来的一年,web设计趋势会是怎样的呢?

这两年霓虹色着实是狠狠地流行了一把,并且就目前来看,它依然非常坚挺地站在流行的最前沿。对于扁平化设计和Material Design,明亮的色彩同样是非常重要的组成部分。

撇开扁平化设计,大胆明亮的色彩也始终是引人瞩目的,它们会吸引人进入设计,关注设计。明亮的色彩如果用好了,能够成就品牌和产品,为网站和APP创造独特的氛围和气质,营造出令人着迷的情绪和体验。

3、底部悬浮固定元素

曾经流行于APP和移动端网页底部的小广告开始越来越多地出现于桌面端的网站了。而有意思的地方在于,出现得越来越多的不仅仅是广告,还有对话框,弹出框,通知,甚至导航栏。

用户阅读的习惯使得底部的这个位置并不会第一时刻进入用户视野,但是它是主要的视野区域,并且不具备明显的视觉侵略性,更容易被接受。被悬浮固定在屏幕底部的内容比起弹出的大面积广告以及顶部广告要来的更加自然,不会遮盖到主要内容,更为有效。

4、语音交互和语义搜索

可以想见的是,网页设计的未来不会是100%纯视觉的,其中或多或少会设计到音频。

从设计可以被「听到」的界面,到可以理解自然语义的搜索工具,语音的输入将会成为网页交互的一个组成部分。就目前来看,技术上自然语言和语义并不那么容易被计算机争取而完整地理解,相应的技术也还没有那么受欢迎,但是语音交互和语义搜索只会越来越流行,也许你需要注意一下这些技术的走向,以便你在接下来的项目中使用到它们。

5、动态图形

虽然即将过去的2017年当中,锐利的多边形和多样的几何形状在网页中出现频率很高,但是我们可以观察到,结合动态效果的柔和的图形倒是越来越流行了。

边缘平滑的设计元素是多边形元素的自然进化。多边形大多以扁平、二维的形态出现,而随着动态效果越来越多地出现在网页设计当中,带有三维效果的动态图形自然而然就成为网页设计师的心头好。

和多边形相似,流畅的动态图形有着明显的装饰性,对于网页风格和体验的提升很明细那,而区别在于动态图形时髦值更高,没有尖锐的棱角,也更加具有亲和力与动感。

6、微妙的动画

小巧微妙的动态效果不仅能够取悦用户,有的时候甚至会给他们带来惊喜。动效如今已经是网页和UI设计中必备的组成部分,它们同样可以为用户提供信息,积极地引导用户交互。

微妙的动效本身并不是为了隐藏加载的过程和数据处理的过程,而是为了强调运动本身。

无论是悬停触发的动态图片,还是看起来很复杂的插画动效,它们都是促进用户交互的重要手段。为了充分运用微妙的动效,设计师在使用的时候要遵循一些最基本的规则:坚持使用一种动效技巧,尽可能保持逼真,模仿现实世界的物理定律,不要强行为动效配音,尽量确保动效可靠,不要过慢,让用户能够预期到它的完成。

7、SVG图片

可缩放的矢量图形正越来越多地运用在网页设计当中。SVG格式是一种轻量级的矢量图片格式,这种格式的图片大小通常不会太大,而且无论是大屏幕还是小屏幕上都能像素完美地呈现出来。

无论是3D图片、动态图片还是标志LOGO,SVG都能够很好地展现,它是图片格式的未来。

8、兼容桌面端和移动端分屏展示

分屏式设计同样是越来越受欢迎的设计技巧。分屏式设计能够让设计师更好地兼顾到桌面端和移动端的体验,因为内容的展示更加自由,可以拆分合并堆叠展示,让内容的呈现更加一致,体验也更加可控。

虽然许多早期的分屏展示是针对不同平台进行定制的,但是如今的分屏设计已经可以相对完美地同响应式设计结合起来。

9、更多滚动动效

视差滚动已经非常流行了,以至于有些设计师开始有意识地规避这种「流行」。但是这并不意味着你需要绕靠滚动动效。

通过滚动动效来驱动用户参与交互是颇为不错的方法。适当的混合一些视差特效,常常能够获得奇效。比如上面的Doggo for Hire 这个页面就巧妙地使用视差滚动特效。

10、非极简风下的留白

许多优秀的设计都借助留白来达到效果的。但是许多时候会因为设计需求而妥协,无法使用简约的设计风格。但是留白依然很好用,通过增加更多的色彩和设计元素,保持留白比例,增加整个设计的饱满感。这种情况下,留白并不少,被留白所包围的元素同样会显得突出而不会拥挤。

Design Calendar 这个网站在这方面就做的比较突出。网站采用了彩色的背景,虽然页面中内容元素不少,但是留白营造出了足够的呼吸感。

总结一下

随着新需求的诞生,每年都会有新的趋势和新的设计技巧涌现,想要让自己的设计不过时,设计师需要密切的关注趋势的改变。在即将到来的2018年,你可能要有意识地改变你的设计了。

原文发布于微信公众号 - 设计谜(UXMystery)

原文发表时间:2017-12-24

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏钱塘大数据

【周末漫谈】说说数据可视化技术四大派系

数据可视化,是关于数据视觉表现形式的科学技术研究。其中,这种数据的视觉表现形式被定义为,一种以某种概要形式抽提出来的信息,包括相应信息单位的各种属性和变量。这个...

463140
来自专栏大数据文摘

制作信息图的“核心信条”

19270
来自专栏量子位

深度学习get新技能:能分辨48种野生动物,准确率92%

李杉 编译自 NewScientist 量子位 报道 | 公众号 QbitAI 春天来了,万物复苏。在坦桑尼亚西北部的塞伦盖蒂大草原上,计算机们正在履行它们的职...

45370
来自专栏互联网杂技

如何考评一名前端工程师?

本文标题的命名方式参考了芋头所写的《如何面试一名前端开发工程师?》。「考评」是「面试」的子集,是一个很重要的环节,如果谁打算做「前端工程师面试合集」的话,记得把...

30660
来自专栏程序员叨叨叨

【转】从零开始手敲次世代游戏引擎(序)

大家好。我“正式”从事软件工程师这个职业已经快15年了。至于编程的历史则更长,有20余年了。记忆当中第一次编程的机器里只有ROM BASIC,用“*”打了个金字...

13540
来自专栏前端迷

程序员怎么把英语学到六级水平

首先要记住学语言不能速成,要靠长期的积累。你记性好,一天记住一百个单词,但是你不一定会用,而且时间一久肯定会忘。所以,要学好英语,还是要慢慢来,日积月累,逐渐进...

33920
来自专栏量子位

谷歌这个AI“吵架预防器”,可带你提前远离杠精们

回想一下,你在微博上针对问题提出看法,几小时后发现一队人马@你排队挑衅,他们奉行“只对人不对事”和“以抬杠为己任”的基本原则,试图和你吵架。

9930
来自专栏钱塘大数据

【揭秘】复联中的灭霸原来是这么设计出来的!

票房屡创新高,观众好评如潮,《复联3》可谓是当下最热门的电影。作为漫威系列电影第一段的终结,迪士尼和漫威公司在这部电影上豪赌一把,76个漫威角色齐聚一堂。然而汇...

24750
来自专栏镁客网

逼近临界点?“史上最大屏手机”小米Max下周揭晓

19940
来自专栏程序人生 阅读快乐

CSS世界(异步图书)

本书从前端开发人员的需求出发,以“流”为线索,从结构、内容到美化装饰等方面,全面且深入地讲解前端开发人员必须了解和掌握的大量的CSS知识点。同时,作者结合多年的...

12320

扫码关注云+社区

领取腾讯云代金券