在台北，多數人打開你的網站不是坐在辦公桌前，而是在捷運車廂裡、在等紅燈的路口、在騎樓下躲雨的那三分鐘。這種情境跟桌機完全不同：訊號時好時壞、一隻手還要抓著扶手、眼睛得分神看站名到了沒。台北手機網站設計真正的難題，往往不在畫面好不好看，而在於當使用者只有很短的時間、很不穩定的連線、只有一隻空著的手時，你的頁面還能不能讓他把想做的事做完。這篇不談圖片壓縮與快取設定那類效能技術，而是談情境如何反過來決定介面該怎麼取捨。
先把情境定義清楚，再談介面
介面決策沒有標準答案，只有「在什麼情況下」的答案。同一個版面放在辦公室的桌機螢幕上很合理，放到通勤族手裡就可能完全不成立。所以動手改版之前，值得先把你的訪客最常出現的情境寫下來：他們大多在什麼時段、什麼地點、用什麼姿勢打開這一頁。
台北的移動情境大致有幾種典型樣貌：在捷運上滑手機、在公車上站著、在路口短暫停下、在餐廳門口排隊、在會議之間的空檔查資料。這些情境的共同點是：時間被切得很碎、隨時可能被打斷、注意力不是完整的。使用者不是來閱讀的，他是來完成一件很具體的小事，例如確認地址、比較價格區間、留一筆聯絡資料。
把情境寫下來之後，很多設計爭議會自己消失。當你確定訪客平均只會停留很短的時間，首頁該不該放三段自動輪播的形象照，就不再是美感問題，而是他在這段時間裡能不能看到他要的東西。
弱網與地下空間：頁面載不完的時候會發生什麼
台北有大量瀏覽行為發生在地下：捷運車廂與隧道、地下街、大樓的地下停車場、電梯裡。這些地方的連線不是「慢」，而是「斷斷續續」。頁面可能載到一半就停住，接著訊號回來，再載一點，又停住。
問題在於，很多網站在這種狀態下呈現的不是「一半的內容」，而是「完全空白」。常見原因包括：整頁內容都靠瀏覽器端的程式產生，程式檔沒下載完就什麼都畫不出來；文字等待自訂字型載入，字型沒到就整段不顯示；或是頁面最上方壓著一張很大的主視覺，圖沒到就什麼也看不見。
這不是要你放棄視覺，而是要決定「先送出什麼」。最關鍵的文字資訊——你是誰、你賣什麼、地址與電話、價格區間——應該是頁面最先能被看見的那一批內容，而不是等所有資源都到齊之後才一次出現。視覺可以慢慢補上，資訊不能等。
台北手機網站設計的第一屏：只留給最重要的一件事
在時間被切碎的情境裡，第一屏幾乎就是你的全部。使用者滑開頁面、看一眼、做出「要不要繼續」的判斷，這個過程短到你來不及鋪陳。因此第一屏的設計原則很單純：先決定這一頁的單一任務是什麼，然後讓那件事在第一屏裡就能被看到、被做到。
所謂單一任務，是指你希望訪客在這一頁完成的那個動作。可能是撥電話、可能是查看地址、可能是看價目、可能是送出詢問。一頁只服務一個主要任務，其他都是次要。當你把首頁的任務設定為「讓人知道我們在哪、怎麼聯絡」，那麼滿版的形象影片就得讓位；當你把某個服務頁的任務設定為「讓人留下詢問」，那麼落落長的公司沿革就該往後搬。
- 第一屏要能回答：這是什麼、給誰的、下一步按哪裡
- 自動輪播在短停留情境下效果有限，訪客常常還沒看完第一張就離開了
- 把任務放進第一屏，不代表把所有資訊都塞進第一屏，那只會讓畫面更難讀
移動中的單手操作：動作要能被中斷，也要能被收回
站在搖晃的車廂裡，一隻手抓著扶手，另一隻手拿著手機用拇指操作，這是台北通勤族最常見的姿勢。這個姿勢帶來兩個設計後果：第一，需要雙手或需要精準拖曳的互動幾乎不可能完成；第二，誤觸的機率比在桌前高得多。
對應的介面決策是：把主要動作放在拇指容易到達的下半部，把破壞性或不可逆的動作（例如清空、取消訂單、刪除）放遠一點，並且給它一個可以反悔的機會。同樣的道理，多步驟的流程要允許中途離開再回來，而不是一離開就全部重填。
還有一個容易被忽略的細節：捲動中的頁面如果突然跳動，使用者的拇指會點到原本不打算點的東西。版面在內容陸續載入時保持穩定，比任何動畫效果都更能減少挫折。
停留時間很短時，資訊要怎麼排優先序
資訊優先序不是照公司的組織圖排，而是照使用者此刻要做的判斷排。判斷需要什麼，什麼就往前放。
以實體店家為例，行動中的人最常需要判斷的是：這家在哪裡、現在有沒有開、大概什麼價位、要不要先聯絡。以專業服務或 B2B 來說，常見的判斷則是：你們到底做什麼、有沒有做過我這一類的案子、要聯絡誰。品牌故事、團隊介紹、經營理念這些內容不是不重要，而是它們是「已經有興趣之後才會看」的內容，放在需要往下滑很久的地方是合理的。
一個實用的檢查方式是：把手機拿給一位沒看過這個網站的人，請他在很短的時間內回答三個問題——你們做什麼、你們在哪裡、我要怎麼找你們。如果他答不出來，問題通常不在文案寫得不夠美，而在資訊的順序放錯了。
降級設計：頁面要壞得體面，不要整片空白
沒有任何網站能保證使用者永遠在良好的連線下瀏覽。既然斷線與慢速一定會發生，那就把它當成一種預期狀態來設計，而不是意外。這就是所謂的降級：條件不好的時候，頁面仍然給出一個縮水但可用的版本。
- 文字先出現，圖片後補，圖片區域先保留位置避免版面跳動
- 載入失敗要說出來，並給一個可以重試的入口，而不是永遠轉圈
- 使用者已經填到一半的表單內容，遇到中斷時不要清空
- 最關鍵的聯絡方式（電話、地址）不要藏在需要額外載入的元件裡
- 互動效果失效時，底下的內容仍然要看得到、按得到
把這件事做好之後，台北手機網站設計面對的「使用者為什麼在這一頁流失」問題，通常會少掉一大塊。很多流失不是因為內容不好，而是因為在那個當下，使用者根本沒看到內容。
被打斷之後，要讓人回得來
移動情境的另一個特徵是：瀏覽經常被打斷。到站了、電話來了、有人問路了。使用者關掉頁面，過一段時間才想起來要繼續。能不能回得來，是行動網站被低估的一項設計工作。
做法包括：讓每個重要內容都有自己的網址，方便使用者轉傳給自己或同事；避免用彈出視窗擋住剛進站的人，因為在小螢幕上關掉彈窗本身就是一道門檻；表單分段並保留已填內容；以及讓搜尋結果直接落到對的頁面，而不是每次都從首頁重新找起。
常見問題
這篇談的取捨，跟一般說的「網站要加快速度」有什麼不同？
加快速度處理的是資源怎麼傳輸得更有效率，這篇處理的是資源到不齊的時候畫面該長什麼樣、資訊該先給哪一個。兩件事互補：速度做得再好，也不可能讓隧道裡的訊號變穩定，所以介面本身要能承受不穩定。
第一屏只放一件事，其他內容不就沒人看了？
不會。第一屏的任務是讓有需求的人留下來，留下來的人自然會往下滑。真正會讓內容沒人看的，是把所有東西平鋪在同一個高度，讓訪客在第一眼判斷不出重點而直接離開。
我們的客戶年紀偏長，這些做法還適用嗎？
更適用。年長使用者對誤觸與流程中斷的容忍度更低，也更依賴清楚的文字說明與明確的聯絡方式。差別在於文字的清楚程度與動作的可反悔性要再加強，而不是回頭去堆更多視覺效果。
做完這些調整，排名會變好嗎？
沒有人應該向你保證排名。行動裝置的瀏覽體驗會影響使用者是否留下、是否完成動作，這些訊號長期下來對搜尋表現有幫助，但影響排名的因素很多，成效通常需要數個月才看得出趨勢，也不該用單一改動去歸因。
如果你正在評估自家網站在移動情境下的表現，可以先做一件成本很低的事：挑一段真實的通勤路線，拿自己的手機打開網站，記下每一個「等太久」「看不到」「按不到」的瞬間。這份清單通常比任何檢測報告都更貼近真實問題。
創昇SEO提供免費的網站健檢，也提供全台免費到府解說。如果你手上已經有一份自己記下的問題清單，我們可以一起看看哪些屬於情境與介面的取捨、哪些屬於技術面的調整，再決定要從哪裡開始。