ShipPress

使用教學

在電腦、筆電、平板和手機上檢查你的網站

大多數訪客是用手機看你的網站，而不是你製作網站時用的大螢幕。ShipPress 的預覽只要點一下，就能以四種寬度顯示你的網站。在這篇教學中，我會用四種尺寸檢查 Pier 7 Coffee，找出手機選單的一個小問題，並請 AI 修正。

  1. 在預覽列找到四種尺寸

    打開你的網站。在預覽的右上角有四個按鈕：Computer、Laptop、Tablet 和 Phone。把滑鼠移到按鈕上就能看到它的寬度：

    • Computer：1920 px，大型桌面螢幕。
    • Laptop：1280 px。
    • Tablet：1024 px。
    • Phone：480 px。

    頁面會以真實寬度繪製。如果視窗放不下，ShipPress 會自動縮小以符合視窗，讓你隨時都能看到完整的寬度。ShipPress 也會記住你為每個網站選擇的尺寸。

    ShipPress 視窗，預覽右上角的 Computer、Laptop、Tablet 和 Phone 按鈕以醒目方式標示。
    四種尺寸位於預覽的右上角。目前選的是 Computer。

  2. Laptop：桌面訪客最常見的尺寸

    點選 Laptop。很多人會用 13 或 14 吋的筆電瀏覽網頁，所以這是很適合日常檢查的尺寸。看看最上方的選單和大標題：在 Pier 7 Coffee 上，版面配置維持不變，只是稍微緊湊一點，選單仍然能放在同一行。

    Pier 7 Coffee 首頁的 Laptop 尺寸（1280 px）。
    Laptop（1280 px）：版面相同，只是稍微緊湊一點。

  3. Tablet：檢查多欄排列和寬幅圖片

    點選 Tablet。三欄或四欄並排的區塊、很長的選單和寬幅照片，在這裡就開始顯得擁擠了。請把整個頁面往下捲動檢查，不要只看最上面：越下面的區塊，越容易最先出現文字被擠壓或圖片被裁切的情況。

    Pier 7 Coffee 首頁的 Tablet 尺寸（1024 px）。
    Tablet（1024 px）：選單仍然放得下，照片被裁得更緊。

  4. Phone：打開選單，逐頁檢查

    點選 Phone。現在網站呈現的樣子，就是大多數訪客會看到的樣子。在 Pier 7 Coffee 上，頂端選單會變成一個 MENU 按鈕，照片和標題則會上下堆疊。

    不要只看首頁。使用預覽左上角的頁面選單（它會顯示你目前所在的頁面，例如 Home page）切換到其他頁面，並在每一頁：

    • 打開選單，再把它關起來，
    • 捲動到最底部，
    • 確認價格、表格和按鈕容易閱讀，也方便點選。
    Pier 7 Coffee 首頁的 Phone 尺寸（480 px），頂端有一個 MENU 按鈕。
    Phone（480 px）：選單變成 MENU 按鈕，內容改為上下堆疊。
    Phone 尺寸的 Bar Menu 頁面：飲品名稱、價格和說明排成一欄，方便閱讀。
    手機上的 Bar Menu 頁面：價目表排成一欄，閱讀起來沒問題。

  5. 找出看起來不對勁的地方

    在大螢幕上，小問題很容易被忽略。我在 Phone 尺寸下打開選單時，右上角出現了兩個關閉按鈕：一個大的 ×，以及一個小小的多餘的 ×。雖然還是能用，但看起來很不專業，而且只有在手機上才看得到。

    手機選單修正前後對照：左邊右上角有兩個關閉按鈕，右邊只剩一個。
    左：有兩個關閉按鈕的手機選單。右：經過下一步修正後的樣子。

  6. 告訴 AI 你看到什麼，以及發生在哪個尺寸

    在聊天室用簡單的話描述問題，並說明是在哪個尺寸發生的。也要說清楚哪些地方要維持原樣。我是這樣寫的：

    「在手機上，打開選單時右上角有兩個關閉（x）按鈕。請只保留一個，並且不要動電腦版的版面。」

    Worker 工作時，預覽會顯示 The AI is changing your site…。你可以繼續輸入，新的訊息會排在後面處理。一兩分鐘後，Worker 說明了它找到的原因（佈景主題在選單原本的圖示上又多畫了一個 ×），移除了多餘的那個，並表示這項變更只會影響打開後的手機選單。

    ShipPress 聊天室，顯示關於兩個關閉按鈕的請求，此時 AI 正在工作，預覽停在 Phone 尺寸。
    聊天室中的請求。AI 工作時，預覽仍停在 Phone。
    Worker 的回覆：它移除了多餘的關閉按鈕，並且只更動了打開後的手機選單的樣式。
    Worker 的回覆，以及接下來可以做什麼的建議。

  7. 先在 Phone 上再檢查一次，然後再看 Computer

    AI 不一定能自己看到畫面，所以請你親自確認結果。維持在 Phone，再打開一次選單：現在只剩一個關閉按鈕了（就是上面修正前後對照圖的右邊）。接著點選 Computer，確認大螢幕的樣子沒有變。如果你不喜歡某項變更，可以點選上方的 History，回到變更之前的版本。

    修正後回到 Computer 尺寸的 Bar Menu 頁面，看起來和之前一樣。
    回到 Computer：桌面版的版面沒有改變。

  8. 小提醒

    • 在 Go live 之前，請用 Phone 檢查每一頁；在做了大幅度的變更（例如換新設計）之後，也要再檢查一次。
    • 在訊息中指明尺寸（「在手機上」、「在平板上」），這樣 AI 就只會更動那個尺寸。
    • 想在真正的瀏覽器視窗中試用網站，請使用預覽右上角的 Open in browser。想在你自己的手機上查看，請使用 Share to phone。
    • 如果某處在 Phone 上沒問題，但在 Tablet 上看起來怪怪的，請直接告訴 AI：介於兩者之間的尺寸，正是設計最常出錯的地方。