設計創意 · Web Design Guidelines
幫網頁做一次介面體檢
把你的網頁對照國際介面準則，一條一條指出哪裡會卡到客人。
網站在你電腦上看起來很正常，客人用手機就是點不到按鈕、字太淡看不清、表單填到一半跳掉。你也不知道要問工程師什麼，只能說「怪怪的」。
這是什麼
這個技能會把你的網站或活動頁，拿去跟一份持續更新的國際網頁介面準則逐條對照，然後告訴你哪一段出問題、客人會遇到什麼狀況、該怎麼改。它看的不是好不好看，是好不好用：手機點不點得到、字看不看得清、表單填一半會不會消失。上線前跑一次，交件前也可以自己先驗收一輪。
- 用手機尺寸檢查按鈕夠不夠大、間距夠不夠，避免客人手指一滑就點錯
- 檢查文字跟背景的對比，確認年紀大一點的客人也看得清楚
- 檢查表單好不好填：會不會跳出正確鍵盤、送出有沒有回應、錯誤訊息講不講人話
- 抓出載入時畫面亂跳、圖片被壓變形、捲動卡卡的這些惱人小毛病
- 確認用鍵盤或輔助工具也操作得動，符合基本的無障礙要求
- 把問題整理成一張清單，標出在哪一段、為什麼要改、改成什麼樣
什麼時候用得上
交件前先自己驗收一輪
客戶下週一驗收，你週五晚上把首頁跟聯絡表單交給它掃一次，回來十二項問題：手機上主選單按鈕高度不夠、頁尾電話是淺灰字幾乎看不到、表單送出後三秒鐘畫面沒有任何反應。週末先改掉最嚴重的五項，週一客戶問「手機上會不會很難按」，你有答案，不是被現場問倒。
活動頁上線前最後檢查
檔期活動頁明天早上十點開賣，設計稿看起來很漂亮，但沒人真的用手機從頭滑到底過。跑一次檢查，發現購買按鈕在 iPhone 上要滑兩下才看得到、優惠倒數的數字會把下方版面往下推。這種問題開賣後才發現，等於整個上午的廣告費都在賠。
舊網站客人一直說難用
網站是三年前找人做的，最近常收到客人回訊說「你們網頁我用不太起來」，但講不出哪裡。把幾個主要頁面交給它看過，才知道問題集中在表單：電話欄位跳出英文鍵盤、必填欄位沒標記、送錯只回一行英文提示。這三項改掉，客人至少不會再卡在同一個地方。
怎麼用
- 01
先講清楚要檢查哪幾頁
開新對話直接說「幫我檢查官網首頁跟聯絡表單」，把網址或檔案給它。一次挑三到五頁最重要的就好：首頁、主打商品頁、結帳或表單頁。它會先去抓最新版本的介面準則，再一頁一頁對照，不是憑印象講，所以每次用到的標準都是當下最新那一版。
- 02
說明你的客人怎麼看網站
告訴它客人的樣子：幾成用手機、從哪裡連過來、年齡層大概多少。像是七成從 IG 點進來、四十歲以上居多，它就會把字級、對比、按鈕大小的標準抓緊一點。如果客人常常是從蝦皮或 LINE 內建的瀏覽器進來，行為跟一般瀏覽器不太一樣，記得一併講。
- 03
拿到清單先分輕重緩急
回來的清單通常有二三十項，不用全部照做。先問它哪幾項會直接擋住客人下單或送出表單，那幾項今天就改；純粹是排版細節的，排進下一次改版。清單上每一項都會寫位置跟建議做法，你可以整段複製給工程師，不用自己再轉述一遍。
- 04
改完請它再跑一次
改完叫它跑一次同樣的頁面，比對前後差多少，第二次通常比第一次快很多。建議養成兩個習慣：每次改版後跑一次、每一季固定跑一次。因為準則本身會更新，半年前還沒問題的寫法，現在可能已經被列為該調整的項目了。
實際對話長這樣
幫我檢查官網的三個頁面：首頁、精油商品頁、聯絡我們的表單頁。我的客人有七成用手機從 IG 連過來，年齡三十五到五十五歲，不少人不太會放大縮小。請對照最新的網頁介面準則逐條檢查，重點看：手機上按鈕會不會太小或太靠近、文字跟背景對比夠不夠、表單填一半跳走資料會不會不見、送出後有沒有明確回饋。檢查完照嚴重程度排序，寫成一張清單：問題在哪一段、客人會遇到什麼狀況、建議怎麼改。不用技術術語，給我看得懂的白話版本，我要拿去跟工程師討論。
你會拿到一張分級清單。最嚴重的三項：手機上「加入購物車」按鈕高度不足，手指容易點到旁邊的分享；表單的電話欄位跳出的是英文鍵盤；淺灰色說明文字對比太低，中高齡客人看不清楚。中等的五項多半是圖片載入時把版面撐開造成畫面亂跳、送出後沒有等待提示。每一項都會標明在哪個區塊、為什麼是問題、改成什麼樣子，可以整段轉給工程師。
幾個實用技巧
- 準則會持續更新，重要頁面建議每一季跑一次，不要只在改版時才想到檢查。
- 它看的是好不好用，不是好不好看。想調整風格美感，要另外找設計討論。
- 一次可能列出二三十項，先修會擋住客人下單的那幾項，其他排進下次改版就好。
- 蝦皮、LINE 內建的瀏覽器行為跟一般瀏覽器不同，提問時記得特別註明。