當前位置:首頁 >  站長 >  網站運營 >  正文

如何讓網站散發(fā)柔性美?波紋曲線在網站中的應用

 2017-12-20 17:32  來源: A5企業(yè)專欄   我來投稿 撤稿糾錯

  阿里云優(yōu)惠券 先領券再下單

最近,波紋曲線在網頁設計中出現得越來越頻繁。相對于硬朗的直線而言,波紋曲線更加柔和,能讓頁面顯得更加輕盈,還可以靈活地同其他各種風格的元素搭配,有助于協(xié)調網站的整體美感。也因此,波紋曲線的使用方法很是多樣,能夠搭建出多種風格的網站。今天我們就一起來看看波紋曲線在網站中有哪些作用以及對應的具體實例吧!

1. 增加設計特色

應用矩形和直線的網站實在是太多了,而且有時網站設計中的某些情感是矩形和直線難以表達的,這時柔和的曲線就派上用場了,它的使用可以給網站增色不少。下圖是 The Papillons de Nuit festival 網站的主頁。雖然淺色的主頁背景上使用了很多曲線元素,但在具體細節(jié)方面各有不同,很好的突出了活動主題。頁面左上角的曲線是動態(tài)效果的,中間的"Zapping"元素中使用了多條細長的波浪曲線,而右下角的曲線則是用來引導用戶前往社交鏈接網站。當你滾動頁面時,這還會出現更多的波浪曲線,將照片與表演者一一對應起來。

確實,對于商城網站或金融機構網站來說,這種波紋曲線元素的設計可能顯得隨意。但對于活動主題或時尚網站來說,波紋曲線絕對最能調動氣氛,讓整個設計趣味十足,引人入勝,帶來不少網站流量。

2. 設計引人注意的CTA按鈕

就目前而言,極簡主義和扁平化設計仍是網頁設計的主潮流,而波紋曲線與這兩者有著天生的契合,可以用在網站中引起用戶對于特定區(qū)域的注意。這也是為什么不少網站使用波紋曲線讓CTA按鈕更突出??赡苣銜X得使用箭頭或三角形元素可以達到同樣的目的,其實不然。波紋元素與前者相比有一點細微的不同,那就是它足夠柔和,它在引起用戶注意的同時不會讓用戶產生被壓迫去做某事的感覺。

Recruitz就在網站首頁的下邊緣中使用波紋曲線將CTA按鈕和網站證書榮譽區(qū)別開來,這種輕柔的分割有助于用戶來回瀏覽,自然而然注意到CTA按鈕。多層的波紋曲線還讓網頁有了層次,整個設計不會顯得平淡無奇。當然,下圖中CTA按鈕能吸引用戶駐足,也要得益于明亮的漸變橙色的應用。

3. 波浪曲線和插畫

盡管波浪曲線可以獨立存在,用在背景中創(chuàng)造一些有趣的效果(比如上面兩個網站),但它的應用場景可不僅于此,它還可以與插畫結合使用。現在很多網站中使用的插畫都采用扁平化設計,棱角分明,直線非常多,而在插畫中加入波紋曲線可以起到柔和視覺的作用,更容易吸引用戶的視線。

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

4. 平衡硬朗的直線

前面我們也說過波紋曲線可以同各種元素搭配使用,起協(xié)調、中和的作用。如果你的網站線條太分明了,需要一些元素來平衡,這時不妨考慮考慮波紋曲線。

Ghafari這個網站就巧妙的運用了波紋曲線來協(xié)調整個網站。網站的首頁被硬朗的直線劃分為左右兩半,不過這種劃分看上去沒有那么生硬。這很大程度上都要歸功于網頁上的波紋曲線。這些波紋曲線很是隱蔽,你需要仔細觀察:左邊淺灰色的曲線,以及右邊圖片底部綠色草地構成的曲線。雖然這些元素看上去很簡單,卻能改善網站的呈現效果,給用戶帶來不錯的體驗。這種設計技巧也比較容易學習,我們可以恰當地將它遷移到自己的設計中。

5. 實現分層或卡片式效果

并不是只有棱角分明的矩形、圓形才能創(chuàng)造出分層或卡片式的效果,波紋曲線同樣也可以實現。除此以外,柔和的波紋曲線還有一個優(yōu)點,那就是讓分層或卡片式效果顯得沒有那么刻板、公式化。為了實現這一效果,波紋曲線常常需要和漸變色一起搭配使用。

Algolia這個網站就是一個經典栗子,它用曲線創(chuàng)造出分層的效果,結合曲線和漸變讓網站更協(xié)調、有趣。盡管這個網站上使用了許多漸變色、直線和曲線,它卻完全沒有給用戶的瀏覽閱讀造成負擔,它是簡單、易懂的。

6.創(chuàng)建動畫效果

當人們提到波紋或波浪時,常會聯想到大海。這種自然的關聯反饋到設計當中,也就成了我們今天所看到的波紋動態(tài)效果。仔細想想,波紋曲線和動效的結合其實是很自然的。波紋動效常會模仿海浪的節(jié)奏和韻律,營造舒緩和諧的氛圍。

Relativity of Time這個網站就是這樣設計的,背景中流動的曲線波紋,和網站內容沒有多大關系,但是卻足以營造出平靜而自然的用戶體驗。

從上面的一些具體實例中,我們可以看出波紋曲線有平衡設計、調節(jié)氛圍、傳遞情感等作用,能讓網站在視覺上更顯柔和。可以說,在大多數網站設計項目中,波紋曲線都有用武之地。當然,在網站中使用什么樣的設計元素最主要還是要根據自己網站的行業(yè)特征、目標受眾的喜好等來確定,千萬不要一昧的追逐設計潮流趨勢。你對波紋曲線有什么看法和理解呢?歡迎大家踴躍留言!快來起飛頁自助建站平臺()搭建一個響應式網站吧!

申請創(chuàng)業(yè)報道,分享創(chuàng)業(yè)好點子。點擊此處,共同探討創(chuàng)業(yè)新機遇!

相關標簽
起飛頁建站

相關文章

  • 響應式網站中優(yōu)化用戶體驗的7個關鍵點

    隨著移動設備的不斷興起,響應式設計越來越受到大眾的喜愛,站長們在搭建網站時也更加傾向于選擇響應式網站。不過,大多數站長們都認為既然響應式網站可智能根據設備屏幕大小呈現不同的展示效果,那就不用再對移動端的網站進行手動調整了。其實這種看法是片面的,響應式網站雖然自身具備一定的特質,但有時PC端網站和移動

  • 盤點2017年最受歡迎的10個商城范例:我們從中可以得到哪些啟示?

    在電商和線上購物快速發(fā)展的今天,擁有一個商城網站很是必要,關于試水獨立商城的好處大家可以瀏覽《有了淘寶京東,為什么還要自建商城網站?》查看。但是,搭建商城網站并不簡單,慶幸的是目前市面上涌現了不少建站平臺,起飛頁自助建站平臺就是其中一個,各位商家可以借助起飛頁輕松搭建出一個好看、實用的商城網站。不過

    標簽:
    起飛頁建站
  • 讓首頁背景動起來是怎樣一種感覺?8張圖告訴你真相!

    現在越來越多的設計師開始在網頁中使用循環(huán)視頻作為背景,這種現象的出現主要有兩個原因。一方面,移動設備性能不斷完善,網速越來越快,用戶能夠且有條件在移動設備上瀏覽視頻背景的網站;另一方面,隨著HTML5技術的發(fā)展,很多主流瀏覽器的視頻標簽都支持循環(huán)(Loop)屬性,網頁上單個或一系列視頻短片的循環(huán)播放

    標簽:
    起飛頁建站
  • 缺乏靈感?給你8個值得每天學習的頂尖設計網站

    網站設計是一種藝術,它離不開靈感和創(chuàng)意。但靈感與創(chuàng)意的涌現是需要碰撞、需要時機的,大多數設計師都不可能每時每刻都靈感爆棚。當您缺乏設計靈感時,不妨看一看下面這些網站,它們都收錄了豐富的素材,都有許多獨立設計師上傳的優(yōu)質作品,沒準這些設計就能讓你眼前一亮,獲得一些想法或啟發(fā)。趕緊和小飛一起看看這8個值

    標簽:
    起飛頁建站
  • 目前為止用戶體驗度最好的表單:浮動標簽式的表單

    在當今這個互聯網時代,填寫表單對用戶來說就是家常便飯,在網站進行注冊登錄時、在網上購物時,都免不了填寫表單這一環(huán)。表單是網頁設計中重要的組成部分之一,在獲取用戶信息方面發(fā)揮著不可或缺的作用,它是用戶和網站的一種互動形式,這種形式的互動越順暢,網站的用戶轉化率就越高。這也是為什么許多站長們一直在研究如

熱門排行

信息推薦