從上世紀90年代至今，網頁設計技術不斷進步。過去網頁的本質僅用於存放資訊，而現代網站早已不滿足單純在網頁上放置資訊，而是著重於品牌形象的加深，從網站的UX/UI設計，拉近品牌與顧客的距離。

上期小編和大家一起探討《2010~2021年網頁設計流行風格分析》，今期將從網頁設計的簡史，延伸到如今的主流趨勢，和大家一起見證網頁設計技術的演變過程：

【網頁設計簡史】

1989 — 網頁設計的興起

網頁設計趨勢

網頁設計技術剛興起時，整體介面就像打開Windows命令提示字元的介面，只有單色像素風格的純文字圖像。

1995 — 表格式網頁設計

網頁設計趨勢

那年網頁設計技術邁出關鍵的一大步：圖像顯示。

這個時期設計師普遍使用HTML表格方式設置網頁佈局，同時網頁架設人員將設計稿切片輔助表格設計，逐步完成頁面的每個部分。

同年 — JavaScript技術出現

網頁設計趨勢

JavaScript技術的出現，打破了HTML表格的局限，同時讓背景圖像、GIF動畫等成為網頁設計的主流，讓網頁可以根據使用者的動作，作出不同反應，譬如彈出視窗就是從此時期常被用於網頁設計中。

1996 — Flash技術的誕生

網頁設計趨勢

Flash是一種支援多媒體創作和播放的技術，雖然早於2020年時已經確認停止更新，但在當時確實是很前衛的網頁設計技術，並且設計師亦重度依賴Flash製作網頁、廣告、軟體、遊戲等產品。

1998 — CSS技術逐漸普及

網頁設計趨勢

雖然CSS是和JavaScript技術一同出現，但因為瀏覽器兼容性問題，一直過了好幾年才逐漸普及。CSS是一種用來表現HTML或XML等文件樣式的計算機語言，不僅可靜態修飾網頁，還可配合各種腳本語言動態地對網頁個元素進行格式化。

2007 — 網格系統

網頁設計趨勢

這年不僅是第一代iPhone發佈的年代，也是各大廠商相機推出低價智慧型手機常見市場的時期。五花八門的熒屏尺寸，讓網頁瀏覽舒適度大大減低，因此改進切片設計的使用成為首要任務，使得各類網格系統如雨後春筍般相繼出現。經過市場機制的淘汰過後，最後留下960網格系統。

2010 — 響應式網頁

網頁設計趨勢

此前網頁設計風格多從極簡主義延伸，2010年後使用智慧型手機的用戶愈來愈多，網頁設計的開發重點也從技術轉逐步轉移到設計、創意、視覺、互動等方面。

【分析近十年的網頁設計趨勢】

響應式網頁開始廣泛應用後，各類網頁風格層出不窮，下面我們一起看看近十年的網頁設計趨勢都有哪些變化?

變化一：極簡主義

在網頁設計應用層面上，極簡主義通常會在網站基本結構上，剔除多餘元素，並放大必要視覺元素，使網頁設計的視覺效果更加吸引，從而給使用者留下深刻的印象：

① 文字放大

網頁設計趨勢

網站的Slogan設計以大文字為主凸顯想傳遞的資訊，讓使用在進入網站的第一瞬間便了解品牌所提供的產品及服務，並衝中感受品牌的獨特性。

② 元素放大

網頁設計趨勢

突出首頁的產品情景細節圖，讓人一眼便看懂網頁設計販售的產品，而精緻的圖片、細節的展現往往能激發使用者的購物慾。

③ 極端主義

網頁設計趨勢

與極簡網頁風格不同，極端主義透過顏色的交替設計，試圖挑戰使用者的感知，誇張的設計讓畫面更富有張力。

變化二：不對稱佈局

所謂不對稱，是指設計師利用不對稱的“元素缺乏相等及均分”特性，創造出視覺的和諧與平衡。

① 消除行距的限制

網頁設計趨勢

透出消除網格邊界與間距的限制，將介面中的不平衡化變為不同的平衡美感，讓畫面產生延伸感，令使用者不自覺地滾動網站直到頁面底部。

② 單色塊陣列

網頁設計趨勢

利用大小不同且色彩鮮艷的色塊吸引使用者的注意力，讓使用者能透過文字與圖像了解品牌所傳遞的資訊。值得注意的是，色塊如果沒有大小或色彩對比之分，便不能發揮其效果;同時文字亦要經過順序設計，而不是隨便將內容置入其中。

③ 強調視覺動線

網頁設計趨勢

為介面增加強調視覺的動線設計，讓畫面形成張力，產生動感與活力，讓使用者主動將網址分享給他人，達成另類的宣傳和推廣效果。

④ 多重曝光

網頁設計趨勢

多重曝光是指融合兩張不同照片形成視覺上的衝擊。如今這種設計時常被運用到網頁設計上，為網站帶來更強烈的對比，吸引使用者的眼球。

⑤ 留白設計

網頁設計趨勢

有時大量文字的填充，未必能將所有信息都呈現出來;相反，適當的留白更能突顯想表達的內容，並有效提升網頁設計的質感，而這樣的質感亦會反映在品牌調性，使品牌形象獲得更好的提升。

變化三：插畫藝術

在網頁設計上，與其使用一段長篇大論的文字來說明，不如使用一張插畫要來得更清晰易懂，也賦予使用者溫暖且證明的能量。

① 扁平色塊

網頁設計趨勢

用純色塊表現畫面的輪廓，能弱化視覺透視的同時，也減低光影與材質紋理對設計的影響，給使用者帶來乾淨利落的感受。

② 等距視角

網頁設計趨勢

等距視角的插畫效果能使2D繪圖增加立體感，讓畫面變得更活潑，也更有動態感。這類網頁設計的通常會使用較為強烈且飽和的色彩方案，豐富的色彩調性能更好地拉近品牌與使用者之間的距離。

③ 色彩輪廓

網頁設計趨勢

不同於扁平色塊風格，這類插畫的色調較為單一，同時也不會展現出過於活潑的特性，但能提升插畫的層次感。此風格非常適合較為沉穩的品牌使用，搭配文字以漫畫或動畫形式展示品牌資訊。

變化四：滾動視覺差

網頁設計趨勢

滾動時差設計能讓網頁元素在滾動中差生位置變化，形成層次錯落的視覺效果，帶來非常不錯的視覺體驗。而自2011年滾動視覺差出現後，加上網頁設計技術不斷強大，這種技術的表現方式也變得愈來愈豐富。

變化五：深色模式

網頁設計趨勢

2019年IOS和Android系統都推出深色模式的更新後，市面上眾多APP設計也紛紛推出深色模式的主題配色。事實上，深色模式之所以風靡的原因，除了它能大大提升內容可讀性外，部分系統還要求對不支持深色模式的APP採取強制下架的措施。

同時，深色模式的出現，確保了網站的吸引力能足夠讓使用者停下來探索，也賦予使用者部分的控制權，好讓網站可以產生獨特性，逐步開放網頁或APP的“個性化設置”自由度。

變化六：融入新的科技技術

網頁設計趨勢

隨著AI技術的成熟，很多企業都採用多通路行銷方式，整合線上線下資源，幫助使用者進一步了解產品與服務，提升銷售的營業額。

雖然目前全通路體驗對大部分企業來說成本十分龐大，但在資源有限的情況下，我們可以將新科技技術，如AI、AR、機器人學習等技術逐步融入到網頁設計中，通過追蹤使用者的搜索習慣，找出創造最大效益的路徑，並一部份一部份進行整合，逐漸打造全通路體驗。

總的來說，以上所提出的內容，都應該圍繞品牌調性、品牌定位以及使用者體驗來設計，並且經過重重測試，不斷優化改善，直到網站的操作變得更加簡單方便，想表達的訊息也可以一目了然，這樣才能讓網頁在網絡龐大的資訊中脫穎而出。