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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. 雙欄布局  

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

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

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

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

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

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

總結(jié)

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

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

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

文章來(lái)源：webdesignerdepot