網路架站

網站設計撐不撐得住時間考驗,靠的不是潮流,而是這六件基本功

多數人判斷一個網站設計好不好,看的是它上線那一刻好不好看,配色搭不搭潮流,有沒有跟上這一季流行的動態特效。真正決定一個網站能撐多久的,反而是那些幾乎不會被人特別稱讚的東西——清楚的導覽、看得懂的排版、乾淨的程式碼結構。這些基本功平常不顯眼,潮流退了以後,卻是唯一還站得住的部分。

三年前看起來很潮的網站,現在打開常常會覺得哪裡不對勁:某種漸層背景、某種手繪風插畫、某種浮誇的進場動畫,一眼就能猜出建置的年份。反過來,一個資訊架構清楚、內容排版得宜、程式碼寫得規矩的網站,就算配色換了幾輪流行,骨架依然撐得住。差別不在美感高低,而在這個設計決定,是靠著當下的潮流站住,還是靠著使用者真正用得到的東西站住。

分辨這兩種設計決定,關鍵不難找:追逐潮流的設計為什麼老得特別快、真正禁得住時間的設計又具備哪幾件基本功,看懂這兩件事就分得出來。

追逐潮流的網站靠當紅配色與框架外掛撐住,潮流退了就得整站重做;靠資訊架構、無障礙與效能等基本功的網站,配色換幾輪骨架依然撐得住。
撐得住時間的網站,差別不在美感高低,而在它是靠當下的潮流站住,還是靠使用者真正用得到的基本功站住。

網站禁得住時間靠基本功而非流行視覺

判斷一個網站設計禁不禁得住時間,問的不是它剛上線那一刻好不好看,而是三五年後,這個設計決定還站不站得住。上線當下的第一印象很容易被討好,一組好看的配色、一套當紅的動態特效,通常都能在初次瀏覽時加分。真正的考驗發生在後面,潮流退燒之後,這個設計決定還撐不撐得住使用者實際的操作,還撐不撐得住內容持續增加的壓力。

真正撐得久的網站,靠的往往是幾件基本功:清楚的資訊架構與導覽、內容為本的可讀版面、克制而一致的視覺系統、無障礙與語意化的 HTML 結構、把效能當成建站當下就要決定的事,以及採用網頁標準技術而不是把整站綁在某個潮流框架或外掛上。這幾件事有個共同點:跟當下流行的視覺風格幾乎無關。

這不是說美觀不重要,也不是叫你別碰新技術。真正該反對的,是為了追上潮流而犧牲這些基本功:為了讓畫面看起來新,拿掉使用者原本用得順手的導覽邏輯;為了套上當紅的特效外掛,把整個網站的核心功能綁死在一個未來可能停止維護的工具上。

追逐潮流的設計老得比基本功快的三股力量

追逐潮流的網站設計撐不過幾年就顯得過時,這不是運氣不好,而是三股力量共同造成的結果。第一股,視覺潮流本身有生命週期,退燒是遲早的事,而且退了以後常常又會用另一種形式回來。第二股,把網站綁在某個潮流框架或外掛上,一旦那個工具停止維護,網站就要跟著整個重做,而不是小修。第三股,潮流化設計為了追求視覺新鮮感,經常犧牲掉可用性,這個代價在剛推出時被新鮮感蓋住,退燒後才顯現出來。

這三股力量很少單獨發生。一個網站選擇追逐某種潮流視覺的同時,往往也選了搭配那種視覺的框架或外掛,而那個潮流視覺本身又常常是靠犧牲可用性換來的新鮮感。三件事捆在一起發生,是「追潮流」之所以是脆弱選擇的原因。

視覺潮流本身就有循環週期

扁平化設計(flat design)是一個具體的案例。這個視覺語言大約在 2011 年隨微軟的 Metro 設計語言與 Windows 8 興起而普及,2013 年前後連 Apple 官網也轉向扁平化,一時之間幾乎整個網頁設計圈都在拿掉陰影、拿掉立體感、拿掉漸層。

Nielsen Norman Group 從扁平化設計出現以來就是公開的批評者,明白指出:「我們主要的反對意見,是它常常為了追求潮流美學而犧牲使用者需求。」問題出在使用者原本仰賴一組固定的視覺訊號判斷這個東西可不可以點,像是藍色加底線的文字、看起來有立體感、像是凸起來的按鈕。扁平化設計把這些訊號拿掉以後,使用者反而更難一眼判斷畫面上哪些元素可以互動。這家機構訪談過的一名使用者說得很直接:「當它是藍色而且有底線,那就是你知道的方式……如果它是按鈕,不用寫『點這裡』,但如果寫著『立即購買』或『加入購物車』。」這句話點出使用者仍然仰賴這些傳統訊號在判斷,不是靠美感。

後來業界不得不修正,發展出「半扁平」或「扁平 2.0」的風格,重新加回細微的陰影與層次,把可點擊訊號補回來。一個曾經席捲整個設計圈的視覺潮流,自己內建了盛極而衰、還要被修正的週期,不是一個可以長期依靠的穩定選擇。

綁定潮流框架與外掛的重做風險

潮流不只發生在視覺層面,也發生在技術選擇上。很多網站為了跟上當紅的頁面建構工具、特效外掛或前端框架,把整個網站的結構綁死在這個工具的專屬語法上。一旦這個工具停止更新,被市場淘汰,或者背後的供應商調整商業模式,網站往往不是小修就能延續,而是要整站重建,原本存在的內容與功能全部要重新搬過去。

MDN 對「漸進增強」(progressive enhancement)的說明,剛好對照出兩種選擇在長期存續上的落差。漸進增強是一種設計哲學,先確保所有使用者都能拿到一份基本但堪用的內容與功能,再依瀏覽器能力疊加更完整的體驗。這個做法讓網站的核心功能不會因為單一瀏覽器或單一工具的變動而整個失效。建立在這種開放的網頁標準之上,長期存續靠的是瀏覽器廠商共同維護的相容性與標準,不是任何單一廠商的商業決策。

反過來,把網站綁定在某個潮流框架或外掛的專屬語法上,存續就完全繫於那家廠商還在不在、還願不願意維護。這正是潮流延伸到技術選擇時最脆弱的地方,視覺退燒頂多是不好看,工具停止維護卻是網站直接停擺。

犧牲可用性換取新鮮感的代價

回到同一份扁平化設計的資料,裡面藏著一個更通用的教訓,潮流化設計常見的失誤模式,是為了讓畫面看起來新,拿掉使用者長期依賴的視覺訊號,例如按鈕的立體感、連結的底線。這種取捨在剛推出時往往被原諒,原因是使用者對好看的介面本來就比較能容忍小毛病。

Nielsen Norman Group 把這個現象稱為「美學可用性效應」(aesthetic-usability effect)。這個效應最早的實驗根據,來自 1995 年 Hitachi 設計中心對 26 款 ATM 介面、252 名受試者所做的研究,研究發現受試者對美觀程度與感覺上好不好用的相關性,比美觀程度與實際好不好用的相關性更強。換句話說,好看真的會讓人誤以為比較好用。

但這個效應有限度。這家機構明講,好看的設計只能讓使用者容忍小的可用性問題,無法掩蓋嚴重的可用性問題。功能真的被犧牲掉的時候,使用者還是會失去耐心。潮流化設計靠新鮮感掩蓋掉的可用性問題,撐得住一時,撐不住長期;等潮流退去、新鮮感消失,被犧牲掉的可用性問題就會顯現出來,而且往往比原本不夠潮更難修補,因為使用者已經失去原本熟悉的判斷依據。

決定網站耐用度的六件基本功

前面三股力量,分別對應著潮流退燒、工具停止維護、可用性代價,合起來說明了追潮流為什麼是脆弱的選擇。反過來看,真正禁得住時間的網站設計,靠的是六件基本功:清楚的資訊架構與導覽、內容為本的可讀版面、克制而一致的視覺系統、無障礙與語意化的 HTML 結構、把效能當成建站當下的設計決定,以及採用網頁標準技術而不是綁死在某個潮流框架或外掛上。

這六件事的共同特徵,是評估標準跟現在流不流行沒有關係,而是跟使用者能不能用、找不找得到、看不看得懂有關。這正是它們能撐過三五年,甚至更久的原因。

決定網站耐用度的六件基本功:清楚的資訊架構與導覽、內容為本的可讀版面、克制一致的視覺系統、無障礙與語意化結構、效能,以及採用網頁標準技術。
這六件基本功的共同點,是評估標準跟流不流行無關,只看使用者能不能用、找不找得到、看不看得懂。

資訊架構把導覽定位清楚,才撐得住內容持續增加

資訊架構與導覽的核心任務,是讓使用者在任何一個進入點,都能回答我在哪裡、可以去哪裡。這個判準幾十年沒變過,也不會因為視覺風格改朝換代而跟著改變。

Nielsen Norman Group 整理的選單設計準則講得很具體。導覽在大螢幕上要維持可見,不要為了畫面簡潔就把導覽通通收進漢堡選單。這家機構的說法是看不見就會被遺忘,漢堡選單是小螢幕上不得已的妥協,螢幕空間足夠的時候不該隱藏選單。導覽除了指路,也讓使用者理解這個網站的內容範圍有多大,藏起來就會失去這條線索。

「我現在在哪裡」是使用者要成功導覽一個網站必須回答的根本問題之一。多數訪客並非從首頁進來,沒有清楚標示目前所在位置,是網站選單最常見的錯誤。連結文字也要用清楚、具體、使用者熟悉的詞彙,選單不是拿來自創花俏詞彙、內部術語或抽象分類的地方,要緊扣使用者理解的內容或功能本身。

規劃良好的資訊架構,天生就留有加深、加寬的餘地,新內容可以歸類進既有的分類邏輯,不必每次擴充都打掉整個導覽重練。這是架構層面在建站當下就要考慮周到的事,跟後續要不要定期檢查連結有沒有失效,是兩回事。

內容排版清楚勝過裝飾留下的第一眼印象

內容為本的可讀版面,靠的是掌握使用者實際的閱讀行為,不是版面裝飾夠不夠多。Nielsen Norman Group 著名的「F 型掃視模式」研究說明了這件事。使用者在網頁上多半是掃視,不是逐字閱讀,這個型態在 2006 年首次被記錄下來,2017 年這家機構用眼動追蹤技術重新驗證,發現在桌面與行動裝置上型態幾乎沒變。十一年後型態不變,這家機構稱它是取決於人類行為、而非取決於技術的長效發現。

使用者在網頁上多半沿 F 型路徑掃視、而非逐字閱讀,排在右側與段落後段的重要內容容易被漏掉。
使用者是掃視不是逐字閱讀,把重點放進前兩段、關鍵詞放在小標開頭,才不會被略過(資料來源:Nielsen Norman Group)。

F 型掃視對使用者不利,因為容易漏掉排在畫面右側或段落後段的重要內容,即使那些內容同樣重要。但這份研究同時給出具體的緩解做法:把最重要的重點放進頁面前兩段、標題與小標開頭放置資訊量最大的詞、用粗體標出重要字詞、用條列與編號呈現清單或流程。

這些做法本身也是幾十年沒變過的內容為本設計基本功,跟當下流行的視覺風格無關。一個版面就算配色換了好幾輪,只要重點還是放在前兩段,標題還是把關鍵詞放在最前面,讀者還是找得到他要的東西。反過來,一個版面裝飾得再新潮,重點卻埋在第三段中間,讀者一樣掃過去就漏掉。

克制而一致的視覺系統比潮流耐看

這一節把克制與一致兩個特質分開講。先看一致,Nielsen Norman Group 的十大可用性原則裡有一條一致性與標準,背後撐著的是 Jakob 法則,使用者大部分時間花在別的產品上,那些產品建立的期待會被帶進你的網站,違反這個期待就會增加使用者的認知負擔。這條原則同時要求內部一致與外部一致都要做到,前者是同一個網站或同一家品牌內部維持一致,後者是遵循使用者早就習慣的產業慣例。

再看克制,對應的是同一份清單裡的美學與極簡設計原則,介面不該包含不相關或很少用到的資訊,畫面上每多一個資訊單位,都會排擠真正重要的資訊單位的能見度。這家機構特別澄清,這條原則不是要求做扁平化風格,重點是讓內容與視覺設計聚焦在使用者的核心目標上。

把這兩條原則合起來看,一個克制、內部前後一致、也符合使用者從其他網站帶來的外部期待的視覺系統,不會因為潮流退燒而顯得突兀,因為它從一開始就不是靠新潮在運作。這十條原則自 1994 年精煉定案以來,內容幾乎沒有改變過。作者 Jakob Nielsen 自己下的註記是,當一件事維持真確 26 年,它很可能同樣適用於未來世代的使用者介面。這句話本身,就是基本功耐久、潮流才會過時這個判斷最直接的佐證。

無障礙與語意化結構是網站的地基

無障礙(accessibility)與語意化的 HTML 結構之所以是地基而不是選配,是因為它處理著網頁最根本的承諾,讓使用者不論用什麼硬體、軟體、能力去存取,都能感知、理解、操作網頁上的內容。

全球資訊網協會的網頁無障礙倡議(W3C WAI)對這件事的官方說明,涵蓋聽覺、認知、神經、肢體、語言、視覺等各種面向的使用者。而且不只是身心障礙者受益,使用小螢幕裝置的人、暫時性不便(例如手臂骨折)的人、網速慢或頻寬有限的人,同樣受惠於一個語意化、鍵盤可操作、有替代文字的網站。

W3C WAI 特別強調,在專案一開始就納入無障礙考量,效率與效果最好,不必事後回頭重做。這正好呼應基本功要在設計當下就決定、不是事後補救的立場。具體的基本做法並不複雜:圖片要有替代文字供螢幕報讀軟體讀出、網站功能要能完全用鍵盤操作而不是只靠滑鼠、音訊內容要提供文字逐字稿。這些決定是建站當下就要放進架構裡的事,不是上線以後找時間慢慢補的待辦事項。

效能在建站當下就該決定,不是上線後才補救

效能是建站當下的設計決定,不是上線以後才想到的加分項。選擇輕量的技術架構,避免堆疊過重的頁面建構工具與外掛,這個選擇從一開始就決定了網站往後幾年的效能體質。等網站建好、內容越堆越多之後才想靠效能優化外掛補救,往往補不回架構本身造成的重量。

Google 旗下的 web.dev 對速度為什麼重要有一份具體的說明。效能是良好使用者體驗的基本要素,網頁開始載入後使用者必須等待內容出現,在那之前談不上任何使用者體驗。消費者研究顯示,網頁速度過慢帶來的壓力反應,跟觀看恐怖片或解數學題類似。BBC 的實測發現,網頁每多花一秒載入,就會多流失 10%的使用者。Vodafone 的實測則是另一個方向的證明,把最大內容繪製時間(LCP)改善 31%,直接帶動銷售額增加 8%。

網站速度直接反映在商業結果:BBC 實測每多載入 1 秒流失 10% 使用者,Vodafone 把 LCP 改善 31% 帶動銷售增加 8%。
載入每慢一秒就流失使用者、變快則帶動銷售,速度是從第一秒就影響商業結果的基本功(資料來源:web.dev、BBC、Vodafone 實測)。

這些數字說明的是同一件事,速度不是抽象的技術偏好,是使用者從第一秒就在感受、也直接反映在商業結果上的基本功。web.dev 也點出消費者的期待比以往更高,使用者造訪一個網站,不只是拿它跟競爭對手比,也會拿它跟自己每天使用的頂尖服務比較。輕量架構是建站當下的選擇,不是事後能補得回來的東西。

用網頁標準技術,不把網站綁死在單一潮流工具上

最後一件基本功,呼應前面綁定潮流框架與外掛的重做風險那股力量,從該怎麼做的角度收尾。選擇建立在開放的網頁標準(HTML、CSS 與瀏覽器共同支援的規範)之上,採用漸進增強的技術哲學,讓網站的基礎功能不依賴單一廠商的專屬工具或某個潮流套件才能運作。

這不代表排斥新技術或新工具。真正的判準,是這個網站的核心骨架能不能離開任何一個特定工具、獨立存續——前面提到的漸進增強精神在這裡同樣適用,核心功能先做到位,再依瀏覽器能力往上疊加,不會因為單一瀏覽器或單一工具的變動就整個垮掉。

六件基本功講到這裡,其實都指向同一個判準,使用者能不能用,找不找得到,看不看得懂,跟現在流不流行完全無關。這也是為什麼一個三年前上線的網站,只要這幾件事做對了,現在打開來看依然順手;而一個當年很潮的網站,潮流一過,剩下的往往只有一堆需要重新收拾的技術債。

三五年後還站不站得住,從來不是靠上線那一刻討不討喜決定的,而是這幾件基本功當初有沒有做對。潮流永遠會換下一輪,追著換的網站也永遠要跟著重做一次;把心力放在使用者真正用得到的地方,才是真正禁得住時間檢驗的做法。

這不代表你的網站永遠不用改版,新技術、新工具依然值得嘗試。差別在於,每一次要不要跟進,都可以拿同一個問題檢查,這個決定三五年後還站不站得住,還是只是這一季比較好看。把這個問題想清楚,潮流退了,你的網站還在。

常見問答

本區問答由 AI 依文章內容自動整理,僅供快速參考,正式內容仍以全文為準。

扁平化設計最常被批評的問題是什麼?

Nielsen Norman Group 指出,扁平化設計常見的問題,是為了追求潮流美學而拿掉按鈕立體感、連結底線等使用者原本仰賴的視覺訊號,使用者反而更難一眼判斷畫面上哪些元素可以互動,後來業界才修正發展出「半扁平」風格補回這些訊號。

網站導覽適合全部收進漢堡選單嗎?

不適合。Nielsen Norman Group 的準則建議,大螢幕上不該為了畫面簡潔就把導覽通通收進漢堡選單,看不見就會被遺忘;漢堡選單只是小螢幕空間不足時的妥協,螢幕空間足夠時導覽應維持可見,讓使用者理解網站內容範圍。

什麼是網頁閱讀的 F 型掃視模式?

這是 Nielsen Norman Group 記錄的使用者閱讀行為,指使用者在網頁上多半是掃視、不是逐字閱讀,視線軌跡呈現頂部橫向、中段橫向、左側向下的 F 型路徑,容易漏掉畫面右側或段落後段的重要內容。

把網站綁定在潮流框架或外掛上有什麼風險?

一旦這個工具停止更新、被市場淘汰或供應商調整商業模式,網站往往無法小修延續,而是要整站重建。建立在網頁標準與漸進增強精神之上的網站,核心功能不會因單一工具或瀏覽器變動而整個失效,存續也不繫於單一廠商。

網頁載入速度變慢真的會影響業績嗎?

會。web.dev 引用的實測顯示,BBC 發現網頁每多花一秒載入,就多流失 10% 的使用者;Vodafone 則把最大內容繪製時間(LCP)改善 31%,直接帶動銷售額增加 8%,說明速度直接反映在商業結果上,不只是技術偏好。

資料來源
  1. Flat Design: Its Origins, Its Problems, and Why Flat 2.0 Is Better for Users — Nielsen Norman Group
  2. The Aesthetic-Usability Effect — Nielsen Norman Group
  3. Menu-Design Checklist: 17 UX Guidelines — Nielsen Norman Group
  4. F-Shaped Pattern of Reading: Misunderstood, But Still Relevant — Nielsen Norman Group
  5. 10 Usability Heuristics for User Interface Design — Nielsen Norman Group
  6. Progressive Enhancement — MDN
  7. Introduction to Web Accessibility — W3C WAI
  8. Why does speed matter? — web.dev
  9. Vodafone: A 31% improvement in LCP increased sales by 8% — Vodafone