網(wǎng)頁(yè)設(shè)計(jì)行業(yè)發(fā)展迅速，我們不斷看到新的設(shè)計(jì)和產(chǎn)品。為了展示他們的作品并培育社區(qū)，許多設(shè)計(jì)師非常樂(lè)意在網(wǎng)上分享他們的經(jīng)驗(yàn)。以是2022年上半年網(wǎng)頁(yè)設(shè)計(jì)的10多個(gè)趨，包含了最受歡迎網(wǎng)頁(yè)設(shè)計(jì)、最佳網(wǎng)頁(yè)設(shè)計(jì)、視覺(jué)層次設(shè)計(jì)等。

1、最小和舒適  

少即是多：極簡(jiǎn)主義趨勢(shì)繼續(xù)出現(xiàn)更多空白。尤其是用于干凈、多用途的多功能設(shè)計(jì)的白色空間。舒適是通過(guò)緩慢但詳細(xì)的動(dòng)畫(huà)來(lái)實(shí)現(xiàn)的。屏幕上的短重點(diǎn)粗體內(nèi)容。這樣可以確保訪(fǎng)問(wèn)者第一眼就收到您的信息。如您所知——“第一印象持續(xù)時(shí)間更長(zhǎng)”。

 

2、未來(lái)主義設(shè)計(jì)

設(shè)計(jì)師在未來(lái)主義設(shè)計(jì)中超越了電影。滾動(dòng)瀏覽頂級(jí)設(shè)計(jì)，我們每天都會(huì)遇到展示偉大技術(shù)或數(shù)據(jù)可視化的作品。在過(guò)去的 2 年中，數(shù)據(jù)點(diǎn)已增長(zhǎng)到 20 倍，因此難以分析。但是現(xiàn)在我們有了解決方案。

 
3. 自定義插圖和視頻

圖像傳達(dá)的信息價(jià)值千言萬(wàn)語(yǔ)。與此同時(shí)，它們節(jié)省了空間并引起了用戶(hù)的興趣。視覺(jué)效果的處理速度比文本快 60,000 倍！人們記得他們聽(tīng)到的 10%，他們讀到的 20%，他們看到和所做的 80%！為了說(shuō)服您，Instagram 上每個(gè)關(guān)注者的參與度是 Facebook 上的 58 倍。
根據(jù)一項(xiàng)研究，在至少有一張圖片或視頻的頁(yè)面上，網(wǎng)站停留時(shí)間增加了 100%。更令人印象深刻的是，購(gòu)物者在觀(guān)看演示后購(gòu)買(mǎi)產(chǎn)品的可能性增加了 85%。如果您需要示例，請(qǐng)查看 Invision 的 youtube 頻道。

 
4. 額外深度的陰影

陰影會(huì)產(chǎn)生深度錯(cuò)覺(jué)，這使它們成為設(shè)計(jì)界的最?lèi)?ài)。有了它，您可以將平面設(shè)計(jì)轉(zhuǎn)換為半平面。在您深入研究之前，您應(yīng)該閱讀《光與影設(shè)計(jì)》（ Designing with Light and Shadows
您可以對(duì)以下內(nèi)容使用陰影和顏色（略有不同）：使 CTA 在準(zhǔn)備好被點(diǎn)擊時(shí)顯示為凸起；在元素之間建立視覺(jué)層次結(jié)構(gòu)。注意：不要過(guò)度使用陰影。

5. 響應(yīng)式網(wǎng)站和icon
 
2018年移動(dòng)端超越了pc電腦端 。谷歌轉(zhuǎn)向移動(dòng)優(yōu)先搜索。Web 開(kāi)發(fā)人員現(xiàn)在對(duì)響應(yīng)式 Web 設(shè)計(jì)感到滿(mǎn)意。現(xiàn)在你也可以在標(biāo)志設(shè)計(jì)中看到這種舒適感。在 2018 年，響應(yīng)式網(wǎng)站和徽標(biāo)是品牌在目標(biāo)受眾面前保持其存在的必要條件，無(wú)論他們使用何種設(shè)備。



6. 最小的攝影棚拍攝
具有純色背景（負(fù)空間）的圖像，專(zhuān)注于特定細(xì)節(jié)。他們最擅長(zhǎng)將用戶(hù)的注意力吸引到特定項(xiàng)目上。多穩(wěn)定性是其背后的原則。你一次只能看到一件事。不允許有任何例外。這個(gè)技巧在電子商務(wù)行業(yè)中被大量使用?，F(xiàn)在網(wǎng)頁(yè)設(shè)計(jì)師正在采用它來(lái)增加 CTA。


 
7.更多的負(fù)空間
 
負(fù)空格是內(nèi)容周?chē)騼?nèi)容之間的空格。它可以是任何顏色。負(fù)空間的使用是藝術(shù)構(gòu)圖的關(guān)鍵要素。網(wǎng)頁(yè)設(shè)計(jì)師大量使用負(fù)空間來(lái)吸引用戶(hù)注意獨(dú)特的東西。你猜怎么著？
你明白了，它就是你的產(chǎn)品和優(yōu)化的 CTA。設(shè)計(jì)師使用戲劇性的負(fù)空間來(lái)創(chuàng)建焦點(diǎn)。吸引并吸引我們注意力的興趣點(diǎn)、重點(diǎn)或差異。


 
8. 動(dòng)畫(huà)、GIF 和電影
運(yùn)動(dòng)比其他任何東西都能更快地吸引用戶(hù)的注意力。用戶(hù)喜歡看故事，不想看。Instagram 成功背后的原因。我們看到沿相同方向移動(dòng)的元素比那些靜止或沿相反方向移動(dòng)的元素連接得更多。使用動(dòng)畫(huà)、Gif 和電影圖像創(chuàng)建引人注目的登錄頁(yè)面、橫幅、新聞通訊等。由于您已經(jīng)使用社交媒體，因此您將熟悉這三個(gè)術(shù)語(yǔ)。使用集成動(dòng)畫(huà)來(lái)引導(dǎo)您的用戶(hù)完成導(dǎo)航、加載屏幕等。


 
9. 微交互
它們無(wú)處不在——我個(gè)人喜歡它們。它們與動(dòng)畫(huà)不同。我很難解釋其中的區(qū)別，您可以在下面看到一個(gè)示例。微交互也可用于創(chuàng)建高度動(dòng)態(tài)的用戶(hù)界面。用戶(hù)不需要訪(fǎng)問(wèn)和滾動(dòng)頁(yè)面。
 
10.明亮的漸變和鮮艷的色彩
 
漸變回來(lái)了：很長(zhǎng)一段時(shí)間后又回到了網(wǎng)絡(luò)上。具有可區(qū)分顏色的漸變 2.0 正在變得流行。從 Spotify 到 iPhone X ，您可以在任何地方看到它們的使用。由Leo Natsume設(shè)計(jì)的Nike Free Design Awwwards剛剛發(fā)表了一篇文章總結(jié)了網(wǎng)頁(yè)設(shè)計(jì)中的時(shí)尚漸變。這表明他們正在統(tǒng)治網(wǎng)絡(luò)。
 
11. 大膽而有創(chuàng)意的排版
網(wǎng)頁(yè)設(shè)計(jì)師正在將排版變成創(chuàng)造令人興奮的創(chuàng)新藝術(shù)品的工具。在 2022 年，網(wǎng)頁(yè)設(shè)計(jì)不會(huì)圍繞幾個(gè)錯(cuò)別字展開(kāi)。使用了 5-6 個(gè)拼寫(xiě)錯(cuò)誤的組合。超大尺寸字符正在替換圖像。2018 年將為設(shè)計(jì)趨勢(shì)帶來(lái)大而大膽的錯(cuò)字。



Willie.H的風(fēng)景插圖
 
12. 粒子背景
您的網(wǎng)站必須在兩秒鐘內(nèi)加載，否則 40% 的用戶(hù)會(huì)離開(kāi)。所有流行的 SEO 博客都這么說(shuō)。每延遲一秒，客戶(hù)滿(mǎn)意度就會(huì)降低 16%，銷(xiāo)售額會(huì)降低 7%。速度和粒子背景有什么關(guān)系？答案很簡(jiǎn)單。粒子背景加載速度更快，干擾更少，并且引人注目。這避免了視頻背景帶來(lái)的所有可能的問(wèn)題。


 
13. 使用分頁(yè)設(shè)計(jì)創(chuàng)造更多空間
雙倍半價(jià)：將頁(yè)面分成兩部分可以將內(nèi)容分組到語(yǔ)義區(qū)域。例如從圖像中分離文本等。Divan Raj的博客的折疊折疊設(shè)計(jì)這樣您就可以在同一頁(yè)面上顯示更多內(nèi)容，而不會(huì)影響用戶(hù)體驗(yàn)。


 
14. 單色和混合圖標(biāo)
 
單色圖標(biāo)易于閱讀。多于一種顏色可用于帶有輪廓的圖標(biāo)，其中留有空白。這些圖標(biāo)并不重。


 
15. 講故事留住用戶(hù)

講故事是聯(lián)系和留住用戶(hù)的最佳方式。認(rèn)知心理學(xué)家杰羅姆布魯納建議以故事形式傳遞的內(nèi)容比單純的事實(shí)更令人難忘22倍。大品牌在這方面做得很好。您可以使用插圖或界面向觀(guān)眾講述您的故事。介質(zhì)的選擇取決于您。Seung Uk Hong的角色和插圖


 
16. 準(zhǔn)備好您的內(nèi)容打印

無(wú)論我們?nèi)绾螖?shù)字化，印刷品都是你不能忽視的。我自己打印似乎有用的內(nèi)容。瀏覽器中的閱讀模式使用您的打印 CSS 來(lái)顯示內(nèi)容。最好將其添加到您的可用性測(cè)試列表中。


 
這篇文章中使用的所有圖片都鏈接到原始來(lái)源和設(shè)計(jì)師。感謝您的閱讀，如果您喜歡這個(gè)系列并發(fā)現(xiàn)它很有用。這會(huì)告訴我們寫(xiě)更多！另外，留下您寶貴的反饋意見(jiàn)以進(jìn)行改進(jìn)。