很難相信一年即將接近尾聲，但這并未阻止網(wǎng)站設(shè)計(jì)師們不斷嘗試新事物，以保持設(shè)計(jì)的趣味性。隨著觸感質(zhì)感、網(wǎng)格布局和雙欄設(shè)計(jì)備受關(guān)注，本月的網(wǎng)站設(shè)計(jì)趨勢匯集了一些你可以在年末之前可以嘗試的創(chuàng)意元素。

1. 可觸摸的質(zhì)感  

當(dāng)你想到?jīng)鏊奶鞖?、秋天或冬天時，“舒適”一詞常常浮現(xiàn)在腦海中。這種詞語仿佛能讓人聯(lián)想到毛衣或毯子的柔軟質(zhì)感。  

將這種概念以視覺形式呈現(xiàn)，正是這一設(shè)計(jì)趨勢的核心——通過一組看似可以觸摸的圖像，引發(fā)觀者對其在現(xiàn)實(shí)世界中觸感的聯(lián)想。  

今年以來，模糊數(shù)字空間與現(xiàn)實(shí)世界界限的設(shè)計(jì)一直是熱門趨勢，而這一趨勢則將這種理念推向了純粹的視覺表達(dá)層面。（這些例子幾乎讓我“感受到”它們的質(zhì)地。）  

但這一設(shè)計(jì)趨勢的挑戰(zhàn)在于必須經(jīng)過精心規(guī)劃。你需要完美的視覺元素——有時是靜態(tài)的，有時是動態(tài)的——并且必須真實(shí)到讓網(wǎng)站訪客產(chǎn)生“觸感”的錯覺。  

這種效果可以通過攝影或視頻實(shí)現(xiàn)，但關(guān)鍵在于藝術(shù)作品的觸感屬性以及它與屏幕上其他元素的互動方式。以下每個例子都用不同的方式實(shí)現(xiàn)了這種效果。  

Sales & More 運(yùn)用了帶質(zhì)感的動態(tài)效果，營造出一種難以定義但又讓人忍不住想觸碰的感覺。你幾乎可以想象握住那些小球的觸感，或者它們從“&”形狀中飄離時的微風(fēng)拂過感受。簡潔的平面背景使得這種設(shè)計(jì)更具沖擊力，加之單色調(diào)配色和高度互動性，整體效果更為突出。  

Every Exquisite Font Factory 運(yùn)用了多種紋理元素來突出字母形態(tài)并增加視覺趣味性。通過陰影效果、簡約的背景以及獨(dú)特的應(yīng)用方式（如將紋理融入字母中），每個字母都仿佛“觸手可及”。  

這一設(shè)計(jì)中結(jié)合了多種質(zhì)感元素，并在細(xì)節(jié)上表現(xiàn)出極高的精致度，使整體呈現(xiàn)出豐富而引人入勝的視覺效果。

Moyceram 展示了具有液態(tài)光澤感的陶瓷藝術(shù)品，這種效果幾乎讓人能“感受到”作品的表面質(zhì)感。即使是面部上繪制的睫毛和眉毛，也顯得輕盈且觸手可及。  

然而，最引人注目的元素可能在于每件作品的表面都呈現(xiàn)出一種濕潤的質(zhì)感，使得每件藝術(shù)品的情感更加鮮明地展現(xiàn)出來。

2. 獨(dú)特網(wǎng)格  

一個設(shè)計(jì)精美的網(wǎng)站網(wǎng)格往往令人愉悅。網(wǎng)格能夠?qū)?nèi)容有序地排列，使頁面保持平衡并具有視覺吸引力。  

盡管網(wǎng)格幾乎隨處可見，這一趨勢更注重將網(wǎng)格明確地展現(xiàn)出來，而不僅僅是作為設(shè)計(jì)的輔助工具。  

這種設(shè)計(jì)風(fēng)格給人一種高度結(jié)構(gòu)化的感覺，使大量內(nèi)容各得其所，同時避免了雜亂無章。這類網(wǎng)格設(shè)計(jì)形式多樣，幾乎適用于任何類型的內(nèi)容，其主要驅(qū)動力在于組織需求。  

Love and Money Agency 使用了簡單的方塊圖片網(wǎng)格來展示其作品。網(wǎng)格中的方塊混合了靜態(tài)圖片和動態(tài)影像，一些方塊鏈接到作品頁面并帶有懸停狀態(tài)效果，而另一些則沒有。這種網(wǎng)格設(shè)計(jì)簡潔明了，通過多樣化的內(nèi)容類型，營造出一種“自定義探索”的體驗(yàn)感。

Haydaysss 采用了一種看起來像日歷的網(wǎng)格設(shè)計(jì)，這種視覺效果讓大多數(shù)人都能輕松理解。更有趣的是，這種網(wǎng)格幾乎就是整個首頁的全部內(nèi)容。  

這個網(wǎng)格設(shè)計(jì)不僅用于內(nèi)容展示與入口，還承擔(dān)了導(dǎo)航功能。每個方塊都有簡單的懸停動畫，提示用戶它是可交互的。同時，每隔幾秒屏幕上還有動態(tài)效果穿梭而過，進(jìn)一步吸引訪客的注意力并提升互動體驗(yàn)。

Alec Tear 的作品集網(wǎng)站延續(xù)了網(wǎng)格方塊的主題設(shè)計(jì)。整體的單色調(diào)外觀本身就非常引人注目，而當(dāng)鼠標(biāo)懸停時，方塊切換為全彩效果，進(jìn)一步吸引用戶進(jìn)入不同的作品。  

這種設(shè)計(jì)略帶粗野主義風(fēng)格，為其中精致復(fù)雜的作品提供了一種視覺上的平衡感。單色調(diào)的配色還能有效突出頁面的重點(diǎn)——字體設(shè)計(jì)，這也正是這個作品集頁面展示的核心內(nèi)容。

3. 雙欄布局  

網(wǎng)格設(shè)計(jì)的另一種形式是雙欄布局。需要注意的是，雙欄布局并不一定意味著兩個對稱的等寬列。（非對稱設(shè)計(jì)往往更具吸引力。）  

每個雙欄設(shè)計(jì)的例子都通過這種布局來組織內(nèi)容，為網(wǎng)站提供易于閱讀的文本區(qū)塊。全寬的文本在桌面屏幕上通常會讓人感到視覺疲勞，因此多欄布局成為了一個可行的替代方案。而雙欄布局在小屏設(shè)備上也能以邏輯清晰的堆疊方式很好地適配。 

Vaersagod 使用了彼此相對獨(dú)立的雙欄設(shè)計(jì)。右側(cè)列展示視覺作品和作品集的示例，而左側(cè)列則滾動顯示文本內(nèi)容。這種布局風(fēng)格貫穿于后續(xù)頁面，用戶幾乎需要通過點(diǎn)擊和滾動來完全感受其交互設(shè)計(jì)的獨(dú)特之處。

Richard George 使用了更傳統(tǒng)的分屏設(shè)計(jì)，分為兩個面板——一個用于文本元素，另一個用于展示視覺內(nèi)容。這個設(shè)計(jì)模式之所以始終流行，是因?yàn)樗浅?shí)用，且能夠?yàn)樵L客提供簡潔的互動體驗(yàn)。

RTRFM 的整體網(wǎng)格設(shè)計(jì)非常出色——你需要點(diǎn)擊并滾動才能完全看到它——其中的雙欄卡片是使用雙欄布局的完美示例，同時又充滿了時尚感。  

這些卡片呈現(xiàn)出一種粗野主義風(fēng)格，包含大量內(nèi)容和可點(diǎn)擊元素，非常具有互動性，能夠有效地處理豐富的信息。小巧的動畫效果提升了整體的視覺體驗(yàn)，而這種設(shè)計(jì)風(fēng)格與網(wǎng)站的內(nèi)容非常契合，完美地增強(qiáng)了信息的呈現(xiàn)方式。

總結(jié)

在這一系列趨勢中，給我留下最深刻印象的是質(zhì)感的運(yùn)用。這些幾乎可以觸摸到的設(shè)計(jì)激發(fā)了人們更多的互動欲望，也讓我想要通過視頻、攝影或三維插畫來創(chuàng)作，創(chuàng)造出讓網(wǎng)站訪客感受到“觸感”的效果。  

其他趨勢則通過網(wǎng)格和獨(dú)特的模式來幫助網(wǎng)站內(nèi)容看起來更有條理——在一年中繁忙的時刻，這種設(shè)計(jì)方式尤其清新、舒適。這些趨勢更容易構(gòu)思并快速應(yīng)用。  

無論你最喜歡哪種設(shè)計(jì)風(fēng)格，都可以盡情嘗試，并確保在設(shè)計(jì)過程中進(jìn)行實(shí)驗(yàn)！

文章來源：webdesignerdepot