美文网首页交互设计与用户体验产品 运营 设计@IT·互联网
【翻译】2017热门界面设计趋势回顾(上)

【翻译】2017热门界面设计趋势回顾(上)

作者: 乖大敏 | 来源:发表于2018-01-03 13:32 被阅读94次

原文:《Review of Popular Interface Design Trends in 2017

以下是uxplanet整理出来的2017设计趋势,供参考。此篇为上半部分。


功能极简化

很大一部分的手机应用程序和网站沿袭和传承了极简主义的法则,简约的界面使得那些重要的视觉元素能被很清晰地传达给用户,表达明确的含义。

极简功能主要有以下几个特点:

简单

清晰

传递视觉层级

关注元素构成和相互之间的比例关系

每个元素都有自己的功能性

大量留白

关注核心内容的细节

把文字排印作为重要的设计元素使用

减少无意义的装饰元素

当然,这个列表还可以继续写下去,但无外乎都是一个目的——让界面设计变得更加友好。如果把这些特点合理地规划实践,可以帮助用户聚焦于界面的核心内容、让用户体验的过程更有目的性。再者,简洁的界面通常看上去整洁而精致,给人以审美上的满足感,这也是用户体验理论中满足感的来源之一。

WineYard App

野兽派风格

野兽派的数字设计趋势在去年就已急速上升,今年持续升温。“野兽派”一词用来形容那些旨在突破传统标准、使用创新技术的设计风格,用这种方式创立的网站有悖于一般审美的“标准”站点(工整、协调,有着复杂的布局层次,把精力放在视觉审美表现上),它们显得颇为简单,外表看上去不加修饰,不会加载过多的视觉细节,甚至有的页面看上去就像一个简陋的HTML页面。考虑你的设计目的和用户,慎重地选择和使用它可以让你的数字产品看上去与众不同,这种“原始”意味的风格有可能会招一些用户的反感,但绝不会被忽视。

排字嵌图

加大加粗的字体一直都在网站和移动端布局里保有一席之地,今年,这种风格有了新的表现——使用页面中的视觉元素把标题文字切割或者刻印分离开。这种设计形式加强了元素之间的整体感和协调感,使文字和界面紧密地联系在一起。

Big City Guide

hero banner动画化

网站设计中,hero banner一般是引人注目的大型图片,通常担负起网站内容的视觉呈现的重责,有助于传达信息、表达情绪。再者,相比起页面里其他有吸引力的图像,动画化的hero banner在信息和情绪的传递上更有感染力。优秀的hero banner一般需要满足以下几个目的:

吸引用户的注意力

通过视觉方式传递信息

能适应大部分样式内容

根据主题建立情绪和气氛

有效地表达核心观念、介绍物件

Dance Academy Landing Page

主题定制版插画

根据主题配的矢量插画在现在的网站和移动端UI中占据越来越大的版面,让用户得以快速地获取和认知信息内容。在网站和移动端界面上一般使用mascotsicon插画等形式,以此来提升页面的视觉呈现,同时,也加强了可用性,导航也变得一目了然。再者,图片的使用增强了体验设计的可访问性,为文字识别困难的用户(如诵读困难者、尚无阅读能力的学龄前儿童等)打破认知的局限。

Financial Service Website

无边框布局

今年,网站界面也频繁地使用了大背景图或者纹理+无边框这一设计样式,这样的排版视觉上看上去更有呼吸感、空间感,不会被页面的边界而打扰,影响交互的进行。

Big City Guide

种类丰富的交互动画

跟上一年一样,界面交互动画继续发光发热。它不仅为交互增添了活力和动感,对于提高可用性也起了重要的作用。通过交互动画效果,操作过程中,交互元素能用更清晰的方式去回应用户,这样一来,信息就能更好地表达和传递出来。今年,按钮、tab切换、图标、预加载及滑动条等交互元素都有不错的动画表现。

Watering Tracker App

友好度高的品牌UI设计

品牌重做也是2017不得不提的一个设计趋势:大量的跨国或本土公司开始对自有的产品或者品牌进行重新设计,把logo的形式和细节改得简洁明了。这其中一个原因,是由于拥有更高可用性和指向性的品牌设计,能为它们在市场竞争中赢得更多消费者的注目。因此,品牌logo在重新设计时会更加考虑是否有亲和力、在数码设备和平台上信息传递是否有效。此外,logo动画使得图形元素变得生动、更有品牌识别度,也慢慢成为了一种趋势。

Whizzly Logo Animation

单色UI

为了把最多的功能精简为最小的设计表达,单色UI的解决方案逐渐进入了大家的视线。这类UI的样式通常看上去很时髦,配色协调,但又不抢眼。当然,设计师们如果想要设计出这样的样式风格,需要花很大功夫让设计看上去不显得单调,同时核心元素又必须一目了然。

Jewellery E-Commerce App

背景色趋暗

移动端应用及网站界面越来越多地使用暗色作为背景色来搭配,在那些着重视觉效果的数码应用上尤为明显。以传统的观念来说,暗色背景往往为优雅或者威严的对象服务,深色基调能让用户不容易被分散注意力,更快进入到不同的内容气氛中。现在,很多APP提供了深色模式,为很多喜欢这种调调的用户提供了设置选择,满足他们的需求。

参考图例:Cinema Appgif演示

内容色趋浅

由于深色背景主题的广泛流行,另一个趋势也愈渐明显:关键数据块或者内容使用浅色背景的方块或者留白凸显出来,使用柔和简洁的对比来解决可读性的问题。

Watering Tracker App

相关文章

网友评论

    本文标题:【翻译】2017热门界面设计趋势回顾(上)

    本文链接:https://www.haomeiwen.com/subject/gxmggxtx.html