雖然夏季似乎是趨勢(shì)放緩的時(shí)候,但網(wǎng)站設(shè)計(jì)仍然在發(fā)生新的變化。通常這是設(shè)計(jì)演變的季節(jié),而不是對(duì)標(biāo)準(zhǔn)設(shè)計(jì)實(shí)踐的完全徹底改變。新的設(shè)計(jì)元素和交互方式不斷涌現(xiàn),使網(wǎng)站體驗(yàn)更加豐富和吸引人。
暗色調(diào)搭配鮮艷文字
深色背景是一種永遠(yuǎn)不會(huì)過(guò)時(shí)的設(shè)計(jì)趨勢(shì)。隨著潛移默化的改變,文本顏色也從淺色或白色變得更加明亮。這樣可以在設(shè)計(jì)中建立更愉快的情感連接,減少了過(guò)于冷酷的感覺(jué)。
在完全黑暗的背景下,明亮的顏色幾乎可以是任何顏色,高對(duì)比度的深淺搭配確保了可讀性。挑戰(zhàn)在于次要元素較淺,可能導(dǎo)致閱讀時(shí)的困擾。
"9×8 項(xiàng)目" 使用了一些最明亮的顏色-霓虹黃,在黑暗的區(qū)域,即使尺寸較小,文本仍然易讀。
丹·伊克巴爾在他的作品集設(shè)計(jì)中使用了深色背景搭配明亮的橙色文本。所有內(nèi)容都很容易閱讀,并且顏色很吸引人。背景中旋轉(zhuǎn)的文本是一個(gè)不錯(cuò)的額外裝飾。
最后,Keelvar展示了明亮的色彩選擇也可以出人意料。明亮的紫色可能不是你的首選,但它在這個(gè)設(shè)計(jì)中很好地將元素融合在一起。
圓角卡片元素
卡片元素不斷演變,并且這種網(wǎng)站設(shè)計(jì)趨勢(shì)也不例外,它采用了所有帶有弧形邊緣的卡片樣式。
這些卡片的好處是它們可以與任何其他設(shè)計(jì)風(fēng)格結(jié)合使用。以下示例展示了它們?nèi)绾闻c白色背景和圖像內(nèi)容相融合。
弧形邊緣的卡片可以是平面的,也可以由于陰影而具有維度或深度,還可以包含動(dòng)畫(huà)或懸停效果。內(nèi)容幾乎可以是任何東西,從圖像到文本到視頻,甚至是它們的組合。
以下是三個(gè)不同網(wǎng)站的示例:
GET的卡片樣式最簡(jiǎn)單,采用了帶有弧形邊緣的超大豎直容器。每個(gè)卡片中都有文本和CTA元素。這些卡片在首頁(yè)上發(fā)揮了作用,為用戶提供了視覺(jué)上令人驚嘆的焦點(diǎn),并帶來(lái)互動(dòng)體驗(yàn)。
Same Same Studio堆疊了兩行帶有豐富顏色的小卡片。每個(gè)卡片都是一個(gè)帶有懸停狀態(tài)的CTA按鈕。這些卡片的獨(dú)特之處在于其中的內(nèi)容是多樣的,包括照片、動(dòng)畫(huà)、視頻和靜態(tài)畫(huà)面。
Zach Hayes在他的作品集網(wǎng)站上將卡片嵌套在卡片中。每個(gè)元素都使用相同的曲線邊緣,明亮的白色美學(xué)令人愉悅。卡片上的深度元素和排版元素為該項(xiàng)目增添了極簡(jiǎn)主義的感覺(jué)。
鋸齒形對(duì)齊
這些設(shè)計(jì)可能會(huì)讓你問(wèn),柵格在哪里?圖像甚至文本的鋸齒形狀可以創(chuàng)建出平衡或失衡的感覺(jué),這取決于使用方式。不管哪種版本,都能構(gòu)建一個(gè)適用于主頁(yè)或整體設(shè)計(jì)的視覺(jué)主題。
斜線對(duì)齊可以是垂直的、水平的,或包含階梯式元素。所有這些樣式都有一種離開(kāi)常規(guī)柵格的感覺(jué),但大部分情況下,它們?nèi)匀皇窃跂鸥裆希皇遣皇悄泐A(yù)期的那種柵格。
為了有效地建立這種模式,你需要一些元素。另一方面,你不希望在斜線對(duì)齊中有太多元素,否則會(huì)讓人感到不知所措。理想情況下,需要3到7個(gè)元素。
Mocha Café and Bar使用構(gòu)成其商業(yè)名稱的字母進(jìn)行了鋸齒形狀的排列。文本有兩個(gè)水平基線,以保持排版的有序。
瑞士豪華酒店正在垂直和水平方向上采用這種技巧,這表明在響應(yīng)式設(shè)計(jì)方面可能會(huì)帶來(lái)挑戰(zhàn)。這種設(shè)計(jì)在較大的屏幕上效果最佳,閱讀體驗(yàn)也最好。
Oaks Lane采用了一種圖片的階梯式排列方式,從主頁(yè)一直延伸到整個(gè)設(shè)計(jì)的滾動(dòng)部分。階梯有時(shí)出現(xiàn)在圖片的頂部行,也可用于圖片框的下方。這種使用蜿蜒樣式的方法非常優(yōu)雅,但需要高度意識(shí)到圖片選擇的有效性。
在考慮如何使用或融入設(shè)計(jì)趨勢(shì)時(shí),有時(shí)候細(xì)微的變化反而是最好且最實(shí)用的選擇。將這些變化看作是你已有設(shè)計(jì)方案的演進(jìn)過(guò)程。
經(jīng)過(guò)幾次設(shè)計(jì)改進(jìn)后,就能擁有一個(gè)全新的設(shè)計(jì)方案,而無(wú)需進(jìn)行重大的改動(dòng)。
精選文章:
響應(yīng)式設(shè)計(jì):跨設(shè)備打造無(wú)縫和個(gè)性化的用戶體驗(yàn)
百事可樂(lè)登上各大音樂(lè)節(jié),包裝一個(gè)比一個(gè)酷炫~