iWidget 預覽圖：三種做法各兩格
樣本：選擇 iWidget 對話框「BM-Case」裡的兩個（目前都顯示「無預覽圖」）。截圖取自 mlab 前台 EM Series 系列頁（正式站 2026-09-11 快照），2026-10-16。
方案一 結構示意圖（HTML 區塊模擬）
讀 iWidget 的 Elementor 結構，用方塊畫出版型：斜線框＝圖片、粗條＝標題、細線＝內文、外框＝按鈕。藍色是 iValue 欄位，會依各分類／商品換內容。這兩格是照真實結構手排的樣式稿；實作時由程式自動產生。
商業電腦 - Case 系列導覽列
Business Model 商業電腦 - Case 系列導覽列
圖片
Compare
商業電腦 - 系列資訊
Business Model 商業電腦 - 系列資訊
iValue 欄位（內容會換）固定內容
好處
- 138 個全部能自動產生，包含沒被任何頁面用到的
- 結構改了，圖自動跟著變，不會過期
- 不用存圖檔，也不用媒體庫
限制
- 看不出顏色、字型、實際比例
- 版型相近的 iWidget 只能靠標題分辨
- 要替常用的 Elementor 元件各寫一種畫法，冷門元件只能畫成通用方塊
方案二 實機截圖
在前台找一頁有用到這個 iWidget 的頁面，用無頭瀏覽器只截那一塊，存進現有的「iWidget 示意圖」欄位。對話框本身不用改。
商業電腦 - Case 系列導覽列
Business Model 商業電腦 - Case 系列導覽列
商業電腦 - 系列資訊
Business Model 商業電腦 - 系列資訊
好處
- 最直觀，看到的就是前台的樣子
- 沿用現有欄位，選擇對話框不用改
- 可以批次跑，也能隨時重拍
限制
- 得有頁面實際用到才拍得到：138 個有 132 個被樣板用到，但還要有分類或商品套用那份樣板
- 內容是某一個系列的（這裡是 EM），不是通用的樣子
- iWidget 改版後圖會過期，要重拍
- 導覽列這種又寬又扁的元件，縮成卡片幾乎看不清（左格）
方案三 標註截圖（我的提案）
實機截圖再疊上編號框，標出「這一格是哪個欄位」，卡片下方列出欄位名稱。編號框是即時疊上去的，不燒進圖裡，欄位改名時會跟著變。
商業電腦 - Case 系列導覽列
Business Model 商業電腦 - Case 系列導覽列
1
2
3
4
商業電腦 - 系列資訊
Business Model 商業電腦 - 系列資訊
- 1 商用系列主圖
- 2 商用系列名稱＋連結
- 3 商用系列副標
- 4 商用系列說明
好處
- 還沒放進樣板，就知道要填哪些值、各填在哪裡
- 一眼看出哪些 iWidget 內容寫死、不能填（左格）
- 欄位位置是在擷取時從畫面量出來的，不用人工標
限制
- 截圖的限制全部都有
- 要另存一份「欄位位置」資料，對話框要改成能疊框
- 卡片小，欄位多的 iWidget（例如有 6 個值的圖文區塊）框會擠在一起，可能要滑過或點開才看得清
比較
| 一、結構示意 | 二、實機截圖 | 三、標註截圖 | |
|---|---|---|---|
| 涵蓋 | 全部 138 個 | 有頁面用到的才有 | 同二 |
| 會不會過期 | 不會 | 改版後要重拍 | 同二 |
| 看得出實際樣子 | 只看得出版型 | 看得出 | 看得出，另外標出欄位 |
| 對話框要改嗎 | 要（改成畫示意圖） | 不用（沿用示意圖欄位） | 要（疊框＋欄位清單） |
| 工作量 | 中 | 中（批次截圖＋上傳） | 最大 |
三案可以疊著用：有截圖時用截圖，沒有時退回結構示意；標註框只在滑過或放大時出現。