2020年網(wǎng)頁設(shè)計趨勢預(yù)測，準(zhǔn)不準(zhǔn)，你說了才算！

zjshzq 2020-02-21

展開全文

原文：www.mockplus.cn

網(wǎng)頁設(shè)計千變?nèi)f化。每年都有形形色色的全新設(shè)計不斷涌現(xiàn)，優(yōu)化用戶體驗的同時，也帶給我們前所未有的視覺和感官盛宴。那么，即將到來的2020又將如何呢？又有哪些熱門設(shè)計將繼續(xù)流行？哪些全新的設(shè)計將涌現(xiàn)呢？

摹客團隊為大家分析了最近幾年的國內(nèi)外優(yōu)質(zhì)的設(shè)計作品之后，整理出了2020年網(wǎng)頁設(shè)計的15大設(shè)計趨勢。希望對大家有所啟發(fā)。

下面，我們就一起看看都有哪些吧。

1．語音交互+傳統(tǒng)圖像交互=最佳用戶體驗

語音交互設(shè)計（或設(shè)計師們常說的Voice User Interface 設(shè)計）是一種伴隨AI（人工智能）技術(shù)的發(fā)展起來的交互設(shè)計方式。允許用戶通過發(fā)送語音命令，隔空實現(xiàn)人機交互的界面設(shè)計方式，而非采用傳統(tǒng)手勢或鼠標(biāo)點擊的方式。擁有類似語音交互設(shè)計的網(wǎng)頁，往往能夠極大解放用戶雙手，帶給他們前所未有的極致體驗。

語音交互設(shè)計的熱度將不斷攀升

如今，隨著AI技術(shù)的快速發(fā)展，以前僅僅只停留在理論階段的語音交互設(shè)計，正在設(shè)計師們的不懈努力下，日漸走入我們的生活。盡管目前VUI設(shè)計大多以用戶個人語音助理的形式存在（例如百度的搜索語音助手），但也一定程度上優(yōu)化了用戶體驗，帶給設(shè)計師和企業(yè)公司前所未有的收獲，開啟了語音交互設(shè)計的新篇章。

語音交互圖文模式

全新的2020年里，也必然會有更多的設(shè)計師和公司企業(yè)投入VUI設(shè)計洪流，打造出更加實用、逼真的語音交互設(shè)計。

VUI與GUI的巧妙融合，才能打造出最佳用戶體驗

此外，VUI設(shè)計的流行并不意味：它能夠完全獨立于傳統(tǒng)GUI (Graphic User Interface, 也稱圖像交互) 設(shè)計而存在。相反，二者應(yīng)該始終保持相互依賴、相互促進的關(guān)系，才能不斷帶給用戶驚喜。所以，設(shè)計師們應(yīng)該始終牢記：VUI設(shè)計與GUI設(shè)計的完美融合，才能打造最佳的用戶體驗。

簡單來講，以網(wǎng)頁語音搜索助手為例。為幫助用戶盡快找到并使用語音搜索功能，設(shè)計師需要依賴傳統(tǒng)的GUI設(shè)計，添加直觀易用的語音圖標(biāo)或按鈕，以暗示和引導(dǎo)用戶。而且，當(dāng)語音交互完成后，搜索而來的各項結(jié)果，如何設(shè)計和展示才能方便用戶查看和選擇，也無疑屬于傳統(tǒng)GUI設(shè)計的范疇。

總之，以用戶需求為導(dǎo)向，VUI設(shè)計和傳統(tǒng)GUI設(shè)計的完美融合，才能最終如愿打造出最佳的用戶體驗。

2.AI和AR技術(shù)的深度應(yīng)用

從今年(尤其是下半年)不斷涌現(xiàn)的優(yōu)質(zhì)網(wǎng)頁設(shè)計來看，AI和AR技術(shù)得到了更深程度的探索和應(yīng)用，也將是2020年比較熱的一個設(shè)計方向。

利用Al技術(shù)，打造更具“人情味”的網(wǎng)頁設(shè)計

今年，人工智能（AI）在很多領(lǐng)域都得到應(yīng)用，并取得了突破性進展。而網(wǎng)頁設(shè)計方面，除了語音交互設(shè)計方向，設(shè)計師們更多關(guān)注的是界面聊天機器人方向的應(yīng)用和探索。

如何打造自然、真實且極賦“人情味”的聊天機器人設(shè)計，一直都是網(wǎng)頁設(shè)計師們爭相探索和解決的問題。而隨著人工智能技術(shù)的日益成熟，這一方面也確實取得了不錯的成果。

例如，聊天機器人互動的內(nèi)容更加豐富。文本不再是唯一的人機交流方式。趣味性表情包、圖片、圖標(biāo)以及按鈕也能輕松識別。如若需要，用戶還可添加自動回復(fù)，并設(shè)置自動回復(fù)內(nèi)容模板，實現(xiàn)更加智能的人機交互。

當(dāng)然，這方面的探索還遠遠沒有結(jié)束，為打造“更像人”的聊天機器人和網(wǎng)頁設(shè)計，設(shè)計師們還有很長的路要走，對于AI技術(shù)的探索也不會停止，并將一直延續(xù)到2020年。

利用AR技術(shù)，打造更具視覺魅力的網(wǎng)頁設(shè)計

AR技術(shù) (增強現(xiàn)實技術(shù))，也是網(wǎng)頁設(shè)計中另一大熱門設(shè)計趨勢。

盡管由于技術(shù)上的限制，網(wǎng)頁設(shè)計中，暫時還無法在一系列VR設(shè)備的幫助下，完美實現(xiàn)網(wǎng)頁與用戶的實時在線智能溝通和交互。但設(shè)計師們?nèi)稳豢梢愿玫亟Y(jié)合AR技術(shù)，添加一些具有AR觀感的視頻、動畫以及交互，優(yōu)化網(wǎng)頁視覺效果，吸引和留住用戶。

如圖，設(shè)計師可簡單結(jié)合VR技術(shù)，添加更具視覺效果的VR視頻設(shè)計，吸引和留住用戶。

總之，2020年，也將是設(shè)計師們充分發(fā)揮聰明才智，更加巧妙、自然地將AI和AR技術(shù)應(yīng)用到網(wǎng)頁設(shè)計，尋求突破，有效提升用戶體驗的一年。

3.極簡主義網(wǎng)頁設(shè)計

極簡主義設(shè)計，簡約實用，易于瀏覽，一直都是網(wǎng)頁設(shè)計方面不敗的設(shè)計趨勢。而它無疑也將延續(xù)到2020年。

簡單來講，極簡設(shè)計在2020年里將體現(xiàn)在以下幾個方面：

隱藏式導(dǎo)航設(shè)計

簡約設(shè)計，“少即是多，多即是少”的設(shè)計理念，要求設(shè)計師利用更少的界面元素，打造更加高效實用的網(wǎng)頁設(shè)計。而為節(jié)省界面空間，盡可能減少界面噪音，隱藏式導(dǎo)航設(shè)計，一直都是設(shè)計師們打造極簡網(wǎng)頁設(shè)計的“寵兒”。2020年也不例外。

所以，在新的一年里，無論是隱藏側(cè)邊導(dǎo)航，還是隱藏頂部導(dǎo)航，設(shè)計師們都可隨意選擇，輕松打造更加高效、吸睛的網(wǎng)頁設(shè)計。

簡化的界面文案設(shè)計

誠然，在不影響意思傳達的情況下，更加簡單、易讀的界面標(biāo)題、文段以及微文案設(shè)計，更能吸引用戶注意，提升用戶體驗。所以，盡可能簡化界面文案設(shè)計，也是打造極簡主義網(wǎng)頁設(shè)計的另一種有效方式。

如上圖的簡約網(wǎng)頁設(shè)計案例，簡單且極易識別的粗體標(biāo)題，快速傳達品牌名稱，樹立官方感、莊嚴(yán)感，激發(fā)用戶興趣, 獲取用戶的信任。

留白設(shè)計

留白設(shè)計，無疑也是設(shè)計師們簡化界面，突出界面產(chǎn)品和內(nèi)容的有效設(shè)計方式。

所以，2020年網(wǎng)頁設(shè)計，設(shè)計師們也不要忘記充分利用留白，打造更加簡約高效的界面，提升產(chǎn)品銷量。

自定義高清圖片設(shè)計

相較于滿屏的圖文介紹，現(xiàn)今設(shè)計師們更加傾向于使用自定義高清大圖，更加個性化的呈現(xiàn)產(chǎn)品信息，吸引用戶注意和停留。

而且，必要的時候，直接利用高清大圖輪播設(shè)計，替代單一圖片，添加適當(dāng)文本和CTA按鈕設(shè)計，輕松打造簡約、炫酷且高效的網(wǎng)頁設(shè)計。

4.粗獷主義網(wǎng)頁設(shè)計（Brutalism）

最近幾年，一種最初流行于建筑業(yè)的設(shè)計風(fēng)格 —— 粗獷主義風(fēng)格（Brutalism），在網(wǎng)頁設(shè)計中日益流行起來。簡單來講，設(shè)計師們在進行網(wǎng)頁設(shè)計的過程中，為吸引用戶注意，不再死板的遵循對稱、協(xié)調(diào)和融合等設(shè)計原則，轉(zhuǎn)而利用具有更大視覺沖突、更加粗獷、原始的設(shè)計元素和界面質(zhì)感，以突出網(wǎng)頁設(shè)計。

而這類風(fēng)格的網(wǎng)頁設(shè)計，大都采用以下設(shè)計方式實現(xiàn)：

超大粗體文字排版設(shè)計

超大主題文字排版設(shè)計，是設(shè)計師們打造粗狂主義網(wǎng)頁設(shè)計的首選。個性而極賦視覺效果。

此外，部分設(shè)計師，為加強界面沖突，甚至通過粘貼復(fù)制的方式，滿屏大膽使用類似字體排版，以吸引用戶注意。

如圖，設(shè)計師們往往習(xí)慣使用大量粗體、超大個性字體設(shè)計，以吸引用戶注意，打造更加狂野的網(wǎng)頁。

不對稱和自定義界面布局

打造粗獷網(wǎng)頁設(shè)計的另一個有效方式，就是使用不對稱或自定義的界面布局，更加原始、隨性地呈現(xiàn)界面信息。

沙雕的動效和動畫設(shè)計

當(dāng)然，小編認(rèn)為最有效的方式，還是如下圖這般，使用各種簡單動效和動畫設(shè)計，打造令人眼前一亮的用戶體驗。

5.復(fù)古風(fēng)網(wǎng)頁設(shè)計

復(fù)古風(fēng)網(wǎng)頁設(shè)計，是繼粗獷主義風(fēng)格出現(xiàn)的另一個熱門設(shè)計趨勢。設(shè)計師們不再追求金屬感或立體感十足的現(xiàn)代風(fēng)，轉(zhuǎn)而利用老舊風(fēng)格的組件、排版、配色以及圖片，打造古風(fēng)滿滿的網(wǎng)頁設(shè)計。

如圖，利用黑白圖片、視頻，舊式圖標(biāo)和配色，打造復(fù)古風(fēng)網(wǎng)頁設(shè)計。

6.故事性網(wǎng)頁設(shè)計

故事性設(shè)計，也是2020年將繼續(xù)流行的一大設(shè)計趨勢。為什么呢？

原因很簡單。相較于通過界面布局或功能模塊，逐個機械呈現(xiàn)界面或產(chǎn)品信息，以更具故事性和邏輯性方式展開的網(wǎng)頁設(shè)計，更能激發(fā)用戶興趣。

設(shè)計師們通過添加有趣的故事情節(jié)、擬人化的吉祥物、吸睛視頻以及插畫等設(shè)計，向用戶逐步講述品牌或產(chǎn)品背后的故事，層層深入，引人入勝。成功介紹產(chǎn)品或界面內(nèi)容的同時，也能加深用戶對品牌或產(chǎn)品的印象，提升品牌知名度。

2019年里，設(shè)計師們做出很多努力，成功打造了一系列極賦故事性的網(wǎng)頁設(shè)計。

2020年也將繼續(xù)探索，創(chuàng)建更多歷久彌新的故事性網(wǎng)頁設(shè)計。

如圖，故事性網(wǎng)頁設(shè)計，更加注重界面內(nèi)容的故事性和邏輯性。

相關(guān)閱讀：【干貨】25個故事性網(wǎng)頁設(shè)計，輕松講述網(wǎng)頁獨有的故事?。?！

7.微交互和動畫設(shè)計

提供豐富的微交互和動畫設(shè)計，也是設(shè)計師們提升用戶體驗的重要方式。2020年網(wǎng)頁設(shè)計過程中，設(shè)計師們也需要重視這方面的設(shè)計，添加更具趣味性和實用性的微交互和動畫設(shè)計。

當(dāng)然，微交互和動畫設(shè)計過程中，也可嘗試添加更多懸浮、選中動效，甚至是一些局部小游戲，將用體驗提升到一個新高度。

如圖，利用微動畫打造更具趣味性和吸引力的網(wǎng)頁設(shè)計。

8.深色模式（Dark mode）

深色模式，高端大氣，對比度高，能夠有效提升界面內(nèi)容的可讀性，緩解用戶眼部疲勞。一經(jīng)推出，就被廣泛應(yīng)用到了Android和iOS各類移動端手機的應(yīng)用程序中，快速成為設(shè)計界一大熱門。

而網(wǎng)頁設(shè)計方面的應(yīng)用，也不甘示弱，成為2019年里設(shè)計師們提升網(wǎng)頁用戶體驗的重要方式。無疑，2020年這方面的設(shè)計也將持續(xù)。

如圖，深色模式網(wǎng)頁設(shè)計對比度高，輕松凸顯界面內(nèi)容的同時，也能夠有效緩解用戶瀏覽界面時的眼部疲勞。

相關(guān)閱讀：還在為黑白網(wǎng)頁設(shè)計犯難？12款設(shè)計幫你輕松解決?。?！

9.逼真的3D設(shè)計

逼真的3D技術(shù)，是設(shè)計師們打造身臨其境的網(wǎng)頁用戶體驗的重要方式。它不僅能夠輕松提升界面的整體視覺效果，還能夠有效吸引和鼓勵用戶停留更長時間，促進網(wǎng)頁商業(yè)價值的實現(xiàn)。隨著2020年的到來，這樣優(yōu)質(zhì)的網(wǎng)頁設(shè)計方式也將持續(xù)熱門。

10.視覺滾動差設(shè)計

視覺滾動差設(shè)計 —— 通過不同速度展開背景圖片的方式，打造出多層背景的錯覺，帶給用戶完全不同的視覺體驗。盡管已經(jīng)流行多年，也將在2020年里，繼續(xù)大量應(yīng)用。

相關(guān)閱讀：網(wǎng)站設(shè)計缺乏創(chuàng)意？視差滾動網(wǎng)站設(shè)計讓你與眾不同

11.插畫元素的深度應(yīng)用

好的插畫設(shè)計，不僅能夠快速美化界面，還能提升產(chǎn)品或品牌辨識度，樹立企業(yè)品牌形象。這也是為什么插畫元素會成為一大設(shè)計熱門，并將持續(xù)到2020年的重要原因。

而插畫的應(yīng)用，也將主要體現(xiàn)在在兩個方面：

自定義插畫設(shè)計

自定義插畫設(shè)計，顧名思義，就是設(shè)計師根據(jù)產(chǎn)品或企業(yè)品牌形象和特色，專門定制的插畫設(shè)計。這類設(shè)計，不僅極富個性，還充分體現(xiàn)企業(yè)產(chǎn)品特色，是吸引和說服用戶點擊或購買的另一種有效視覺語言。

如圖，自定義的插畫設(shè)計，不僅能夠優(yōu)化網(wǎng)頁外觀，還能夠輕松打造吸睛而獨特的企業(yè)品牌形象，加深用戶對產(chǎn)品的印象。

照片和插畫拼貼

照片和插畫拼貼，是網(wǎng)頁設(shè)計中插畫元素的另一種創(chuàng)造性應(yīng)用。視覺效果極佳。

設(shè)計師們也可學(xué)習(xí)和模仿上圖拼貼設(shè)計方式，優(yōu)化網(wǎng)頁界面外觀。

12.明亮大膽的配色

大面積明亮色彩的應(yīng)用，也將在明年繼續(xù)流行。

明亮大膽的配色，不僅能夠突出對應(yīng)界面內(nèi)容，還能夠輕松喚起用戶相應(yīng)的情感，獲得共鳴，增加界面會話，從而有效提升產(chǎn)品銷量。

如圖，明亮大膽配色結(jié)合定制插畫設(shè)計，讓整個網(wǎng)頁設(shè)計吸睛、個性而極賦魅力。

13.重疊設(shè)計

界面元素的重疊設(shè)計，也將是2020年各類網(wǎng)頁設(shè)計會廣泛應(yīng)用到的設(shè)計，是設(shè)計師們突出界面信息，吸引更多用戶閱讀和購買的有效方式。

而具體設(shè)計過程中，設(shè)計師們要注意相關(guān)重疊組件的形狀設(shè)計、配色選擇以及層疊陰影的設(shè)置，避免不必要的視覺干擾，以順利呈現(xiàn)需要突出的界面信息。

如圖，利用重疊設(shè)計，突出卡片式設(shè)計呈現(xiàn)的促銷信息。

相關(guān)閱讀：卡片式設(shè)計流行的秘密 — 看完這15個案例你就懂了！

14.分屏設(shè)計

分屏設(shè)計，簡單來講，就是將全屏界面劃分成兩個或更多的垂直或水平的區(qū)域，分別展示不同的軟件產(chǎn)品信息，簡潔而直觀。必要時，還能有效對比各個區(qū)域信息，帶給用戶更深刻、強烈的感官刺激。此外，在實現(xiàn)網(wǎng)頁響應(yīng)式設(shè)計方面，它也極具優(yōu)勢。所以，最近幾年，分屏設(shè)計在網(wǎng)頁設(shè)計方面也越來越受歡迎。

如圖，設(shè)計師選用了兩個完全不同的功能模塊展示界面內(nèi)容。左側(cè)交互式的小機器人，有趣生動，能夠快速吸引用戶注意和停留。而右側(cè)的簡單文本和CTA按鈕設(shè)計，則為用戶了解網(wǎng)站功能，并點擊按鈕了解詳情提供了便利。

所以，兩個模塊，雖并排展示，但各司其職，同為吸引更多用戶而努力。

15.熱門網(wǎng)頁設(shè)計工具

以下是小編日常使用，簡單便利，必將成為2020年熱門的網(wǎng)頁設(shè)計工具：

1）Corel painter – 快速插畫設(shè)計工具

既然插畫設(shè)計如此熱門，如何快速定制網(wǎng)頁設(shè)計的插畫，也必然成為網(wǎng)頁設(shè)計師們首先需要解決的問題。而Corel painter就是這樣一款能夠幫助設(shè)計師快速繪制和優(yōu)化插畫設(shè)計的工具。

它提供了900多種插畫設(shè)計工具、豐富的插畫背景紋理和可定制的插畫布局模板。手繪、3D以及動態(tài)插畫設(shè)計都能輕松完成。

2）Logaster – 快速logo制作工具

Logo設(shè)計也是網(wǎng)頁設(shè)計的重要組成部分。而設(shè)計工具方面，小編推薦一款名為Logaster的在線logo制作和編輯工具。

其具體操作過程也相當(dāng)簡單。設(shè)計師輸入品牌名稱，Logaster就會自動分析該品牌名，并生成一系列創(chuàng)意Logo設(shè)計。輕松點擊，即可選擇繼續(xù)編輯優(yōu)化或直接下載該款Logo設(shè)計，并添加到網(wǎng)頁設(shè)計中，快速實用。

3）摹客iDoc – 高效在線設(shè)計協(xié)作工具

高效的團隊協(xié)作，也是打造最佳網(wǎng)頁設(shè)計的重要組成部分。而這方面，設(shè)計師們可以試試一款名為摹客iDoc的在線協(xié)作設(shè)計工具。

它作為新一代的產(chǎn)品協(xié)作設(shè)計工具，能夠無縫連接產(chǎn)品、設(shè)計和開發(fā)的各個階段，幫助產(chǎn)品設(shè)計團隊快速在線制作原型、測試、評論、審閱、分享和交付網(wǎng)頁設(shè)計。網(wǎng)頁設(shè)計資源和設(shè)計任務(wù)都能輕松管理。