2020Q2十大網頁設計趨勢

2020年必定在歷史上有著重要的意義。一場冠狀病毒肺炎先由中國武漢爆發，再感染到全世界，有數十億人要留家避免疫情進一步擴散。網站，從此有了不同的意義，人們透過網站繼續本來的生活，獲得所需資訊，減少了出門的需要。原來，網站設計工作，都是抗疫重要的一員。

pnetform網頁設計公司參考了福布斯博客文章 (Oziemblo 2020)，特選「2020年第二季十大網頁設計趨勢」，與中文用家分享最新國際網頁設計資訊，當中有些可能耳熟能詳，亦有部份是全新概念，對香港網頁界來說，極有參考價值。

回想十年前，喬布斯最後一次發佈iPhone時，仍未有響應式網頁設計(Responsive Web Design, RWD)的概念，然而正是智能手機的掘起，推動了手機網頁設計的發展，至2016年，以手機上網的用戶首次超越了桌面電腦，而且手機的整體費用較桌面電腦便宜，讓不少發展中國家或地區的人都可以上網，促使了網頁以至電子商貿發展。設計是關於如何使用，所以趨勢也離不開手機用戶體驗。

文章回顧: 網頁設計2019重要趨勢

黑暗模式

潮流興 Dark Mode，自從iOS推出Dark Mode後，包括Facebook在內的科網巨頭都陸續推出黑暗模式的Mobile App。所謂Dark Mode，是指專為在黑暗環境使用的介面，一般會將原色倒置為較暗的顏色，用戶有可能在任何時間和地點使用手機，過往未有Dark Mode，在晚上的街道上使用手機每每出現刺眼的情況，Dark Mode就能解決此問題。合理預計是網頁設計亦都會開始推出黑暗模式，方便用家晚上或昏暗環境下使用。

手繪畫

傳統的手繪美術以全新視野回歸網頁設計，無論是靜態卡通、手寫書法或動畫，手繪藝術能令本應冷冰冰的網頁變得親切及溫暖，更有人情味。過去一段很長的時間，網頁給人的感覺都是很Hi-tech很cool的，大家甚至忘記了網頁背後其實都由有血有肉的人設計。上圖是pnetform一位專賣美食的客戶網頁插圖，設計師為了讓人感到師傅對美食的執著和誠意，就使用了手繪藝術畫元素。

頭版的行動按扭

每家企業架設網站都有一個目的，就是及早達成轉化 (Conversion)，例如B2B業務需要查詢，網店就需要銷售產品等。由於資訊太多，現代人都極沒耐性，打開網頁後如在數秒內沒有頭緒就會跳離網站 (Bounce)，所以我們都偏向將行動按鈕 (Call-to-action button)放在一開首的位置，用戶不需滾動至下方已知下一步的行動。從前在報業有一個術語叫「Above-the-fold」，即是報紙摺叠後仍可顯示的地方，都會放置當天最重要的頭條新聞，以吸引讀者購買。Above-the-fold CTA button就是指打開網頁不用滾動就顯示的行動按扭，如上圖中，客戶要求儘快令用戶進行資格評估並聯絡銷售人員，故此設計師就在頭條位置加設適當的按扭。

可見網頁格線

UI設計其中一個階段稱為「Wireframe」(線框原型)，以方框規劃介面的架構，方便設計團隊作內部溝通，當框架完成後便會填入視覺元素，如圖案及色彩等並去除方框。不過近來亦有網頁設計趨勢，刻意保留這些UI設計的框架，令到網頁看落更工整更專業。十多年前網頁仍以HTML中的「TABLE」為框架時，很多時都會使用格線 (Grid)，這亦是一種舊法新用的網頁設計方式。

留白框架

留白 (Whitespacing)在視覺藝術上已有很悠長的歷史，遠至古中國，已在畫法和國畫上使用。留白可以將焦點重拾至主角物件上，同時製造想象的空間。網頁設計師往往透過留白，將用戶焦點放在產品或標題文字上，有句老話「牡丹雖好, 也要綠葉相襯」，某些地方的網頁常把頁面塞滿文字及圖片，好像告訴我們這才不浪費空間，結果閱讀時就很不便，亦失去焦點，令人沒有興趣繼續留在網站。

字大方可觀

我們都不只一次談到使用大字體(Big typography)去強調重要訊息，既然常說現代人沒有耐性，即使使用千字文都沒有意思，倒不如言簡意深，簡單一句話遠勝一切。例如在pnetform網站上有句話「pnetform Web Design, we walk together」，放在最當眼的地方，用盡可用的空間，即使離開屏幕三米之外都清晣可見。作為網站設計公司，我們不單給建議客戶，我們亦會將建議用在自己身上。

使用幾何圖案

不止一次在2019年網頁設計趨勢文章中出現，幾何圖案 (Geometric shape)是簡約主義 (Minimalism)的重要玩素，例如只要一個指向右方的三角型，就能代表「按此播放或行動」的意思，或者一個三橫劃的「漢堡包」(Hamburger button)就代表摺叠按扭。幾何圖案同時亦是常見的裝飾，不說可能不知，在伊斯蘭文化中，是禁止使用人或動物作為飾物圖案，故此在清真寺等伊斯蘭建築中，只會見到幾何圖案，從中的確可感受到一份寧靜及簡潔。

網頁設計小知識: 網站的重要元素

霓紅光圖案

如果大家用過App的Dark Mode，不難發現暗黑的背景總會配著霓紅框的主體，這不但令焦點鮮明地落在主體之上，更有一種浮突的立體效果。網頁設計總讓人覺得只是一種平面藝術，不外乎長度及闊度，原來只要用色得宜，就能加上一個新維度。

簡約的瀏覽選單

設計風近年來來去去都圍繞一個概念：簡約主義。”Less is more”，現代主義建築大師 Ludwig Mies van der Rohe (1886 – 1969)最常說的一句話，正正充份地反映在他的建築設計上，”just enough”。簡單的三橫劃 (又名「漢堡式選單」Hamburger button) ，安靜地放置在網頁的一角，不用一句說話解釋，用戶就有默契地自覺使用。輕輕一按，所需的導航資料就呈現眼前，網頁顯得份外簡潔，目光只需放在主體之上即可。

懷舊色系

何謂懷舊? 這並沒有一個絕對的定義，上文提到的部份元素，如手繪畫、霓虹光以至網頁格線等，在過去的年代都曾盛極一時，反正就是一些已被遺忘的昔日潮流吧。曾幾何時，網頁設計都清一色地使用某種方法，例如一頁式網頁設計 (One-page web design)，懷舊色系可以是指一種模仿昔日技術的手法，例如模擬訊號，甚至黑白效果 (Grayscale)。懷舊有趣之處，是那種雋永和不朽的感覺。

所謂鑑古知今，要前瞻網頁設計趨勢及潮流，也許，認識網頁設計歷史正是最好的方法。pnetform香港網頁設計公司推薦以下網站：網頁設計博物館 (Web Design Museum)，內裏收藏了很多品牌昔日的網頁設計，值得一看。

網站設計工作歷久不衰，曾經有人說隨著手機應用程式 Mobile App的冒起，網頁將很快被途汰，但事實上網頁適應了手機環境後，從未如此充滿生命力。如你需要網頁設計服務，歡迎聯絡pnetform網頁設計公司([email protected])