模板展示頁放了很多圖片，訪客卻還是問「兩款差在哪裡」。問題可能不在圖片太少，而是他正拿 A 的首頁對照 B 的文章頁，或必須來回捲動才找得到同一個位置。把圖片按照比較任務排列，比單純再加幾張截圖更有用。
先選一個具體任務：比較兩個版面的分類入口、摘要呈現與返回路徑。這篇用自製版面示意說明排法，不代表任何在售模板的功能，也不從展示圖片推測後台設定、會員權限或實際效能。
先選比較問題，再選圖片
問自己：訪客要從這組圖片決定什麼？如果他在意文章閱讀，就選兩款的文章頁；如果他在意分類瀏覽，就選分類頁。首頁的大橫幅很醒目，但不能代替文章頁的長文字、分類入口或返回連結。
每組圖片都應標明是哪個頁面、在哪種畫面寬度下取得，以及目前比較的版面名稱。不要只寫「效果圖 1」「效果圖 2」。當圖片離開原先的位置被放大或轉貼，讀者仍應知道它來自哪個頁面。
也要選擇相近的內容條件。A 只有兩篇短標題，B 放了十二篇長標題，看到的密度差異可能來自內容，而不是版型。可以用相同的合成內容演示排法；展示實際模板時，則應說明截圖當時的條件，不能改掉資料後冒充原來的效果。
讓兩個版面同步切換同一種畫面
自建示範有 A「留白導覽」和 B「緊湊列表」兩個版面，上方只有一組「首頁、分類頁、文章頁」按鈕。選到文章頁時，兩邊一起顯示文章頁示意，並在按鈕下方明確寫出「目前比較：文章頁」。
我們實際點選文章頁，再展開 A 的畫面說明。選中的按鈕狀態、兩邊標題和目前比較文字一起更新，說明仍可以收合。訪客不用先記住 A 顯示哪頁，再去另一邊找相同頁面。
真實展示頁可以用同樣的分組方式，但要有相應圖片才開放選項。若某款尚未提供文章頁截圖，就明確標示「尚未提供」，不能拿首頁圖片填滿格子。少一張圖是資料缺口，不是證明那個版面沒有文章頁。
每張圖只標兩三個值得看的位置
在同一畫面上指出分類入口、摘要區或返回分類的位置，讀者才知道要看哪裡。圖旁的文字可以寫「分類入口在頂部」「摘要每項兩行」，但必須是圖中可確認的現象。不要把「版面看起來簡潔」改寫成「搜尋更快」或「轉化率更高」。
若要裁切圖片，裁切應保留問題涉及的區域和足以理解位置的上下文。例如比較返回分類連結，就連同文章標題或正文尾端一起展示。只截一個孤立按鈕，讀者無法知道它出現在頁首還是頁尾。
保留完整畫面可供查看，聚焦圖則用來解釋差異。放大入口要寫清楚是「查看文章頁完整畫面」，不要用一個沒有名稱的放大鏡圖示承擔所有操作。如果使用彈出視窗，也要讓鍵盤能關閉並回到原來的入口。
把對照文字放在圖片附近
本例在兩個版面下方列出三個比較項目：分類入口、摘要和返回分類。每一行都讓 A、B 對應同一個問題。這些文字描述的是自製示意的安排，讀者不需要從圖片中重新猜出差異。
項目少時，不必做一個很大的功能矩陣。先把最影響選擇的幾項講清楚，再提供其他畫面的入口。若比較資料有些來自文件、有些來自畫面，應說明各自來源；同一欄中不能混入未確認的後台能力。
要寫「支援」「可以設定」等功能描述時，另核對產品文件或實際合法演示。圖中看得到一個登入按鈕，不代表會員流程可用；看得到多張海報，也不代表能自動匯入。展示比較應先把可見的版面說清楚，超出圖片的問題另外回答。
圖片替代文字與說明各有工作
WAI 的圖片教學建議依圖片在當前內容中的用途決定替代文字。這裡的圖片承擔比較資訊，就要描述與任務有關的位置，而不是把檔名寫進 alt。例如「A 的文章頁把返回分類放在標題上方」，比「A 模板圖片」更有內容。
附近若已有完整的比較文字，alt 可以更精簡，避免同一大段被重複讀取。畫面裡所有微小文字也不必逐字塞入 alt；真正影響選擇的內容應提供可讀的正文。若同一張圖片只作裝飾，則按裝飾用途處理，不要再附無關的關鍵字。
圖說負責補充來源和條件，例如「桌機文章頁」「自製示意」「同一組合成內容」。這些資訊有助判斷比較是否公平，但不用每張圖都塞滿工具版本與製作紀錄；較詳細的來源可以集中在展示頁的說明區。
切換按鈕與展開說明要能用鍵盤操作
「首頁、分類頁、文章頁」是在當前頁面切換內容的動作，適合用按鈕。讓選中狀態除了顏色，還能從文字或程式屬性辨認。切換後不應突然把焦點丟到頁面最上方，讀者應能接著閱讀目前比較的內容。
本例使用原生 details 和 summary 放較短的畫面說明，點擊後能展開與收合。原生元素仍需要清楚的摘要名稱；兩個都只寫「更多」，訪客很難知道是 A 的說明還是 B 的說明。
手機上可以把同一組 A、B 依序放置，但保持相同的頁面標籤與比較項目。不要讓讀者滑過一長串 A 的所有圖片後，才看到 B。若兩張縮小到文字已無法辨認，改成可查看完整圖的入口，再用附近的對照文字承擔快速比較。
用一個訪客問題驗證這組圖片
交付前，請人只看展示頁回答：「哪一款把返回分類放在文章上方？」若他需要來回找圖，先改善分組和標籤；若圖片根本看不清楚，就補合適的聚焦畫面。不要先加更多裝飾或更多圖片，讓同一個問題變得更難找。
訪客能在同一種畫面裡讀出差異，就可以再去看完整 Demo，確認自己在意的操作。展示比較的作用是縮短找對圖片的過程；付款、權限、實際播放及其他功能，仍需要各自的資料與操作證據。
評論0