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

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

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

　　有「閱讀感」的網(wǎng)頁設計風

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

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

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

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

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

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

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

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

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

　　2021年網(wǎng)頁更需互動

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

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

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

　　滿版留白、網(wǎng)頁設計新主流

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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