亚洲激色,日日干夜夜爱,久青草资源福利视频,九色免费,四虎网站在线播放,中国一级特黄**毛片免,性大特级毛片视频

新姿勢(shì)!用自然靈活的波紋曲線(xiàn)來(lái)柔化你的設(shè)計(jì)

作者:chenzimu7
2017-06-29
3717

作為一種基礎(chǔ)的視覺(jué)元素,波紋曲線(xiàn)不僅僅在風(fēng)格設(shè)計(jì)上有著獨(dú)特的功用,而且在整個(gè)UI設(shè)計(jì)中還具備一定的功能性。

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

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

增加特色

增加特色.jpg

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

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

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

引人注意CTA元素

引人注意CTA元素.jpg

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

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

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

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

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

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

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

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

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

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

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

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

建立分層背景

建立分層背景.jpg

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

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

結(jié)合動(dòng)效

結(jié)合動(dòng)效.jpg

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

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

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

結(jié)語(yǔ)

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


0
0
分享到:

0

喜歡他,就推薦他上首頁(yè)吧^_^

推薦閱讀

×

賽事服務(wù)聯(lián)系方式

0371-86068866

4008887269

cndesign@163.com

好的,我知道了

官方微信

聯(lián)系我們

  • QQ:33143335 QQ:1904200230
  • 電話(huà):18569912460
  • 投稿:cndesign@163.com
  • 地址:鄭州市國(guó)家大學(xué)科技園東區(qū)9號(hào)樓2層

版權(quán)信息

  移動(dòng) Android 版 豫 ICP 備16038122號(hào)-2 豫公網(wǎng)安備 41019702002261號(hào)