2020年網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)和預(yù)測(cè)杭州上華網(wǎng)站設(shè)計(jì)公司專(zhuān)注高端網(wǎng)站

時(shí)間：2023-10-14 21:00:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-10-14 21:00:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)

2020年網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)和預(yù)測(cè)杭州上華網(wǎng)站設(shè)計(jì)公司專(zhuān)注高端網(wǎng)站：


截至2020年1月，全球約有17.4億個(gè)網(wǎng)站，活躍的互聯(lián)網(wǎng)用戶近44.3億。
今年，您可以期待更多的企業(yè)和機(jī)構(gòu)加強(qiáng)其在線業(yè)務(wù)。隨著世界擁抱包容性和可訪問(wèn)性，人們可以期望互聯(lián)網(wǎng)普及率會(huì)更高。
鑒于龐大的網(wǎng)站和互聯(lián)網(wǎng)用戶的多樣性，開(kāi)發(fā)人員面臨著一些令人興奮的挑戰(zhàn)。為了能夠脫穎而出，網(wǎng)頁(yè)設(shè)計(jì)不僅要漂亮。他們必須滿足網(wǎng)絡(luò)用戶的期望并能夠引起他們的注意。同時(shí)，他們還必須支持客戶增加訪客參與度和轉(zhuǎn)化率的目標(biāo)。杭州上華網(wǎng)站設(shè)計(jì)公司整理收集，侵權(quán)刪！
以下是網(wǎng)頁(yè)設(shè)計(jì)師必須考慮的一些關(guān)鍵統(tǒng)計(jì)數(shù)據(jù)。
全球互聯(lián)網(wǎng)普及率已從2013年的35％增加到2019年的58％。
截至2019年，互聯(lián)網(wǎng)普及率最高的地區(qū)是北美（95％），北歐（95％）和西歐（94％）。
在美國(guó)，人們將更多時(shí)間花在智能手機(jī)應(yīng)用上，從2017年的50％到2019年的63％。



移動(dòng)支出約占數(shù)字化購(gòu)買(mǎi)的30％。
網(wǎng)絡(luò)星期一的移動(dòng)購(gòu)物份額超過(guò)40％，高于2018年的35％。



大約48％的人認(rèn)為網(wǎng)站的設(shè)計(jì)是確定公司信譽(yù)的關(guān)鍵因素。
用戶可以在50毫秒內(nèi)評(píng)估網(wǎng)站的視覺(jué)吸引力。
如果網(wǎng)站加載時(shí)間太慢，則有44％的用戶切換設(shè)備，而39％的用戶停止與網(wǎng)站互動(dòng)。杭州上華網(wǎng)站設(shè)計(jì)公司整理收集，侵權(quán)刪！
顯示和設(shè)計(jì)在內(nèi)容查看體驗(yàn)中起著關(guān)鍵作用。在Adobe的內(nèi)容狀況報(bào)告中，有80％的用戶選擇了保持注意力的能力對(duì)他們的個(gè)人生活至關(guān)重要，而72％的用戶則認(rèn)為對(duì)他們的職業(yè)生活很重要。就內(nèi)容在其設(shè)備上的顯示效果而言，有73％的用戶認(rèn)為這對(duì)于查看個(gè)人和專(zhuān)業(yè)用途的內(nèi)容至關(guān)重要。



在GoodFirms的一項(xiàng)研究中，有85％的網(wǎng)頁(yè)設(shè)計(jì)師將擁擠的網(wǎng)站設(shè)計(jì)稱(chēng)為小型企業(yè)最常見(jiàn)的網(wǎng)頁(yè)設(shè)計(jì)錯(cuò)誤。提到的其他問(wèn)題包括缺少號(hào)召性用語(yǔ)（38％），隱藏的導(dǎo)航（31％），不良的Web排版（27％）和對(duì)空白的不充分使用（19％）。杭州上華網(wǎng)站設(shè)計(jì)公司整理收集，侵權(quán)刪！



在UXPin在gDiaper的首頁(yè)橫幅與其下方的兩個(gè)標(biāo)注之間添加空格之后，桌面訪問(wèn)者使用標(biāo)注的頻率提高了150％，網(wǎng)站的整體轉(zhuǎn)化率躍升了近20％。杭州上華網(wǎng)站設(shè)計(jì)公司整理收集，侵權(quán)刪！



鑒于Web設(shè)計(jì)在多大程度上影響了Web用戶的行為，Web開(kāi)發(fā)人員必須繼續(xù)探索以獨(dú)特而直觀的設(shè)計(jì)吸引受眾的方法，而又不會(huì)忽視可訪問(wèn)性，功能和轉(zhuǎn)換注意事項(xiàng)。杭州上華網(wǎng)站設(shè)計(jì)公司整理收集，侵權(quán)刪！
值得慶幸的是，持續(xù)的技術(shù)進(jìn)步為網(wǎng)頁(yè)設(shè)計(jì)師提供了更多的資源和工具，以創(chuàng)造身臨其境的體驗(yàn)并建立令人愉悅的網(wǎng)頁(yè)。以下是開(kāi)發(fā)人員今年可以用來(lái)提高受眾參與度和轉(zhuǎn)化率的主要Web設(shè)計(jì)趨勢(shì)。
2020年Web設(shè)計(jì)趨勢(shì)和預(yù)測(cè)以提高參與度和影響力
1.網(wǎng)站設(shè)計(jì)之幻燈片視頻

在過(guò)去的幾年中，許多網(wǎng)站開(kāi)始使用橫幅或英雄圖像來(lái)產(chǎn)生強(qiáng)大的視覺(jué)效果。訪客進(jìn)入網(wǎng)站后，會(huì)以全尺寸的靜態(tài)圖像向他們招呼。
這種設(shè)計(jì)沒(méi)有在網(wǎng)站上找到多個(gè)選項(xiàng)和元素，而是使訪問(wèn)者的眼睛專(zhuān)注于精心選擇的圖像和精心制作的副本。杭州上華網(wǎng)站設(shè)計(jì)公司高端網(wǎng)站設(shè)計(jì)建設(shè)。
最近，由于互聯(lián)網(wǎng)速度加快，設(shè)計(jì)人員已開(kāi)始用短視頻剪輯或循環(huán)替換靜態(tài)圖像。如果一張照片可以說(shuō)一千個(gè)單詞，那么品牌可以在這些視頻中包含更多內(nèi)容（根據(jù)Forrester研究人員James McQuivey博士的說(shuō)法，每1分鐘的視頻有180萬(wàn)個(gè)單詞）。
視頻在用戶參與度方面排名很高，實(shí)際上是首選的內(nèi)容形式。根據(jù)ComScore的統(tǒng)計(jì)，觀看視頻的用戶中有64％的人 “更有可能在網(wǎng)上購(gòu)買(mǎi)產(chǎn)品。”通過(guò)使用英雄視頻標(biāo)題，公司可以使他們的網(wǎng)頁(yè)更具動(dòng)態(tài)性，提高受眾參與度并鼓勵(lì)訪問(wèn)者在頁(yè)面上停留更長(zhǎng)的時(shí)間。
像橫幅圖像一樣，您可以通過(guò)多種方式使用英雄視頻標(biāo)題。您的剪輯可以專(zhuān)注于您的品牌，產(chǎn)品或內(nèi)容。
登陸Google藝術(shù)與文化網(wǎng)站，觀看者將欣賞國(guó)家公園的視頻片段，將它們帶到水下，在陸地上以及通過(guò)空中拍攝，郁郁蔥蔥的森林，雄偉的風(fēng)景，洞穴，冰和野生動(dòng)植物。



Elium使用的視頻背景重點(diǎn)介紹了公司的工作。



2.網(wǎng)站設(shè)計(jì)之沉浸式互動(dòng)
您希望考慮增加觀眾互動(dòng)的另一個(gè)設(shè)計(jì)趨勢(shì)是交互式設(shè)計(jì)和內(nèi)容。
除了更有趣，更有趣之外，交互式設(shè)計(jì)和內(nèi)容還為受眾群體提供了個(gè)性化他們的網(wǎng)站體驗(yàn)的工具。與視頻類(lèi)似，它們使您能夠吸引訪問(wèn)者的感官，從而更好地展示您的品牌，產(chǎn)品或公司所提供的產(chǎn)品。同樣重要的是，交互式設(shè)計(jì)使您的訪客可以直接轉(zhuǎn)到他們想要看到的內(nèi)容。
以山上的虛擬游覽為例。古巴中心的網(wǎng)站。訪客可以選擇他們要看的部分以及哪個(gè)季節(jié)（夏季，春季或秋季）。杭州上華網(wǎng)站設(shè)計(jì)公司高端網(wǎng)站設(shè)計(jì)建設(shè)。



該視頻是從人行道上拍攝的，使觀眾感覺(jué)自己實(shí)際上是在茂密的綠色環(huán)境中漫步。屏幕上有一個(gè)白色的點(diǎn)懸停以指示一些有趣的植被。用戶可以單擊它以查看工廠的名稱(chēng)和其他信息。
巫師網(wǎng)站上設(shè)有大陸地圖和重要事件的互動(dòng)時(shí)間表。它可以幫助觀眾直觀地了解這些事件的發(fā)生地點(diǎn)和時(shí)間。



有很多方法可以在您的站點(diǎn)中納入交互性。這里僅僅是少數(shù)：
像《極客倫敦指南》這樣的信息圖
調(diào)查，民意測(cè)驗(yàn)和計(jì)算器
像七個(gè)數(shù)字致命罪之類(lèi)的視頻。觀眾不必觀看完整的視頻，而是可以從七個(gè)較短的剪輯中選擇想要觀看的視頻和順序。



評(píng)估人員填寫(xiě)表單后會(huì)收到分析或反饋。尼爾·帕特爾（Neil Patel）的博客就是一個(gè)例子，用戶可以在其中進(jìn)入競(jìng)爭(zhēng)對(duì)手的域，以獲取有關(guān)如何“超越”他們的SEO技巧。



3.網(wǎng)站設(shè)計(jì)之插圖作為區(qū)分
插圖的使用是我們前幾年看到的另一趨勢(shì)，從徽標(biāo)到標(biāo)頭圖像，視頻，登錄頁(yè)面以及整個(gè)網(wǎng)站，幾乎都將其用于圖形。這是使您的網(wǎng)站更具娛樂(lè)性，表達(dá)更多情感或使您的網(wǎng)站充滿樂(lè)趣的一種通用方法。
隨著越來(lái)越多的公司加入潮流，插圖似乎開(kāi)始失去吸引力。設(shè)計(jì)師現(xiàn)在正在尋找其他方法來(lái)使插圖脫穎而出。這里僅僅是少數(shù)：
抽象插圖。盡管這些可以使頁(yè)面具有獨(dú)特的外觀，但設(shè)計(jì)師需要確保訪問(wèn)者仍然能夠掌握其含義。
將插圖與照片或其他圖形結(jié)合在一起的拼貼畫(huà)可創(chuàng)造出獨(dú)特而有趣的效果。夢(mèng)幻島（Neverland）主頁(yè)。杭州上華網(wǎng)站設(shè)計(jì)公司高端網(wǎng)站設(shè)計(jì)建設(shè)。
上的拼貼畫(huà)可創(chuàng)建3D效果。該網(wǎng)站還使用了微動(dòng)畫(huà)和獨(dú)特的導(dǎo)航樣式，似乎將他們的訪客帶入了夢(mèng)幻般的旅程。



自行車(chē)熊將插圖，熊圖像和微型動(dòng)畫(huà)結(jié)合在一起，創(chuàng)建了一個(gè)很難忘的有趣站點(diǎn)。



互動(dòng)動(dòng)畫(huà)插圖。Gucci Zumi使用動(dòng)畫(huà)插圖，鮮艷的色彩和聲音。



4. 網(wǎng)站設(shè)計(jì)之3D
得益于3D技術(shù)的發(fā)展及其更實(shí)惠的價(jià)格，現(xiàn)在越來(lái)越多的設(shè)計(jì)師開(kāi)始嘗試3D視覺(jué)效果。
在網(wǎng)頁(yè)設(shè)計(jì)中使用3D元素可以吸引頁(yè)面。結(jié)合聲音，互動(dòng)元素或流行色等其他功能，它可以將您的聽(tīng)眾浸入一個(gè)完全不同的世界。從某種意義上講，它測(cè)試了用戶面前的內(nèi)容與他們屏幕中的內(nèi)容之間的界限。
借助3D圖形，訪問(wèn)者更有可能在您的網(wǎng)站上停留更長(zhǎng)的時(shí)間。另外，他們不只是在設(shè)備上“看到”您的公司。通過(guò)與您的網(wǎng)頁(yè)設(shè)計(jì)進(jìn)行交互，他們也可以“體驗(yàn)”您的品牌。
A-0.Design的主頁(yè)將3D視覺(jué)效果與背景音樂(lè)，動(dòng)畫(huà)和互動(dòng)元素融為一體，以吸引游客并激發(fā)他們的好奇心。
杭州上華網(wǎng)站設(shè)計(jì)公司高端網(wǎng)站設(shè)計(jì)建設(shè)。




Campo Alle Comete擁有3D視覺(jué)效果，并帶有令人舒緩的童話般的背景音樂(lè)，以吸引游客的眼球。通過(guò)拖動(dòng)鼠標(biāo)，用戶可以從不同角度查看浮動(dòng)城市，或者放大以查看要素。動(dòng)畫(huà)的綠色圓點(diǎn)表示觀眾可以單擊并查看有關(guān)該公司葡萄酒產(chǎn)品的更多詳細(xì)信息。



5.網(wǎng)站設(shè)計(jì)之視差滾動(dòng)
為觀眾創(chuàng)造身臨其境的體驗(yàn)的另一種方法是通過(guò)視差滾動(dòng)。這種滾動(dòng)技術(shù)通常在視頻游戲中使用，其背景移動(dòng)速度比前景圖形慢。這種趨勢(shì)在多年前廣受歡迎，但這種趨勢(shì)仍在繼續(xù)。
視差滾動(dòng)創(chuàng)建了一種人造3D效果，可以吸引觀眾。正確使用此技術(shù)可以完美地融合文字和視覺(jué)效果，喚起觀眾的情感，使您的信息更加清晰，并給您的品牌留下持久的印象。
Rainforest Foods使用不同景觀的圖像和視頻來(lái)引導(dǎo)觀眾穿越自然步道。英雄文字鼓舞人心，信息摘要著迷，同時(shí)也向網(wǎng)絡(luò)訪問(wèn)者介紹了他們的產(chǎn)品。



賺錢(qián)很重要使用插圖和視差滾動(dòng)來(lái)創(chuàng)建“錢(qián)跡”。效果是將引人入勝的內(nèi)容分解為一口大小，易于理解的部分。它可以幫助用戶了解將錢(qián)存入大型銀行后的去向，以及將錢(qián)存入信用合作社的好處。



6.網(wǎng)站設(shè)計(jì)之空白
在這個(gè)時(shí)代，許多用戶的注意力跨度較短，并且不斷受到市場(chǎng)營(yíng)銷(xiāo)信息的轟炸，公司需要確保其目標(biāo)客戶了解他們的主要信息。在網(wǎng)頁(yè)設(shè)計(jì)方面，這可以通過(guò)使用空白來(lái)實(shí)現(xiàn)。
空格（也稱(chēng)為負(fù)空格）是指元素之間的空白，例如文本，圖像，菜單和視頻。盡管許多設(shè)計(jì)師經(jīng)常追求白色，但負(fù)空間也可以采用其他顏色。
有些人認(rèn)為白色空間的使用（尤其是很多）是對(duì)空間的浪費(fèi)。特別是如果您在營(yíng)銷(xiāo)方面花了很多錢(qián)，只是為了吸引訪問(wèn)者到您的站點(diǎn)，則希望為他們提供盡可能多的信息。
但是，空格實(shí)際上不會(huì)浪費(fèi)您網(wǎng)站上的寶貴區(qū)域，實(shí)際上可以使訪問(wèn)者將注意力集中在頁(yè)面的最重要部分。例如，您不必沉迷于信息或產(chǎn)品的海洋中，而是將他們的注意力集中在關(guān)鍵要約或特定的號(hào)召性用語(yǔ)上。
在美學(xué)方面，白色空間使網(wǎng)站看起來(lái)干凈整潔。它為用戶提供了一個(gè)“視覺(jué)呼吸室”，使他們可以更好地欣賞您網(wǎng)站的元素，而不會(huì)因混亂而感到不知所措或與所有吸引他們注意的元素相混淆。
正如圖形設(shè)計(jì)師和策展人艾倫·拉普頓（Ellen Lupton）所說(shuō)：“設(shè)計(jì)既是間隔行為，又是標(biāo)記行為?！?br>我們可以期望更多的網(wǎng)站在其站點(diǎn)中增加對(duì)這種設(shè)計(jì)原則的使用。其他人甚至正在遠(yuǎn)離流血的背景，并使用空白幀使他們的圖形脫穎而出，并將網(wǎng)頁(yè)整齊地分成不同的部分。
為了有效地使用負(fù)空間，您還需要考慮其他設(shè)計(jì)元素，例如版式和對(duì)比度。如果希望查看者將注意力集中在粗體大字體上，則必須在同一頁(yè)面上盡量減少使用其他文本或元素。另外，請(qǐng)使用對(duì)比色使復(fù)印件脫穎而出。
例如，搜索引擎DuckDuckGo在白色背景上帶有橙色徽標(biāo)，并保持其主頁(yè)清潔。



Netflix有一個(gè)簡(jiǎn)單的常見(jiàn)問(wèn)題解答部分，該部分使用深色背景和白色文字。請(qǐng)注意，CTA按鈕以紅色背景彈出。



7.網(wǎng)站設(shè)計(jì)之幾何形狀
創(chuàng)建迷人設(shè)計(jì)并傳達(dá)更多含義和情感的另一種方法是利用諸如圓形，三角形和其他多邊形之類(lèi)的幾何形式。
有很多方法可以將這些元素合并到您的站點(diǎn)中：
使用一種或幾種形狀創(chuàng)建幾何圖案
使用色彩鮮艷的單個(gè)形狀
創(chuàng)建非對(duì)稱(chēng)設(shè)計(jì)。
使用幾何形式作為背景或?qū)Ш胶涂蚣茉亍?br>使用幾何形式進(jìn)行設(shè)計(jì)時(shí)，請(qǐng)記住每種形狀都傳達(dá)特定的含義。例如，正方形與形式和合理性相關(guān)。圓圈反映出和諧，聯(lián)系和女性氣質(zhì)。六邊形可以用來(lái)顯示平衡與合作。
選擇支持您要表達(dá)的意思或要?jiǎng)?chuàng)建的心情的表格。
PageCloud還指出了選擇能說(shuō)明您品牌的形狀的重要性。
“在PageCloud上，我們使用圓圈有兩個(gè)原因：1.我們不相信被鎖定在通常由“正方形”表示的網(wǎng)格中。2.圓圈代表設(shè)計(jì)師，開(kāi)發(fā)人員和企業(yè)主之間的協(xié)作?！?br>
Andrei Gorohov的網(wǎng)站使用六邊形作為導(dǎo)航菜單。



藝術(shù)中心使用不完美的彩色形狀從白色背景中彈出，營(yíng)造出童趣般的童趣。



8.網(wǎng)站設(shè)計(jì)之輔助功能
Web可訪問(wèn)性考慮了以下Web用戶：
看不見(jiàn)或視力不好。
具有身體殘疾，例如那些難以抓住物體并且難以使用鼠標(biāo)或鍵盤(pán)的人。
有閱讀障礙等學(xué)習(xí)障礙。
無(wú)法聽(tīng)到。
互聯(lián)網(wǎng)連接速度慢。
沒(méi)有太多時(shí)間消耗大量?jī)?nèi)容。

杭州上華網(wǎng)站設(shè)計(jì)公司高端網(wǎng)站設(shè)計(jì)建設(shè)。

有些人可能認(rèn)為能力不同的個(gè)人（也是網(wǎng)絡(luò)用戶）僅占人口的一小部分。但統(tǒng)計(jì)數(shù)字顯示并非如此。
2017年，據(jù)估計(jì)全世界有超過(guò)2.85億人報(bào)告有視力障礙，超過(guò)3.6億人有聽(tīng)力障礙。
這些數(shù)字可能包括您的老客戶，他們可能難以瀏覽您的產(chǎn)品頁(yè)面或閱讀您的內(nèi)容，色盲的客戶，以及聽(tīng)不到但想通過(guò)您的視頻了解有關(guān)您的服務(wù)的受眾。
如果您是向國(guó)際受眾進(jìn)行營(yíng)銷(xiāo)，則可能還需要考慮到，如果您使用的是繁重的圖形，則特定國(guó)家/地區(qū)的用戶可能會(huì)發(fā)現(xiàn)很難查看您的網(wǎng)站。
在過(guò)去的幾年中，由于視覺(jué)或聽(tīng)覺(jué)障礙人士無(wú)法訪問(wèn)網(wǎng)絡(luò)，在美國(guó)針對(duì)公司提起訴訟。
隨著越來(lái)越多的人要求訪問(wèn)Web，您不希望您的客戶或企業(yè)面臨類(lèi)似的法律訴訟。您也不希望潛在客戶遷移到競(jìng)爭(zhēng)對(duì)手的網(wǎng)站，因?yàn)樗麄兊捻?yè)面比您的頁(yè)面更易于訪問(wèn)。
有很多方法可以確保您的網(wǎng)站可訪問(wèn)。這里僅僅是少數(shù)：
確保即使單獨(dú)使用鍵盤(pán)，用戶也可以瀏覽您的網(wǎng)站并享受使用互動(dòng)元素的樂(lè)趣。
在線使用免費(fèi)和付費(fèi)的輔助功能工具。
使用可訪問(wèn)的內(nèi)容管理系統(tǒng)模板。
如果您使用圖像來(lái)傳達(dá)信息，請(qǐng)?zhí)砑犹娲淖帧?br>仔細(xì)挑選顏色。請(qǐng)記住，有些人有紅綠色的缺陷。而不是僅依靠顏色，還包括其他視覺(jué)提示或標(biāo)志，以便那些患有顏色不足的人仍可以掌握您的信息。
在影片中加入字幕。
對(duì)于播客或采訪，請(qǐng)?zhí)峁┏煽?jī)單。
Microsoft為能力不同的個(gè)人提供了輔助功能工具。他們還介紹了用戶可以用眼睛玩的游戲。



Neil Patel的網(wǎng)站允許訪問(wèn)者進(jìn)行輔助功能調(diào)整。



帶走
上面的特色網(wǎng)站揭示了創(chuàng)建令人驚嘆且有效的網(wǎng)頁(yè)的另一個(gè)關(guān)鍵因素。您不必只關(guān)注一種設(shè)計(jì)趨勢(shì)。您可以混合搭配，組合不同的元素，直到可以建立一個(gè)讓人愉悅，有見(jiàn)地和轉(zhuǎn)化的網(wǎng)站。