多數經營者把首屏（above the fold）當成網站上最貴的一塊版位，覺得東西要盡量塞好塞滿，輪播圖多放幾張、行動按鈕多擺幾顆，總有一顆能接住訪客的注意力。但學術研究早就推翻了這個直覺。訪客對一個網站產生第一印象，只需要幾十毫秒，比眨一次眼睛還快，遠比多數人以為的還要早發生。
越想在這短短一瞬間塞更多訊息，訪客反而越抓不到重點，第一印象也跟著變得模糊。首屏設計（above the fold design）指的正是這第一眼看到的畫面該放什麼、怎麼安排，它決定訪客會不會願意往下捲動，還是直接按上一頁離開。Google 自家的研究團隊也觀察到，使用者對網站的視覺判斷，落在 17 到 50 毫秒之間就已經形成，速度跟眨眼幾乎一樣快；等到 3 秒過去，訪客多半不是還在瀏覽新東西，而是在確認自己剛才那個第一印象準不準。
這也是為什麼首屏設計真正該講究的，從來不是能塞進多少東西，而是那零點幾秒夠不夠準。先從首屏這個詞到底指哪個範圍講起，再一路拆為什麼判斷會這麼快、輪播圖跟一次擺出好幾顆按鈕，又是怎麼把這零點幾秒浪費掉的。
首屏是什麼？訪客還沒滑動前，看到的就是它
「above the fold」這個說法，其實是從報紙編排借來的比喻——早期報紙攤在報攤上，只有摺線以上的版面看得到，編輯把最重要的新聞擺在那裡搶第一眼。網站的首屏就是這個概念的數位版本，訪客打開網頁，還沒捲動滑鼠滾輪或用手指往下滑之前，肉眼能看到的第一個畫面，就是首屏。
不過網站的「摺線」跟報紙不一樣，它從來不是一條固定的線。同一個網站，在寬螢幕電腦、筆電、手機直向畫面看到的範圍完全不同，瀏覽器的網址列、書籤列有沒有展開，也會讓這條線往上下微調。與其糾結摺線精確落在哪一個像素，不如先確定首屏這塊該放什麼。多數網站的首屏，通常會涵蓋導覽列、一張主視覺（hero）區塊、一句標題與副標，再加上一個主要的行動呼籲。
這幾樣東西怎麼分配版面，決定了訪客第一眼會先看到什麼。而訪客到底會花多久時間做出這個判斷，答案比多數人想的還要快得多。
判斷只要幾十毫秒，3秒已經是保守估計
多數經營者把「3 秒」想成一段還能慢慢展示的時間，先秀完 Logo，再讓訪客看清楚標語，最後才注意到按鈕。但學術研究呈現的畫面完全不是這樣。設計研究者 Lindgaard 與團隊在 2006 年做過一個實驗，讓受試者只看網頁畫面 50 毫秒，也就是五十分之一秒，就要求他們評斷這個網站好不好看，結果受試者給出的第一印象評分，跟給他們看更久之後打的分數幾乎一致。也就是說，訪客對一個網站美不美觀的判斷，在 50 毫秒之內就已經定案了。
Google 自己的研究團隊也得出類似的結論，使用者對網站設計形成判斷的時間落在 17 到 50 毫秒之間，比一次眨眼還快。換句話說，「3 秒」這個常被拿來當首屏黃金時間的數字，其實已經是相當寬鬆的估計值，真正決定訪客去留的關鍵瞬間，遠比 3 秒還要早結束。
這也解釋了為什麼首屏的注意力這麼集中。Nielsen Norman Group 的瀏覽行為研究就發現，訪客有 57% 的瀏覽時間留在首屏，前兩屏合計占了 74%。3 秒之後，訪客多半只是在反覆確認第一眼的判斷有沒有錯，而不是還在認真瀏覽新的訊息。同樣的道理，放到輪播圖這種需要訪客乾等才能看到全部內容的設計上，問題會更明顯。
輪播圖看起來面面俱到，訪客其實幾乎不點
第一個容易在首屏踩雷的做法，是靠輪播圖想讓每則訊息都露出，反正訪客總會等到看到他在乎的那一張。但實際的點擊數據完全不支持這個想法。網頁分析師 Erik Runyon 曾經追蹤一所大學官網首頁輪播圖的點擊紀錄，整體點擊率只有大約 1%，而其中八成四的點擊都集中在第一張。換句話說，訪客幾乎不會等輪播圖轉到第二張、第三張，只跟第一眼看到的那張互動，後面精心排的其他訊息，幾乎等於沒被看見過。
Nielsen Norman Group 也記錄過一個具體案例，Siemens 官網首頁用了自動輪播，結果使用者反映，常常一則訊息還沒讀完，畫面就自己切換到下一張，訪客得回頭切換才能把剛才那則沒讀完的內容看完，體驗反而變差。這揭穿了「輪播圖等於雨露均沾」的迷思，表面上每個部門、每個活動都露出了，實際上首屏的注意力被強制分散，原本該聚焦的主訊息反而被稀釋掉，訪客連第一則都不一定完整看完，更別提第二則以後。同樣「想面面俱到反而失焦」的邏輯，換到首屏的行動呼籲按鈕上，一樣成立。
選項一多，訪客反而更難按下那顆按鈕
第二個常見誤區，是在首屏一次擺出好幾個行動呼籲（CTA），「立即諮詢」「免費試用」「了解更多」「加入會員」全部並排，想著訪客總有一個會點。選擇心理學的經典研究卻指向相反的結果。心理學者 Iyengar 與 Lepper 在 2000 年做過一個知名的果醬實驗，在超市擺出 24 款果醬試吃攤，吸引很多人停下來，但最後真正掏錢購買的比例只有約 3%；換成只擺 6 款果醬，停下來試吃的人少了，實際購買的比例卻拉高到約 30%。選項變多讓人更想比較、更難下決定，最後反而什麼都不選。
這個現象套進首屏的情境完全講得通。訪客站在好幾顆份量差不多的按鈕前面，大腦得先多做一層「哪個對我比較划算」的權衡，猶豫的時間一拉長，注意力就轉移到別的地方，最後哪一顆都沒按下去。首屏的行動呼籲不是擺得越多越保險，而是越聚焦、越清楚只有一個選項，訪客才越容易做出決定。
首屏真正該放的，只有一句定位加一個主要行動
前面兩節破除的其實是同一件事，首屏想討好所有人，反而誰都沒討好到。把輪播圖跟多顆 CTA 拿掉之後，首屏真正該留下的東西其實很單純，讓訪客在還沒捲動之前，先看懂兩件事，你是做什麼的，以及他接下來該做什麼。這兩件事分別對應訪客心裡冒出的兩個疑問，值得各自拆開來看。
一句話定位，鎖定訪客心裡最先浮現的疑問
訪客打開一個陌生網站，心裡通常先想確認這是不是他要找的地方，以及這家看起來可不可信。一句話定位，就是用最短的篇幅回答這兩個疑問，它不需要華麗的形容詞，也不必是一句響亮的品牌口號，重點是具體到訪客一讀就知道，這個網站在處理他手上正遇到的哪個問題。空泛的「打造美好生活」讀完等於沒讀，具體到「幫中小型店家架設能線上收款的官網」，訪客才會知道自己有沒有找對地方。
一個主要行動，不代表整個畫面只能有一顆按鈕
「單一主要行動」常被誤解成整個首屏只能放一顆按鈕，其實重點從來不是數量，而是主從關係夠不夠清楚。首屏可以同時存在好幾個連結，像是「了解更多」「查看案例」這類次要動作，只要它們在視覺份量上明顯讓位給那一個真正想讓訪客做的行動，顏色最搶眼、尺寸最大、擺在最顯眼的位置。次要連結負責補充資訊，主要行動才負責推進訪客往下一步走；兩者搶著要同一份視覺份量，才是問題所在。
首屏的圖片與速度，決定那句話能不能被看見
前面講的定位句跟主要行動，前提都是訪客真的看得到它們。首屏容易被忽略的另一塊，是主視覺（大圖或影片）跟頁面速度。如果首屏的圖片或影片遲遲跑不出來，訪客心裡對「這網站值不值得等」的判斷，答案往往已經成形，不必等到整個畫面跑完。
Google 官方對這塊有明確的技術指標，叫做最大內容繪製（Largest Contentful Paint，簡稱 LCP），衡量的正是首屏可視範圍內最大元素（通常就是主視覺大圖）跑出來要花多久時間；Google 建議這個時間落在 2.5 秒以內。留意這裡的分寸，圖片的角色是強化前面那句定位，不是取代它，就算圖片還沒完全跑出來，定位句跟主要行動的文字也該優先顯示，讓訪客先讀懂你是誰，再慢慢等圖片跑完。
如果你自己不寫程式，不用記得 LCP 的技術細節，但可以帶著這個門檻去跟設計或工程溝通，明確告訴對方首屏這塊主視覺要在 2.5 秒內跑出來，而不是含糊地說網站不要太慢，有了具體數字，對方才知道該優化到什麼程度才算過關。而這個門檻，在螢幕更小的手機上要求得更緊，因為能拿來裝下這些內容的空間本來就更少。
手機上的首屏，能放的東西比你以為的更少
手機螢幕天生比桌機窄，同樣一句定位加一個主要行動，在手機上能露出的範圍比想像中更少，導覽列、主視覺圖片、標題副標，只要任何一項占的高度多一點，原本該在首屏出現的主要行動，就可能被擠到訪客得先滑一下才看得到的位置。這代表手機版的首屏，排序要比桌機版更早交代清楚誰是誰、該按哪裡，不能靠「反正往下滑就看得到」當藉口。
不過內容變少，不代表可以直接刪減。Google 官方對行動版索引的說明明確要求，行動版網站的核心內容要跟桌面版對等，可以用手風琴選單、分頁籤這類呈現方式把次要內容收起來，但不能因為螢幕變小就把內容真的拿掉。換句話說，手機首屏要處理的不是刪什麼，而是誰先誰後，把訪客最需要先看到的定位句跟主要行動排到最前面，其餘內容不是消失，只是往後排。
首屏這塊版位的價值，從來不是看塞了多少東西進去，而是看訪客在還沒滑動的那零點幾秒裡，有沒有看懂你是誰、以及他接下來該做什麼。下次想在首屏多加一樣東西之前，不妨先問自己這一題，這樣東西，會讓那零點幾秒更清楚，還是更模糊。