我們周圍世界的狀態(tài)可以極大地影響網(wǎng)站設(shè)計(jì)。從與設(shè)計(jì)的感覺相關(guān)的情感變化到要傳遞的信息和數(shù)據(jù)，全球COVID-19大流行的影響正在進(jìn)入項(xiàng)目(有意或無意)。

這里是本月的設(shè)計(jì)趨勢。

1. “不平衡地”使用空間

空間可以對設(shè)計(jì)項(xiàng)目產(chǎn)生巨大的影響。它會(huì)影響視覺流，并能推動(dòng)用戶參與。

最近，許多設(shè)計(jì)都采用了一種更加平衡和對稱的方式來使用空間，但隨著更多網(wǎng)站以“不平衡”使用空間為特點(diǎn)，這種情況再次發(fā)生了改變。(這很不錯(cuò)。)

我們稱這種趨勢為“不平衡”，因?yàn)殚_放空間可能使用或不使用平衡塊來保持設(shè)計(jì)的不平衡。有很多不同的方法可以做到這一點(diǎn):使用空白，在圖像中，使用圖層和元素如何堆疊，以及使用模式。這可能是一個(gè)相當(dāng)具有挑戰(zhàn)性的技術(shù)，因?yàn)槿绻恍⌒模憫?yīng)斷點(diǎn)可能會(huì)極大地改變空間的顯示方式。

每個(gè)項(xiàng)目都以一種不同但同樣簡潔的方式處理“不平衡”的空間。

育空1000以兩種不同的方式創(chuàng)造了兩個(gè)不同的不平衡空間:

在屏幕的左側(cè)具有背景空白，圖像不擴(kuò)展到此空白，并且包含文本層。

在圖像本身與一個(gè)獨(dú)特的形狀和大量的開放空間的水上。

這兩個(gè)元素單獨(dú)出現(xiàn)時(shí)是不平衡的，但結(jié)合了左邊的開放空間和圖像中的開放空間，將視線拉回到設(shè)計(jì)的中間內(nèi)容區(qū)域。

The Art of Tea網(wǎng)站在圖片中運(yùn)用了空間，堆疊的很好，在不平衡的空間中運(yùn)用了形狀來定位物體。請注意圖像左側(cè)與右側(cè)的黯淡對比是如何壓縮的。甚至文本也只擴(kuò)展了一半。

這種審美觀有助于將你的眼睛首先拉過屏幕來閱讀文本，然后向下拉過滾動(dòng)條。

Growcase可以作為空間使用本身的一個(gè)案例研究，但是要關(guān)注屏幕的頂部。品牌身份延伸了三分之一，除了一個(gè)小型的社交媒體/組合鏈接三重奏外，沒有其他的東西來滿足它。

下面也有很多空間，每個(gè)投資組合塊都有負(fù)空間。無論您是否準(zhǔn)備好移動(dòng)，黑色區(qū)域都將帶領(lǐng)您完成設(shè)計(jì)。

2. 新的圖像滑塊概念

很久以前，網(wǎng)站設(shè)計(jì)者就已經(jīng)宣布滑動(dòng)條已經(jīng)死亡。

他們回來。

但是它們看起來很不一樣，而且更有趣。

在滑塊設(shè)計(jì)趨勢是使用滑動(dòng)元素與有趣的動(dòng)畫和形狀，不像滑塊。有趣的是它們之間的共同點(diǎn)——盡管它們看起來非常不同。

每個(gè)滑塊的例子:

使用一個(gè)圓形指針，當(dāng)您將鼠標(biāo)懸停在單擊元素上時(shí)，該指針會(huì)展開

視覺線索，如導(dǎo)航箭頭，是存在的

每個(gè)站點(diǎn)都具有某種類型的組合內(nèi)容

滑動(dòng)條圖像可以獨(dú)立顯示，不會(huì)被文字或其他元素覆蓋

此外，每個(gè)示例都有一些自己的有趣技巧。

Clarity使用一個(gè)基于鼠標(biāo)位置和所有圖像自動(dòng)移動(dòng)的滑塊，顯示在圓形框架內(nèi)。

修正概念也使用自動(dòng)滾動(dòng)滑塊與圖像在對角線的方式移動(dòng)。您還可以使用箭頭自己向前和向后滾動(dòng)。

Prezman只預(yù)覽了主頁上的滑塊，但是點(diǎn)擊它，它就會(huì)擴(kuò)展到全屏顯示各種具有簡單但整潔的動(dòng)畫的作品集。

3.冠狀病毒數(shù)據(jù)

在網(wǎng)站設(shè)計(jì)上，關(guān)于冠狀病毒最明顯的標(biāo)志就是包含病毒信息的網(wǎng)站數(shù)量。流行趨勢似乎是提供不同類型的COVID-19數(shù)據(jù)可視化的網(wǎng)站設(shè)計(jì)。

谷歌有一個(gè)頁面(這在真正的谷歌表單中很簡單)，但是這些示例將數(shù)據(jù)帶到新的可視級別。數(shù)據(jù)可視化在呈現(xiàn)的數(shù)據(jù)(本地?cái)?shù)據(jù)和全球數(shù)據(jù))以及信息的組合方式上各不相同。

雖然這些站點(diǎn)都有不同的目的，但是它們提供了如何以可視格式處理大量數(shù)據(jù)的好例子。

現(xiàn)在冠狀病毒獲取各種數(shù)據(jù)，并使用虛擬球罐來顯示三個(gè)數(shù)據(jù)點(diǎn)之間的比例關(guān)系。這個(gè)設(shè)計(jì)的真正巧妙之處在于使用動(dòng)畫和標(biāo)簽來讓數(shù)據(jù)更容易理解。

COVID-19全球數(shù)據(jù)儀表板以各種圖表類型(條形圖、圓形圖等)分解不同的信息和數(shù)據(jù)點(diǎn)。使用不同的可視化可以使那些以不同方式理解和理解數(shù)據(jù)的人更容易理解信息。

COVID-19社區(qū)脆弱性指數(shù)地圖使用一個(gè)地圖系統(tǒng)來顯示可能發(fā)生疫情的地方。使用地圖數(shù)據(jù)可以是一種更容易理解的可視化復(fù)雜數(shù)據(jù)的方法。

結(jié)論

雖然這兩種網(wǎng)站設(shè)計(jì)趨勢與冠狀病毒無關(guān)，但我們將開始看到更多受這一全球健康問題影響的事情。請注意，設(shè)計(jì)很可能會(huì)開始轉(zhuǎn)向人數(shù)較少的元素，口罩的使用和圖像將會(huì)更加主流，甚至顏色可能會(huì)褪色到更柔和的色調(diào)。我們已經(jīng)看到了對設(shè)計(jì)的影響，它可能會(huì)繼續(xù)影響趨勢。