談台中RWD網站設計，很多人第一反應是「不就是讓網站在手機上看得下去」。技術上沒錯，但如果只做到看得下去，通常就是白做。台中的產業組成很特別，工具機與精密零組件、自行車與周邊、手搖飲與餐飲連鎖、婚紗與美業、汽車百貨與改裝，這幾類生意的客人在手機上的行為完全不同，有人是在工廠現場臨時查規格，有人是站在路口找最近的門市，有人是在滑社群時看到照片點進來。同一套版型不可能同時服務好這些人。
這篇不是響應式網頁設計的通用教學，而是把台中幾種主要產業的行動使用情境攤開來看，再回頭談這些情境對網站設計的實際要求，以及在地業者最常犯的幾個手機版錯誤。如果你的公司在台中，這些狀況應該都不陌生。
台中RWD網站設計要先問：是誰在用手機找你
做行動版設計之前，值得先花時間想清楚三件事：他在什麼場合打開你的網站、他手上有多少時間、他打開之後最想完成什麼動作。這三個答案不同，版面的優先順序就完全不同。
舉例來說，一位採購在工廠裡拿手機查某個型號的規格，他的場合是吵雜、時間是零碎、想完成的是「確認這個規格對不對，順便存下來給同事看」。這時候網站該做的是讓規格快速呈現、讓頁面能被順利分享。反過來說，一位消費者在下班路上找附近的飲料店，他的場合是移動中、時間更短、想完成的是「找到最近的一家，看營業時間，然後導航或打電話」。這時候該做的是地址、電話與營業時間在最上面就看得到。
把使用情境當成設計的起點，是台中RWD網站設計最該先建立的觀念。斷點怎麼設、字級怎麼調，那些是後面的事；先弄錯了服務對象，技術做得再細也補不回來。
工具機與精密零組件：手機是採購的第一眼
台中有成熟的精密機械與工具機聚落，相關的零組件、加工、模具廠商密集。這個產業的網站訪客多半是工程師與採購，他們的行動使用有兩個明顯特徵：一是查規格，二是分享。查規格的時候，他們要的是型號、尺寸、材質、公差、適用範圍這些硬資訊；分享的時候，他們會把網址傳給同事或主管。
所以這類網站的行動版要處理好兩件事。第一是規格表在小螢幕上的呈現。工業產品的規格表欄位往往很多，直接縮小會看不清楚，硬塞會爆版。可行的做法是讓表格可以獨立左右滑動、或在小螢幕改成一行一個欄位的條列、或把最關鍵的幾項先顯示，其餘收在可展開的區塊。第二是每個型號要有自己的網址，這樣分享出去的連結才會直接落在那個產品，而不是首頁。
另外要注意載入速度。工廠內部的網路品質不一定好，如果產品頁塞滿高解析度的大圖，在現場可能等很久還打不開。圖片壓縮、延後載入非首屏的內容，對這類網站的實際幫助很大。
自行車與周邊：使用情境本身就是行動情境
自行車產業在台中也有深厚的基礎，從整車到零配件、車衣、配件通路都有。這個類別有趣的地方在於，它的消費者本身就是在戶外活動的人。查車型、比規格、找補給站、找維修店、看活動資訊，很多都是在路上用手機完成的。
對應到網站設計，有幾個重點。第一是資訊要能在強光下、單手操作的狀況下閱讀，這代表對比度要夠、點擊區域要夠大、重要資訊不要藏在多層選單裡。第二是車型與規格的比較體驗，很多人會同時看兩三款，如果每次比較都要來回切換頁面，很容易放棄；把關鍵規格整理在同一個區塊，會比精美的動畫實用。
第三是門市與維修據點的資訊。地址要能點擊直接開啟地圖、電話要能直接撥號、營業時間要清楚標示，這些看似基本，但沒做到的網站其實不少。對一個在路上爆胎的人來說，這幾個功能就是全部。
手搖飲與餐飲連鎖：行動流量最集中的一群
台中的餐飲與手搖飲品牌向來活躍，不少連鎖體系是從這裡發跡。這一類的網站訪客幾乎清一色是用手機，而且大多數帶著明確目的：找分店、看菜單、看有沒有新品、找加盟資訊。
菜單是最常出問題的地方。很多品牌把印刷用的菜單檔案直接放上網，結果手機打開要不斷放大縮小，字看不清楚、品項找不到。比較好的做法是把菜單做成網頁內容，分類清楚、價格好讀，需要完整檔案的人再另外提供下載。這麼做還有一個附加好處：菜單的文字能被搜尋引擎讀到，有人搜特定品項時才有機會被找到。
分店資訊則是第二個重點。分店列表要能依區域篩選，每一家都要有地址、電話、營業時間，並且能直接導航。如果有外送平台或線上訂購的連結，也要放在顯眼的位置。至於加盟頁面，通常是用另一群人在看，內容與聯絡方式要獨立規劃，不要跟消費者的頁面混在一起。
婚紗、美業與汽車百貨：預約與撥號才是轉換
婚紗攝影、美髮美甲、醫美、汽車百貨與改裝廠，這幾類的共同點是：成交前幾乎都要先預約或先問。使用者在手機上看完作品、看完服務項目之後，下一步就是聯絡。因此網站的行動版設計必須把聯絡動作放在最容易觸及的位置。
實務上的建議包括：把電話做成可以直接點擊撥號，而不是一張寫著號碼的圖片；預約表單的欄位盡量精簡，在手機上填十幾個欄位會讓人直接放棄；如果主要客群習慣用通訊軟體聯絡，就把那個入口放在明顯處。另外，作品集的圖片要特別注意壓縮，這類網站最容易因為圖片太大而拖慢速度，而使用者往往在圖還沒載完就離開了。
汽車百貨與改裝則多了一個特性：使用者常常是在車上或車廠附近臨時搜尋。他們要的是「你在哪、現在有沒有開、能不能馬上處理」。把這三個答案放在手機版的最上方，效果會比任何形象敘述都直接。
台中業者最常見的幾個行動版問題
看過不少在地企業的網站之後，有幾個問題重複出現的頻率高到可以列成清單。這些不是什麼高深的技術問題，但影響非常直接。
- 把印刷用的型錄或菜單檔案直接上傳，當成產品頁使用，手機上難以閱讀，內容也無法被搜尋
- 圖片沒有壓縮就上傳，單頁載入過重，在行動網路下等待時間明顯拉長
- 規格表或價目表在小螢幕爆版，內容被截斷或需要橫向捲動整個頁面
- 電話號碼做成圖片或純文字，無法點擊撥號，等於多要求使用者做一次手動輸入
- 選單層級太深，重要頁面要點三四次才到得了
- 按鈕與連結太小或靠得太近，手指容易點錯
- 彈出視窗在手機上蓋住整個畫面，關閉按鈕又小到難以按到
- 表單欄位沒有指定輸入類型，輸入電話時跳出的是一般鍵盤而不是數字鍵盤
這些問題有一個共同的成因：網站是以電腦畫面為主來設計與驗收的。做完之後大家在電腦上看一輪、覺得沒問題就上線，從來沒有人真的拿手機從頭到尾操作一次。最有效的檢查方法其實很土法煉鋼：拿自己的手機，用行動網路而不是辦公室的無線網路，把整個網站當成客人走一遍，該打的電話打一次、該填的表單填一次。問題會自己跑出來。
在地搜尋與行動裝置是同一件事的兩面
用手機搜尋的人，很高比例帶著在地意圖：找附近的店、找附近的廠商、找現在能去的地方。這也是為什麼行動體驗與在地曝光其實綁在一起。一個在手機上開很慢、資訊找不到的網站，即使被搜尋到了，使用者也會退回搜尋結果去點下一家。
要讓這件事成立，網站上的基本資訊必須完整且一致：公司或店家的正式名稱、地址、電話、營業時間，這些在網站、地圖服務與各個平台上最好維持同樣的寫法。名稱與地址寫法不一致，會讓系統難以確認這些資料指的是同一家店。
再進一步，可以針對不同區域或服務項目規劃各自的頁面。例如有多個據點的連鎖體系，每個據點都值得有獨立的頁面，寫清楚該據點的服務範圍、交通方式與周邊資訊，而不是全部擠在一張分店列表上。這種頁面在手機上的實用性也比較高，因為使用者搜的往往就是某個特定區域。
最後提醒一點：這些工作的順序是有先後的。先把行動版的可用性修好，再談曝光。如果基礎體驗不及格，把人帶進來只是把問題放大。台中RWD網站設計的價值，說到底就是讓對的人在對的時機用手機找到你之後，能夠順利完成他想做的那一個動作。
常見問題
已經有網站了，需要整個重做才能做好行動版嗎？
不一定。如果現有網站的架構還算清楚，很多問題可以靠調整改善，例如壓縮圖片、修正表格呈現、把電話改成可點擊、簡化選單。但如果網站是多年前以固定寬度做成、後台也難以調整，那麼重做通常比一直修補划算。
做成獨立的手機版網站，和響應式的做法哪個好？
現在多數情況會選擇同一份內容自動適應不同螢幕的做法，因為維護成本低、內容不會分岔。獨立手機版意味著同樣的資訊要維護兩套，久了很容易出現兩邊不一致的狀況。
把型錄或菜單的檔案放上網站，真的不行嗎？
不是不行，而是不該只有檔案。檔案適合給需要完整帶走的人，但主要內容還是要做成網頁，才方便在手機上閱讀，也才有機會被搜尋到。兩者並行是比較實際的做法。
手機版做好之後，搜尋結果就會往前嗎？
行動體驗是被納入評估的因素之一，改善它有幫助，但不是單一決定因素。內容是否回應了使用者的問題、網站結構是否清楚、資料是否一致，都會一起影響。任何對名次作出斬釘截鐵承諾的說法都不宜輕信，因為排序的決定權不在廠商手上。
台中RWD網站設計的成敗，往往不在預算多寡，而在有沒有真的用手機檢視過自己的網站。如果你正在評估要不要重整，建議先別急著找人報價。拿起手機，用行動網路打開自己的網站，假裝你是客人，把最重要的那個動作做一次。走不通的地方，就是要優先處理的地方。把這份清單整理出來再去談，溝通會精準很多，錢也花得比較有方向。