當代網頁設計美學,打造令人難忘的網頁視覺效果!

網頁設計

目錄

  設計歸根究底即是一種應用藝術,以實用為最終目的,不同於純粹的藝術家可以不帶任何限制揮灑創意,設計是為「人」而設計,遵循人們基本的審美觀念帶著鐐銬跳舞,創造出一個又一個與眾不同的設計。

網頁設計簡史

  1990年代至今,網頁技術不斷的進步,網頁的本質已經從存放資訊,到著重於品牌形象的加深了,就視覺藝術的角度來說,網頁設計發展的歷史很短,以2010年ETHAN MARCOTTE 提出的響應式網頁設計為基準,下面我們簡單介紹幾個網頁設計不同的時期,同時也會帶到2010後網頁發展的大致趨勢:

1989 — 網頁設計興起

  由符號與TAB鍵製作而成,網頁的背景為黑色,並且不能顯示圖像,整體的畫面感就有如打開Windows命令提示字元的介面,只有單色像素風格的純文字網頁。

單色像素網頁 網頁設計
單色像素網頁設計

1995 — 表格式網頁設計

  這一年爆發的瀏覽器大戰,讓網頁設計邁出關鍵一大步:圖像的顯示。並且在這個時期,設計師普遍會使用切片+表格的方式來表現網頁布局。

1995 — JavaScript

  打破HTML表格的侷限,此時的背景圖像運用、GIF動畫、閃字、計數器成為主流,就後期網頁設計時常出現的彈出視窗也都出現在這個時期。

彈出視窗 網頁設計
彈出視窗網頁設計

1996 — Flash

  Flash是一種支援多媒體創作和播放的技術,這應該是只要接觸過網路的人都了解的東西吧!在當年人們重度依賴Flash製作網頁、廣告、軟體、遊戲等多種可以互動的網頁內容,不過它已在2020確認停止更新。

Flash播放網頁設計
Flash播放網頁設計

1998 — CSS

  CSS的基礎概念在之前這篇網頁上的設計戰爭|掌握HTML5致勝關鍵,從歷史下手!,就有講解過,大致上的概念就是網站內容與外觀的分工,利用HTML主導內容架構,CSS則是定義外觀樣式,如果你有好好回顧上面那篇文,你就會知道現行的前端外觀定義主要都是以CSS3為主,不過在當時CSS因為瀏覽器兼容性問題,並沒有廣泛獲得使用,一直過了好幾年才逐漸普及。

CSS階層樣式表網頁 網頁設計
CSS階層樣式表網頁設計

2007 — 網格系統

  如果有蘋果迷在看這篇文章,一定對這個時間點十分敏感,因為它就是第一代iPone發表的年份,在同一時期,各大廠商也相繼推出的低價智慧型手機搶占市場,五花八門的螢幕尺寸,讓網頁的瀏覽舒適度大幅降低,所以改進網格的使用成為首要的任務,各類的網格系統如雨後春筍般相繼出現,在經過市場機制的淘汰過後,最後留下960網格系統。

網格式網頁 網頁設計
網格式網頁設計

※960網格系統 過去的電腦螢幕寬度為1024,扣除瀏覽器的卷軸與邊框,就只剩下960可以做運用,因此就以960 pixel作為基礎,延伸出多個不同網格寬度,並且目前主流的網格系統以12或16欄為主。

2010 — 響應式網頁

  Ethan Marcotte發表一篇《Responsive Web Design》的文章,述說響應式網頁的概念以及應用方式,在此前網頁的設計風格多從極簡主義延伸,2010後的網頁設計將開發重點轉移成設計、創意、視覺、互動等等。

RWD響應式網頁 網頁設計
RWD響應式網頁設計

  如果對此有興趣可以到這篇文章瀏覽相關資訊:RWD響應式網頁設計優勢分析

網頁視覺設計趨勢

  響應式網站開始廣泛的運用後,網頁的風格層出不窮,從極簡風格、擬真化設計、扁平化設計,到Google推出的Material Design……等,再來我們會帶大家一起了解當代網頁視覺設計的趨勢:

極簡主義

  崇尚少即是多(Less is more)的美感觀念,在應用的層面,極簡主義的網頁通常會在基本的架構上,剔除多餘的元素,放大必要的視覺元素,讓人們在被視覺設計吸引的同時,看到網頁必要的功能,不需要多餘的文字,以及動畫和額外的效果,因此,極簡主義的網頁設計就彷彿在吶喊:「看我~看我~快看我!」非常容易達成讓使用者留下深刻的印象的目的。

文字放大

極簡主義 文字放大 網頁設計
圖片來源:https://eggforward.co.jp/

元素放大

極簡主義 元素放大 網頁設計
圖片來源:https://sunshift.co.jp/

極端主義

  野獸派的設計透過顏色的交響技巧曾經蔚為流行,極端主義深受其影響,同樣試圖挑戰感知,誇張的設計讓畫面更富有張力,並且作為一種表達的形式,它與極簡主義成為強烈對比,在網頁逐漸普及的現在,運用色彩成為世代不同的聲音!

極端主義 網頁設計
圖片來源:http://takeawalkonthewildside.rietveldacademie.nl/

不對稱佈局

  文字中不對稱的意思是指圖形缺乏相等及均分的特性,缺乏視覺上的平衡,不過此處提到的不對稱佈局,指的是設計師運用不對稱性來創造視覺的和諧與平衡,你也可以試著運用以下的特性做不對稱佈局:

瓦解行距的限制

  透過消除網格邊界與間距的限制,將不平衡化為不同的平衡美感。

瓦解行距限制 網頁設計
圖片來源:https://gentil-net.com/

單色塊陣列

  大小不同的方塊形成秩序,透過簡短的文字與圖像表達多項資訊,讓使用者可以一目了然。

單色塊陣列 網頁設計
圖片來源:https://www.sneakinpeace.com/

強調視覺動線

  運用物體的移動引領視覺,加深使用者的印象。

強調視覺動線 網頁設計
圖片來源:https://dorepartnership.com/

多重曝光

  這是源自攝影的一種「多重曝光」的手法,融合兩張不同的照片形成視覺的衝擊,如今也時常被運用在網頁設計上。

多重曝光 網頁設計
圖片來源:https://dribbble.com/shots/2209044-Furion-Freelancer-Portfolio/attachments/409555

留白設計

  並非每個部分都需要大量文字的填充,適當的留白可以突顯想表達的內容,這同時也是極簡主義的一環。

留白設計 網頁設計
圖片來源:https://taa-fdn.org/

插畫藝術

  運用圖片說故事,大部份的人都很熟悉,兒時的童話故事是大家共同的回憶,也是全世界共通的語言,看到迪士尼各個年齡層的人們瘋狂掃貨,你就懂了插畫的魅力是不分男女老幼,插畫藝術賦予人們溫暖且正面的能量,由此可知,在網頁設計上與其用一段長篇闊論的文字段落說明理念想法,不如使用一張插畫來得更加清晰易懂!

  但是,對於該如何做運用,大部分的人可能就不是那麼清楚,為了讓每一張插畫都能發揮其效用,我們可以好好運用以下技巧:

扁平色塊

  無線條的插畫,用純色塊表現畫面的輪廓,帶給使用者現代俐落的感受。

扁平色塊 網頁設計
圖片來源:https://www.nsgk.co.jp/

等距視角

  用2D繪圖的方式呈現3D的空間,充滿現代科技感的設計,替代圖像帶來的生硬感,讓畫面更活潑。

等距視角 網頁設計
圖片來源:https://www.kureha.co.jp/

色彩輪廓

  不同於扁平色塊的風格,這一類的插畫的色調單一,減少過於可愛的漫畫感,提升插畫的層次感,也讓更多的人願意使用插畫作為主視覺。

色彩輪廓 網頁設計
圖片來源:https://www.wearefactotum.com/

復古懷舊風格

  就回顧網頁設計簡史的部分,我們可以得知網頁設計已有20多年的歷史了,如今有一部份的設計師開始走起復古懷舊的路線,讓像素、彈出視窗、計數器、GIF動畫重新回歸大眾的視線中,希望可以讓人們感受早期所流行的網路設計元素。

復古懷舊風格 網頁設計
圖片來源:https://www.balenciaga.com/tw

滾動視差設計

  這部分應該就不用多說了,2011年出現滾動視差設計後,因此在網頁技術不斷強大的情況下,滾動視差設計的表現方式也就越來越豐富。

視差滾動設計 網頁設計
圖片來源:https://www.town.shimane-misato.lg.jp/misatoto/

深色模式

  手機系統掀起的暗黑風潮你跟上了嗎?2019年IOS和Android系統都推出深色模式的更新,隨後各個熱門的應用程式也紛紛推出深色模式的主題配色,深色模式之所以風靡的原因,在於它可以大大提升內容可讀性。

深色模式 網頁設計
圖片來源:https://www.mapbox.com/

  同時它也透露出一個新的訊息「自定義」,為了確保網站的吸引力足夠讓使用者停下來探索,賦予使用者部分的控制權,好讓他們網站可以產生獨特性,也許之後的網頁或應用程式在這方面的自由度會越來越開放。

網頁互動設計趨勢

  未來,隨著AI技術的成熟,目前採用多通路行銷的趨勢,將會轉變成全通路體驗,整合線上線下的資源,除了實體店面的實品展示,網路店鋪運用VR與AR技術實現3D模型和情境行銷,幫助使用者更加了解產品與服務的內容,提升銷售的營業額。

AR 網頁使用示意圖
AR 網頁使用示意圖

  雖然全通路體驗對大部分企業來說成本十分龐大,不過全通路體驗是一種必然會持續發生的趨勢,因此在資源有限的情況下,可以通過追蹤使用者的足跡,找出能創造最大效益的路徑,一部份一部份的進行整合,好讓企業在全通路時代不會就此缺席。

網頁設計不變的趨勢

使用者體驗優先

  無論如何應將使用者體驗始終放在首位,可以設計最精緻特別的介面,但想要創造吸引人的用戶體驗,那就必須圍繞著使用者進行設計,從設計、技術、文案,以及交互元素創造體驗,並且經過多重測試,不斷的優化改善,直到想表達的訊息可以一目了然,這樣的網頁才可以從網路上龐大的資訊中脫穎而出。

您可能感興趣