用戶如何「掃視」網頁？視覺動線與資訊架構
人不是「閱讀」網頁，而是「掃視」。理解眼睛怎麼移動，你就能把對的訊息放在對的位置——這正是 UI/UX 與資訊架構的核心。
打開一個網頁，多數人會在一兩秒內快速掃過，只抓標題、粗體字、圖片與按鈕，決定值不值得停留。人不是「閱讀」網頁，而是「掃視」網頁。設計的任務，就是順著這種掃視習慣鋪路，而不是逼使用者逐字閱讀。這篇文章從眼動研究的掃視模式講起，拆解 UI 與 UX 的分工、資訊架構的方法，以及把這些原理落實到落地頁與官網的具體做法。
01眼睛怎麼動：F 型、Z 型與圖層優先
眼動研究歸納出幾種常見的掃視模式。文字密集的頁面容易呈現 F 型路徑：先橫掃頁面上方，再往下跳一段橫掃一次，最後沿左側縱向掃到底——這意味著每段的「開頭幾個字」承擔了大部分的溝通任務，重點放後面就等於沒寫。視覺元素豐富的頁面則接近 Z 型動線：左上（Logo）→ 右上（導覽/CTA）→ 對角線掃到左下 → 右下（行動點）。落地頁的首屏設計通常沿用這條路徑：價值主張放左上到中央，CTA 收在動線的終點。
另外兩個被反覆驗證的現象值得記住：圖片與人臉優先——視線永遠先被圖像抓走，而且會順著照片中人物的視線方向看過去，所以讓照片裡的人「看向」你的標題或按鈕，是免費的視線引導；首屏偏食——多數注意力集中在不需捲動的第一屏，越往下衰減越快，重要訊息與第一個 CTA 務必在首屏出現。
02UI 與 UX 的差別
簡單說，UX（使用者體驗）是「流程順不順、好不好用」，關乎資訊架構、動線與邏輯；UI（使用者介面）是「看起來如何、操作起來如何」，關乎視覺、排版與互動細節。一個比喻：UX 是房子的格局動線，UI 是裝潢材質。格局錯了，裝潢再美每天都在繞路；格局對了，裝潢決定你想不想久待。
實務上兩者的分工是有順序的：先用 UX 方法確認「誰來這個網站、想完成什麼、走哪條路徑最短」，畫出線框圖（Wireframe）；再用 UI 把這條路徑做得清楚、好看、有品牌感。順序顛倒——先挑喜歡的視覺風格再回頭塞內容——正是多數「很美但沒效果」的網站的死因。
03資訊架構（IA）：先有結構，才有畫面
資訊架構是把內容分類、排序、命名的工作，它決定使用者多快找到想要的東西。三個步驟可以落地：
盤點與分類
列出所有要放的內容，依「使用者的任務」分組——不是依你的組織架構。訪客想找「價格」，不會想找「行政部門公告」。
排序與層級
最多人要完成的任務放最淺的層級。經驗法則：任何重要內容不該超過三次點擊；導覽項目控制在五到七個以內——選項越多，選擇的心理成本越高，反而沒人點。
用使用者的語言命名
選單寫「服務項目與價格」而不是「解決方案」；寫「聯絡我們」而不是「互動專區」。命名的標準只有一個：不用猜。
驗證架構最便宜的方法是「找五個陌生人」：給他們一個任務（找到報價方式），看他們卡在哪。五個人就能找出八成的問題，成本幾乎是零。做的時候不要提示、不要解釋，只觀察與記錄——你的網站上線後，沒有人會站在使用者旁邊幫忙導覽。
04把掃視原理變成設計手法
建立視覺層級
用大小、對比、留白讓最重要的訊息最先被看到。層級的本質是「犧牲」：什麼都想強調，等於什麼都沒強調。
一屏一重點
每個區塊只傳達一個核心訊息，降低認知負擔。訊息多就分段，別擠。
段首承重
F 型掃視只看每段開頭——把結論放段首，補充放後面，標題與粗體要能「跳著讀就懂」。
把 CTA 放在動線終點
Z 型的右下、長頁每一到兩屏的自然停頓點，讓行動呼籲出現在視線與心理都準備好的位置。
用方向元素引導
箭頭、人物視線、斜向構圖、漸進的數字編號，都是把視線帶往目標的工具。
留白不是浪費
留白劃出視覺群組、提高可讀性，也讓重點有呼吸的空間。擁擠的頁面會讓掃視者直接放棄。
這些手法在高轉換落地頁上的應用最為極致——落地頁本質上就是「為單一目標設計的一條掃視動線」。
052026 的設計趨勢，仍以「清晰」為王
動效、3D、AI 生成視覺、微互動很迷人，但它們是為了「強化理解」而存在，不是為炫技。判斷任何設計趨勢該不該用，只需要三個問題：它有沒有讓訊息更清楚？有沒有拖慢載入（見速度優化指南）？拿掉它，使用者會不會迷路？再前衛的設計，只要讓使用者迷路，就是失敗的設計。質感與清晰可以並存——這也是我們做每個專案的原則。
06掃視原理的實戰應用：三種頁面的檢查重點
首頁：訪客最常帶著「這家公司是做什麼的」的疑問而來。檢查：首屏一句話能不能說清楚你是誰、服務誰？主要服務的入口是否在第一或第二屏就出現？導覽命名是否不用猜？服務頁：訪客在比較與評估。檢查：頁面開頭是否先講「適合誰、解決什麼問題」再講細節？有沒有用小標與列表讓人跳讀？頁尾是否有明確的下一步（詢問、報價、案例）？文章頁：訪客帶著具體問題搜尋而來。檢查：第一段是否直接回答問題（而不是鋪陳三段才進主題）？段首是否承重、能跳著讀？文中有沒有自然導向相關服務與延伸閱讀的路徑？
三種頁面各檢查一輪，大約一小時。多數網站的動線問題不需要重做設計，調整資訊的「順序」與「密度」就能明顯改善——因為問題從來不是使用者不看，而是我們把重點放在他們不會看的地方。
最後補充一個容易被忽略的視角：掃視習慣也影響 SEO 與 AI 引用。清楚的標題層級、段首承重的寫法、可跳讀的結構，恰好就是搜尋引擎與生成式 AI 最容易理解與擷取的格式。換句話說，為「人的掃視」而設計的內容結構，同時也是為「機器的閱讀」而優化——一次功夫，三方受益：使用者讀得順、Google 排得上、AI 引得到。這也是為什麼我們在每個專案裡，都把資訊架構當成設計與 SEO 的共同起點。
Key takeaways
- 使用者用 F／Z 型路徑掃視，段首與首屏承擔大部分溝通任務
- 視線先被圖片與人臉抓走，讓照片人物「看向」你的重點
- UX 管流程、UI 管體感；先畫格局再做裝潢，順序不能反
- 資訊架構三步：依任務分類、依重要性排層級、用使用者的語言命名
- 視覺層級的本質是犧牲：什麼都強調等於什麼都沒強調
會。動效應服務於理解與引導，過量會分散注意、拖慢載入。原則：每個動效都要答得出「它幫使用者理解了什麼」。
先規劃骨架再進設計。架構先穩，後續設計與開發都更有效率；邊做邊改通常代表要反覆重工，成本反而更高。
看數據與看人。GA4 的跳出率與停留時間指出可疑頁面；找五個目標客群實際操作一個任務，卡點會立刻現形。
手機是單欄縱向掃視，「首屏偏食」更嚴重、拇指熱區決定按鈕位置。設計時應以手機版為起點，再擴展到桌面版。另外，手機使用者的耐心更短、干擾更多（通知、切換 App），所以每一屏的訊息要更精簡、CTA 要更早出現，長段文字在手機上要拆得更碎才讀得下去。
掃視不等於少字，而是「可跳讀」。該深的內容（如 SEO 文章）可以長，但要用標題、粗體、列表讓人跳著讀也能抓到重點。重點是控制每一段的密度，讓眼睛有地方落腳。
多數不用。八成的動線問題可以透過調整區塊順序、改寫標題與段首、強化視覺層級來解決，成本遠低於重做。真正需要重做的訊號是：資訊架構的分類邏輯從根本上錯了，或技術框架已無法支撐需要的調整。