網路架站

全站一致性和單頁轉換率衝突時,該讓步的是功能層,不是識別層

多數人以為「全站設計一致」和「這一頁要衝出最高轉換率」,講的是同一件事的兩種說法,把版型做好,轉換率自然會跟著提升。實際上,這兩個目標常常互相衝突,而且衝突的地方很具體:導覽列該不該留在廣告落地頁上、頁尾那一長串連結要不要精簡、活動報名頁該不該套用全站固定的頁首模組。全站設計系統要的是跨頁可預期、能被訪客信任;被一則廣告或一封 EDM 帶進來的單頁,要的只是讓訪客完成一個動作。這兩件事都對,卻不一定能同時做到最好。

問題不是該選哪一邊,而是這場衝突該怎麼分層判斷。一致性其實不是一整塊,拆開來看,有一層無論如何都不能讓步,也有一層本來就該視頁面任務調整。

衝突最先浮現在導覽列、頁尾與版型

全站設計系統存在的理由,說到底就是讓訪客不管從哪一頁進來,都認得出這是同一個網站。同一套色彩、同一種版型邏輯出現在每一頁,訪客不用重新學一次介面,認知負荷降低了,對整個品牌的信任感也會隨著瀏覽的頁數一起累積。這套邏輯用在服務頁、產品介紹頁、部落格文章上都成立,因為訪客本來就可能在這些頁面之間跳來跳去。

單一目的頁面要的是完全不同的東西。活動報名頁、募資頁、廣告落地頁的任務只有一個,讓進來的人完成那個特定的行動,不管是報名、贊助還是留下聯絡資訊。這種頁面最大的敵人不是不夠好看,而是選項太多。Unbounce 在檢視落地頁優化時直接點出,每多放一個導覽選項,就多稀釋一次訪客對主要行動的注意力,理想狀態是整頁看完,能吸走注意力的東西只剩一個。

這兩種目標真正打起來的地方很具體,幾乎都落在三個元素上。第一個是導覽列,全站版留著完整選單,單頁版可能只留 Logo,拿掉所有連到其他頁面的出口。第二個是頁尾,全站版習慣塞滿服務項目、公司資訊、社群連結,單頁版往往只留最基本的聯絡方式與必要的法律聲明。第三個是版型模組,全站共用的頁首橫幅、側邊欄、相關文章區塊,套用在單頁上常常變成不相干的干擾。Unbounce 同一份檢視也提到,首頁天生要服務各種不同來源的訪客,訊息本來就混雜,同時塞進認識產品、認識團隊、限時折扣好幾種內容;單頁只服務一種來源、一個目的,把首頁那套訊息混雜的邏輯搬過去,反而稀釋了單頁原本該有的專注。這不是空泛的理念之爭,而是三個實際會被拿掉或簡化的元素。真正的判斷關鍵,在於這個頁面在使用者旅程裡扮演什麼角色。

廣告導流頁和自然搜尋頁,對齊全站的必要性不同

決定哪一頁該往哪邊靠,第一個判準看這個頁面在使用者旅程裡怎麼被抵達、抵達之後還會不會繼續移動。有一種頁面是被單一訊息、單一管道一次性帶進來的,像廣告投放的活動頁、EDM 點進去的報名頁、掃 QR code 導向的頁面。訪客進來之前只看過那一則廣告或那封信,離開之後也不會回頭逛網站別的地方,這種頁面不會發生跟其他頁面比較這件事,全站一致在這裡能帶來的價值本來就打了折扣。

另一種頁面是使用者可能透過站內導覽、也可能透過自然搜尋抵達,抵達之後還可能被內部連結帶去別的地方,像首頁、服務頁、產品介紹頁、部落格文章。這類頁面的使用者心智模型本來就是跨頁比較,今天看了服務頁,下一秒可能點進案例頁,再下一秒回到首頁確認聯絡方式。破壞這種頁面的一致性,不是風格不統一這麼單純的問題,是直接增加訪客每換一頁就要重新適應一次的認知負荷。

Unbounce 檢視落地頁類型時明確把兩者分開處理,用廣告導流的活動頁可以完全獨立存在,不必跟站內架構掛鉤;但透過自然搜尋進站的頁面需要被整合進站內連結架構,沒有內部連結串起來的孤立頁面,在搜尋排名上會吃虧。這個區分正好對應這頁會不會被拿來跨頁比較或連結的判準。Nielsen Norman Group 引用 Jakob’s Law 進一步說明這個判準背後的原因,使用者大多數時間待在別的網站,會把對其他網站的期待帶到你的網站上;當使用者在同一個網站內從一頁移動到下一頁,這種跨頁期待的延續特別強,一致性能降低學習成本,也讓使用者對介面更有掌控感。只被單一訊息帶進來、不會有下一頁的頁面,沒有這層壓力;會被逛好幾頁的頁面,則必須維持這種延續感。

依頁面被抵達的方式判斷是否要對齊全站一致:一次性帶進來的頁面必要性低可獨立存在,會被跨頁比較的頁面則需維持全站一致
被單一訊息一次帶進來的頁面可以獨立存在,會被逛好幾頁、彼此比較的頁面才需要對齊全站一致。

一致性其實分成識別與功能兩層

判準確立之後,回頭看一致性這個詞本身,會發現它從來不是一整塊。Nielsen Norman Group 把一致性拆成好幾個層次來談:視覺層次要求符號、圖示、圖像處理在全站保持一致;頁面與按鈕版型層次關心哪些元素在哪些頁面重複出現、擺在同樣的位置;使用者輸入資料的慣例層次,像日期格式、電話格式該不該用業界通用的寫法;內容層次則檢查語氣前後是否一致。這篇分析也區分了內部一致與外部一致,內部一致談的是同一個產品或同一個品牌家族內部的一致,像同一個主色被套用在所有連結與主要按鈕上;外部一致談的是跟整個網路、整個產業既有慣例的一致。把一致性拆成好幾個獨立層次來談,而不是當成單一整體概念,是本文接下來要用的思路。

依這個思路,本文把一致性收進兩層來判斷:識別層,包含品牌名稱、Logo、主色、字體家族、語氣;功能層,包含導覽列、頁尾、版型模組、頁面裡的次要連結。真正該讓步給單頁轉換目標的是功能層,識別層不管哪種頁面都要恆定。這個框架能同時解開前面兩節點出的衝突,導覽、頁尾、版型屬於功能層,單一目的頁面可以依任務調整;品牌名稱、Logo、主色、字體、語氣屬於識別層,不管這頁是不是被單一訊息帶進來,這五樣東西都不該變。

一致性拆成識別層與功能層:識別層的品牌名稱、Logo、主色、字體、語氣任何頁面都恆定,功能層的導覽列、頁尾、版型模組、次要連結可依頁面任務調整
衝突時該讓步的是功能層,識別層無論哪一種頁面都要維持恆定。

任何頁面都不能斷的識別層

訪客判斷這是不是同一個品牌、這頁可不可信,靠的正是品牌名稱、Logo、主色、字體家族與語氣這幾個最基本的辨識訊號。這幾樣東西一旦跟主站脫節,訪客得到的訊息不是「這頁設計得很有創意」,而是「我可能走錯了」。這種疑慮在詐騙頁與可疑行銷手法氾濫的環境下特別容易被放大,尤其是牽涉留下聯絡資料、輸入付款資訊的頁面,訪客對這是不是真的同一家的敏感度會拉到最高。

Unbounce 直接點出,如果廣告、落地頁跟最終抵達的網站感覺不像同一個家族,生意會因此流失;品牌一致性存在的一大理由,就是在充滿詐騙與可疑行銷手法的網路環境裡,向訪客保證他們沒有被帶偏,而且對方賣的東西真的跟廣告上寫的一樣。同一份檢視也給出更具體的做法,廣告到落地頁之間的色票、字體不要換掉,原始的核心訊息要在落地頁上重複出現,讓訪客一眼認出這跟他剛才看到的廣告是同一件事,這種做法業界稱為 message match。這條規則不分頁面是單頁還是全站頁面都適用,是唯一不受頁面任務影響的一層。

可以讓步的是導覽、頁尾與版型

導覽列、頁尾多組連結、全站固定的版型模組,本質上都是幫使用者在很多頁之間移動、找到路的工具。它們的設計初衷是訪客現在在這頁,但等一下可能想去別的頁,先把路標準備好。當一個頁面的任務就是只完成一件事、使用者不會移動到下一頁時,這些原本用來指路的工具反而變成讓訪客分心離開的出口,每一個看起來無害的導覽選項,都是一個訪客可能就此離開、不再回來完成原本行動的岔路。

拿掉這些功能層元素,不會動搖這是不是同一個品牌的判斷,因為那個判斷是識別層在負責,跟導覽列在不在無關。訪客看到熟悉的 Logo、熟悉的主色與字體,還是認得出這是同一個品牌;差別只在於這一頁沒有給他逛去別處的選項,而這正是這種頁面設計上想要的效果。功能層可以依頁面任務調整,識別層維持恆定,兩者互不牴觸,這也是為什麼把一致性拆成兩層來看,能同時保住品牌信任與單頁轉換率,而不必二選一。

全站一致和單頁客製都可能做過頭

兩層框架放回現實裡檢驗,會發現兩個方向都有失守的代價,不是只有太固守全站規則會出錯,太放飛單頁客製一樣要付出代價。做過頭有兩種相反的樣子,一種是把原本只屬於功能層的東西整套搬進單一目的頁面,另一種是連識別層都被改掉。兩種失守都會直接反映在轉換率或訪客信任感上,不是純粹的美感問題。

兩種做過頭:把功能層照搬進單頁會拆散注意力、稀釋轉換率,把識別層也改掉會讓訪客懷疑走錯頁、信任流失轉換歸零
太固守全站規則會稀釋轉換率,太放飛單頁客製則會流失訪客信任,兩個方向都可能做過頭。

導覽塞滿版面會稀釋這頁的轉換率

把首頁等級的導覽、頁尾、次要連結整套照搬進一個只該做一件事的頁面,等於把原本只有一個的行動選項變成十幾個,訪客的注意力被拆散,轉換率因此被稀釋。這是最常見、也最容易被忽略的失守,因為表面上看起來只是在保持一致,不會有人覺得這樣做有錯,代價卻是實實在在反映在轉換數字上。

延續前面提過的 Unbounce 觀察,每多一個導覽選項,就多稀釋一次訪客的注意力。反過來看這句話,就是做過頭要付出的代價,不是導覽本身不好,是把只該出現在全站頁面的導覽,原封不動套用在不該有導覽的單頁上,代價會直接體現在轉換數字上,而且往往是設計者自己最後才發現的那個數字。

色調字體與主站脫節會讓訪客懷疑走錯頁

反過來的失守,是把識別層也當成可以自由發揮的空間,換掉主色、字體、語氣去追求這頁看起來更吸睛。結果訪客從廣告或連結點進來,感覺不到眼前這頁跟原本認知的品牌有任何關聯,直接產生是不是走錯頁、甚至這會不會是詐騙頁的疑慮,尤其在電商結帳、募資、留資料這類需要信任感才能完成的頁面上,這種疑慮足以讓轉換整個歸零。

呼應前面提過的 Unbounce 觀察,品牌一致性存在的一大理由,就是在充滿詐騙與可疑行銷手法的網路環境裡,向訪客保證他們沒有被帶偏。把這個論點套在做過頭的反面案例上就很清楚,拿掉這層保證,付出的代價是訪客的信任流失,甚至直接關掉頁面離開,而且這種流失往往在數據上看不出明確原因,只會看到跳出率悄悄升高。

少數情況,連識別層都可以打破

識別層恆定不是一條絕對律,承認例外反而讓這套框架更站得住腳。當一個頁面代表的是一個有明確授權範圍的子活動或子品牌,像企業旗下獨立掛名的年度活動、限定快閃、聯名合作頁,看起來不完全像主站本身就是這頁想傳達給訪客的感覺,強調這是特別的、限定的,跟平常不一樣。識別層的差異在這種情況下是刻意設計出來的訊號,用來強化這不是日常的感受,不是意外的脫節。

這種例外能成立,前提是有清楚的授權範圍與策略理由,不是這頁我想玩點不一樣的設計就能套用。差別在於這個決定有沒有被明確界定過,是誰授權、代表什麼範圍、預期維持多久,而不是設計師個人當下的喜好。一個聯名合作頁換上聯名對象的配色,是雙方談好的策略決定;一個普通的服務頁換掉主色只因為經手的人覺得換個顏色比較好看,兩者的性質完全不同,前者是被允許的例外,後者只是識別層失守。

把打破規則的決定,收進設計系統的正式流程

確立了該不該打破、打破到哪一層的判準之後,剩下的問題是這個決定要怎麼被記錄、被管理。如果每個接手的設計師、工程師都各自判斷這頁可以不一樣,久了整個網站會變得誰也搞不清楚哪裡該一致、哪裡不用一致,原本清楚的兩層框架也會慢慢崩壞成各自為政。

英國政府數位服務團隊維護的正式文件 GOV.UK Design System,對這件事給出一套具體的分級做法,治理邏輯可以直接套用到一般網站的設計系統上。小幅度的調整優先用有清楚命名、可回溯的方式做,例如用專屬前綴的樣式類別去加減,而不要直接覆蓋設計系統原本的程式碼,因為之後設計系統更新時容易互相衝突,原本被覆蓋掉的部分可能悄悄失效。這份文件也建議用專屬的命名前綴,把客製的部分和原本元件的程式碼分開,避免兩邊的樣式互相干擾。

如果改動的幅度已經大到不符合原本元件要解決的使用者需求,GOV.UK Design System 建議乾脆把它整個複製出來,另立一個獨立元件,不要用小修改硬撐。文件列出幾種不該用小修改的情況:改動範圍已經涵蓋這個元件的大部分內容、元件已經不符合原始使用者需求、需要大幅更動底層結構。無論屬於哪一級,修改前都要先評估這個改動會不會影響長期維護、能不能繼續套用設計系統之後的更新、會不會讓頁面的無障礙表現變差。這一整套小調整可回溯、大調整就獨立命名、每次修改都評估影響的做法,收進正式流程之後,才不會讓這頁跟別的頁不一樣變成沒有人管得動的例外清單。

一致性與單頁轉換率的衝突,核心不是選邊站的問題,而是分層判斷的問題。功能層可以依頁面任務讓步,識別層無論如何都要維持恆定,少數有明確授權的子品牌與活動頁,則是這條規則本身承認的例外。真正決定這套判斷能不能長期站得住腳的,反而是有沒有把每一次偏離都記錄下來,放進看得到、可以回溯的流程裡。少了這一步,再清楚的框架也只會隨著時間被各自為政的決定慢慢磨掉。

常見問答

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

全站一致的頁面該保留完整導覽列嗎?

不需要,單頁版通常只留 Logo、拿掉所有連到其他頁面的出口,因為導覽選項越多,訪客能吸走注意力的東西就越多,理想狀態是整頁只留一個能吸走注意力的行動,讓訪客把心力都放在完成那一件事上。

哪些頁面不需要對齊全站設計一致?

被單一訊息、單一管道一次性帶進來、離開後不會再瀏覽其他頁面的頁面,例如廣告投放的活動頁、EDM 報名頁、掃 QR code 導向頁,不會被拿來跨頁比較,全站一致在這裡的必要性本來就比較低,可以獨立存在。

品牌識別層具體包含哪些元素?

識別層指品牌名稱、Logo、主色、字體家族與語氣這五樣最基本的辨識訊號,不管是哪一種頁面都不該變動,因為訪客判斷這是不是同一個品牌、這頁可不可信,靠的正是這幾樣東西。

單頁塞滿全站導覽會有什麼後果?

把首頁等級的導覽、頁尾、次要連結整套搬進只該做一件事的頁面,等於把原本只有一個的行動選項變成十幾個,訪客的注意力被拆散,轉換率也會因此被稀釋,而且往往是最後才被發現的數字。

聯名合作頁可以換掉主色和字體嗎?

可以,但前提是有清楚的授權範圍與策略理由,例如企業旗下獨立掛名的活動或聯名頁,這種識別層差異是刻意設計出來的訊號,用來強化這是特別、限定的感受,跟單純覺得換個顏色比較好看的隨意決定完全不同。

資料來源
  1. Landing page optimization: The basics explained (with 101 tips) — Unbounce
  2. Maintain Consistency and Adhere to Standards (Usability Heuristic #4) — Nielsen Norman Group
  3. Extending and modifying components in production — GOV.UK Design System