最近,有一種更柔和的設計趨勢正在興起,尤其是在網站建設項目中——波浪線或我們稱其為“軟線”。這種趨勢在視覺上可能比較簡單,通過背景單一的“柔和”的顏色主導,我們可以很直觀的看到一個曲線和波浪的轉變。
更輕,更柔和的元素可以喚起設計在整體上的不同感覺。而且有一點特別好的地方是,波浪和柔軟的線可以以很多不同的方式呈現,使每個網頁設計在感覺上就完全不同(基于它柔和以及多變的特征,它對設計的影響幾乎是潛移默化的)。
接下來,我們將通過幾個典型的案例,來看看在網站設計中的波浪線和“軟”線元素的趨勢。
1.強調元素
當矩形和圓環不太適合你的項目的主Key或者說主題的時候,斑點和波浪可能是一個很好的解決方案。對于在一些較大的元素中需要被強調或注意的特定的細微斑點或元素,柔軟的線將起到一種類似指引的作用,它可以引導用戶在整體的網站設計上“定位”到那些更重要的信息或元素。
在上面的Papillons de Nuit festival的網頁設計中,你可以很清楚的看到它在使用波浪來突出事件的元素。以波浪作為基礎的元素在淺色背景上鋪開,每個波浪都包含一些特殊的東西:頂角的動畫,“切換”元素包括多個波浪,底部角落的波浪則負責將你引導到社交媒體。通過滾動,更多的波浪和軟紋理將有助于把整體的網頁設計中的照片和事件信息連接在一起。
這種設計可能對電子商務類或金融機構的網站來說太過了,但它對于包含事件的頁面來說是一個很好的解決方案。外觀上保持有趣,更能吸引人的注意并在瀏覽過程中保持一種輕松的心情(所有元素都有助于推動事件流動)。
2.為行動吸引眼球
極簡風格設計方案和平面插圖仍然是流行的設計元素。而在次基礎上添加波浪元素可以幫助你了解設計的特定部分,包括號召行動。
雖然你還可以通過使用箭頭或三角形元素完成此操作,但波浪元素可以提供一種更柔和、更微妙的行為指令。用戶不覺得他們是被迫進入可點擊的元素或消息。
Recruitz在其網頁設計中使用波浪來創建行動呼吁并且將其作為屏幕底部的推薦信息之間的分隔。通過柔和的分配和間隔可以幫助眼睛輕松地在元素之間來回移動,并在元素之間產生深度,這樣的設計永遠不會顯得平坦(同時,明亮的配色方案也很有幫助)。
3.帶有波浪元素的插圖
雖然波浪元素在特定的背景中產生的影響力可能過于獨立,但它們完全可以并入到插圖中。盡管這種較柔和的感覺與許多已經很受歡迎的硬線和極簡化圖標有些不同,但結果是用戶可以直接進入簡單視覺效果,而不會有太多的“額外”信息或元素干擾他們。
波浪同時也可以幫助創造更柔和的空間。Retrace Health在其網站設計中通過天空和背景的交互動效,來提升整體網站的互動性和空間感。通過波浪的衰退和流動來增加或減少圖像和標題之間的空間,有助于將注意力吸引到這個空間,通過對元素之間的空白量進行微妙的改變。
4.使“硬”線平衡
波浪可以做的不僅僅就只是作為一種單純的波浪,波浪也可以作為背景元素,以幫助平衡在設計上使用的“硬”線或視覺計劃中的其他元素。如果你對美學過于苛刻,或者需要平衡才能正確的話,那就考慮通過波浪式的元素修復。
Ghafari的網頁設計中包括一個微妙的波浪,如果不仔細看你可能很難發現。你的注意力很容易被頁面上有趣的照片形狀,明亮的彩色文字,甚至頂部的金色按鈕縮吸引。但是,這些元素是通過一片灰色的波浪把它們整合在一起的。波浪平衡了較重,較粗糙的形狀,使設計不會發生偏移或偏離。它很簡單,幾乎完全和背景融為一體了。
這個技巧很重要。不是所有的設計元素都是必要的或者將告訴用戶一些什么。有時,設計元素更加隱形,但起到支撐作用,來幫助項目保持平衡,建立正確的感覺。
5.建立背景分離
波浪和軟線似乎是一個可以使基于材料的分層設計看起來有點不太公正的元素。不同于規則的圓形或矩形用于層或基于卡片式的元素,基于波浪元素的背景可以創建相同類型的分隔。
與其他示例一樣,最終在視覺的表現上會使整體稍微輕一些。
同時,波浪也可以與另一種趨勢——漸變配合。Algolia在它的網站設計中就使用了這兩個的“結合體”,在視覺上做了一個很好的示范。該設計盡管使用了多種效果,但整體感覺很簡單,易于閱讀。
6.創建動畫
當你想到“波浪”,第一個在腦海中關聯的大概就是海洋了。當我們提到這個趨勢的時候,一個標準的波浪動畫,直到最后一定是會讓你有這種這種邏輯關聯。
它是對波浪的使用的最好的一種方式。波浪動畫可以模仿海洋的節奏和自然流動感,創造舒緩和諧的視覺效果。
Futuramo在它的Relativity of Time站點的網頁設計中做到了這點。背景波浪彼此無縫地流動。它們很簡單,并且以自然的方式移動。唯一的不同在于,波紋的流動實際上與屏幕上的內容無關。它們只是在用戶瀏覽內容進行移動時,營造一種平靜的場景體驗。
這個例子展示了如何用一個簡單的視覺主題來吸引觀眾。內容和設計中故事的時間方面,也很好地連接起來。
總結
具有更多曲率的線條為項目創造不同的運動和情感。將曲線簡單地添加到直線中可以改變整個項目的感覺,使其不那么嚴肅和堅硬,可以顯得更有吸引力。
用戶似乎很容易被吸引到這些元素中。 你對波浪和軟線感覺如何?