ABCD
Process / 製作過程
一份設計，到完成 RWD 的正式網頁
在網頁工程實作時，直接完成不同螢幕的版面與互動。
Step 01
每個頁面只需要一個主要尺寸
設計師提供各頁的主要尺寸設計稿即可，不必另外準備平板與手機版。門面會先確認內容順序、圖片焦點、導覽方式與特殊操作，作為網頁實作依據。
每頁一個主要尺寸
不需平板版
不需手機版
設計師提供各頁的主要尺寸設計稿
每頁一個主要尺寸不需另畫平板與手機版
主標閱讀順序
照片主角
主要諮詢入口
優先保留閱讀順序・照片焦點・主要操作
依尺寸調整欄位比例・文字換行・導覽形式
Step 02
直接在網頁裡完成 RWD，不另外補畫設計稿
門面會在實作各頁時，依不同螢幕寬度調整欄位、內容順序、字級、留白、圖片比例、導覽列與觸控操作，讓同一套網頁在桌機、平板與手機上自然使用。
正式網頁實作
各尺寸版面
導覽與觸控
完成位置可操作的網頁，不需設計圖檔
網頁工程實作設計稿 → RWD 網頁
ABCD
ABCD
A 品牌主標B 圖片C 內容D 操作
Step 03
RWD 先由門面完成，特殊位置再請設計師確認
門面會先在網頁裡完成桌機、平板與手機版。若特定區塊需要不同順序、圖片比例或特殊構圖，設計師只需針對實際網頁標註，門面再於工程端局部調整並完成檢查；不必另外補畫整套手機版設計稿。
先完成 RWD 網頁
只標註特殊位置
工程端局部細修
設計師只需確認少數特殊區塊
特殊位置局部細修RWD 網頁 → 設計師標註 → 工程調整
主視覺圖片內容操作
✓ 由門面先完成
主視覺
圖片內容希望維持左右並排
操作↳ 只指出想改的位置
主視覺
圖片內容
操作✓ 完成後一起檢查
RWD 網頁先完成＋特殊位置再標註不必另畫整套手機版
Before we start
開始前常見問題
真的不需要手機版設計稿嗎？
通常不需要。每個頁面提供一個主要尺寸即可；若手機版有完全不同的操作、內容順序或品牌構圖，提供簡單標註會更準確。
會檢查哪些裝置尺寸？
會依專案約定檢查常見桌機、平板與手機寬度；若有指定裝置或瀏覽器，可以在開始前納入範圍。
可以只協助既有網站補 RWD 嗎？
可以，但需要先檢查既有程式結構與樣式，確認能局部調整或需要重新整理部分版面。