2022 年網頁設計趨勢激發您的下一個網站項目

太時髦有什麼問題嗎？

我看到很多網站設計師迷失了方向——被“超級花哨”的設計所吸引，而犧牲了他們網站的可用性和功能性。

“大多數設計師生活在某種替代現實中，為彼此創造了不必要的東西。 然後它們成為趨勢。” – Webflow 用戶 Blazej

今天我們將介紹 2022 年的 3 個趨勢——這不會讓您犧牲網站項目的可用性，但會幫助您將其提升到一個新的水平。

2022 年網頁設計趨勢 #1 – 彩色背景的主題剪紙

讓這個 2022 年網站趨勢為您服務：

• 使用 ShapeDivider.app 之類的“形狀製作器”應用程序- 如果您想要一個不錯的快捷方式，可以幫助您創建這些自然形狀。
• 選擇完美的圖片對這些人來說更為重要，因為互聯網上有很多白色背景的圖片很容易“庫存照片”。

2022 年網頁設計趨勢 #2 – 單色作品

• 選擇黑色和白色以外的另一種顏色可以使設計POP！
• 使用更少的顏色，實際上使設計這些類型的網站更容易！
• 使顏色適合您，將其用於按鍵以及您想要吸引眼球的東西。

2022 年網頁設計趨勢 #3 – 幻象設計元素

讓這個 2022 年網頁設計趨勢為您服務：

• 融入一個你不一定想像拇指酸痛一樣突出的元素。
• 利用這種微妙的外觀創造更高端的美學。

往年網站趨勢

我們喜歡漂亮的網站——專注於用戶體驗，並以時尚和永恆的方式構建。 關鍵是……在你說“視差動畫”之前，不要以一種過時的方式變得太時髦。

• 不要抓住每一個新趨勢。
• 一定要留意什麼既時尚又有效。
• 下面的每一個特色趨勢都會有一個關於它為什麼時尚的摘錄，以及一個單獨的關於它為什麼 - 或者是否 - 它有效的摘錄。

2020 年三大網頁設計趨勢

1. 大字體

為什麼時尚？ 在一個每個人都在他們的設計中塞入盡可能多的文本以滿足 200 個利益相關者的世界中……如果你可以將它歸結為一個超級簡短的關鍵信息並讓它變得巨大——你就贏了。

是否有效：它非常有效，因為人們知道要關注什麼！ 每個文本的大小相同或只是彼此微小變化的問題當然是不清楚什麼是最重要的部分。

2. 更小的英雄，更有影響力的英雄形象

為什麼時尚？ 不掩飾自己的美圖有多光榮？ 人們喜歡這個，因為它感覺有凝聚力，而且你不太可能遇到難以分層的問題（下一項中的示例。）

是否有效：當然可以——關鍵是圖片要好，並真正幫助人們想像自己從您的產品或服務中受益。 如果沒有好的圖像，這可能看起來很俗氣。

3.分層元素

為什麼時尚？ 就像時尚一樣，有意的分層是巧妙的——感覺是有意的，因此看起來非常漂亮。

是否有效：這真的取決於具體的項目。 如果它沒有正確的照片、正確的支持元素、正確的對比度疊加或正確的排版（使用較重的字體效果更好），它真的不會有效。小心不要過度使用它——並使用它當您擁有可以協同工作的實體元素並且您“可以控制它們”時。 通常，客戶可能會換入一個現在不起作用的圖像——因此，當您知道它們不會經常更改時，使用正確的組件來完成是很重要的。

其他榮譽獎：

垂直排版——用於 UI 元素，可以在設計上給人一種更刻意的感覺。

Organic Shape Cutouts – 上面的 Pops Diabetes 示例也利用了這一趨勢。

10% 偏移圖像——上面的 Schaefco 項目也有這個特點——

Typographic Cutouts – 已經看到了一些很棒的例子。 一個大的粗體字母從空白處切出，有時後面還有一個視頻——給人一種非常酷的分層效果。

每一頁都有視頻——如果你經常做視頻——為什麼不為你的每一個關鍵服務做一個視頻，並將它們包括在內以增加“現場時間”？ 非常適合 SEO - 非常適合不想閱讀的用戶。 （提示：我們大多數人更喜歡看視頻。）

光互補動畫——動畫吸引眼球，尤其是當它們移動一點時，但要確保你把人們的眼睛吸引到正確的東西上。 或者確保動畫真的很好/有一種真正讚美你的品牌的風格。

更多襯線字體- 襯線字體更易於閱讀！ 我很高興看到襯線字體在 2020 年及以後捲土重來！

其他設計師採用 2020 年網頁設計趨勢（眾包。）

近來的網頁設計服務專注於在用戶瀏覽網站時為他們提供最佳體驗。 因此，對於開發人員而言，確保他們相應地工作變得非常重要。
因此，這裡列出了 2020 年 17 大網頁設計和 UI 趨勢。

1.開放多彩的極簡主義
如今，如果您仍在考慮使用黑白背景進行極簡設計，那麼那些日子已經一去不復返了。 開放和多彩的極簡主義是最新趨勢，為網頁設計帶來凝聚力和引人注​​目的感覺。

2. 移動友好
隨著手機使用的增加，設計師需要確保網站適合移動設備，以便每個用戶都可以輕鬆地通過手機查看網站。 這正是響應式網頁設計服務來拯救的地方。

3. 超大標題
近來，超大的標題和標題變得非常普遍，以吸引讀者的注意力，因為他們花在網站上的時間要少得多。 因此，標題如此創建，以吸引讀者的注意力。

4. 鮮豔的色彩、具有挑戰性的漸變和深色背景
今天的網站專注於提供最佳的用戶體驗，因此網頁設計服務特別關注這一點。 在 2019 年，使用更複雜的漸變以及夢幻般的深色背景顏色再現變得更加普遍。這三者的經典組合是趨勢。

5. 網站加載速度
今天的客戶總是很匆忙，因此用戶只是跳過了加載緩慢的網站。 因此，網站的加載速度需要更高，這正是增強用戶體驗的最新趨勢。

6.動畫和下一級插圖
用戶總是期待新的東西。 這可以通過動畫以及下一級插圖輕鬆實現，這正是這些成為最新趨勢的原因。

7. CSS 網格
CSS 網格仍然是最流行的網頁設計趨勢之一，它在使網頁設計更容易方面發揮著至關重要的作用。 最近，它是一些具有現有功能的新工具的組合。 當今的現代 CSS 提供了全新水平的響應性、交互性和數據可視化。

8. 淺色和深色的配色方案
為了給用戶創造一些令人興奮的東西，使用淺色和深色配色方案實在是太好了。 這給用戶留下了積極的印象，因此是有益的。

9. 身臨其境的 3D 體驗
3D 圖像和圖形對於網頁設計服務來說無疑是太好了，因此可以創建有吸引力的網頁設計，從而吸引用戶的眼球。 身臨其境的 3D 體驗為您的網站帶來生機，並為用戶提供出色的體驗。

10.粗野主義粗野主義是另一個正在興起的主要趨勢，這一點從越來越多的品牌更喜歡利用大膽、堅韌和傲慢的概念來擁抱他們內心叛逆的一面這一事實就可以看出。

11. 飛行和浮動元素
為了吸引用戶的注意力，飛行和漂浮的視覺效果非常有效。

12.有機和幾何形狀
網頁設計服務中幾何和有機形狀的使用已經相當穩固地佔據了平面設計和破碎網格之間的位置。

13. 重疊的東西
重疊效果無疑是 2020 年最熱門的趨勢之一。重疊的東西會給某些特定類型的內容帶來視覺上的興趣。 這個概念是激發人們興趣的一個很好的技巧，但需要在網頁設計服務中小心翼翼地完成。

14.增加視頻
更多視頻的添加為網站帶來了更多活力，並且它能夠像其他形式的媒體一樣吸引幾乎所有人的注意力。 這無疑是2020年的趨勢，並且會持續很長時間。

15. 不對稱佈局和破碎網格
網站的不對稱佈局以及在網頁設計時使用破碎網格現在變得越來越普遍。

16. 增強現實
僅屏幕界面對於當今世界來說是不夠的，用戶希望在現實世界中進行物理交互。 這就是網頁設計師必須想出一些新東西來提供增強現實功能的地方。

17. 微交互
微交互的重要性不容忽視。 這些非常適合創建非常吸引人的活動，從而在 2020 年興起。
現在，當您了解 2020 年的頂級網頁設計和 UI 趨勢時，不要浪費更多時間，而是將它們整合到您的網站中，為用戶提供美妙的體驗。

使用不當的常見網頁設計趨勢示例

您如何確定趨勢是否使用不當？ 同理心和直覺。 諮詢你內心的蟋蟀。 如果有人用他們的網站對你這樣做，你會喜歡嗎？ 如果答案是否定的，也許您應該放棄這 50 個彈出窗口，即使您“訂閱瞭如此多的新聞通訊註冊”以至於您可以在餘生中向它們發送垃圾郵件。

它有效嗎？ 恭喜你又轉化了 5 人，又惹惱了 40 人，破壞了你的品牌認知度，讓他們重新考慮再次點擊你的自我祝賀內容。 所以，是的，你猜對了，我使用不佳的網頁設計趨勢的第一個例子是：

侵入性彈出窗口

侵入性彈出窗口以及您無法弄清楚如何關閉或迫使您回答荒謬問題的那種非常糟糕。

如何做得更好——當有人離開時贈送一些有價值的東西

與其試圖將某人推入您的電子郵件列表，不如拉動。 如果你給了我一些有價值的東西，我不會因為你在我臉上放一個大的舊彈出窗口而感到不安，事實上，我可能有點感興趣。 需要注意的是，內容是變量。 不要沾染一些糟糕的白皮書，建立偉大的東西——與團隊合作建立偉大的東西——無論你必須做什麼，然後把它作為核心。 將其與“退出意圖”彈出窗口配對，不要強迫任何人做出決定 - 始終給出明確的方法來 x 彈出窗口。

無限滾動

我們不需要在結尾有明確的號召性用語，也不需要帶有經過深思熟慮的導航的漂亮頁腳

也許這是我憤世嫉俗的老人大腦的一個例子，因為我什至無法處理推特從星星變成紅心的時候——但如果我們在這裡應用黃金法則，我討厭完成一篇文章並讓其他人做出選擇我接下來想讀什麼文章。 使用 facebook 和 youtube 視頻為他們做出決定可能會很愉快，因為嘿，這是視頻，無論如何我只是在吃素——但對於你必須閱讀的內容，我很抱歉，我認為你不會製作根據我完成的一篇文章或內容準確地決定我的偏好。

我要提醒一下，您正在瀏覽一系列項目的畫廊類型/Pinterest 風格的網站似乎對這種類型的導航有一些好處，但它可能僅限於社交。 我們其他人需要對結論和更多導航感到滿意。

如何做得更好——想想一個人在閱讀了網站上的此類或此類內容後想要做什麼。

網站上的每種類型的內容都可以有一個帶有其他類似文章、導航元素的前頁腳，理想情況下，還有幾個針對他們剛剛完成的內容量身定制的明確後續步驟。 儘管我討厭上面示例（Messages Home）中的“龍蝦”字體，但我認為 Jared 在閱讀完一頁內容並以視覺方式分享這些內容後，對人們可能感興趣的內容進行了長期而認真的思考簡單明了。 如果只有其他頁腳那麼幸運。 我承認，我有戀足癖。

3. 痛苦地分散視差，除了一毫秒的 oooh-ahhh 之外沒有增加任何價值。

這種藝術和文化組織有運動，有深度——但它有意義嗎？ 我無法想像後面的圓圈是如何添加任何有用的元素的，除了有一點是原創的，或者還沒有做很多。 IE 一個噱頭——但嘿，他們贏得了網站獎……所以該網站一定很好，對吧？

當高雅地實施時，運動和深度可能會很棒，不幸的是，大量的人衝進來實施視差，而沒有深思熟慮它如何真正幫助遊客和增加價值。 大尺寸的設計很漂亮，但如果你想深入了解網站內容並真正了解如何或為什麼要與公司合作或購買產品 - 冗長的視差網站會錯過重點。

如何做得更好——巧妙地實施以增加一些深度，並在適當的時候以一種為產品增加一點吸引力的方式謹慎使用。

到現在為止，也許你們中的許多人已經看過 2012 年發表的《紐約時報》雪落文章。這篇文章以一種幾乎令人放鬆的方式使用視差和視頻，因為它在當時是如此進步。

使這個網站工作得如此漂亮的關鍵？

• 強調內容——排版元素經過深思熟慮和可讀性
• 標題處理給出了清晰的層次結構
• 所有這些都很好地結合在一起，因此視差方面不是中心舞台，而是更大畫面的令人愉悅的微妙部分。

這正是視差在 2016 年如何被高雅地使用，而不會讓人感覺像是一個噱頭。

2019 年網頁設計趨勢

網頁設計師與時裝設計師沒有什麼不同，因為他們必須時刻關注地面，以了解來年網頁設計的最新趨勢。

一個聰明的網頁設計師在創建網站佈局時不僅要牢記品牌形象，還要考慮用戶的可用性。 正因為如此，設計師每年都會剔除用戶不喜歡的設計細節，並擴展用戶喜歡的設計細節。

今年也不例外，這裡列出了 2019 年網頁設計的主要趨勢。

視頻背景

您可能已經看到大量包含大型視頻背景以吸引用戶的網站。 視頻背景是讓用戶深入了解您的業務的好方法。

查看房地產開發公司Ditto 的網站，該網站重點介紹了人們在日常生活中的住宅開發，讓用戶能夠以一種引人入勝的方式查看單元內部。

我們還與 Deneen Pottery 合作，幫助製作了一段關於他們的背景的視頻，其中包含他們手工製作的陶器的實際鏡頭。

粒子背景

對於仍希望將運動融入其網站的企業來說，粒子背景是視頻背景的絕佳替代品，特別是如果您擔心較大背景視頻的加載時間。 這些動畫是 javascript，可創建自然且引人入勝的運動作為背景的一部分。

Heystack 為他們的網站使用了複雜的粒子背景，我們希望更多的設計師也這樣做。

不對稱佈局

不對稱網頁設計的獨特和獨特方面使其在將您的網站與其他網站區分開來方面具有吸引力。 與幾年來流行的極簡風格相比，不對稱設計更加繁忙，但如果做得好，仍然看起來同樣乾淨和專業。

我們最近為可持續發展 9 推出了這個網站，它的特點是形狀重疊，雖然看起來很平衡，但肯定有不對稱的元素，增加了它的深度。

粗體字

選擇正確的排版可能是跳出率低而不是高跳出率的區別。 選擇粗體字體，尤其是大字體，可以真正吸引網站用戶的注意力。

這兩個網站主頁由 Dribble 上的網頁設計師創建，完美地體現了粗體字的簡單和現代性質。

集成動畫

集成動畫正是它們聽起來的樣子：放置在整個網站上的動畫，為網站增添了額外的活力、動感和參與感。 正如您所注意到的，運動是來年網頁設計中尋找的一個重要主題。

30 Species in Pieces 是一個致力於對人們進行瀕危動物教育的網站，它在其簡單的網頁設計中使用清晰且引人入勝的動畫，使其栩栩如生。

動態漸變

正如我們之前提到的，顏色漸變開始捲土重來。 漸變允許使用您網站的顏色進行自定義，以創建真正體現您品牌的東西。

Apple 使用漸變作為字體顏色，以與新 iPhone X 廣告的主題保持一致。

2018 年被低估的網頁設計趨勢

每年，網頁設計趨勢都在不斷變化——所以幾年前看起來“時尚”的東西可能不是今天的最佳選擇。 因此，所有企業主都必須了解最新的網頁設計趨勢，以便銷售他們的業務並保持訪問者的注意力。 繼續閱讀以發現 2018 年被低估的六大網頁設計趨勢。

破碎的網格佈局

許多網站使用網格來確保文本、圖像和導航按鈕背後的結構。 網格不僅為設計師提供指導，而且還幫助訪問者輕鬆瀏覽網站。 然而，今年看到的典型網格佈局被打破。 不是遵循明確的規則，而是有機會對網頁設計做一些不同的事情。 開發人員已經轉向限制較少的破碎網格佈局。 破碎的網格佈局允許文本和圖像更自由地進入和跨越頁面。 當元素重疊時，這會創建一個和諧的網頁設計，為訪問者自然流動。 破碎的網格佈局也可以通過使用圖層、不尋常的定位和使頁面更具吸引力的微妙接觸來實現。

2. 聊天機器人

越來越多的網頁設計師開始在網站中使用聊天機器人。 聊天機器人常見於位於屏幕右下角的商業網站上。 小彈出窗口使訪問者有機會與業務人員交談或獲得任何查詢的自動幫助。 在您的網頁設計中添加聊天窗口意味著任何有問題的訪問者都可以立即得到回答。 一些企業在讓工作人員可以聊天時遇到了麻煩。 但是，可以對您的聊天機器人進行編程以回答最常見的問題，並提供有關在不知道問題答案時如何联系企業的詳細信息。

定制插圖

過去，網頁設計圖像主要由產品照片、GIF 和編輯照片組成，強調產品的特性、功能和人性化維度。 2018 年，這一點略有不同，插圖現在主導了市場。 開發人員發現插圖更具吸引力和吸引力。 他們有一個針對品牌定制的清晰而集中的信息。 插圖通常使用非傳統的顏色組合來完成，這些組合嘗試各種對比，創造張力，同時保持網頁設計的可讀性。

頁面轉換

每當用戶的體驗被打斷時，他們很有可能會離開網站。 當它們從一頁更改為另一頁時，也會發生這種情況。 一些網站加載時間過長，而另一些網站則將用戶帶離他們在新頁面打開之前所處的環境。 因此，每個網頁設計都必須在頁面之間平滑高效地轉換。 今年，越來越多的網站正在為其訪問者引入有凝聚力的頁面轉換。 訪問者無需導航到新頁面，而是能夠在同一頁面上查看不同的信息。 這些更流暢的頁面轉換可以增強用戶體驗並促進與您的品牌的互動。

粗野主義

2018 年在網頁設計中使用野蠻主義有所增加。 粗野主義正在開闢一個空間，讓開發人員和設計師可以做他們想做的事，而不是他們應該做的事。 這種網頁設計風格的靈感來自 1950 年代簡單、經濟且實用的建築。 粗野主義網頁設計是原始而迷人的。 主要關注的是內容，因為讓訪問者在視覺上令人愉悅是很重要的。 粗野主義網頁設計通過暴露的結構、粗糙感和深思熟慮的過程表現出來。

視頻內容

今年，網站上視頻內容的使用也有所增加。 視頻是以視覺格式傳達複雜信息的好方法。 視頻內容不僅使網站看起來更現代，而且還創造了一種靜態圖像無法簡單做到的藝術感。 視頻是一個強大的工具，因為它們可以無縫地融入您的網頁設計中，並且仍然保持極高的質量，即使有大量的顏色、漸變和細節。 視頻也可以循環播放，以確保副本的細節和視頻的細節保持一致。 許多網站開發人員認為，當存在視頻內容時，訪問者會在網站上停留更長時間，訪問者也更有可能註冊或選擇加入他們的產品和服務。從商業角度來看——2017 年網頁設計的哪些趨勢很重要？

移動針的網頁設計趨勢

1.每一頁的聯繫表格

不要曲解——如果您的網站是一個潛在客戶生成網站，您不想讓聯繫表格很難找到。 如果您可以將它包含在每個頁面上，那就更好了。

這似乎是一個簡單的技巧，但最好的“技巧”是。

2. 永遠存在的 CTA：持續強大的號召性用語按鈕

您不必使用聯繫表來推動人們與您聯繫、獲得演示、獲得報價，或者您希望推動客戶採取的任何主要行動。 相反，您可以一直在右上角包含一個大按鈕。 當他們滾動時，將號召性用語按鈕留在屏幕頂部，並帶有跟隨訪問者的“粘性”標題。

3. 使用組織徽章和推薦信等信任因素使設計過載

我只堅持我所知道的最有效的事情，而我的一些觀眾以前可能沒有意識到這一點。 信任因素是網頁設計中的一切——除了乾淨、現代和美觀的視覺設計之外，它們幾乎是我所想到的。

讓人們採取行動的唯一方法（大型號召性用語按鈕和立即購買按鈕等）是用這些元素圍繞他們，這些元素解釋並推動他們繼續 - 因為信任在任何交易中都絕對至關重要。

你們有免費退貨嗎？ 你們有快速免費送貨嗎？ 你有保證嗎？ 展示這些東西。

當地貿易集團的一部分？ 更好的商業局？ 您的在線商店有 SSL 證書嗎？

為這些項目添加視覺表示，並考慮將它們標記為您網站的風格，以進一步增加信任。

大多數優質企業擁有的信任因素類別中最大的一項是在線評論和推薦。 我強烈建議在您的網站上以非常顯眼的方式展示這些內容。 如果是推薦信，理想情況下，您應該擁有客戶自己的照片，以使他們對您的產品或服務的評價更具可信度。

4. 有一段視頻來展示你的關鍵價值主張

當我第一次設計 DeneenPottery.com 時，我使用了客戶所擁有的東西——他們的高質量杯子的圖像和一個在設計中隱藏起來的視頻。 我們在這段視頻中做了一個小亮點，毫無疑問地展示了他們杯子的手工製作特性，並讓人們體驗了他們的製作過程：

5. 極具吸引力的留白設計——考慮使用有意義的過渡、重疊的網格系統和拆分內容來畫出二分法

白色空間是令人愉悅的設計元素，似乎讓一切都感覺更“高端”：

在這個網站上，我決定利用攝影的自然開放性來營造一種寬敞頹廢的感覺。

Apple 了解空格。 這並不意味著背景是白色的——它只是意味著設計中主要主題周圍的開放空間。

這是Apple 在其網站中使用空格的一個非常高的示例：

有意義的過渡

谷歌多年來一直在他們的“材料設計”中使用有意義的過渡——但越來越多的網頁設計師開始使用它來創建一種有效的方式，為用戶在網站上執行的操作提供更多上下文。 查看下面按鈕上的懸停狀態，用戶單擊按鈕時顏色的擴散，以及單擊後模態/彈出窗口的增長方式：

在這個網站中使用材料設計讓我讓網站感覺非常互動和非常現代。 它還有助於通過使用 Material Design 的約定，您還可以巧妙地將自己與 Google.com 和 Google 的許多產品上的用戶體驗相關聯——因為它們都匹配並使用這些約定。

重疊網格系統

網頁設計中的盒子是傳統的並排的，一個在另一個之上，但許多設計師正在使用一種非常 2017 年的風格，稱為重疊網格系統或偏移網格系統。 這種風格將盒子和照片並置在一起，以獲得更有機、自由流動的效果。

分割顏色或分割圖像以畫出二分法

二分法是將兩件事分開——比如“冷熱”或“善惡”。 通過使網站的兩個方面彼此超級不同，它可以吸引訪問者的注意力。

你可以用它來畫出被反對的情感元素，或者大腦的兩側“情感和邏輯”，“創造性和系統導向”，或者只是用它來創造一些視覺吸引力，比如 Mateusz Koziorowski 的這個設計.

無論你做什麼——不要隨意跳入網頁設計趨勢

請務必首先考慮您的業務目標。 視覺設計趨勢如果不考慮它會為您的收入帶來什麼，就什麼都不是。

一個更好的網站指日可待
自第一個網站推出以來，我們已經走了很長一段路。 網頁設計師正在變得更細緻、更冒險，而且坦率地說，更好。 未來幾年的網頁設計將是挑戰極限並嘗試大膽的新想法。 在 Hook，我們喜歡利用您已經厭倦的舊網站，並將其轉變為真正體現您品牌的前沿、獨特性的東西。 如果您正在尋找建立一個新網站，該網站將吸引用戶並帶來更多轉化，那麼今天就聯繫 Hook Agency 安排一次會議，我們將討論您的業務目標是什麼以及我們如何實施他們進入你的新網站。