與時(shí)尚一樣，網(wǎng)頁設(shè)計(jì)也有其趨勢(shì)，并且每年都在變化。我們將趨勢(shì)分為兩個(gè)方面：用戶界面（UI）和用戶體驗(yàn)（UX）。在這里，您會(huì)發(fā)現(xiàn)將在2020年蓬勃發(fā)展的界面設(shè)計(jì)趨勢(shì)和視覺樣式。

與時(shí)尚一樣，網(wǎng)頁設(shè)計(jì)也有其趨勢(shì)，并且每年都在變化。這是必要的 ，以保持一天就目前的設(shè)計(jì)，提供了高亮的人群，并吸引正在越來越多地要求觀眾。

我們將趨勢(shì)分為兩個(gè)方面：用戶界面（UI）和用戶體驗(yàn)（UX）。今天，我們從第一個(gè)開始。在這里，您會(huì)發(fā)現(xiàn)將在2020年蓬勃發(fā)展的界面設(shè)計(jì)趨勢(shì)和視覺樣式。

巨人主義

我們將在圖像和視頻以及字體中看到它。最頻繁的是使用占據(jù)整個(gè)屏幕（全屏）的視頻，尤其是在首頁中。這是影響用戶的一個(gè)很好的方法。

這也會(huì)影響字體。我們將看到粗體的強(qiáng)壯字體，它們占據(jù)了屏幕的很大一部分。信息很明確，是主角。在許多情況下，甚至標(biāo)題和標(biāo)題也會(huì)踩在照片上。因此，別忘了Arial 12px，因?yàn)榫奕藖砹耍?/p>

暗模式

深色網(wǎng)頁設(shè)計(jì)不僅使網(wǎng)站更現(xiàn)代，而且令人賞心悅目，并使顏色和設(shè)計(jì)元素更加突出。

有時(shí)，最令人印象深刻的網(wǎng)頁設(shè)計(jì)趨勢(shì)具有實(shí)用的原則。深色主題更適合OLED屏幕，因?yàn)樗鼈兛梢怨?jié)省能源并延長屏幕壽命，但是該實(shí)用程序并不能阻止它們看起來不錯(cuò)。深色背景可提高其他強(qiáng)調(diào)色的可見度，從而實(shí)現(xiàn)真正的動(dòng)態(tài)設(shè)計(jì)。

此外，深色模式設(shè)計(jì)的美學(xué)也與其他2020年流行的設(shè)計(jì)趨勢(shì)完全吻合，這些趨勢(shì)包括深色和不斷變化的配色方案，明亮的霓虹燈以及深色和反烏托邦風(fēng)格的未來派風(fēng)格。

應(yīng)當(dāng)指出，到目前為止，暗模式與優(yōu)質(zhì)產(chǎn)品有關(guān)。但是現(xiàn)在，我們不再將這些顏色與這種高質(zhì)量的產(chǎn)品相關(guān)聯(lián)，因?yàn)樗言诟嗉夹g(shù)和現(xiàn)代環(huán)境中使用。

非常鮮艷的色彩

今年，我們將看到勇敢的色彩組合，這些色彩被戰(zhàn)略性地用于使設(shè)計(jì)跳出屏幕。網(wǎng)頁設(shè)計(jì)正變得越來越大膽，它使用在深色和高度飽和的顏色中發(fā)光的霓虹燈以及更暗和柔和的陰影來提供更加明亮的感覺。

調(diào)色板的顏色多更鮮艷，明亮，柔和的色調(diào)被留下來歡迎色彩的爆炸。但是，請(qǐng)始終使用頭部且不要濫用它，以免使用戶感到飽和。

3D效果，柔和陰影，圖層和浮動(dòng)元素

3D圖像始終對(duì)我們所有人都希望在我們網(wǎng)站上的用戶產(chǎn)生影響。阻止這一趨勢(shì)的是技術(shù)和價(jià)格。逐漸地，技術(shù)開始出現(xiàn)，您可以在沒有NASA級(jí)別的團(tuán)隊(duì)的情況下進(jìn)行3D設(shè)計(jì)，從而為越來越多的設(shè)計(jì)師打開了大門。

在虛擬現(xiàn)實(shí)變得更加常規(guī)和有利可圖之前，通常占據(jù)整個(gè)屏幕的超逼真的3D是創(chuàng)造沉浸式體驗(yàn)的最佳方法。這不僅是圖像的優(yōu)勢(shì)，而且是用戶體驗(yàn)的優(yōu)勢(shì)：交互式 3D 設(shè)計(jì)鼓勵(lì)用戶停留更長的時(shí)間。

隨著2020年的發(fā)展，預(yù)計(jì)將會(huì)出現(xiàn)更多沉浸式3D Web設(shè)計(jì)，以吸引用戶并在視覺上打破數(shù)字空間與現(xiàn)實(shí)之間的界限。

如果您喜歡3D效果并在網(wǎng)絡(luò)上創(chuàng)建深度，但是以更弱化的方式，則可以選擇使用陰影。柔和的陰影和浮動(dòng)元素增加了興趣和深度，并賦予了其“ 3D Lite”外觀。而且它不必僅在圖形中使用。您也可以在文字和照片中使用此效果。

將材質(zhì)設(shè)計(jì)的原理進(jìn)一步發(fā)展，設(shè)計(jì)師可以為2D設(shè)計(jì)添加更多的動(dòng)態(tài)感，使柔和的陰影和圖層元素彼此疊置以創(chuàng)建更大的深度。

這些效果使設(shè)計(jì)具有輕巧的感覺，就像元素在彼此之上漂浮一樣，與經(jīng)典的無法穿透的平面設(shè)計(jì)形成了鮮明的對(duì)比，在經(jīng)典的無法穿透的平面設(shè)計(jì)中，這些層看起來很平坦。

動(dòng)畫和微交互

今年是動(dòng)畫，微交互和動(dòng)畫gif的一年。我們將看到出現(xiàn)的塊，移動(dòng)的標(biāo)題，動(dòng)態(tài)插圖，頁面之間的過渡，著名的視差效果或?qū)⑹髽?biāo)懸停在上面時(shí)的效果。所有這些元素為頁面帶來動(dòng)感，為品牌增加價(jià)值和個(gè)性。

原文作者： Eloy Urarte

原文地址：https://medium.com/@eloyurarte/5-tendencias-de-ui-para-2020-c1004e15970b

譯者： 南設(shè)；譯者公眾號(hào)：南設(shè)（ID：shemenglianmeng）

本文由 @南設(shè) 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議