首页 > 网页教程 > 设计分享 > 13个最新的网页设计趋势:全屏背景图片、自定义插画等

13个最新的网页设计趋势:全屏背景图片、自定义插画等

时间:2018-07-18    作者:Tubik Studio   来源:优设网

2018 年时间过半,通过过去的 6 个月的观察,其实我们已经可以对于 2018 年的整个 UI 领域的设计趋势有了一个更为清晰的判断,也是推出这篇文章比较合理的时机。今天,我们一起来回顾一下,过去的半年当中,UI设计领域当中的一些流行趋势。

1. 全屏背景图片

如今的全屏背景确实是最广泛的设计趋势之一,无论是使用照片还是经过特别渲染的可视化效果,均是在此范围以内。这种方法无论是在视觉上,还是在情绪上都非常的吸引人。此外,它能够让所有的布局元素具有强烈的整体感。

这是 Big City Guide 的着陆页设计,背景采用的是柏林当地的著名建筑,使得整体显得优雅,信息量也足够丰富。

而这个室内设计工作室的首页,也同样采用了全屏的设计,大量的原创建模而构建出来的彩色场景所营造的背景,很好的凸显了工作室本身的性质和特点。

2. 多个可交互图层

UI设计师一直在探索各种实验性的设计,而如今就有越来越多的设计师开始在网页中加入多个叠加的可交互的图层,让用户可以同网页进行复杂的交互。相比之下,单纯的滚动浏览就显得很原始了。

这个拯救海洋为主题的网站就是这样做的。当轮播图变化的时候,其他的两个交互层也会随之而变化。另外,这种设计当中有一个分支,就是图片填充式排版,图片甚至视频被作为纹理和素材填充到文本当中,有的是静态的,有的会随着交互而移动。

3. 自定义插画

自定义插画一直广泛存在于网页和 UI设计当中,不过如今的网页和 UI 中的自定义插画会更加成熟,在可用性、直观性、隐喻和信息传达上,有着更加突出的特点。图片和插画本身会提升整个设计的可访问性,插画和文本的互相支撑,让整个设计更加统一。

自定义插画让网站的价值感得到了增强,不仅在美学上赋予网站和内容的一致感,而且在内容上显得更加突出。

add_color_illustration_tubik.jpg

就像这副插画,它是为文章《UI设计当中的3C要素:色彩,对比和内容》所设计的,这篇文章中的三个关键词分辨是色彩、对比度和内容,而这个是选取颜色作为核心的语义元素,并且非常贴合主题地选取了绘画作为插画内容的主体。在细节配色上,强烈的色彩对比又贴合了对比度这一关键词。

4. 故事和角色设计

越来越多的网站和 APP 开始试图将专门的角色/吉祥物融入到整个设计当中来,借助视觉化的插画、视频、文本甚至图标和细节来展示故事,营造氛围,传递信息,表达情绪,采用更加贴合当前语境的方式,将内容形象生动地传达给用户。这是故事和角色的优势所在。拟人化的形象能够更容易让用户产生联想,和现实世界勾连起来,承载情绪。在设计上,角色的设计也能够在视觉上,让页面更加活泼。

这个案例是 Tubik Studio 的插画师为 Florence APP 所设计的一套自定义插画,在这个 APP 当中,英国的护理从业者能够找到薪资更高的,更合理的业务。插画让角色形象拥有了故事般的呈现,也阐明了应用的功能和优点,搭配说明,能够更好地让用户明白功能和服务的内在价值。

相关推荐
前瞻:2012年Web设计和开发的15个最新趋势
2013年web开发者最需要了解的开发趋势和技能
2013年最受欢迎的20大网页设计趋势分享
最新的七个WEB设计趋势及其生存技巧预测
展望2015年网页设计趋势
网页设计师必看:2015全球网站设计趋势推荐
最值得关注的21个网页设计趋势:单色网站、视频背景等
四大设计趋势教你如何你玩转2015年网页设计
从日本设计机构看日本的网页设计文化与趋势
2015上半年最具代表性的网站设计趋势TOP 10
不一样的角度!老外设计师眼中的国内设计趋势
盘点2015下半年网页设计的9大趋势
读懂十大未来设计趋势,别让你的设计白费力气
明年最值得关注的16个网页设计趋势
年度总结:最新视觉设计六大趋势分享
底部导航设计、Box元素、竖线元素3种最新网页设计趋势
网页设计新趋势:非对称布局、感知化设计、自定义字体等
这5种网页设计趋势已经过时,你还在用吗?
海报式首页、渐变式文本等3种网页设计趋势分享
网页设计趋势:斑点和气泡元素、“悬浮的”矩形元素等
20个精致漂亮的视频播放器界面设计欣赏及点评
视觉设计:页面构建的审图与细节
15个超棒的无线移动终端UI设计案例赏析
响应式网页设计正成为移动互联网大势所趋
浅谈界面设计中的结构设计
分享:5招助你打造更加简洁的用户界面
浅谈界面UI设计中的包容性设计
国外精彩网页界面设计案例赏析
Photoshop教程:提高IOS设计效率的30个要诀分享
网站专题页面的视觉设计及结构布局要点分享
另眼观看用户界面扁平化设计的不足之外
产品视觉设计与用户心理的有趣现象
10个漂亮实用并附带源码的Web设计教程分享
优秀移动APP应用图标设计指南
在视觉设计中对像素的深度解析
什么是扁平设计?如何创建扁平化设计风格?

精彩推荐

热门教程