在考慮網(wǎng)頁設(shè)計(jì)時(shí)，您必須考慮互聯(lián)網(wǎng)提供的所有可能性。大膽地完成，設(shè)計(jì)師可以在全球范圍內(nèi)推動(dòng)當(dāng)前人類互動(dòng)和想象力的極限——正如創(chuàng)意機(jī)構(gòu)網(wǎng)站等前衛(wèi)行業(yè)經(jīng)常看到的那樣。
 
1. 做大
 
“做大”似乎是當(dāng)今網(wǎng)頁設(shè)計(jì)最重要的一個(gè)原則。然而，對(duì)于許多人來說，主頁（尤其是首屏）僅包含覆蓋在圖像或視頻上的幾句話是很難接受的。有時(shí)，甚至導(dǎo)航也被刪除或（至少）被隱藏為一個(gè)小圖標(biāo)。這種網(wǎng)頁設(shè)計(jì)趨勢(shì)的兩種風(fēng)格可以標(biāo)記為“電影”和“書籍封面”。第一個(gè)受到電影和電視廣告的啟發(fā)，而第二個(gè)增強(qiáng)了印刷書籍和目錄封面的經(jīng)典概念。

這種趨勢(shì)的原因既有視覺上的，也有實(shí)用性的。您可以在用戶登陸您的網(wǎng)站后立即給他們帶來最大的影響，并且更容易編碼，因此它在移動(dòng)設(shè)備和臺(tái)式計(jì)算機(jī)顯示器上運(yùn)行良好（盡管顯示設(shè)備大小相同，但布局保持不變）。


 
全屏圖像在去年開始流行（正如我們?cè)?021 年網(wǎng)頁設(shè)計(jì)趨勢(shì)文章中指出的那樣），但隨著對(duì)高質(zhì)量圖像和更快技術(shù)的訪問越來越多，我們看到網(wǎng)站將這些“書籍封面”布局提升到了一個(gè)新的水平。
 
2. 多媒體體驗(yàn)
 
“做多媒體概念已經(jīng)過時(shí)了。這個(gè)詞本身已經(jīng)被如此使用和濫用，以至于它幾乎失去了意義。盡管如此，設(shè)計(jì)師和程序員大軍一直在努力創(chuàng)造越來越引人入勝的多媒體體驗(yàn)。另一個(gè)值得注意的使用 HTML Canvas 構(gòu)建的界面示例是布魯克林音樂家 Jonathan Dagan的社區(qū)驅(qū)動(dòng)DNA項(xiàng)目.j.viewz 以極具視覺效果的背景視頻開場(chǎng)，告訴我們他計(jì)劃如何通過他的個(gè)人實(shí)驗(yàn)（用戶可以下載）和其他合作者上傳的視頻、音樂和反饋來構(gòu)建他的新音樂專輯。
 

 
另一個(gè)絕妙的例子，不僅因?yàn)樗‘?dāng)?shù)囊曈X隱喻，還因?yàn)樗某尸F(xiàn)方式。動(dòng)畫的節(jié)奏和無法滾動(dòng)幾乎迫使用戶喘口氣并適應(yīng)頁面時(shí)間線。在設(shè)計(jì)界面時(shí)，我們通常會(huì)盡一切努力為用戶提供支持。該網(wǎng)站表明，禁用用戶一段時(shí)間可能有時(shí)會(huì)帶來更好的體驗(yàn)。
 
3. 視差效應(yīng)突變
 
視差已經(jīng)演變成許多不同的突變，它們有一個(gè)共同點(diǎn)：設(shè)計(jì)師使用頁面滾動(dòng)或鼠標(biāo)移動(dòng)來為頁面的元素或?qū)傩栽O(shè)置動(dòng)畫。如果你仔細(xì)看，這篇文章中展示的大多數(shù)網(wǎng)站都使用了這個(gè)邏輯。這里有一些額外的例子。
 
滾動(dòng)事件和手繪動(dòng)畫
 
對(duì)舊 CSS sprite 技術(shù)的創(chuàng)造性使用。結(jié)果是對(duì)原本簡(jiǎn)單的公司網(wǎng)站進(jìn)行了引人入勝且獨(dú)特的處理。


 
 
創(chuàng)新的滾動(dòng)
 
 QUO+ 耳機(jī)頁面通過垂直和水平滾動(dòng)帶您進(jìn)入他們網(wǎng)站的瘋狂、迷宮般的旅程——以及一個(gè)有趣的部分，您也可以在其中“滾動(dòng)”他們的產(chǎn)品顏色。


 

 
4. 平面設(shè)計(jì)
 
在過去的三年里，平面設(shè)計(jì)多次被譽(yù)為“王者”。它仍然做得很好，并且會(huì)一直保持下去——尤其是在圖標(biāo)、菜單和插圖等較小的元素中。
 
這些元素不僅看起來不錯(cuò)（比幾年前幾乎覆蓋所有網(wǎng)站的那些光滑的web 2.0 圖標(biāo)要好得多），而且由于圖標(biāo)字體技術(shù)，它們易于擴(kuò)展和管理。icomoon.io是一個(gè)在線服務(wù)的例子，它允許每個(gè)人免費(fèi)輕松地創(chuàng)建自己的圖標(biāo)字體。
 

 
不過值得注意的是，扁平化設(shè)計(jì)并不總是那么扁平化。設(shè)計(jì)師經(jīng)常結(jié)合微妙的漸變、紋理和照片來達(dá)到“哇”的效果。在我們看來，平面設(shè)計(jì)最好的部分不是墨水的平整度，而是它如何為我們打開創(chuàng)造性的視覺隱喻。
 
平面設(shè)計(jì)不是用擬物化技術(shù)模仿物體（記事本圖標(biāo)看起來像現(xiàn)實(shí)生活中的記事本，用紙制成并用皮革裝訂），而是試圖通過合成、吸引人且有趣的視覺效果來傳達(dá)記事本的想法，這種視覺效果在各種尺寸下都能很好地工作.
 
5. 混搭界面
 
對(duì)單頁紙的持續(xù)熱愛帶來了可以通過創(chuàng)造性、用戶友好和視覺吸引力的方式解決的挑戰(zhàn)。挑戰(zhàn)是將大量信息和功能放在一個(gè)頁面上。該頁面必須具有干凈現(xiàn)代的外觀并且易于瀏覽。
 

 
解決方案可能是我們稱之為混搭界面的東西：由許多“層”組成的布局，可根據(jù)請(qǐng)求的功能或內(nèi)容進(jìn)行調(diào)整。實(shí)際上，這根本不是一個(gè)新概念——它是桌面應(yīng)用程序的本質(zhì)——但到目前為止，它在主流互聯(lián)網(wǎng)中還不是很流行。最近，此類接口的使用量呈上升趨勢(shì)，并且它們變得越來越精致和功能強(qiáng)大。
 

 
Necotrans 網(wǎng)站的首屏內(nèi)容似乎很少，全屏照片上覆蓋著一個(gè)單數(shù)的句子。但是右側(cè)的小菜單允許訪問同一屏幕區(qū)域內(nèi)的所有基本功能，為用戶提供站點(diǎn)搜索小部件（在您鍵入時(shí)顯示結(jié)果）、定制的谷歌地圖、新聞小部件和聯(lián)系表格。
 
6. 設(shè)計(jì)師自動(dòng)化
 
如果不花一點(diǎn)時(shí)間提到“網(wǎng)格”，這篇文章就不會(huì)完整——這是最近引起了轟動(dòng)的“不拘一格的設(shè)計(jì)師”提出的一個(gè)吸引人的想法。這是一種用人工智能取代設(shè)計(jì)師和編碼員的嘗試。網(wǎng)頁設(shè)計(jì)師會(huì)變得多余嗎？這還有待觀察。
 

 
目前還不能測(cè)試這個(gè)系統(tǒng)，所以很難判斷它的可用性。他們的網(wǎng)站似乎是其力量的唯一展示。一般來說，它在大多數(shù)分辨率下都表現(xiàn)良好，但創(chuàng)造人造藝術(shù)的嘗試似乎是時(shí)代的標(biāo)志。例如，The Painting Fool創(chuàng)意軟件尚未從藝術(shù)畫廊中清除畫作。
 

 
總結(jié)：
 
這幾個(gè)網(wǎng)頁設(shè)計(jì)趨勢(shì)在過去一年中逐漸流行起來，并可能對(duì)2022年的網(wǎng)站創(chuàng)建方式產(chǎn)生重大影響。 盡管如此，如果我們用一句話來總結(jié)今年，最重要的是要考慮什么時(shí)候設(shè)計(jì)網(wǎng)站將是“內(nèi)容第一”。
 
這個(gè)咒語一直都是真的。但如今，越來越注重網(wǎng)頁設(shè)計(jì)的美學(xué)可以揭示在設(shè)計(jì)前階段所犯的許多錯(cuò)誤——概念、導(dǎo)航流程規(guī)劃、線框圖、文案寫作等。當(dāng)你用新技術(shù)拓寬視野時(shí)，確保您不會(huì)忘記基礎(chǔ)知識(shí)。