用自然靈活的波紋曲線(xiàn)來(lái)柔化你的設計發(fā)布者：本站     時(shí)間：2020-06-05 09:06:23

相比于無(wú)處不在直線(xiàn)，曲線(xiàn)常常能讓整個(gè)設計更加柔和一些。在網(wǎng)頁(yè)和UI中，適時(shí)的加入波紋曲線(xiàn)這樣的元素，能讓界面更加自然，更加輕盈。波紋曲線(xiàn)的優(yōu)勢在于，它可以無(wú)縫地同各種不同的風(fēng)格融合到一起，并且擁有調和不同的元素、不同風(fēng)格的特性。

作為一種基礎的視覺(jué)元素，波紋曲線(xiàn)不僅僅在風(fēng)格設計上有著(zhù)獨特的功用，而且在整個(gè)UI設計中還具備一定的功能性。在扁平化設計大行其道的今天，波紋曲線(xiàn)越來(lái)越多地出現在各種設計項目中，今天的文章，我們一起來(lái)總結一下這一趨勢。

增加特色


當矩形和直線(xiàn)不足以傳達出設計師想要表達的情感之時(shí)，柔和的曲線(xiàn)和斑點(diǎn)可能更適合傳達他們想傳達的東西。

Papillons de Nuit festival 這個(gè)活動(dòng)主題網(wǎng)站就很好地借助波紋和曲線(xiàn)來(lái)強調。網(wǎng)頁(yè)中，基于波紋和曲線(xiàn)所構成的元素各司其職，左上角的波紋元素帶有動(dòng)效，你不會(huì )忽略其中所承載的主題，中間多重波紋構成的Zapping 元素和矩形的 Martin Solveig 圖片構成對比，組成了視覺(jué)主體，而右下角流動(dòng)的波紋則承載著(zhù)用戶(hù)可能感興趣的社交媒體鏈接。

對于電商和企業(yè)機構的網(wǎng)站而言，這些隨性的波紋元素可能會(huì )顯得過(guò)于隨意，但是對于事件、活動(dòng)和時(shí)尚相關(guān)的網(wǎng)站，這些流動(dòng)的曲線(xiàn)是很好的視覺(jué)解決方案，有趣，且引人入勝。

引人注意CTA元素


扁平化設計和極簡(jiǎn)主義是目前網(wǎng)頁(yè)和APP設計的主流，它們和波紋曲線(xiàn)有著(zhù)先天的契合。在你的設計中，很多地方都可以運用到波紋曲線(xiàn)，包括將它和行為召喚（Call to Action）結合起來(lái)。

雖然你使用箭頭或者其他的方式來(lái)引導用戶(hù)也是可行的途徑，但是波紋曲線(xiàn)以一種更加潤物細無(wú)聲的方式，幫你搞定了這件事情，用戶(hù)不會(huì )覺(jué)得他們是被強迫著(zhù)去注意這些東西。

Recruitz 這個(gè)網(wǎng)站就將首屏頂部紫色背景的下邊緣設計成為波紋曲線(xiàn)，這種非規則的視覺(jué)元素會(huì )讓用戶(hù)不自覺(jué)地注意到，而又不具備侵略性。多層波紋曲線(xiàn)讓背景擁有了層次，用戶(hù)視線(xiàn)自然下探過(guò)程中，會(huì )不自覺(jué)地被漸變橙色的CTA按鈕吸引。當然，色彩的選取也起到了一定程度的作用，但是波紋曲線(xiàn)也功不可沒(méi)。

波紋曲線(xiàn)和插畫(huà)


波紋曲線(xiàn)在背景中，常常能創(chuàng )造出有趣的效果，但是它的應用場(chǎng)景不止于此。將波紋曲線(xiàn)融入到插畫(huà)中，也是一種非常有用的手段。由于現在許多插畫(huà)都采用的是扁平化的設計，插畫(huà)中的棱角和直線(xiàn)非常多，曲線(xiàn)在其中能夠柔化整個(gè)視覺(jué)，讓用戶(hù)更容易被吸引。

波紋曲線(xiàn)還能夠創(chuàng )造柔和的空間感。Retrace Health 的首頁(yè)插畫(huà)中，就在插畫(huà)的天空中加入了一道柔和的曲線(xiàn)，將整個(gè)插畫(huà)布局拉出了層次，使得相對較空的右上半部分不再單調，原本的留白依然保留了留白的功能，提升了整個(gè)視覺(jué)體驗。這種設計手法非常符合如今的扁平化設計的特征：微妙。

平衡硬朗的線(xiàn)條


波紋曲線(xiàn)本身的特點(diǎn)決定了它很少會(huì )直接用作視覺(jué)主體，但是它作為一種相對柔和的元素，在以直線(xiàn)和矩形等元素為主的UI界面當中，調和作用會(huì )非常突出。尤其如今許多網(wǎng)頁(yè)和APP當中，全都是硬朗的線(xiàn)條。

Ghafari 的這個(gè)頁(yè)面就很巧妙地運用了曲線(xiàn)線(xiàn)條。這個(gè)頁(yè)面被硬朗的線(xiàn)條斜著(zhù)劃分左右兩半，乍一看你很難發(fā)現其中所隱藏的曲線(xiàn)，這種相對生硬的劃分并沒(méi)有讓人覺(jué)得難受，很大程度上得益于左邊淺灰色的、微妙的曲線(xiàn)，以及右邊圖片底部綠色的草地所構成的曲線(xiàn)，它們相互呼應，也讓整個(gè)設計不那么生硬。它們足夠簡(jiǎn)單，但是效果卻頗為不錯。

這種技巧是很容易學(xué)習，也可以輕松遷移到其他的設計當中。

建立分層背景


相比于規范化的Material Design，波紋和曲線(xiàn)常常顯得沒(méi)有那么規整。我們熟悉 Material design 中的各種矩形、原型和標準的卡片元素，波紋曲線(xiàn)好像不屬于其中的任何一種，但是這并不是意味著(zhù)它們會(huì )有沖突。

如果將波紋曲線(xiàn)和漸變的技巧結合起來(lái)，運用在Material Design 風(fēng)格的頁(yè)面背景當中，就像 Algolia 這樣設計，一樣能夠創(chuàng )造出協(xié)調但是有趣的設計。

結合動(dòng)效


談到波紋，或者波浪的時(shí)候，人們會(huì )很自然地想到大海。仔細想想，波紋曲線(xiàn)和動(dòng)效的結合其實(shí)是自然而然的一件事情。這種自然的關(guān)聯(lián)反饋到設計當中，也就成了今天我們所看到的這些采用動(dòng)態(tài)波紋背景的網(wǎng)頁(yè)設計作品。

波紋動(dòng)效模仿了海浪的節奏和韻律，足以創(chuàng )造出舒緩和諧的氛圍。