Coolsite360响应式网站建设

设计趋势:波浪和“柔和”线条

2018-06-22  本文已影响0人  c9ad3e5022b1

网站项目的设计趋势比较柔和 - 浪潮和柔和线条。如果背景被单一的“扁平”色彩所支配,我们正在看到向曲线和波浪的转变。

元素更轻,更柔软,并唤起设计的不同整体感觉。特别好的是波浪和柔和的线条可​​以用很多不同的方式使每个设计感觉完全不同。(这是一种几乎可以潜入你身边的趋势,因为它出现在很多形式中。)

以下是网站设计中的波浪和“软”线趋势。

设计口音

当矩形和圆圈不适合项目的情绪时,斑点和波浪可能是解决方案。对于需要注意的较大元素的特定元素的微小斑点,较软的线条会让用户在设计中跳跃。

Papillons de Nuit节日用波浪来突出事件的元素,做得非常出色。基于波浪的元素在浅色背景上分开,每个元素都包含一些特殊的元素:顶部角落有一些动画,“zapping”元素包含多个波浪,底部角落将您引导至社交媒体链接。在滚动中,更多的波浪和柔和的divots有助于在活动中连接照片和表演者。

虽然这种设计对于电子商务网站或金融机构来说可能太多,但它对于活动页面来说是一个很好的解决方案。外观很有趣,引人入胜和轻盈(所有元素都有助于推动事件流量。)

将眼睛画到CTA

最小风格的设计方案和平面插图仍然是一个流行的设计元素。添加wave可以帮助您吸引设计的特定部分,包括行动号召。

虽然您可以使用箭头或三角形元素完成此操作,但wave会提供一个微妙的指令。用户不觉得他们被迫进入可点击的元素或消息。

Recruitz使用wave来创建行动号召和屏幕底部的推荐信息之间的分离。柔软的分隔线可以帮助眼睛轻松地在元素之间来回切换,并在元素之间创造出深度,因此设计不会感觉清楚。(明亮的配色方案也有帮助。)

波插图

尽管波浪可以成为背景的有影响的独立元素,但它们也可以合并到一个插图中。这种柔和的感觉与许多最近流行的强硬线条和最小图标有所不同,但结果是用户可以轻松进入的简单视觉效果。

波浪也可以帮助创造柔和的白色空间。Retrace Health使用带有波浪的背景来缓慢移动屏幕。通过对元素之间的空白量进行微妙的改变,波浪的起伏会增加和减少图像与标题之间的空间,从而帮助推动眼睛向上移动。

平衡硬直线

浪潮可以做的不仅仅是独立自主,波浪也可以作为背景元素来帮助平衡视觉计划中的强硬路线或其他元素。如果审美过于苛刻或者需要一点点平衡来感觉恰到好处,可以考虑一种波浪式的元素修复,

Ghafari的设计包含一个细微的波浪,你可能乍看之下甚至不会真正看到。眼睛更吸引人的照片有趣的形状,明亮的彩色文字,甚至在顶角的黄金按钮。但是灰色的浪潮是将它们拉在一起的一块。波浪平衡更重,更严厉的形状,以便设计不会感到不平衡或失控。这很简单,几乎完全落入背景。

这项技术很重要。并非所有的设计元素都可以告诉用户。有时候设计元素更加隐蔽,并且起到支持作用,以帮助项目保持平衡并确立正确的感觉。

建立背景分离

波浪和柔和的线条似乎是一个可以让Material Based分层设计看起来不那么公式化的元素。背景波可以创建相同类型的分隔,而不是严格的矩形和圆形以适应图层或基于卡片的元素。

和其他例子一样,结果会稍微轻一些,音色要求也较低。

波浪也可以适用于另一种趋势 - 渐变。Algolia在这两种风格中都做了很好的分层元素。该设计虽然使用了多种效果,但感觉简单易读。

创建参与动画

当你想到“波浪”时,可能会想到海洋。一个标准的波形动画被保存到最后才能保持这种逻辑联系,当它涉及到这种设计趋势时,就不会打动你的思想。

但它是波浪的完美用户。动画波可以模仿海洋的节奏和自然流动,营造舒缓和谐的视觉效果。

Futuramo用时间相对性网站来做到这一点。背景波互相无缝地流动。他们很简单,并以自然的方式移动。不同的是,这些方式实际上与屏幕上的内容无关。当用户浏览其他内容时,他们只需设置场景以获得平静的体验。

这个例子展示了如何用一个简单的视觉主题来捕捉观众,这个主题贯穿了内容。由于通过内容和设计讲述的故事时间方面,它也很好地连接起来。

结论

曲率更大的线条为项目创造了不同的流程和气氛。简单地将曲线添加到直线可以改变整个项目的感觉,使其不那么沉重并且更具吸引力。

意派Coolsite360交互式线网页编辑系统

“创意不该受技术束缚,交互可以变得简单有趣”

上一篇下一篇

猜你喜欢

热点阅读