最近，波(bo)(bo)(bo)紋曲(qu)(qu)線(xian)在(zai)網(wang)站(zhan)設(she)計(ji)中(zhong)出現得(de)越來越頻繁(fan)。相對于(yu)硬朗的(de)(de)直線(xian)而言，波(bo)(bo)(bo)紋曲(qu)(qu)線(xian)更加柔和(he)，能讓(rang)(rang)頁面(mian)顯得(de)更加輕盈，還可(ke)以(yi)靈活(huo)地同其他各種風(feng)(feng)格的(de)(de)元素(su)搭(da)配，有(you)助于(yu)協(xie)調(diao)網(wang)站(zhan)的(de)(de)整體(ti)美感。在(zai)網(wang)頁和(he)UI中(zhong)，當令的(de)(de)參加波(bo)(bo)(bo)紋曲(qu)(qu)線(xian)這樣的(de)(de)元素(su)，能讓(rang)(rang)界(jie)面(mian)愈加天然，愈加輕盈。波(bo)(bo)(bo)紋曲(qu)(qu)線(xian)的(de)(de)優(you)勢在(zai)于(yu)，它可(ke)以(yi)無縫地同各種不(bu)同的(de)(de)風(feng)(feng)格融合(he)到一同，并且具有(you)諧和(he)不(bu)同的(de)(de)元素(su)、不(bu)同風(feng)(feng)格的(de)(de)特性。也因此，波(bo)(bo)(bo)紋曲(qu)(qu)線(xian)的(de)(de)使(shi)用方法很是(shi)多樣，能夠搭(da)建出多種風(feng)(feng)格的(de)(de)網(wang)站(zhan)。今天我們(men)就一起來看看波(bo)(bo)(bo)紋曲(qu)(qu)線(xian)如(ru)何應用到網(wang)站(zhan)設(she)計(ji)中(zhong)，讓(rang)(rang)網(wang)站(zhan)更有(you)特色吧。

　　1.設計引人注意的CTA按鈕(niu)

　　就(jiu)目前而言(yan)，極簡主(zhu)義和(he)扁(bian)平化網(wang)站設計(ji)(ji)仍是網(wang)頁(ye)設計(ji)(ji)的(de)(de)(de)主(zhu)潮流，而波紋(wen)曲線與這(zhe)兩(liang)者(zhe)有著天生(sheng)的(de)(de)(de)契合(he)，可以用(yong)在網(wang)站中(zhong)引起用(yong)戶對于特(te)定區域的(de)(de)(de)注意。這(zhe)也是為什(shen)么不(bu)少(shao)網(wang)站使用(yong)波紋(wen)曲線讓CTA按(an)鈕更突出。可能你會覺得使用(yong)箭(jian)頭或(huo)三角形元素(su)可以達到同(tong)(tong)樣的(de)(de)(de)目的(de)(de)(de)，其實(shi)不(bu)然。波紋(wen)元素(su)與前者(zhe)相比有一點細微的(de)(de)(de)不(bu)同(tong)(tong)，那(nei)就(jiu)是它足夠(gou)柔和(he)，它在引起用(yong)戶注意的(de)(de)(de)同(tong)(tong)時不(bu)會讓用(yong)戶產生(sheng)被壓迫去(qu)做(zuo)某事的(de)(de)(de)感(gan)覺。

　　Recruitz就在(zai)網(wang)站首(shou)頁的(de)(de)下邊緣中(zhong)使用(yong)波紋曲(qu)線將CTA按鈕(niu)和(he)網(wang)站證書榮譽區別開(kai)來(lai)(lai)，這種(zhong)輕柔的(de)(de)分割有助于用(yong)戶來(lai)(lai)回瀏覽(lan)，自然(ran)而然(ran)注(zhu)意(yi)到CTA按鈕(niu)。多層的(de)(de)波紋曲(qu)線還讓網(wang)頁有了層次，整個設計不(bu)會顯(xian)得平淡無奇。當然(ran)，下圖(tu)中(zhong)CTA按鈕(niu)能(neng)吸引(yin)用(yong)戶駐足，也(ye)要得益于明亮的(de)(de)漸變(bian)橙色的(de)(de)應用(yong)。

　　2.盡管波(bo)(bo)浪曲線可(ke)以(yi)獨立存在，用(yong)(yong)在背景中創造一些有趣(qu)的效果(比如上面兩個網站(zhan))，但它的應(ying)用(yong)(yong)場景可(ke)不僅于此，它還可(ke)以(yi)與插畫結(jie)合(he)使用(yong)(yong)。現在很(hen)多網站(zhan)中使用(yong)(yong)的插畫都采(cai)用(yong)(yong)扁(bian)平(ping)化設計，棱(leng)角(jiao)分明，直(zhi)線非常多，而在插畫中加入波(bo)(bo)紋曲線可(ke)以(yi)起到柔和視覺的作用(yong)(yong)，更容(rong)易吸引用(yong)(yong)戶(hu)的視線。

　　Retrace Health網(wang)站在首頁插畫(hua)的天(tian)空中加入(ru)了(le)(le)一道柔和的曲線(xian)，這讓整個插畫(hua)出現了(le)(le)層次，上方的空白區域不再單調，但卻依舊保證了(le)(le)留白的效果。網(wang)站的整個視覺體驗得到(dao)提(ti)升，可見這微妙的改(gai)變恰到(dao)好處。

　　3.增(zeng)加(jia)設計特色

　　應(ying)用(yong)矩(ju)形(xing)和直(zhi)線(xian)的網站實在(zai)(zai)是(shi)太多(duo)了(le)，而且有時網站設計中的某些情感是(shi)矩(ju)形(xing)和直(zhi)線(xian)難(nan)以表達的，這時柔和的曲(qu)線(xian)就派(pai)上用(yong)場了(le)，它的使用(yong)可以給(gei)網站增色不少。下(xia)圖是(shi)The Papillons de Nuit festival網站的主(zhu)頁。雖然(ran)淺(qian)色的主(zhu)頁背(bei)景上使用(yong)了(le)很多(duo)曲(qu)線(xian)元素，但在(zai)(zai)具體細節方面各有不同，很好的突出了(le)活動主(zhu)題。

　　4.實現(xian)分(fen)層或卡片式效(xiao)果

　　并(bing)不是只有棱角分明的矩形(xing)、圓形(xing)才能創造出分層(ceng)或(huo)卡(ka)片式的效(xiao)果，波(bo)紋(wen)(wen)曲線(xian)(xian)同樣也可以(yi)(yi)實現。除(chu)此(ci)以(yi)(yi)外，柔和的波(bo)紋(wen)(wen)曲線(xian)(xian)還有一個優點，那就是讓分層(ceng)或(huo)卡(ka)片式效(xiao)果顯得(de)沒有那么刻板(ban)、公(gong)式化。為了實現這(zhe)一效(xiao)果，波(bo)紋(wen)(wen)曲線(xian)(xian)常常需要和漸變色一起(qi)搭配使用(yong)。

　　Algolia這個(ge)網站(zhan)就是一(yi)個(ge)經(jing)典(dian)栗子(zi)，它(ta)用曲(qu)線創造出分層的(de)效(xiao)果，結合(he)曲(qu)線和漸變讓網站(zhan)更協調、有趣。盡管這個(ge)網站(zhan)上(shang)使用了(le)許多漸變色、直(zhi)線和曲(qu)線，它(ta)卻完(wan)全(quan)沒有給用戶的(de)瀏覽(lan)閱讀造成(cheng)負擔，它(ta)是簡單(dan)、易懂的(de)。

　　從上(shang)面的(de)一(yi)些具體實例中(zhong)，我們可以看出波紋曲(qu)(qu)線有(you)平衡設(she)計、調節氛圍、傳(chuan)遞情感等(deng)作用(yong)，能讓網(wang)(wang)站在(zai)視覺(jue)上(shang)更顯(xian)柔(rou)和。可以說(shuo)，在(zai)大多(duo)數網(wang)(wang)站設(she)計項(xiang)目中(zhong)，波紋曲(qu)(qu)線都有(you)用(yong)武之(zhi)地。當然，在(zai)網(wang)(wang)站中(zhong)使用(yong)什(shen)么樣的(de)設(she)計元素最主要還是要根據自己網(wang)(wang)站的(de)行業(ye)特征、目標受眾(zhong)的(de)喜好等(deng)來(lai)確定，千萬不要一(yi)昧的(de)追逐設(she)計潮(chao)流(liu)趨勢。