2021年高質(zhì)感網(wǎng)站設(shè)計(jì)大趨勢(shì)

　　今年全球受到新冠肺炎的影響，人類的生活受到了重大影響：旅行禁令、封城、停校停課...深遠(yuǎn)影響了所有人，人們利用科技抗疫，網(wǎng)頁(yè)自然也沒有缺席，因此今年許多網(wǎng)頁(yè)設(shè)計(jì)的趨勢(shì)都圍繞在防疫上。

　　舉例來說：為了維持業(yè)績(jī)，企業(yè)大多投注了更多預(yù)算于線上商城上;美食外送成為主流，許多食品公司也順勢(shì)推出線上訂購(gòu)料理包的服務(wù)，甚至是教育機(jī)構(gòu)將課程搬上網(wǎng)絡(luò)，讓學(xué)生減少外出的機(jī)會(huì)避免染疫...這些變化勢(shì)必仍會(huì)延續(xù)到2021年。人們對(duì)于網(wǎng)頁(yè)設(shè)計(jì)的期盼更高，也希望透過網(wǎng)頁(yè)能夠得到更好的服務(wù)，更多的資訊，當(dāng)然也要賞心悅目，這些都是對(duì)于2021年網(wǎng)頁(yè)設(shè)計(jì)產(chǎn)業(yè)的挑戰(zhàn)。

　　有「閱讀感」的網(wǎng)頁(yè)設(shè)計(jì)風(fēng)

　　疫情期間，人與人的互動(dòng)少了，神奇的是人們與書的互動(dòng)變多了。許多資料顯示疫情期間，人們更愿意回到閱讀的懷抱。根據(jù)媒體報(bào)導(dǎo)指出，人們面對(duì)疫情降低人與人的互動(dòng)，在家進(jìn)行的休閑娛樂項(xiàng)目需求大增：拼圖、健身、游樂器等都熱銷一空，其中閱讀不但安全，也能滿足人們對(duì)于資訊的需求。

　　雜志風(fēng)格的網(wǎng)頁(yè)設(shè)計(jì)風(fēng)潮，也吹向了網(wǎng)頁(yè)設(shè)計(jì)。網(wǎng)站能否呈現(xiàn)出類似閱讀的方式呢?

　　這一點(diǎn)是十分肯定的，很巧合的是，許多客戶與我們的想法不謀而合，已經(jīng)將故事的概念應(yīng)用在網(wǎng)頁(yè)的產(chǎn)品說明，也十分樂見網(wǎng)頁(yè)設(shè)計(jì)公司將敘說故事的概念設(shè)計(jì)在網(wǎng)頁(yè)上。例如美兆集團(tuán)的Interior室內(nèi)設(shè)計(jì)雜志，采用了雜志設(shè)計(jì)風(fēng)格的版型，讓網(wǎng)頁(yè)瀏覽的過程更具故事性。

　　另外一個(gè)例子：大家健康雜志，是以紙本雜志為出版事業(yè)主體，后打造官方入口網(wǎng)站。從紙本的雜志延伸的官網(wǎng)，在首頁(yè)的呈現(xiàn)使用了顯著的區(qū)塊做出內(nèi)容區(qū)隔，類似報(bào)章雜志的專欄設(shè)計(jì)風(fēng)格，可以更容易與紙本的媒體有視覺上的連結(jié)。

　　雜志風(fēng)格的網(wǎng)頁(yè)設(shè)計(jì)呈現(xiàn)方式不只出現(xiàn)在設(shè)計(jì)相關(guān)的產(chǎn)業(yè)，連科技產(chǎn)業(yè)也非常喜愛。例如科技人文雜志W(wǎng)IRED的首頁(yè)呈現(xiàn)，就呈現(xiàn)出報(bào)章雜志的區(qū)塊式閱讀風(fēng)格，讓人一眼就像是回到了熟悉的紙本媒體。但可惜的是無法避免的廣告干擾了閱讀的廣告，而且很多...畢竟雜志媒體已經(jīng)萎縮了很多，不得不透過廣告獲利。

　　放下冷冰冰的產(chǎn)品說明，想想故事吧

　　人們都討厭硬生生的廣告，卻很喜歡聽故事，許多令人津津樂道的廣告，多有一段好的故事，讓產(chǎn)品介紹退居第二位，看似將重點(diǎn)放在故事，事實(shí)上以退為進(jìn)，反而讓人深深地記得產(chǎn)品與故事的緊密連結(jié)。

　　以美琪生技為例，是知名的個(gè)人清潔用品品牌。網(wǎng)站內(nèi)除了產(chǎn)品介紹外，透過部落格的專欄，將清潔防疫相關(guān)的知識(shí)以影片、文字等故事方式敘說給訪客，接著進(jìn)入產(chǎn)品的訊息分享，以故事取代廣告，增加訪客對(duì)于品牌的信任感。

　　網(wǎng)頁(yè)也應(yīng)該要有說故事的概念，幸運(yùn)的是網(wǎng)頁(yè)設(shè)計(jì)沒有頁(yè)數(shù)、時(shí)間與篇幅的限制，可以盡情揮灑各種巧思，但網(wǎng)頁(yè)設(shè)計(jì)卻相對(duì)更為困難，舉例來說：要設(shè)計(jì)出滾動(dòng)網(wǎng)頁(yè)視覺特效，就需要Javascript與CSS的技術(shù)，加上視覺設(shè)計(jì)、文字設(shè)計(jì)等工作，團(tuán)隊(duì)合作上要有一定的默契。

　　2021年網(wǎng)頁(yè)更需互動(dòng)

　　越來越多人透過網(wǎng)絡(luò)找尋服務(wù)，網(wǎng)站提供的即時(shí)通訊工具，有助于解決信件與表單無法解決的問題。

　　網(wǎng)頁(yè)上即時(shí)通訊平臺(tái)首推微信和QQ，原因十分單純：在國(guó)內(nèi)的通用性最高，且基本功能免費(fèi)，只要將程式碼交給網(wǎng)頁(yè)設(shè)計(jì)人員，就能讓你的網(wǎng)站搖身一變成為與客戶溝通的平臺(tái)。功能對(duì)中小企業(yè)來說也已經(jīng)夠用，由于微信與QQ已經(jīng)是全球數(shù)以億計(jì)的即時(shí)通訊平臺(tái)，越來越多客戶管理系統(tǒng)(CRM)都有串聯(lián)的功能，讓客戶聯(lián)系的過程得以記錄在一個(gè)整合的資料庫(kù)內(nèi)。

　　除了即時(shí)通訊工具以外，線上研討會(huì)也是維系客戶的一個(gè)好辦法。在疫情散播之前，許多線上會(huì)議的軟體以企業(yè)為對(duì)主要用戶，價(jià)格并不便宜，疫情爆發(fā)之后，多數(shù)的線上會(huì)議工具暫停收費(fèi)或推出免費(fèi)版，全球掀起了一股線上研討會(huì)的熱潮。

　　滿版留白、網(wǎng)頁(yè)設(shè)計(jì)新主流

　　用戶來到網(wǎng)站，一開始會(huì)觀察網(wǎng)頁(yè)設(shè)計(jì)的視覺效果，所以如何留下一個(gè)好印象，版型是一個(gè)關(guān)鍵指標(biāo)。以往將網(wǎng)頁(yè)填滿資訊，與大量按鈕的舊式設(shè)計(jì)逐漸退場(chǎng)，這幾年的網(wǎng)頁(yè)版型技巧上，滿版+留白設(shè)計(jì)受到不少客戶青睞，有幾個(gè)主要的原因：

　　首先，滿版網(wǎng)頁(yè)設(shè)計(jì)非常適合呈現(xiàn)照片式的內(nèi)容，當(dāng)你的主題以照片呈現(xiàn)時(shí)，滿版可以讓用戶的專注力聚焦在圖片上。以Allboard English這個(gè)網(wǎng)站來說，一張照片就能呈現(xiàn)出上課時(shí)的環(huán)境、師資與學(xué)生的活力，沒有什么比這樣的照片更具說服力了。

　　接著，滿版網(wǎng)頁(yè)設(shè)計(jì)更符合RWD響應(yīng)式的設(shè)計(jì)，這一次的案例來說，滿版的網(wǎng)頁(yè)設(shè)計(jì)結(jié)合了區(qū)塊式的內(nèi)容呈現(xiàn)，帶來了更鮮明的內(nèi)容呈現(xiàn)，恰好與智慧手機(jī)經(jīng)常使用的卡片式內(nèi)容呈現(xiàn)模式相似。此外，大量的按鈕整合在漢堡選單也是一個(gè)顯著的趨勢(shì)，使用漢堡選單于網(wǎng)頁(yè)設(shè)計(jì)是一個(gè)很重要的趨勢(shì)，尤其是對(duì)于智慧手機(jī)網(wǎng)頁(yè)設(shè)計(jì)來說。

　　另外一個(gè)滿版的案例是圣光雕刻，滿版網(wǎng)頁(yè)設(shè)計(jì)的視覺搭配了大量的留白，網(wǎng)頁(yè)沒有被滿滿的圖文擠滿，而是圖文內(nèi)容以和諧的方式呈現(xiàn)，與文物的質(zhì)感相互呼應(yīng)，雖然用戶得多花一點(diǎn)時(shí)間卷動(dòng)網(wǎng)頁(yè)，才能看到完整的內(nèi)容，但訪客會(huì)更樂于停在網(wǎng)站上閱讀內(nèi)容，對(duì)于網(wǎng)站的客戶停留時(shí)間指標(biāo)來說，會(huì)帶來一定的幫助。

　　形象區(qū)塊：強(qiáng)而有力的循環(huán)影片

　　利用影片于網(wǎng)頁(yè)設(shè)計(jì)的情境很多，最常見的情境之一就是將影片放在首頁(yè)上方，給訪客視覺上的驚喜。不過，我們注意到大多數(shù)的首頁(yè)影片，因?yàn)橛捌瑱n案過大，用戶畫面還沒呈現(xiàn)之前，就已經(jīng)離開了網(wǎng)頁(yè)。

　　網(wǎng)頁(yè)設(shè)計(jì)者要考慮到影片檔案遠(yuǎn)比文字、圖片來得大數(shù)十倍，甚至百倍，使用不當(dāng)會(huì)使得網(wǎng)頁(yè)開啟得緩慢，我們建議使用影片務(wù)必優(yōu)化影片，讓影片更適合在網(wǎng)頁(yè)上呈現(xiàn)。

　　先從影音服務(wù)開始說起，除了免費(fèi)的視頻平臺(tái)以外，有許多付費(fèi)的影音平臺(tái)提供了無廣告，也更穩(wěn)定的影音服務(wù)，這是一個(gè)提升網(wǎng)頁(yè)影音品質(zhì)的策略。另外，將影片的長(zhǎng)度縮短是縮小影片檔案大小最立竿見影的方式，例如我們最近看到了羅技滑鼠的新產(chǎn)品網(wǎng)頁(yè)，使用了循環(huán)影片播放的方式，檔案格視為MP4，且大小控制在3MB，既能表現(xiàn)產(chǎn)品的高質(zhì)感又能快速于網(wǎng)頁(yè)上顯示，相當(dāng)值得學(xué)習(xí)。

　　網(wǎng)頁(yè)品質(zhì)三要素：響應(yīng)式設(shè)計(jì)、速度、內(nèi)容

　　2020年Google Search Console(原站長(zhǎng)工具)出現(xiàn)了很大的新元素：網(wǎng)站核心使用體驗(yàn)。這個(gè)新的標(biāo)準(zhǔn)有三個(gè)新的指標(biāo)，LCP (最大內(nèi)容繪制)、FID (首次輸入延遲時(shí)間)和CLS(累計(jì)版面配置轉(zhuǎn)移)，這三個(gè)新的指標(biāo)要達(dá)到Google的標(biāo)準(zhǔn)并不容易，考驗(yàn)著網(wǎng)站開發(fā)人員。這三個(gè)標(biāo)準(zhǔn)預(yù)計(jì)在2021年納入指標(biāo)，勢(shì)必影響網(wǎng)站排名，相信未來類似百度的國(guó)內(nèi)搜索引擎也會(huì)采用此標(biāo)準(zhǔn)。

　　最后，網(wǎng)站的內(nèi)容仍主導(dǎo)了搜尋引擎自然排名的結(jié)果。一個(gè)好的網(wǎng)站，應(yīng)該持續(xù)更新內(nèi)容，內(nèi)容對(duì)用戶有幫助，就有更高的曝光機(jī)會(huì)。網(wǎng)站的內(nèi)容不再局限于文字與圖片，影音早就已經(jīng)是今日網(wǎng)絡(luò)用戶的最愛，企業(yè)應(yīng)該試著開發(fā)出有助于用戶的影音內(nèi)容，并且放在公開的影音平臺(tái)。

　　綜觀上述的幾個(gè)趨勢(shì)，不難察覺網(wǎng)站的設(shè)計(jì)品質(zhì)決定了一個(gè)網(wǎng)站的排名，遵守搜索引擎的網(wǎng)頁(yè)設(shè)計(jì)規(guī)范，并且優(yōu)化網(wǎng)頁(yè)的讀取效率，加強(qiáng)網(wǎng)站的內(nèi)容品質(zhì)，做到這三點(diǎn)的網(wǎng)站必可取得較佳的自然排名。

　　讓網(wǎng)頁(yè)具備基本電商功能

　　疫情下的經(jīng)濟(jì)大量仰賴電子商務(wù)，但要短時(shí)間內(nèi)成立一個(gè)電子商城，并不是一件容易的事情，因此有客戶使用簡(jiǎn)易的表單功能，做到基礎(chǔ)電子商務(wù)的服務(wù)。雖然表單的功能并不強(qiáng)大，便利性也比不上線上金流支付，優(yōu)點(diǎn)是可以與客戶做進(jìn)一步的確認(rèn)訂單，也能減少網(wǎng)絡(luò)詐騙的問題，仍有不少?gòu)S商運(yùn)用表單的方式，達(dá)到電子商務(wù)的目的。

　　例如上圖的案例中所推出的湯品調(diào)理包大受市場(chǎng)歡迎，透過表單的功能，能夠讓客戶自己下訂組合不同的組合，并且選擇付款的方式后，就能夠完成線上訂購(gòu)。

　　使用表單替代電子商務(wù)，我們認(rèn)為最好的方式是與網(wǎng)頁(yè)設(shè)計(jì)結(jié)合，將表單與網(wǎng)站融合在一起，因?yàn)榫W(wǎng)站內(nèi)的產(chǎn)品介紹，聯(lián)絡(luò)資訊等內(nèi)容，都可以提升用戶的信任感，填寫表單也比較不會(huì)擔(dān)心遇到詐騙。