新姿势!用自然灵活的波纹曲线来柔化你的设计

新姿势!用自然灵活的波纹曲线来柔化你的设计,第1张

新姿势!用自然灵活的波纹曲线来柔化你的设计

品牌营销会用这些常用招,7月主题活动立减500-1000元。

与无处不在的平行线相比,曲线往往能让整个设计更加柔和。在网页和UI中,适度加入波浪曲线之类的元素,可以让页面更加自然和温柔。波纹曲线的优势在于可以与各种不同的设计风格无缝拼接,具有融合不同元素、不同设计风格的特点。

波纹曲线作为一种基本的视觉元素,不仅在设计风格上具有独特的功能,在所有的UI设计中也具有一定的通用性。在扁平化设计盛行的今天,波纹曲线越来越多的出现在各种新的设计项目中。让我们在今天的文章中总结一下这个发展趋势。

提升功能

当矩形框和平行线无法传达设计师想要表达的感情时,柔和的曲线和暗点很可能更适合传达他们想要传达的东西。

PapillonsdeNuitfestival,活动标题URL,靠涟漪和曲线来关注。在网页中,由波纹和曲线组成的元素相互负责。左上方的ripple元素包含了动画效果,所以不能忽略里面安装的主题风格。中间由多个波纹组成的Zapping元素与马丁·索尔维格的矩形框照片构图相比较,构成了视觉行为的主体,而右下方流动的波纹安装了客户很可能感兴趣的社交网络连接。

对于电商和企业机构的网站来说,这种洒脱的涟漪元素很可能看起来过于随意,但对于恶性事件、主题活动、时尚潮流相关的网站来说,这种流动性曲线是非常好的视觉解决方案,有趣又刺激。

引人注目的CTA元素

扁平化设计和极简风格是目前网页和APP设计的流行,与波纹曲线有着先天的搭配。在您的设计中,许多领域都可以应用到波纹曲线,包括将它与行动号召相结合。

虽然你用箭头符号或者其他方法来正确引导客户是可行的,但是涟漪曲线帮助你以一种更润物细无声的方式赢得这件事,客户不会轻易觉得自己是被迫关注这种商品的。

网站Recruitz将第一个屏幕顶部紫色背景的底边设计变成波浪曲线。这种不规范的视觉元素,会让顾客不自觉地注意到,而不具有攻击性。双层波纹曲线让情况有了层次,客户的视野当然下降。在整个过程中,他会不自觉地被颜色逐渐变化为橙色的CTA按钮所吸引。自然,颜色的选择也有一定的功效,但是波纹曲线也是有目共睹的。

波纹曲线和插图

波纹曲线在某些情况下往往能产生有趣的实际效果,但它的应用领域并不止于此。将波纹曲线融入插图也是一种非常有效的方式。现在很多插画都选择平面设计,插画中有很多角和平行线,其中曲线可以平滑所有的视觉,让顾客更容易被吸引。

曲线也能营造出温和的立体感。在RaceHealth的首页插图中,在插图sky空中加入了平缓的曲线,拉出了所有插图的合理布局,让空右上部分的相对性不再简单。原有的空白艺术仍然保留了空白艺术的功能,提高了所有的视觉感受。这种设计技巧很符合当今平面设计的特点:精妙。

平衡和硬线框

曲线本身的特性决定了它很少立刻充当视觉行为的主体,但作为一个相对温和的元素,在平行线、矩形框等元素为主的UI页面中,融合效果会非常突出。尤其是现在的很多网页和app,都是硬线框。

Ghafari的网页恰当地应用了曲线线框。这个网页被硬线框沿对角线分成左右两半。乍一看,你很难发现其中隐藏的曲线。这种相对粗糙的划分并不让人难受。很大程度上是由于左侧的浅灰色和微妙的曲线,以及右侧照片底部青绿色草坪形成的曲线。它们相互映衬,让整个设计不那么粗糙。它们足够简单,但实际效果却非常好。

这种方法非常容易学习和训练,可以很容易地移植到其他设计中。

层次结构创建

与规范的材质设计相比,波纹和曲线往往看起来不那么整齐。大家都知道材料设计中的各种矩形框,原型,标准化的xyk元素。波纹曲线似乎不属于他们所有人,但也不代表他们会有冲突。

如果把波纹曲线和渐变的方法结合起来,运用到材料设计设计风格的页面背景上,像Algoliadesign一样,就能创造出和谐但有趣的设计。

融合动画特效

提起涟漪或波浪线,人们自然会想到海洋。仔细想想,涟漪曲线和动画特效的融合其实是理所当然的。这种自然关系反馈到设计中,就成了我们今天都看到的网页设计书,选取了动态波纹。

涟漪动画效果模仿了大海的节奏和韵律,足以营造出轻松和谐的氛围。

Futuramo就是这样设计时间相对论的网站的。在这种情况下,它无缝拼接了流动性的曲线和波纹,这与市场前景无关,但足以建立一种安静而自然的客户体验。

摘要

来自不同行业的曲线为这个网页增色不少。平衡设计、调节气氛、传达感情都是波纹曲线最常见的功能,消除了生硬的设计,缓解了粗陋的线框。可以说,在大多数新设计项目中,波纹曲线都有立足之地。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zz/779182.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-04
下一篇 2022-05-04

发表评论

登录后才能评论

评论列表(0条)

保存