亚洲国产精品久久精品成人_国产步兵社区视频在线观看_国产不卡免费视频_午夜私人影院免费体验区

400-611-9921

當(dāng)前位置:首頁 > 新聞資訊 > 建站知識
用自然靈活的波紋曲線來柔化你的設(shè)計

2017-07-01

2437

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

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


增加特色

當(dāng)矩形和直線不足以傳達(dá)出設(shè)計師想要表達(dá)的情感之時,柔和的曲線和斑點可能更適合傳達(dá)他們想傳達(dá)的東西。

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

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


引人注意CTA元素

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

雖然你使用箭頭或者其他的方式來引導(dǎo)用戶也是可行的途徑,但是波紋曲線以一種更加潤物細(xì)無聲的方式,幫你搞定了這件事情,用戶不會覺得他們是被強(qiáng)迫著去注意這些東西。

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


波紋曲線和插畫

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

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


平衡硬朗的線條

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

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

這種技巧是很容易學(xué)習(xí),也可以輕松遷移到其他的設(shè)計當(dāng)中。


建立分層背景

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

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


結(jié)合動效

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

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

Futuramo 就是這樣來設(shè)計 Relativity of Time 這個網(wǎng)站的,背景中無縫流動的曲線波紋,和前景內(nèi)容毫無關(guān)聯(lián),但是足以營造出平靜而自然的用戶體驗。


結(jié)語

波紋曲線為這些來自不同領(lǐng)域的網(wǎng)頁增色不少。平衡設(shè)計、調(diào)節(jié)氛圍、傳遞情感,這都是波紋曲線最常見的功用,消解了突兀的設(shè)計,生硬的線條也得到了舒緩,可以說,在絕大多數(shù)設(shè)計項目當(dāng)中,波紋曲線都有用武之地。


本文來自廣州品牌網(wǎng)站建設(shè)網(wǎng)站設(shè)計制作公司-縱天科技

標(biāo)簽:廣州網(wǎng)站建設(shè)公司,廣州網(wǎng)頁設(shè)計公司,廣州網(wǎng)站設(shè)計公司,企業(yè)網(wǎng)站建設(shè)

免費咨詢熱線

400-611-9921

020-29860991

聯(lián)系方式

地址1:廣州市天河區(qū)珠江新城邦華環(huán)球廣場16F

業(yè)務(wù) QQ:  3561401262

E-mail:  sales@zomsky.com

微信咨詢
官方微信
微信咨詢
在線咨詢
TOP

立即與縱天項目顧問通話

400-611-9921

您也可以咨詢我們的在線客服或預(yù)約資深顧問

信息保護(hù)中,請放心填寫
關(guān)閉
免費獲取方案