十個網頁設計2020新趨勢

本文參考了瑞士網上推廣公司Sondora最新2019年的博客 ，由其CEO Dennis Dubner所撰寫 ，深入探討2020網頁設計趨勢。原文請參考Dubner(2019)

一個十年就快結束，過去十年，網頁設計及網絡技術出現翻天覆地的變化，智能手機的迅速掘起，4G的成熟發展等，都令到十年前沒人想像過的情況發生。2020年即將來臨，我們相信顯示技術的進一步改革，以及設計風格的進化，網頁設計2020的十個新趨勢，請讀下文：

網頁設計2020新趨勢

2019大興其道的網頁潮流，例如漸變色彩，證明了富動感的設計嬴得市場的支持，亦預視了2020年將會是動態網頁設計元素大放異彩的一年，與此同時，諸如Google及Apple等龍頭，卻使用了不少簡約主義(Minimalism)的單色元素，我們稱之為Flat design，這種看似反其道而行的設計，更令市場百花齊放。以下我們將會分別討論兩大主要領域：電子商貿網站設計及響應式網頁設計的2020新趨勢。

電子商貿網站設計

到了21世紀20年代，以千萬計的人們將會把傳統消費模式搬至網上世界，當中網店的成功因素有賴用戶介面及體驗 (User Interface / User Experience, UI/UX)，其中最直接的包括好用度 (Usability)、網站速度 (Speed)及簡易度 (Simplicity)。大家總不會期望一個操作極複雜的網店能留得住多少客人的。

響應式網頁設計

同樣，智能手機仍是主要的上網裝置，到了2019年，超過六成的上網首選手機，試想想如你的網站不能在手機妥善顯示，做成使用的極度不便，那將會是十分趕客的。如果到了2020年你的網站仍未能支援手機，做到響應式網頁設計 (Responsive Web Design, RWD)，那就更加要閱讀本文，只是十分鐘，就可以改變你的網上業務。

延伸閱讀: 響應式網頁設計的好處

簡約的淨色

在云云品牌中要脫穎而出，大膽破格的色彩，可以突然你的品牌個性。很多客戶在評價香港網頁設計時，往往變得保守，怕太過進取大膽的色彩運用，令人以為公司不正經和兒戲。其實做生意和設計，最怕不是被人評頭品足，而是沒有人說三道四，也是市場學常說的Noise。簡單用色，就是網店常用的風格，讓顧客的焦點放在產品上。有時客人的過份保守，正是香港網站設計公司不願行出一步的原因。

延伸閱讀: 2019七個現代網頁設計的趨勢

動態插圖及動畫

回首2017，是短片冒起的一年，可是短片實在需要一定的頻寬，減慢網頁下載的速度，影響到整體的UX及SEO排名。動態插圖也許就是一個不錯的借代方案，例如很久以前，常在論壇出現的動態圖GIF，既不如短片般霸佔大量的頻寬，又有生動有趣的效果，現在也很常見的動態，包括Parallax(景深效果)、Mouseover(電腦上的指著特效)等，也有很多短片網站(如 Youtube)使用GIF作為短片預覽，或是簡易指示。這些不少的效果都不似短片般每格儲存，而是由電腦程式語言編寫，使其需要的檔案極細，尤其適合在手機上顯示。

延伸閱讀: 七個2020年最要留意的網頁設計趨勢

不對稱網頁框架

很多網頁設計都原用網格，令網頁看落十分工整和單調。到了2020年，我們預計除了大膽用色外，破壞性的不對稱設計將會變得流行。不對稱網頁設計過往較多在個人網站出現，尤其是一些設計師、潮流教主等，因為這種設計方式令個人性格特出，當然在處理特別的設計時，稍一不慎甚至為做而做，就會變得標其立異，做成反效果。而且不對稱網頁設計較難處理大量的內容，如企業本身需要呈現大量資料，不對稱設計或者不一定適合。無論如何，網頁設計的重點之一是將有用資訊傳達給網站用家，不應喧賓奪主，做成「妹仔大過主人房」既情況。

延伸閱讀: 2019 網頁設計新潮流

驕傲的字體

原文的字眼是「Loud and Proud」，中文的文化較含蓄內斂，很難精準傳意。同性戀者每年的Pride parad一般稱作「驕傲遊行」，我們就姑且稱之為「驕傲的字體」。在設計界有一句諺語：一圖勝千字，但字體正正是將文字以圖案的形式呈現，好似近年香港風行的「勁揪體」，其實內容本身就只是四隻中文大字，但加上字體後，就令整件事情生龍活現。遺憾的是中文世界並沒有太多開放的資源，不似同為方塊文字的日文般，有著千變萬化的書法體現，在網頁上更唯我獨尊的只能使用圓體。至今仍有很多中文網站，為了追求書法字體帶來的個性及情感，而使用文字圖案 (Text-on-image)，這對搜尋器來說並不友善，亦是中文網頁使用者的困境。

延伸閱讀: 網站的重要元素

CSS網格

如果你接觸網站超過5年，大約都知道從前常有討論以下這個問題：網站應否提供手機版 (Mobile version)呢? 時至2017年，當手機上網使用者數量超越了桌面電腦，這條問題已經沒有意義，而且亦沒有人能準確預測未來會有甚麼的新上網裝置，響應式網頁設計就應運而生，當中最重要的技術之一就是CSS網格 (Grid)。這種技術能確保使用者以任何一種裝置瀏覽網站都可以正確無誤地顯示，到了2020年，如果你的網站仍是那種舊日的桌面版 (Desktop version)，我們肯定你需要重新設計一個使用了CSS Grid的嚮應式網站

延伸閱讀: 甚麼是嚮應式網站?

支援手機的矢量圖案

人們都喜歡多媒體，多媒體的網頁較純文字的受歡迎，這點無容置異。過去4G仍未普及時，網頁開發人員使用如GIF這類的格式去節省頻寬，但這種方法去到手機上時就有其不足之處。今天Google以手機優先為排序原則之一，而以點陣圖為基礎的GIF，放大後就會出現狗牙，極不美觀，但若使用象素較高的圖案，又會減慢下載。有用過Adobe Illustrator (AI)的用家就會明白，矢量圖 (Vector graphic)就是解決的方法，我們使用的字體檔也是一種矢量圖，既省頻寬，又沒有起狗牙的情況。當中日漸普及的格式就是Scalable Vector Graphics (SVG)，具體的技術可參考以下的pnetform文章。

延伸閱讀: 網頁設計使用SVG向量格式的五個原因

手繪畫

雖然電腦繪圖已是今天不能缺少的設計元素，但每當看電腦畫成的卡通時，我們又會時常懷勉小時候那些手繪卡通，例如「天空之城」、「風之谷」等都是燴炙人口。手繪畫正是人類文明的重要一環，當中蘊含的藝術和獨特性，並非電腦模板圖可以比美，上文提到的字體，正正是由手繪作為設計起步，才會充滿個性。如果你有小孩子正在上幼稚園，就更會感受到那份天然和純真的美感，到了今天2020年，一切來得太人工，太工整，如果在網頁設計上能運用手繪藝術，那麼品牌就會顯得更特別，令人留下深刻的回憶。

手繪畫網頁的作品參考

聲音兼容的介面

在過去聲音媒界在智能手機的應用，一般只局限在個人助埋，諸如Apple Siri、Google Now或是Microsoft Cortana。我們常見在街上，人們對著WhatsApp留言，這是因為手機在活動時始終不是十分容易按鍵，隨著人工智能的發展，我們預計到了2020年，語音輸入將會變得更加普及，至於這會否影響到網頁設計，大家拭目以待，但至少ChatBot「聊天機械人」作為網頁元素的確是有增無減的。

延伸閱讀: 網頁設計2019重要趨勢

人工智能及深度學習

人工智能(Artificial Intelligence, AI)及深度學習 (Deep learning)是2018年以來最大的研究領域，而較具體地在網頁上的應用，就是個人化的內容。時至今天，一般網頁都是一式一樣，就算不同的使用者，都會看到相同的內容。如果我們以資訊平台的角度去思考網站，例如Google及Facebook等，它們都會因應用家不同的喜好和需求，提供相應的內容。試想想一間公司本身提供不同的服務，如網站能學習到用家的上網行為模式，繼而提供適合的網站內容，這將會是一件相當不錯的事。再更貼地的例子就是網店，顧客在登入後，能馬上看到自己較有機會有興趣的貨品，這將可提升用戶體驗，增加銷售機會。

延伸閱讀: 關於SEO一定要知的九件事

粗獷主義網頁設計

若干年前，網頁仍是四四方方，起角的。之後設計和CSS技術都出現了圓角 (Round-edged)，例如Google的Logo就是圓角的經典代表。然而，粗獷主義 (Brutalism)在今天又再重出江湖，這種概念其實是由功能主義建築衍生出來，強調個性突顯，令網頁以誇張的手法表達結構和重點，粗獷性往往令形象變得更有後現代感，並且超越了傳統文化，適合跨國公司使用。粗獷主義有望成為網頁設計2020的代表作之一。

延伸閱讀: 2019網站開發新趨勢

總結

隨著科技進步和使用習慣的改變，2020網頁設計將會更重視個性和創造性。理論上人們的口味、喜好和期望可以在很短的時間內劇烈變動，預測網頁設計新趨勢看似有些徒然，但科技和設計卻永不停步，在網頁設計的世界，一年一小變，三年一大變可說是家常便飯，今天常說的虛擬實境 (Virtual Reality, VR)，又可以變得只聞其聲不見其影。無論如何，作為網頁設計公司，pnetform經常站在潮流最前線，和我們的客戶分享最新的網頁設計資訊。

如欲了解更多網站設計收費及詳情，歡迎聯絡香港網站設計公司pnetform ([email protected])。
你亦可於網站下方留下需要，我們很快會有專人聯絡你。