PS设计教程网欢迎你!

浅谈2017年UI设计的10大趋势分享(2)

文章来源于 站酷,感谢作者 Healan 给我们带来经精彩的文章!
设计教程/前端设计/前端设计2016-11-23
06. Parallax 视差 Epicurrence的网站选择非常明显的视差,创造一个快速移动和沉浸式的体验,反映其推广的事件 将视差与突破网格和滚动翻页结合起来时非常好的做法,这样在传统的排版中很少见。 简而言之,视差是一

06. Parallax 视差

浅谈2017年UI设计的10大趋势分享

Epicurrence的网站选择非常明显的视差,创造一个快速移动和沉浸式的体验,反映其推广的事件

将视差与突破网格和滚动翻页结合起来时非常好的做法,这样在传统的排版中很少见。 简而言之,视差是一种背景移动速度比前景更慢的效果,当用户滚动时给出深度和动态感。 这不是一个新的方法,但正在被很多品牌尝试。

浅谈2017年UI设计的10大趋势分享

Bang&Olufsen,高档音响产品制造商,选择更微妙、更精致的视差,体现他们的时尚和高端的品牌身份

视差必须谨慎使用,因为它可以很容易变得让客户难以忍受。 但是,当谨慎使用时,它提供了一种很棒的动态感受,以帮助向上滚动切换内容并吸引住用户。 将它与图像、文字和不太严谨的布局结合使用,可以创建流畅的分层内容。

07. More cards! 卡片

浅谈2017年UI设计的10大趋势分享

上面的例子显示了如何实现卡以在较大屏幕UI上工作,从可滚动菜单卡到分层定价模型的选项。

卡片的模式不是一个新突破性的趋势,但对于UI设计,它们是一个功能性很强的设计方式。在移动UI设计方面的成功以及被融入到 Google’s Material Design 中 ,卡片一直在网页设计中获得突出地位。

据Google称,2015年,移动设备超越台式机成为浏览网页最流行的平台,因此越来越多的设计师正在模糊移动和桌面UI之间的界限,创造更加无缝的用户体验。

卡片形式是一种广泛适用的UI设计方法,可以在各种平台上适用,从较小屏幕的设备一直到较大的。他们是一个很棒的方式在屏幕上同时组织和显示大量的数据,允许用户快速筛选可用的信息并选择查看。 Facebook,Twitter,Netflix和Pinterest都是强大的数字平台,它们都选择了使用卡片的形式。

浅谈2017年UI设计的10大趋势分享

卡片提供了一个有效的解决方案,允许用户快速浏览可用的内容并迅速找到他们需要的信息

卡片是组织短片短信息的好方法,它们的灵活性在组织和消费内容的较小屏幕上是无价的。 卡片是一种可以显示文字、图像、视频和其间所有内容的解决方案,可以从最小的屏幕设备扩展到最大屏幕的设备。 卡片提供无尽的适用性,允许设计师翻转、旋转、堆叠和过滤他们的所有方式的UX功能 - 更多的功能将通过微交互来解释。

08. Micro-interactions 微互动

浅谈2017年UI设计的10大趋势分享

上图是如何实现微交互以显示菜单UI中的状态变化的一个很好的例子

通常小屏幕上的动画形式的微交互在UI和UX设计中起着至关重要的作用,尤其是在移动端和小屏幕设备上。

从用户体验的角度来看,微交互不仅是小的、有趣的屏幕上的动画或转换,同时也是对于用户及其动作的视觉反馈的形式。微交互让用户知道与UI交互时正在发生什么,已经发生了什么,以及将要发生什么。

使用Facebook的著名的“like”按钮作为例子:当用户点击竖起的图标表示喜欢某些东西,这个按钮会变大,并变成蓝色,然后返回到其原始大小,以上这些动作都在一个流畅的动画中完成,通知用户,他们的“like”已经完成。

聪明的设计师通过将功能以有趣的方式实现来让用户高兴。从有趣的加载动画,到顺滑的图标转换,有效的微互动能够同时起到吸引和通知用户的作用。

浅谈2017年UI设计的10大趋势分享

该示例清楚地向用户指示他们的动作已经实现,因为它们在可用状态之间切换

微互动提供有用的人性化反馈,以一种周到和有趣的方式让用户知道做什么和正在发生什么。 他们可以将简单平凡的过程变得有趣,以及提供关键的反馈。

09. Typography 字体排版

浅谈2017年UI设计的10大趋势分享

MailChimp使用混合的字体、颜色和不透明度创建一个俏皮的圣诞节启发的文字排版介绍他们的2016年假日提示营销指南

随着越来越多的网络字体服务商(谷歌字体,Typekit)提供免费或便宜好用的字体系列,期望看到更多的品牌使用大胆和美丽的字体代替系统字体。

正如我们在2016年看到的,以及可预见的未来,网页排版将从以传统的图形和编辑为中心的设计转向试验更具创意的字体排版设计。

浅谈2017年UI设计的10大趋势分享

雪铁龙在他们的雪铁龙起源互动页面中也选择了创意的分层字体和图像组合。

排版是品牌和设计师在创造充满个性的内容时进行实验的另一种创造性媒介。 正如本文所讨论的,许多这些趋势是一起工作的,创意排版绝对是一个很好的例子。 将文字排版与图像、视频、插图、颜色和非常规布局结合起来创造独特的体验。

10. Experimental Navs 导航栏实验

浅谈2017年UI设计的10大趋势分享

Adult Swim 的网页导航达到了一个全新的水平

导航和菜单一直是设计师热烈争论的话题。随着移动和桌面UI之间的界限逐渐模糊,以及越来越多地使用汉堡包菜单(也叫做左滑菜单 )在更大屏幕的UI上,设计菜单和导航有了更多的创造性空间。

以汉堡菜单为例,他们提供的是在设计和构建响应式网站时的一致性,您可以(本质上)设计一个单一的导航结构在所有设备上扩展和工作。这里更有趣的是,使用汉堡菜单提供的创意自由的数量。

菜单隐藏在画布之外,设计师可以给自己整个视口窗口来创建一个创造性的解决方案。天空的创造性可能性的极限,但一如既往,导航服务在用户体验中的扮演着一个重要角色,所以请确保它永远不会形成的功能 ---- 用户需要能够快速找到您的内容!

并不是所有的设计师都同意在桌面应用程序(或在所有)使用汉堡菜单。但这个话题是值得讨论的,我们也相信2017年及以后会有更多的人尝试设计更好的导航和菜单。

浅谈2017年UI设计的10大趋势分享

Adult Swim 网站的特点是移动缩略图的三维网格,其中有排版和颜色变化的悬停状态

导航不再局限于排列在窗口顶部的一排单行链接,而且肯定有更多的创意解决方案可以帮助用户找到他们。虽然创意和美学很重要,但设计师应该始终优先考虑可用性,确保用户能够快速轻松地找到所需的内容,而不是被过度的设计或花哨的解决方案混淆。

结论

与所有流行趋势的本质一样,UI的趋势也是不断地来来去去,但是也会有一些被保持下来变成了设计的基本准则。我在这里讨论的所有趋势或预测不是都可以与您正在开发的项目相关;作为一个设计师,它是由你自己的判断来决定什么是正确的,什么不是,而且有些东西将被客户和项目改变。

然而,在这个创意产业中变化以闪电的速度发生,所以追赶正在发生的改变是重要的。 UI设计总是通过实现一些伟大的UX,同时伟大的UX也将伴随着新技术的出现和发展而改变。这是一个不断变化的领域,需要不断的学习和创新。

我希望从这篇文章中你了解了一些关于2016年期间的设计是如何进展,更重要的是,这些变化将如何影响2017年及以后的设计。

版权所有PS设计教程网公安备案:苏公网安备 32058302001023号工信部备案:沪ICP备09005587号
aaa