從上世紀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、機器人學習等技術逐步融入到網頁設計中,通過追蹤使用者的搜索習慣,找出創造最大效益的路徑,並一部份一部份進行整合,逐漸打造全通路體驗。
總的來說,以上所提出的內容,都應該圍繞品牌調性、品牌定位以及使用者體驗來設計,並且經過重重測試,不斷優化改善,直到網站的操作變得更加簡單方便,想表達的訊息也可以一目了然,這樣才能讓網頁在網絡龐大的資訊中脫穎而出。