一個網(wǎng)站的平均壽命是三年，而網(wǎng)站設(shè)計(jì)元素，比如網(wǎng)站的顏色和排版，更新得更頻繁。這就是為什么跟上網(wǎng)站設(shè)計(jì)的趨勢是如此重要。

這樣做可以讓您在今天對您的網(wǎng)站設(shè)計(jì)做一些小的調(diào)整，這樣它就不會在明天就過時了。本指南將幫助您創(chuàng)建一個2021年的網(wǎng)站設(shè)計(jì)計(jì)劃！

1、亮/暗模式切換

在暗模式和亮模式之間切換的能力是一個您可能不知道您需要的需求特性。用戶喜歡能夠控制網(wǎng)站或應(yīng)用程序的核心視覺基礎(chǔ)，而大多數(shù)手機(jī)都允許這樣做。在您的網(wǎng)站設(shè)計(jì)上添加一個切換按鈕只會增強(qiáng)用戶體驗(yàn)。

記住，在明暗模式下，僅僅從黑到白的切換是不夠的。您的網(wǎng)站設(shè)計(jì)方案應(yīng)該包含這兩種模式的調(diào)色板。

2、現(xiàn)代分屏

分屏設(shè)計(jì)是一種不斷發(fā)展的網(wǎng)站設(shè)計(jì)趨勢，現(xiàn)代分屏的創(chuàng)意之處在于，它提供了更多的交互性，并鼓勵用戶參與。上面的例子是一個很好的看看如何使用這種設(shè)計(jì)美學(xué)與大量的互動元素有視頻和三維元素。

讓這一趨勢發(fā)揮作用的訣竅就是讓它成為您自己的，分屏可以為用戶提供這樣或那樣的交互選擇，或者只是在文本和圖像元素之間提供一點(diǎn)視覺上的平衡。

3、屏幕元素

有時候讓設(shè)計(jì)有趣的是您看不到的東西。

屏幕外元素趨勢通過移動圖形、文本或其他似乎直接移出屏幕的元素來實(shí)現(xiàn)這一想法。移動可以發(fā)生在其上或作為一個結(jié)果的懸?；驖L動交互。

這個趨勢的創(chuàng)意之處在于，它鼓勵網(wǎng)站訪問者真正地去看這個設(shè)計(jì)，并思考他們所看到的和它意味著什么。相反，如果有太多的事情發(fā)生，信息就會丟失。所以這種趨勢最適合簡單易懂的元素。

4、實(shí)驗(yàn)字體

新的，不同的，時髦的，獨(dú)特的字體可以推動一個設(shè)計(jì)到下一個水平。隨著越來越多的項(xiàng)目使用專注于排版的視覺模式，實(shí)驗(yàn)性字體是一個必須擁有的設(shè)計(jì)工具。

實(shí)驗(yàn)性字體的主要特點(diǎn)是它們是不同的，有些甚至可能是排版設(shè)計(jì)者提前發(fā)布的未完成的設(shè)計(jì)，或者是定制的。

您可能會看到您意想不到的形狀和線條，三維字體，動畫或顏色，一種完全不同的感覺。實(shí)驗(yàn)性字體最適合大的主頁，英雄標(biāo)題。它們通常不適合正文或較小的復(fù)制塊。

5、重疊的設(shè)計(jì)元素

每個設(shè)計(jì)元素不必有自己的容器。它們可以重疊。

重疊的設(shè)計(jì)元素創(chuàng)造了深度和維度，也提供了從一個元素到下一個設(shè)計(jì)項(xiàng)目的眼球追蹤路徑。

這種網(wǎng)站設(shè)計(jì)趨勢的關(guān)鍵在于：創(chuàng)建和分層元素時，必須確保所有元素都能保持可讀性，“折疊”時也要保證移動設(shè)備上的可讀性。否則，這一趨勢可能很快就會停滯。

試試：導(dǎo)游卡插件

6、極簡美學(xué)

一個干凈的主頁可以幫助用戶探索設(shè)計(jì)的其余部分。極簡美學(xué)，尤其是主頁，是一個主要的趨勢風(fēng)格。

選項(xiàng)范圍從帶有文本的平面背景，如上面的例子，到幾乎沒有導(dǎo)航而只有標(biāo)題的照片或視頻主頁。

這些超級最小的美學(xué)幾乎剝奪了所有的設(shè)計(jì)。時髦的外觀是流線型的和干凈的，但您是在冒險與如此少的互動選擇。

嘗試一下：Vinero非常干凈和最小的組合WordPress主題

7、排版以填充和輪廓為特色

填充和輪廓排版的組合（通常是相同的字體）是完全有效的。

這一趨勢的特點(diǎn)是排版組合具有或不具有交互特性。例如，上面的網(wǎng)站使用填充文本作為懸停狀態(tài)，提示用戶該元素是可點(diǎn)擊的。輪廓狀態(tài)適用于非懸停元素。

結(jié)果非常有趣，創(chuàng)造了一個有趣的排版效果，您可以用很多不同的方式使用。此外，它使字體配對輕而易舉，因?yàn)槟褂靡环N字體的兩種不同的方式。

試試：Visia Duo（自然和輪廓）字體

8、有趣的滾動模式

滾動圖案越有趣，就會有越多的用戶繼續(xù)瀏覽設(shè)計(jì)和內(nèi)容。

現(xiàn)在的趨勢不是效果，而是使用網(wǎng)格和整體設(shè)計(jì)來推動用戶瀏覽內(nèi)容。上面的示例完美地展示了這一點(diǎn)，顯示了在屏幕上水平和垂直移動的圖像網(wǎng)格。您一次只能完全看到一張圖片，把重點(diǎn)放在每一張作品上。

嘗試一下：平滑滾動的WordPress插件

9、如此多的襯線

曾經(jīng)在網(wǎng)絡(luò)上被認(rèn)為是“不可讀”的襯線字體正在到處涌現(xiàn)。從短，簡單的serifs到精心設(shè)計(jì)的更長的筆畫和尾巴，這種類型的設(shè)計(jì)是為了閱讀。

促成這一趨勢的最大因素可能是高分辨率屏幕（以及它們在市場上的主導(dǎo)地位）。沒有模糊或扭曲與這些字體。

幾乎任何風(fēng)格的Serifs可以工作漂亮，包括現(xiàn)代和過渡風(fēng)格的板。序列化適用于顯示文本和正文復(fù)制。

10、夸張的空白

簡約風(fēng)格在網(wǎng)站設(shè)計(jì)中使用夸張的留白變得更加簡約。

留白如此受歡迎的一個原因是它可以幫助把注意力集中到設(shè)計(jì)的某個部分——有東西占據(jù)的空間，而不是什么都沒有。

空白也有一個美麗的，經(jīng)典的感覺，很容易調(diào)整為任何數(shù)量的項(xiàng)目。

11、微型動畫

多虧了Instagram故事上那些酷炫的小動圖，網(wǎng)站設(shè)計(jì)才有了更多用戶風(fēng)格的動圖形式的微動畫。

即使是您意想不到的網(wǎng)站，比如上面的電子商務(wù)設(shè)計(jì)，也在使用這種風(fēng)格來吸引用戶的注意。它可以是任何東西，從屏幕上彈出的小圖像到移動的文本元素。

嘗試它：簡單的文本旋轉(zhuǎn)器WordPress插件

12、視頻的一切

如果您還沒有在網(wǎng)站設(shè)計(jì)項(xiàng)目中使用視頻，今年很可能會出現(xiàn)。視頻內(nèi)容非常龐大。而且它正變得越來越容易獲得。

從移動背景（上圖），視頻故事（驅(qū)動設(shè)計(jì)的內(nèi)容）來看，這種講故事的方式是未來的潮流。用戶喜歡它。這是不可否認(rèn)的。正因?yàn)槿绱耍粫絹碓绞軞g迎。

嘗試它：照片/視頻幻燈片模板

13、氣泡和斑點(diǎn)形狀

泡泡、斑點(diǎn)和其他“有機(jī)”形狀正在取代過去幾年主導(dǎo)設(shè)計(jì)的幾何風(fēng)格。這種變形部分是很酷的動畫，部分是感覺。（項(xiàng)目有一些松散的元素。）

無論有沒有動畫，這些形狀在各種大小、配置和幾乎每種可能的配色方案中都同樣有效。

上面的Mawla可能是2019年初使用這種趨勢的例子，在斑點(diǎn)形狀中，所有的特征是用不同大小的元素分層漸變著色。

14、AI的提示

人工智能輔助和聊天機(jī)器人越來越普遍，您可能會忽略它們。但它們正變得越來越聰明，今年將比以往任何時候都更普遍。

其中一些機(jī)器人很明顯，比如上面的這個。還有一些是“真人”的形象，還有一些是卡通風(fēng)格的。通常的主題是有人（或東西）在任何時候都在幫助用戶。

使用這種人工智能技術(shù)的網(wǎng)站越多，就會有越多的用戶期望在瀏覽時能立即得到問題的答案。

15、流線型的標(biāo)志

簡單、流線型的標(biāo)志設(shè)計(jì)正在取代過去作為全屏品牌元素的一些更復(fù)雜的選項(xiàng)。也許是因?yàn)槠渌聊辉刈兊迷絹碓綇?fù)雜，也許只是一時的流行。

不管怎樣，簡單的標(biāo)識隨處可見。

這些標(biāo)志的優(yōu)點(diǎn)是簡單的類型和圖標(biāo)元素很容易看一眼。需要注意的是，它們看起來都有相似的外觀和感覺。

16、大按鈕

為了方便手機(jī)用戶，所有版本的網(wǎng)站都默認(rèn)使用大按鈕，以方便用戶使用。這包括從呼吁到行動到導(dǎo)航的一切。

所有這些都必須易于用拇指或手指敲擊，而不會與錯誤的元素交互。

這些按鈕通常有不同的顏色或卡片樣式，這樣就可以很容易地看到應(yīng)該發(fā)生什么動作，以及什么元素會通過觸摸做一些事情。

注意在上面的例子中，每個盒子或卡片都是一個巨大的按鈕。而在移動版本中，每張卡都是一個垂直的堆棧。

試試它：谷歌AMP移動模板

結(jié)論

為了保持新鮮感，您多久會對網(wǎng)站設(shè)計(jì)做一次小改動？雖然這可能是一個令人生畏的想法，但一直做一些小的改變實(shí)際上會成為您日常生活的一部分，有助于保持設(shè)計(jì)的新鮮感。（它還能讓您很快不覺得無聊。）

使用設(shè)計(jì)工具（如本文介紹的工具）加速這個過程，這樣您就可以毫不擔(dān)心地緊跟潮流！