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

1、最小和舒適  

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

 

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

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

 
3. 自定義插圖和視頻

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

 
4. 額外深度的陰影

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

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



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


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


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


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



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


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


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


 
15. 講故事留住用戶

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


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

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


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