官網首頁，5秒沒看懂就走

你花了十幾萬做官網，上線後打開 Google Analytics 一看：首頁跳出率 70%，平均停留時間 8 秒。

客人點進來，看一眼，就走了。沒有往下滑，沒有點「關於我們」，更沒有填表單。

問題通常不在網站漂不漂亮，而在首頁第一個畫面，沒有在 5 秒內講清楚「你是誰、能幫我什麼、我下一步要按哪裡」。這篇把國內外研究拆開來講，告訴你首頁第一屏到底該放什麼，最後再教你用 AI 工具自己做一次檢測。

客人不是沒興趣，是沒看懂

很多老闆看到跳出率高，第一個反應是「流量不精準」或「客人本來就只是看看」。這種情況當然有，但更常見的狀況是：客人其實有需求，只是點進來後找不到自己要的答案。

想像你走進一家店，門口沒有招牌，架上沒有標價，店員也不在。你會站在那邊研究五分鐘嗎？不會，你會直接走去隔壁。

網站也一樣。客人從 Google 搜尋結果點進來，他腦中只有一個問題：「這家能不能解決我的事？」首頁第一屏如果放的是一句「追求卓越，創造價值」配上一張握手的圖庫照片，他得不到答案，就會按上一頁，去點下一個搜尋結果。

你的競爭對手，就在上一頁的下一個連結。

研究怎麼說：前 10 秒決定去留

這不是設計師的直覺，是有數據的。

Nielsen Norman Group（全球最具代表性的使用者體驗研究機構）分析過大量網頁停留時間資料，發現使用者離開網頁的機率，在前 10 秒最高，接下來 20 秒還是很容易離開；撐過大約 30 秒之後，離開的速度才明顯變慢，而且常常會再多待 2 分鐘以上。

他們的結論很直白：想要客人多停幾分鐘，你必須在 10 秒內把「價值主張」講清楚。價值主張，白話講就是「為什麼要選你」。

更早的研究甚至更極端。加拿大卡爾頓大學的 Gitte Lindgaard 團隊在 2006 年發表的研究，讓受試者只看網頁 50 毫秒（0.05 秒），再請他們評分視覺吸引力，結果和看 500 毫秒的評分高度一致。意思是：人在 0.05 秒內就對網站有了好壞印象，而且這個印象會影響後續對「可不可信」「好不好用」的判斷，這在心理學上叫做「月暈效應」。

另一份常被引用的是 史丹佛大學的網站可信度研究。研究團隊請 2,684 人評估網站可不可信，結果在所有評論裡，提到「設計外觀」的比例最高，約 46.1%，包含版面、字體、留白、圖片和配色。

把這三份研究放在一起看，就很清楚了：

• 0.05 秒：客人決定「這網站看起來專不專業」
• 10 秒內：客人決定「這家跟我有沒有關係」
• 30 秒後：客人才會開始認真看內容

所以首頁第一屏的任務，不是把公司所有東西都介紹完，而是讓客人願意留過前 30 秒。

為什麼第一屏是整個網站最貴的地段

「第一屏」指的是網頁打開後，不用往下滑就看得到的那一塊畫面。報紙時代叫做「摺線以上」，英文是 above the fold。

有人會說：現在大家都習慣滑手機，第一屏沒那麼重要了吧？研究結果剛好相反。

Nielsen Norman Group 在 2018 年用眼動追蹤做的研究發現，使用者花在第一屏的注意力約佔整頁瀏覽時間的 57%，前兩屏加起來更高達 74%。和 2010 年的 80% 相比，大家確實滑得比較多了，但「過了第一屏，注意力就大幅下降」這個模式完全沒變。

再加上台灣的狀況：多數企業官網的手機流量已經超過六成。手機螢幕比電腦小很多，電腦上看得到的第一屏，在手機上可能只剩一半。很多網站在電腦上看還好，到了手機上，第一屏只剩一張大圖和一個選單按鈕，重要的標題被擠到第二屏去。

所以規劃首頁時，請先拿手機打開自己的網站，看不滑動的那一個畫面裡有什麼。那才是大部分客人真正看到的你。

第一屏只需要回答 3 個問題

不用想得太複雜。首頁第一屏，只要清楚回答這三件事：

寫完之後，用一個很簡單的方法檢查：把公司名稱遮起來，換成競爭對手的名字，這段文字還成立嗎？

如果換成誰都成立，例如「用心服務每一位客戶」，那就等於沒講。好的首頁標題，換成別人的名字會變得很怪，因為它講的是只有你做得到的事。

國外和台灣官網首頁，差在哪裡

看了很多國內外網站後，會發現一個明顯的差異。

國外中小企業官網，尤其是 SaaS 軟體和服務業，首頁第一屏幾乎都長得很像：左邊一句大標題講好處，下面一行小字補充說明，再來一個顯眼的按鈕，右邊放產品畫面或真實使用情境照。這種結構在 Awwwards 得獎作品和 HubSpot 的轉換率文章裡反覆出現，原因很簡單：它就是照著「你是誰、好處、下一步」這三個問題排的。

台灣很多企業官網，第一屏則常見這幾種狀況：

• 一個會自動輪播的大橫幅，放 3 到 5 張圖，每張寫一句口號
• 公司 Logo 很大，但沒有一句話說明業務內容
• 選單有 8 到 10 個項目，每個都有下拉選單
• 首頁往下滑是「董事長的話」「公司沿革」「最新消息」

這些做法的出發點是「把公司介紹完整」，但客人要的是「快速知道能不能幫我」。

特別要講的是自動輪播。Nielsen Norman Group 的可用性測試發現，自動輪播會干擾閱讀：客人還沒看完第一張，畫面就換了，而且很多人會把輪播區當成廣告直接忽略，這就是所謂的「橫幅盲區」。他們建議手機版不要自動輪播，因為手機使用者滑很快，等輪播換到第二張時，客人早就滑到下面去了。

換句話說，你放在第二、第三張輪播的內容，大部分客人根本沒看到。與其放五張輪流跑，不如選出最重要的一個訊息，固定放在第一屏。

文案要寫到國小五年級都看得懂

很多企業官網的文案，讀起來像公司簡介或標案企劃書：「本公司秉持創新精神，致力於提供客戶全方位整合服務」。

這種寫法有兩個問題：第一，很長；第二，看完不知道你在做什麼。

加拿大的 Landing Page 平台 Unbounce 分析了超過 4 萬 1 千個登陸頁、4 億多名訪客的資料，發現用國小五到七年級閱讀程度寫的頁面，轉換率約 11.1%；用專業、艱深用語寫的頁面，只有 5.3%，差了一倍以上。

這份研究是英文網站的數據，但道理在中文一樣成立。實際修改時可以這樣做：

• 一句話不超過 20 個字，太長就拆成兩句
• 把「解決方案」「全方位」「一站式」這類抽象詞，換成具體做了什麼
• 能用數字就用數字：「服務超過 300 家餐廳」比「經驗豐富」有力
• 用客人的講法，不用內部術語。客人搜尋的是「網站很慢」，不是「效能最佳化」

一個實用的檢查法：把首頁標題念給家裡長輩聽，問他「這家公司是做什麼的？」如果他答得出來，就過關了。

速度也是第一印象的一部分

前面講的都是「看到之後」，但如果畫面根本還沒出來，客人就先走了呢？

Google 分析了超過 90 萬個手機廣告登陸頁的資料，發現載入時間從 1 秒變成 3 秒，跳出機率增加 32%；變成 5 秒，增加 90%。

首頁第一屏最常拖慢速度的元兇有三個：

• 超大張的主視覺圖片：設計師給的原圖動輒 3 到 5MB，直接上傳就會拖慢載入。首頁大圖壓到 300KB 以下，並改用 WebP 格式，差別非常明顯。
• 自動播放的背景影片：看起來很有質感，但手機用行動網路打開時，常常影片還在載入，畫面一片黑。
• 輪播外掛和動畫效果：每多一個外掛，就多一包程式碼要下載。

所以「第一屏要放什麼」和「第一屏要多快」是同一件事。內容再好，出不來就等於零。

自己動手做一次「5 秒測試」

「5 秒測試」是 UX 研究常用的方法，不需要任何預算，今天就能做。

1. 找 5 個沒看過你網站的人：朋友、家人、其他部門同事都可以，但不要找已經熟悉公司的人。
2. 用手機打開首頁：給對方看 5 秒，然後把手機收回來。
3. 問 3 個問題：「這家公司在做什麼？」「你覺得他們跟別家有什麼不同？」「如果你有需要，你會按哪裡？」
4. 記錄答案：不要解釋、不要引導，對方怎麼說就怎麼寫下來。
5. 看結果：如果 5 個人裡有 3 個以上答不出「在做什麼」，第一屏就需要改。

這個測試的價值在於：你太熟悉自己的公司了，所以永遠會覺得首頁寫得很清楚。只有第一次看到的人，才能告訴你真相。

如果身邊找不到合適的人，也可以用接下來介紹的 AI 工具先做一輪初步檢查。

AI 工具實戰：用 AI 幫首頁做健檢

AI 沒辦法取代真人測試，但很適合用來做「第一輪篩選」和「產生改寫方向」。以下是三個可以馬上照做的流程。

流程一：用 ChatGPT、Claude 或 Gemini 模擬「5 秒測試」

現在主流的 AI 聊天工具都能看圖片，可以直接讀你的首頁截圖。

1. 用手機打開官網首頁，只截第一屏，不要截長圖。
2. 把截圖上傳到 ChatGPT、Claude 或 Gemini。
3. 貼上下面這段指令：

AI 的回答如果跟你心中想傳達的不一樣，就代表第一屏的訊息不夠清楚。

流程二：讓 AI 幫你生出 5 種標題寫法

標題是第一屏最重要的一行字。可以把公司資訊丟給 AI，請它給你不同方向的寫法：

拿到 5 組之後，不要直接照抄。挑出 2 組最像你公司的，再拿去做真人的 5 秒測試，看哪一組比較多人答得出「你在做什麼」。

流程三：用 AI 熱點圖預測客人會看哪裡

國外有像 Attention Insight 這類工具，用 AI 模型預測使用者視線會落在畫面哪些位置，產生「注意力熱點圖」。操作方式是上傳首頁截圖，工具就會用紅黃綠色標出最吸睛到最被忽略的區域。

看熱點圖時，重點只有一個：最紅的地方，是不是你的標題和主要按鈕？如果最紅的是一張裝飾用的人物照片，代表視覺重心放錯了。

AI 工具的限制，這裡要人來判斷

• AI 不認識你的客人：它模擬的是「一般消費者」，但你的客人可能是工廠採購、可能是新手媽媽，在意的點完全不同。
• AI 寫的標題容易撞衫：大家用同樣的工具，寫出來的文案會越來越像。一定要加入只有你有的細節，例如實際數字、地名、真實案例。
• 熱點圖是預測，不是事實：真正的答案還是要看上線後的點擊數據，例如 Microsoft Clarity 這類免費工具的真實熱點圖。

比較好的分工是：AI 負責快速產生選項和找明顯問題，人負責判斷哪個選項最符合你的客人。

改版前最常見的 6 個錯誤

最後整理我們在協助客戶改版時，最常看到的幾個狀況：

1. 只看電腦版：老闆在辦公室用大螢幕確認設計稿，但客人八成用手機看。每次確認設計，都要先看手機版。
2. 第一屏放太多東西：想把所有服務都塞進第一屏，結果每個都很小，客人什麼都沒記住。第一屏只講一件最重要的事。
3. 按鈕寫「了解更多」：這幾個字沒有告訴客人按下去會發生什麼。改成「免費估價」「看 30 個案例」「LINE 問價格」更明確。
4. 用圖庫的握手照、商務會議照：客人一眼就看得出是圖庫，反而降低信任感。真實的團隊照、施工照、產品照，就算拍得普通，也比精美的圖庫照有說服力。
5. 改版只改外觀，不改文案：換了新配色、新版型，但標題還是「追求卓越」，跳出率不會有太大改變。
6. 改完不看數據：上線前先記下目前的跳出率、停留時間、表單送出數，改版後一個月再比對，才知道到底有沒有變好。

這 6 點裡，第 3 點和第 5 點成本最低、效果最快，今天就可以自己改。

重點整理：首頁第一屏檢查清單

這 7 項全部打勾，你的首頁第一屏就已經贏過大多數同業了。