先別轉行!跟上2022 年的 7 個網頁設計趨勢

語言: CN / TW / HK

編者按:這篇文章出自資深設計師 Erik Messaki 的總結,文章總結了 7 種網頁設計趨勢,雖然其中很多趨勢之前已經存在,但是在細節和特徵上,Erik 有更為深入的分析,值得看看。

關注趨勢本質上就是關注未來可能存在的形態。很多營銷需求和設計趨勢是相互關聯的,兩者之間的關聯更像是一種動態的同步。

很多時候趨勢並不一定是全新的東西,它們往往是服務於當下和未來的需求,有很多趨勢存在了一些年頭,它們在現在發揮着作用,但是在未來可能會發揮更大的效用。所以,當我們在查看這些設計趨勢的時候,需要注意,它們必須是服務於用户,服務於品牌和企業。

01

新極簡主義

的確,極簡主義一直在某種程度上流行,但是 2022 年出現的新極簡主義的浪潮,比起傳統的極簡主義設計更加在意用户注意力的吸引。這種新極簡主義的設計會採用更加大膽、 生動、明亮的色彩來填補留白,這種設計使得設計保持簡約的同時,更加富有調性,在簡約的框架下製造一種別樣的華麗,營造令人亢奮的氛圍。

乾淨清晰、生動的新極簡主義風格在品牌推廣的過程中也更加受歡迎,大量的留白和跳脱的視覺焦點讓整個視覺更加抓人眼球,也使得品牌給人的感知更加新鮮獨特。

新極簡主義風格,對比度在深色主題下得到了進一步的提升。

這種設計並不意味着傳統的極簡主義已經被用户拋棄,很多企業依然會青睞更加傳統的單色極簡主義設計,不過其中多少會增加一些明亮的色彩作為點綴。

02

新粗野主義

從 1950 年開始,粗野主義就是年輕化、反叛、反主流、標新立異的設計風格。在過去的幾十年當中,這種設計風格一直隨着時代的發展而自我迭代,新粗野主義更加強調創造力、 大膽前衞的新奇元素,而這也正好符合很多品牌對於新奇性的追求,它可以瞬間抓住用户的注意力。不過,這種風格的使用需要控制好程度,否則很容易失控。

粗野主義經久不衰的祕訣是什麼?是未經打磨、粗糲而原始的素材,它讓觀看者忍不住想要改進它,這種未完成的原始感會在情感上吸引觀眾,這在營銷上是無價的優勢。

粗野主義在設計上並非看起來那麼粗糙,相反它更加需要高度的專業性來控制它粗野的程度。設計師需要敏鋭地感知到觀看者改進地慾望,讓設計粗野而不低級,原始而不拙劣。

新粗野主義柔糅合了極簡主義和大膽地排版,它依賴看似粗野地視覺衝擊:高對比度、粗糲地陰影,撞色、 簡約的背景、不對稱的佈局、 未經修飾的照片,新粗野主義偏好基礎款的加粗字體,跟注重可讀性而不是舒適所製造的視覺吸引力。

這個網站就是一個典型的例子:

03

強調參與感的交互

這一趨勢在絕大多數的趨勢排行榜當中,都佔據首位。隨着技術的進步,用户和數字媒體之間的交互正在增加,引人入勝的交互已經不僅僅停留在響應式設計當中,如今它已經開始關注心理和生理的邏輯,開始全方位地調動視覺、聽覺、 嗅覺、觸覺、味覺乃至於運動體感。

這種趨勢旨在幫助用户體驗真實地感覺,在完成交互地基礎上,觸發用户地情緒反應和生理反應,熱氣騰騰地餡餅視頻讓人垂涎,遊戲中虛擬地對手讓人腎上腺素激增。

交互所製造地參與感,在某種程度上是實際地物理產品地替代物,用户可以從不同角度來縮放查看產品,瞭解細節,選擇尺寸,挑選顏色。

交互過程中,手指和屏幕之間地觸摸交互開始變得豐富,開始變得有意味,它成為了用户和虛擬世界之間溝通地橋樑,開始有遊戲地樂趣,有更具設計感地交互環節。用户也可以根據自己地喜好,對界面進行更多樣的個性化處理。

具有參與感的交互是我們的未來。

04

關注人和敍事

2022 年是疫情開始後的第三年,隔離使得人們對於照片所呈現出的故事和情感,有着更為強烈的情緒反應。在極簡主義設計當中,富有表現力的人物照片是最為流行的元素之一,這類照片搭配上簡短的文字,簡練的口號,一些帶有宏大敍事特質的文字引用,時常能夠更好地營造出故事感。

不用擔心主屏頁面太長沒人看,只要隨着用户滾動,故事會隨之逐步展開,用户可以在照片、 標題、視頻、動畫和文本地指引下,看到整個故事有步驟地呈現。

在這當中,富有表現力的人物照片是吸引用户注意力的關鍵要素。

另外就是頁面的 Banner 的部分,強調主題和內容的標題文本,是用户從屏幕上獲取的重要信息之一。

如今的用户越來越偏好在詳細閲讀內容之前,快速瀏覽一下全局的做法,這也使得 Scrollytelling(滾動敍事:通過滾動觸發音頻、視頻、 動畫效果的一種技術)這種漸進式敍事方式,可以像電影一樣將故事呈現在用户眼前。

Scrollytelling 適合大量的內容呈現,比如對於公司和產品的描述,對於數據呈現或者認知要求較高的內容,它適合學習和記憶性內容的呈現。

05

3D圖形的運用

3D 圖形設計正在越來越流行,因為它確實是吸引用户注意力的最主要的工具之一。3D 圖像無論有多麼奇異,它本身都會被認為是有真實感的,明確的體積,精緻的建模,所有的一切都令人着迷。很多時候,用户停留在有3D元素的頁面上,是為了更細緻的欣賞。

3D 圖形設計的趨勢從來都沒有減退,它正在進入更多的領域,甚至進入了品牌推廣的領域。3D 動畫圖標比過去更能吸引用户的注意力。

06

抽象插畫

我們通常説的抽象插畫,指的是帶有明確幾何特徵的插畫,它們被廣泛地應用於網站和 APP,在社交媒體和包裝設計中也越來越多的存在。

抽象插畫之所以會如此成功,是因為它們大多有着吸引人的生動色彩和良好對比度,視覺上的美感和極簡主義的風格特質,它們成為視覺的焦點,為整個設計提升視覺。

抽象插畫在品牌營銷場景下的應用也很多,它們在這個時候是貼合品牌推廣的訴求的:通過色彩和形式來吸引用户來關注品牌的形象和名稱。

07

超大文本版式

這種趨勢的特別之處是其中的文本字體元素是完全獨立的。這些文本不僅僅是用來傳遞信息的,它們還充當着拉昇頁面視覺效果的重要作用,它們結合動畫和交互,成為頁面中醒目的亮點。

超大字體的優點在於,它和很多設計風格是相得益彰的,加粗的大字體在極簡主義風格的頁面上不會顯得突兀,在元素豐富的頁面上,同樣可以起到優秀的點綴作用。這些文本內容可以和纖細和小尺寸的元素協同,而後者則襯托出它本身的醒目。

超大文本字體的另一個好處是有效地減少網頁上的圖像的使用,縮短加載時間,提升移動端的可用性。

這種設計元素最重要的,是選擇易讀且符合品牌調性的字體。

總 結

這麼多年來,我們看到來這麼多的趨勢,很多趨勢是一以貫之持續出現,有的趨勢則如同流星一樣一閃而逝。好的趨勢不斷迭代升級,並且持續存在,但是最重要的,始終是那些選擇合理的方案,並且堅持改進設計,讓趨勢服務於終端的產品和用户的設計師。

讓趨勢服務於你,不要盲目地追趨勢!