設計可掃讀、易理解的響應式頁面層級

一個有效的響應式頁面層級，必須讓用戶在闊畫面、窄畫面、放大或線性閱讀時，都能迅速答到四條問題：這頁用來做甚麼、哪些證據支持內容、有哪些可選方案，以及下一步要做甚麼。先把內容優先次序、關係和閱讀序列定清楚，再用標題、字級、留白、分組與操作重點把它們呈現出來；若版面重排後只剩一列外觀整齊的模組，卻令證據離開所支持的說法、選項失去比較脈絡或主要行動被埋沒，響應式設計仍然失敗。

響應式頁面層級必須讓用戶明白甚麼？

它必須保存內容的優先次序、意思和任務方向，讓用戶找到目的、證據、選擇及下一步，而不是只把桌面構圖縮小。這套四問檢查是編輯綜合方法，不是W3C、Nielsen Norman Group或GOV.UK命名的框架。W3C的認知無障礙補充指引指出，清晰頁面標題應協助用戶辨認所在位置和該頁目的，但這項模式本身不是WCAG成功準則。

想像一個比較三個企業支援方案的頁面：引言、資格證據、方案摘要、詳細條件和所有按鈕幾乎同樣搶眼。桌面畫面看似豐富，窄畫面卻變成沒有方向的長清單。小標題突出的「千層蛋糕」掃讀模式確有研究觀察支持，但掃讀路徑會隨任務、語言、內容、熟悉程度和版面而變；F形或Z形圖不應變成通用模板，真正測試仍是用戶能否理解這一頁的實際工作。

團隊應在設計頁面樣式前決定甚麼？

團隊應先寫一份層級合約，明確訂出內容優先次序、重要關係和最少一個有意義的閱讀序列。就三個支援方案的示例頁而言，合約是：協助買方選出合適方案；把資格證據留在其支持的說法旁；以一致結構呈現三個方案；並把「申請需求評估」定為頁面層面的主要任務行動。這份合約應能在設計評審、內容編輯及驗收時採用同一套語言。

不要把內容優先、程式可判定的結構，以及視覺提示混作同一決定。來源次序在欄位和定位消失後仍要合理：先定位，再評估；證據跟隨所支持的對象；方案屬性按可理解次序出現；操作保留足以解釋後果的脈絡。當次序影響意思，WCAG要求最少一個正確序列可由程式判定；真正獨立的區域則可容許多於一個有效相對次序。

1. 寫明頁面最先要協助用戶完成的判斷或任務。
2. 標出每項證據支持哪個說法、狀態或方案。
3. 列出比較方案時必須保持一致的屬性次序。
4. 確認移除視覺定位後仍然成立的來源及閱讀序列。
5. 定義主要行動、方案層面行動和支援連結各自角色。

視覺訊號應怎樣揭示頁面層級？

視覺訊號應共同揭示已決定的內容角色，而不是自行製造優先次序。先把「詳情」等空泛標籤改成能預告內容的標題，例如「選擇支援級別」和「核對資格條件」。W3C指出，字體大小或粗幼、留白、縮排、標籤、表格組織及背景分組都可令人感知結構；不過重要結構和關係仍須可由程式判定或在文字中提供，不能只靠顏色、位置或空白。

字體層級宜克制而有明確角色，並以網站實際字款在不同闊度、語言和書寫系統中驗證。GOV.UK Design System展示了在小畫面調整字體尺寸、同時保留命名角色和垂直節奏的做法，但其數值不是香港網站的標準答案。間距亦應表達「屬於一起」和「另起一組」：小型關係間距保持可預計，較大分隔則按空間調整。大小、顏色、位置和對比可以引導注意力，正確優先次序仍要由內容合約和用戶任務決定。

逐個狀態檢查訊號是否互相支持：標題文字能否概括下方內容；標題與上一段的距離是否大於它與所屬正文的距離；資格證據是否在視覺和語意上連着相應說法；三個方案的同類屬性是否對齊；主要行動是否明顯但沒有壓過必要證據。若要依賴設計師口頭解釋哪一項屬於哪一組，頁面層級尚未真正建立。

頁面如何區分證據、選擇和下一步？

頁面應以鄰近和明確關係放置證據，以一致結構呈現選擇，再以角色有別的操作指出下一步。修正示例頁的闊畫面時，先讓「選擇合適支援方案」佔據主導開首位置，把資格證據放在其支持的承諾旁，並把三個方案納入同一個有標題的比較區。每個方案依相同次序列出適用情況、服務範圍、限制、相關證據及操作，買方才可逐項對照。

• 若沒有任務證據，不要以「最受歡迎」之類處理自行製造推薦方案。
• 方案選擇、查看細節和頁面層面的「申請需求評估」應有不同操作角色。
• 按鈕標籤要描述按下後會發生甚麼，避免只寫「提交」或「下一步」。
• 只有確實同等重要的行動，才應獲得同等視覺重點。
• 補充證據可以次要，但不可因畫面變窄而被視作可隨意刪除。

次要證據可精簡或逐步披露，條件是用戶仍找得到它、知道它屬於哪項說法或方案，並可操作披露控制。分組、間距和背景可顯示關係，但文字或程式結構亦須提供同一關係。最後把修正版並排檢查闊畫面、窄畫面、放大和線性化表示：證據不能離開所支持的對象，方案不能失去共同比較脈絡，主要行動亦不應只靠桌面右方位置才顯得重要。

哪些響應式操作可以在版面改變時保存意思？

可採用保留、堆疊、移位、精簡和逐步披露，但每項操作都要保存資訊、功能、關係和任務優先次序。先由窄畫面單欄基線安排示例頁，再只在有助比較方案或連繫證據時加入較闊佈局。這與GOV.UK Design System的小畫面優先實例相符，但其網格和量度不應直接當作通用規格。WCAG重排要求在測試條件下避免資訊或功能流失及不必要的二維捲動，同時為不可或缺的二維內容保留例外。

• 保留：內容、關係及任務角色在新狀態仍完整，亦不造成可避免的雙向捲動。
• 堆疊：區域彼此獨立或已有正確次序，排成一軸後仍可理解和操作。
• 移位：新的程式閱讀序列仍然有效，標籤、數值、證據與操作沒有失去脈絡。
• 精簡：減少重複或較低優先的呈現方式，但不刪走必要資訊或功能。
• 逐步披露：觸發標籤清楚，控制可操作，而且展開內容與所屬對象的關係不會消失。

不要假設桌面由左至右的位置自然就是窄畫面的正確堆疊次序。當次序影響意思，最少一個正確閱讀序列必須可由程式判定；若兩個區域真正獨立，則毋須強行規定唯一相對次序。一般閱讀區可在條件成立時變成單欄，複雜元件卻可能需要功能調整。某些資料表等二維結構若對比較或操作不可或缺，應採用合適的功能處理，而不是把每個儲存格天真地拆成長清單。

響應式層級不是桌面方格倒下的次序，而是意思得以保存的次序。

團隊應怎樣審核和管治頁面層級？

團隊應用同一份四問合約，逐一審核闊畫面、窄畫面、放大和線性化狀態，再以具代表性的買方任務觀察結果裁決爭議。先讓沒有聽過設計解說的評審指出頁面目的、相關資格證據、三個方案和「申請需求評估」行動。重複檢查時，不只看模組有否放入畫面，還要找內容流失、雙向捲動、證據分離、比較中斷、操作競爭和下一步被埋沒等問題。

1. 在闊畫面記錄評審第一眼辨認到的目的、證據、選擇和行動。
2. 在窄畫面及放大狀態重做四問，檢查資訊、功能和脈絡有否流失。
3. 獨立檢查線性化及程式閱讀次序，確認標題、標籤、數值、證據和操作仍相連。
4. 讓具代表性的買方尋找證據、比較必要屬性並展開下一步，觀察實際受阻位置。
5. 把失效點連回合約，指定內容模型、模板、元件、審批準則或發佈檢查的修正責任。

描述性標題有助尋找資料和理解組織，但不能取代正確語意結構；閱讀次序審核亦應集中於會影響意思的序列，無須為獨立區域製造唯一答案。WCAG符合性是無障礙要求，不是用戶必然理解頁面或完成任務的證明。管治上可採用一條規則：每個頁面層級決定都必須由層級合約、具代表性的任務和可觀察結果支持，而非只憑品味；若團隊無法可靠評估複雜關係或重排行為，應邀請無障礙或用戶研究專業人員參與。