一個(gè)網(wǎng)站的平均使用周期是三年。 設(shè)計(jì)元素（例如顏色和版式）通常會(huì)比此更新得更頻繁。 這就是你需要及時(shí)跟上網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)如此重要的原因。

關(guān)注當(dāng)下流行的設(shè)計(jì)趨勢(shì)可以讓你及時(shí)對(duì)設(shè)計(jì)進(jìn)行一些細(xì)微調(diào)整，以便讓你的網(wǎng)站設(shè)計(jì)不會(huì)那么快過(guò)時(shí)。 那么，對(duì)于即將到來(lái)的2020年，你需要關(guān)注哪些網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)呢？

今天，我們將來(lái)討論2020年值得你關(guān)注的15個(gè)設(shè)計(jì)趨勢(shì)，希望對(duì)你能夠有所幫助和啟發(fā)！

1.重疊的設(shè)計(jì)元素（Overlapping Design Elements）

每個(gè)設(shè)計(jì)元素都不必具有自己的容器。 它們實(shí)際上可以重疊。

重疊的設(shè)計(jì)元素可以在視覺(jué)上創(chuàng)建深度和對(duì)比，并在設(shè)計(jì)項(xiàng)目中提供從一個(gè)元素到下一個(gè)元素的過(guò)渡和視覺(jué)流。

你必須以保持所有內(nèi)容可讀性和“折疊”性的方式創(chuàng)建元素并對(duì)其進(jìn)行分層，以保持在移動(dòng)設(shè)備上的可讀性。 否則，這種趨勢(shì)將對(duì)你的設(shè)計(jì)造成負(fù)面的影響。

2.超極簡(jiǎn)美學(xué)（Super Minimal Aesthetics）

一個(gè)干凈的主頁(yè)可以幫助驅(qū)使用戶(hù)探索設(shè)計(jì)的其余部分。 超極簡(jiǎn)主義的美學(xué)（尤其是在首頁(yè)上的運(yùn)用）是一種流行趨勢(shì)。

從帶有文本的簡(jiǎn)單的背景（例如上面的示例）到幾乎沒(méi)有導(dǎo)航而只有標(biāo)題的照片或視頻首頁(yè)，可運(yùn)用的范圍以及方式更多取決于你的想法。

這些超級(jí)極簡(jiǎn)主義的美感幾乎消除了設(shè)計(jì)中的所有內(nèi)容。 時(shí)髦的外觀既簡(jiǎn)潔又干凈，但是你可能會(huì)面臨因?yàn)槿鄙倩?dòng)效果和交互體驗(yàn)而產(chǎn)生的風(fēng)險(xiǎn)。

3.3D互動(dòng)（3D Interaction）

你可能會(huì)以為上面的網(wǎng)站設(shè)計(jì)趨勢(shì)是極簡(jiǎn)了交互式樂(lè)高玩具的體驗(yàn)。

這些設(shè)計(jì)采用交互式元素，這些元素使用三維形狀或游戲化來(lái)使你更深入地參與內(nèi)容。

這是讓用戶(hù)長(zhǎng)時(shí)間停留在網(wǎng)頁(yè)設(shè)計(jì)上并給人留下持久印象的好方法。 通過(guò)自定義3D插圖充分利用趨勢(shì)，或與作品混合搭配以為你的項(xiàng)目營(yíng)造恰到好處的感覺(jué)。

4.具有填充和輪廓的字體（Typography Featuring Fills and Outlines）

使用填充和帶有輪廓樣式的字體組合（通常使用相同的字體）是完全有效的。

例如，上面的網(wǎng)站使用填充文本作為懸停狀態(tài)來(lái)提示用戶(hù)該元素是可單擊的。 輪廓的樣式則使用于非懸停/默認(rèn)文本元素。

結(jié)果非常有趣，創(chuàng)造了一種有趣的文本效果，你可以使用多種不同的組合方式。 另外，由于你以?xún)煞N不同的方式使用同一種字體，因此使字體配對(duì)變得輕而易舉。

5.有趣的滾動(dòng)模式（Interesting Scroll Patterns）

滾動(dòng)模式越有趣，越有更多的用戶(hù)可能會(huì)繼續(xù)瀏覽設(shè)計(jì)和內(nèi)容。

趨勢(shì)不再是效果，而是更多地使用網(wǎng)格和整體設(shè)計(jì)來(lái)推動(dòng)用戶(hù)瀏覽內(nèi)容。 上面的示例通過(guò)在屏幕上水平和垂直移動(dòng)的圖像網(wǎng)格完美地展示了這一點(diǎn)。 你一次只能真正完全看到一張圖像，這樣可以把重點(diǎn)放在每個(gè)單獨(dú)的作品上。

6.襯線(xiàn)字體的頻繁使用（So Many Serifs）

襯線(xiàn)字體在平面印刷項(xiàng)目上曾經(jīng)被認(rèn)為是“不可讀的”，如今卻隨處可見(jiàn)。 從短而簡(jiǎn)單的襯線(xiàn)，到帶有較長(zhǎng)筆觸和尾巴的精美字樣，這種類(lèi)型的字體現(xiàn)在都易于閱讀。

導(dǎo)致這種趨勢(shì)的最大因素可能是高分辨率屏幕的普遍運(yùn)用（以及它們?cè)谑袌?chǎng)上的主導(dǎo)地位），從而保證這些字體不會(huì)模糊或失真。

幾乎任何樣式的襯線(xiàn)字體都能很好地工作，包括從現(xiàn)代樣式到過(guò)渡樣式。 襯線(xiàn)適用于標(biāo)題性文本以及正文。

7.夸張的空白空間（Exaggerated White Space）

夸張的空間使簡(jiǎn)約的風(fēng)格變得更加簡(jiǎn)約。

空間如此受歡迎的原因之一是，它可以幫助將焦點(diǎn)集中在設(shè)計(jì)的特定部分上。

空白區(qū)域還具有美麗，經(jīng)典的感覺(jué)，可以輕松地針對(duì)任何項(xiàng)目進(jìn)行調(diào)整。

8.微動(dòng)畫(huà)（Micro-Animations）

由于Instagram普遍使用這些酷炫的小gif圖片，為gif形式的微型動(dòng)畫(huà)在網(wǎng)站設(shè)計(jì)上的使用提供了很好的借鑒和應(yīng)用基礎(chǔ)。

甚至你意想不到的網(wǎng)站（例如上面的電子商務(wù)類(lèi)型）也使用這種樣式來(lái)吸引用戶(hù)的注意力。 它可以是任何東西，從屏幕上彈出的微小圖像到移動(dòng)的文本元素。

9.視頻的廣泛使用（Video Everything）

如果你還沒(méi)有在網(wǎng)頁(yè)設(shè)計(jì)項(xiàng)目中使用視頻，那么今年可能你需要大膽嘗試。 視頻內(nèi)容可以提供大量有趣的信息，而且它變得越來(lái)越容易訪問(wèn)。

從背景到內(nèi)容元素，視頻是驅(qū)動(dòng)設(shè)計(jì)的重要內(nèi)容，這種敘事形式是未來(lái)的潮流。 用戶(hù)喜歡它，無(wú)可否認(rèn)。 出于這個(gè)原因，它只會(huì)越來(lái)越受歡迎。

10.氣泡及斑點(diǎn)元素（Bubbles and Blob Shapes）

氣泡，斑點(diǎn)和其他“隨機(jī)”形狀正在取代過(guò)去幾年中主導(dǎo)設(shè)計(jì)的主流幾何樣式。 這種形狀變化既酷又有趣。

無(wú)論有無(wú)動(dòng)畫(huà)，以及各種尺寸，配置以及幾乎所有的配色方案，這些形狀都可以很好地工作。

上面的Mawla可能會(huì)例證這種趨勢(shì)在2019年初的使用情況，因?yàn)榘唿c(diǎn)形狀均具有漸變著色，并具有不同大小的元素層。

11.3D插圖（Three-Dimensional Illustrations）

扁平設(shè)計(jì)在平面以及網(wǎng)站設(shè)計(jì)中雖然仍在使用，但是相較之前已經(jīng)減少了一些熱度。 3D插畫(huà)的崛起變成一種趨勢(shì)的必然，深度和逼真度是插圖的一個(gè)優(yōu)勢(shì)部分（其中有些甚至是動(dòng)畫(huà)）。

這種樣式在試圖代表數(shù)字世界與現(xiàn)實(shí)世界之間聯(lián)系的網(wǎng)站上最常見(jiàn)，這種樣式吸引人且輕巧，以至于越來(lái)越多的公司開(kāi)始接受并大量使用這種樣式的作品和元素。

這種趨勢(shì)設(shè)計(jì)元素的另一個(gè)促成因素是虛擬現(xiàn)實(shí)。 由于許多界面都使用3D插圖，因此將它們部署到其他項(xiàng)目中是開(kāi)發(fā)這些項(xiàng)目的第一步。

12.對(duì)稱(chēng)的弱化（Less Symmetry）

網(wǎng)站設(shè)計(jì)不必在完美的網(wǎng)格上或使用完美的對(duì)稱(chēng)。 更多的人正在打破這種鏡像設(shè)計(jì)方案。

不對(duì)稱(chēng)在實(shí)際上可以驅(qū)動(dòng)設(shè)計(jì)中的用戶(hù)查看并參與不同的元素。 使用此定向流可將焦點(diǎn)引導(dǎo)到某些內(nèi)容上。

使用文本和顏色（例如上例）進(jìn)行處理，或使用偏離“中心”的圖像和空間（例如下圖）。

13.AI提示（Hints of AI）

人工智能幫助和聊天機(jī)器人正變得越來(lái)越普遍，以至于你可能會(huì)忽略它們。 但是他們變得越來(lái)越聰明，并且今年將比以往更普遍。

其中一些機(jī)器人很明顯，例如上面的機(jī)器人。 其他人則是“真實(shí)人物”的形象，但是卡通形象的趨勢(shì)正在慢慢流行。 共同的目的是隨時(shí)隨地為用戶(hù)提供幫助。

隨著AI技術(shù)的普及和成熟，使用該AI技術(shù)的網(wǎng)站也越來(lái)越多。

14.精簡(jiǎn)的徽標(biāo)（Streamlined Logos）

簡(jiǎn)單，流線(xiàn)型的徽標(biāo)設(shè)計(jì)正在取代過(guò)去的一些更復(fù)雜的選項(xiàng)。 可能是因?yàn)槠渌聊辉刈兊迷絹?lái)越復(fù)雜，或者僅僅是一種時(shí)尚而已。

無(wú)論哪種方式，到處都有簡(jiǎn)單的徽標(biāo)。

這些徽標(biāo)的優(yōu)點(diǎn)在于，簡(jiǎn)單的類(lèi)型和圖標(biāo)元素一目了然。 另一個(gè)可能需要考慮的問(wèn)題是，它們似乎都具有相似的外觀。

15.大按鈕（Big Buttons）

為了方便移動(dòng)用戶(hù)使用，對(duì)使用拇指進(jìn)行操作的友好樣式的大按鈕也是所有版本網(wǎng)站的默認(rèn)按鈕。 這包括從行動(dòng)按鈕到操作再到導(dǎo)航的所有內(nèi)容。

你需要主要這些按鈕元素能夠在移動(dòng)設(shè)備上快速響應(yīng)，而又不與錯(cuò)誤的元素交互。

這些按鈕通常采用不同的顏色或卡片樣式，以使你輕松查看應(yīng)該執(zhí)行的操作以及哪些元素可以輕觸即可完成操作。

請(qǐng)注意，在上面的示例中，每個(gè)框或卡片區(qū)都是一個(gè)巨大的按鈕。 在移動(dòng)版本中，每張卡都垂直堆疊。

總結(jié)

你多久對(duì)網(wǎng)站設(shè)計(jì)進(jìn)行一些小的更改以保持最新?tīng)顟B(tài)？ 盡管這可能是一個(gè)令人生畏的想法，但始終進(jìn)行小的更改實(shí)際上需要成為你日常工作的一部分，可以幫助保持設(shè)計(jì)的新鮮感。

使用設(shè)計(jì)工具加快過(guò)程，以便你不必?fù)?dān)心就可以保持潮流！

----圖文來(lái)自：design shack 

----由深圳網(wǎng)站建設(shè)公司-Clh翻譯編輯整理，為您提供更多有關(guān)深圳網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)及其他互聯(lián)網(wǎng)應(yīng)用服務(wù)