最近,波紋曲線在網站設計中出現得越來越頻繁。相對於硬朗的直線而言,波紋曲線更加柔和,能讓頁面顯得更加輕盈,還可以靈活地同其他各種風格的元素搭配,有助於協調網站的整體美感。在網頁和 UI 中,當令的參加波紋曲線這樣的元素,能讓介面愈加天然,愈加輕盈。波紋曲線的優勢在於,它可以無縫地同各種不同的風格融合到一同,並且具有諧和不同的元素、不同風格的特性。也因此,波紋曲線的使用方法很是多樣,能夠搭建出多種風格的網站。今天我們就一起來看看波紋曲線如何應用到網站設計中,讓網站更有特色吧。
1. 設計引人注意的 CTA 按鈕
就目前而言,極簡主義和扁平化網站設計仍是網頁設計的主潮流,而波紋曲線與這兩者有着天生的契合,可以用在網站中引起多用户對於特定區域的注意。這也是為什麼不少網站使用波紋曲線讓 CTA 按鈕更突出。可能您會覺得使用箭頭或三角形元素可以達到同樣的目的,其實不然。波紋元素與前者相比有一點細微的不同,那就是它足夠柔和,它在引起多用户注意的同時不會讓多用户產生被壓迫去做某事的感覺。
Recruitz 就在網站首頁的下邊緣中使用波紋曲線將 CTA 按鈕和網站證書榮譽區別開來,這種輕柔的分割有助於多用户來回瀏覽,自然而然注意到 CTA 按鈕。多層的波紋曲線還讓網頁有了層次,整個設計不會顯得平淡無奇。當然,下圖中 CTA 按鈕能吸引多用户駐足,也要得益於明亮的漸變橙色的應用。
2. 儘管波浪曲線可以獨立存在,用在背景中創造一些有趣的效果 (比如上面兩個網站),但它的應用場景可不僅於此,它還可以與插畫結合使用。現在很多網站中使用的插畫都採用扁平化設計,稜角分明,直線非常多,而在插畫中加入波紋曲線可以起到柔和視覺的作用,更容易吸引多用户的視線。
Retrace Health 網站在首頁插畫的天空中加入了一道柔和的曲線,這讓整個插畫出現了層次,上方的空白區域不再單調,但卻依舊保證了留白的效果。網站的整個視覺體驗得到提升,可見這微妙的改變恰到好處。
3. 增加設計特色
應用矩形和直線的網站實在是太多了,而且有時網站設計中的某些情感是矩形和直線難以表達的,這時柔和的曲線就派上用場了,它的使用可以給網站增色不少。下圖是 The Papillons de Nuit festival 網站的主頁。雖然淺色的主頁背景上使用了很多曲線元素,但在具體細節方面各有不同,很好的突出了活動主題。
4. 實現分層或卡片式效果
並不是只有稜角分明的矩形、圓形才能創造出分層或卡片式的效果,波紋曲線同樣也可以實現。除此以外,柔和的波紋曲線還有一個優點,那就是讓分層或卡片式效果顯得沒有那麼刻板、公式化。為了實現這一效果,波紋曲線常常需要和漸變色一起搭配使用。
Algolia 這個網站就是一個經典栗子,它用曲線創造出分層的效果,結合曲線和漸變讓網站更協調、有趣。儘管這個網站上使用了許多漸變色、直線和曲線,它卻完全沒有給多用户的瀏覽閲讀造成負擔,它是簡單、易懂的。
從上面的一些具體例項中,我們可以看出波紋曲線有平衡設計、調節氛圍、傳遞情感等作用,能讓網站在視覺上更顯柔和。可以説,在大多數網站設計專案中,波紋曲線都有用武之地。當然,在網站中使用什麼樣的設計元素最主要還是要根據自己網站的行業特徵、目標受眾的喜好等來確定,千萬不要一昧的追逐設計潮流趨勢。