2018年 Dribbble上流行的10个UI设计趋势

不管你是否喜欢,越来越多的设计师及团队在dribbble上分享他们的想法和实践。有些展示了他们的实时项目,还有一些则分享了可能影响未来设计的概念方法。无论如何, […]

2018年10月1日

不管你是否喜欢,越来越多的设计师及团队在dribbble上分享他们的想法和实践。有些展示了他们的实时项目,还有一些则分享了可能影响未来设计的概念方法。无论如何,像所有设计社区一样,Dribbble反映了该领域中的流行趋势。那么,让我们来看看这个夏天一些热门的UI设计趋势。当然,有很多例子。

 

1. 网页上漂亮的插图

在网页设计领域,定制的数字插图被用作主题图像,这是今年最大的趋势之一。无论你何时打开页面,你都会看到网站或登陆页面上有一个醒目的、引人注目的插图。在大多数情况下,它被放置在屏幕的左半部分,而右边的部分则显示的是文本。还有种情况是,图像可能会对角分割页面。一种更流行的方式是将数字艺术作品作为博客文章的标题图片,在这篇文章中,您可以在页面的顶部找到它。

原始图片是为Web布局添加独特闪光点的好方法。 更重要的是,用户对图片的感知速度比文字更快,因此插图提高了吸引用户注意所提供产品和服务的资源或优势的机会。

InVision的教育设计基因项目插图说明:本文介绍了Google在设计方面的研究。

Mike Creative Mints的登陆页面为孩子们展示了一个移动应用程序,它的插图中有醒目的粗体字体和可爱的卡通形象用来传达视觉信息。

Dmitri Kharchenko为社交服务提供的主页概念应用了大型主题插图来传达情绪,并立即提供有关服务性质的信息。

在这个网页设计中,设计师Ksenia Shokorova将自定义主题插图用作全屏背景图像。

 

2.为移动端定制插图

在移动界面中,使用定制插图的趋势也在稳步增长。在各种风格中,插图支持以讲故事的方式作为导航和登录的一部分。

Nimasha Perera的概念中,插图支持用户从系统获得通知

Icons8中有趣的插图使得app的入门教程变得生动形象。

 

3. 分屏

分屏幕经常出现在今年的Dribbble镜头中。 由于不同的原因,屏幕或页面可能会被拆分,例如:

  • 设置引人注目的色彩对比。
  • 分离不同的内容。
  • 分离不同的交互区域。
  • 展示选项的二元性。
  • 使内容更具响应性。
UI8的网页设计概念应用了分屏,以便直观地呈现选项的二元性。

Giga Tamarashvili的网页设计理念,在极简主义界面和有限的调色板中使用了分割背景作为现代风格对比的基础。在分割的背景上覆盖的视频和文本,使构图变得统一。

 

4. 引人注目的字体和排版

精心设计和有吸引力的字体和排版依然没有过时。文本因此不再单调,使其有意义且美观。精心选择的字体能传达情感,优秀的排版能建立起强大的视觉层次。Dribbble告诉我们,设计师们并没有失去对字体的热情。

Zhenya Rynzhuk的电影中心主页的设计主要特点是大胆醒目的字体。 它使页面呈现出类似海报的外观,恰到好处的留白也使标题增强了可读性。

Zhenya Rynzhuk的另一个基于排版的概念:没有图像,只有文本,在字体和流畅的动画间构建出一种高级感。

 

5. 流行的紫色调

关于颜色选择的趋势,紫色调似乎占据了很大的份额。 在色彩心理学中,它被认为与奢侈品(皇室和财富),激情和神秘相关的; 它被描述为具有蓝色稳定性以及红色能量感的颜色。 我不敢说这就是为什么现在这么多设计师转向这种颜色的原因,或者仅仅因为它很时尚。 无论如何,今年它在所有色调和渐变中都处于领先地位。 然而,值得一提的是,今年年初飙升的趋势在夏季有所放缓,这为其他颜色选择提供了更多空间。

Zahidul的网页概念以突出的主题插图为基础的同时以紫色调为主色调。

Walid Beno的网页设计概念将时尚的紫色与大英雄插画相结合

Ted Kulakevich的登录页概念也将主题插图应用于屏幕的左半部分,并使用紫色调。 这里的插图允许设计师将屏幕分成两个内容区域使得对比更鲜明。

 

6.动效

今年,动画和插图方面的创意实验变得越来越大胆。 为了使页面或屏幕脱颖而出,设计师将复杂的动画添加到图标、logo和复杂的插图中。 尽管UI动画的必要性和实用性仍然是激烈争论的主题,但Dribbble每天都会更新新的引人注目的动效设计。

Icons8用于分享内容到社交网络的动画图标

Cuberto的光控制器实验UI动画。 (希望开发人员保住头发)

由Gleb Kuznetsov开发的带有复杂图形内容的界面动画探索,以讲故事的方式呈现,且风格独特。

 

7. 用图像填充文本

今年的另一个UI趋势是用背景图像填充文本。 为了使其达到理想效果,它通常应用于最突出的语句 ,例如: 产品或公司的名称,标题,标语,口号等。 这个技巧使构图显得完整统一,并使文本视觉上看上去更加丰富。

Green Chameleon的网页概念具有上面提到的分屏和图像填充标题。 这种极简主义风格的构图看起来既时尚又完整。

Green Chameleon的另一个网络互动概念也结合了两种流行趋势:全屏背景照片和图像填充关键词

 

8.全屏背景图像

另一个常见的趋势是应用全屏图像,将主题和气氛设置为背景。在大多数情况下,背景是高质量的照片,但它们也可以是专门为项目制作的2D或3D作品。同样,这种技术是迈向海报式网页的一步。

UI8的动画用户界面概念使用全屏主题图像作为背景,具有透明的导航面板

由Dennis Shnelleberg设计的一个活动登陆页面的概念将主题设置为一个背景图像,使页面看起来像一个大事件海报。

Nathan Riley的Web交互概念使用全屏背景图片进行优雅的主页视觉转换。

Kate Laguta为设计师设计的一个在线杂志的动画概念结合了数字和印刷设计的技术,同时也使用了主页的全屏图像。

 

9. 拟物化元素

现在早期的拟物化风格已经回归了,正如Dribbble所判断的那样,它似乎从灰烬中升起。 越来越多的镜头将3D图形添加到界面中,主要是用于网络的界面。 当然,这种方法需要特定的技能,艺术眼光和品味才能很好的实现。 另外,它必定会花费更多时间,但它绝对具有吸引力。

Mike Creative Mints的网页设计概念,为一个研究实验室提供了令人印象深刻的3D插图。

RomanKlčo的实验预加载器概念具有等离子运动的明亮效果。

这是一个有创意的、有趣的概念,应用在Outcrowd登录页面上的3D动画元素,显然会吸引用户的注意力。

Tubik的可爱3D插图的入职教程的移动UI概念。

由Adi Setyo Chrisworo设计的昼夜模式的切换概念。

 

10.界面切换的实验

Dribbble一直是创造性实验的肥沃土壤,现在我们可以经常在屏幕或页面之间的过渡中发现这些有趣的创意。

这些明快的UI概念Ming Pham结合了多种视觉效果和3D特效,应用于屏幕之间的过渡。

Cosmin Capitanu的人体尺寸UI转换实验。

UI8对网络交互的实验以一种很酷的方式构建了坚实的视觉层次结构和生动的微交互。

显然,并不是所有的流行趋势都将被广泛使用。但是所有的创造性实验都有其价值:他们突破极限,让设计师们尝试和讨论新的技巧和方法。为了进步,我们必须敢于探索和分析。谁知道哪一种趋势会给未来最受欢迎的产品带来最好的外观。

在这组设计趋势中,有你喜欢的吗?或者,你觉某些趋势被不公平地忽略了,这些我们都可以在评论区讨论。


文章来源:https://icons8.com/articles/popular-ui-design-trends-dribbble/

作者:Marina Yalanska                     翻译:崔辰皓                    责编:姜晓宇

发表评论

电子邮件地址不会被公开。 必填项已用*标注