10個網頁設計趨勢2020(第二季)

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就能解決此問題。合理預計是網頁設計亦都會開始推出黑暗模式,方便用家晚上或昏暗環境下使用。

 

手繪畫

pnetform網頁設計手繪畫
pnetform客戶網站上的手繪畫美術

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

 

頭版的行動按扭

pnetform網頁設計行動按扭
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,不難發現暗黑的背景總會配著霓紅框的主體,這不但令焦點鮮明地落在主體之上,更有一種浮突的立體效果。網頁設計總讓人覺得只是一種平面藝術,不外乎長度及闊度,原來只要用色得宜,就能加上一個新維度。

 

簡約的瀏覽選單

pnetform網頁設計收起的瀏覽選單
網站設計上的「漢堡式選單」

設計風近年來來去去都圍繞一個概念:簡約主義。”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])