使用者介面設計課程講義

低保真 Wireframe：
先讓畫面「長骨架」

什麼是 Wireframe？Wireframe（線框稿）是只畫版面「骨架」的低保真設計稿——內容放在哪裡、區塊多大、彼此的相對關係，先不管顏色、字體、真實圖片，用最簡單的線條跟色塊把畫面結構表示出來。

為什麼要做？如果一開始就直接做精緻的視覺稿，之後要調整版面結構（例如按鈕位置、資訊排序），顏色、字體、圖片就得跟著重做一次，非常浪費時間。Wireframe 讓你在花時間做視覺設計之前，先跟自己、隊友、老師確認「這樣排對不對」，改起來又快又不心疼。

怎麼做？先想清楚這個畫面要完成什麼任務、有哪些必要資訊，再由上到下、由重要到次要排出區塊的相對位置與大小；圖片位置一律用灰色方框代表，文字使用真實文字，還不用選色。

重點是什麼？低保真 wireframe 有幾個共同規則：整份稿子只用灰階，不上任何品牌色；只用一種字體，最多 3～4 種字級做出層級；圖片一律灰色方框代表；畫布比例要跟實際裝置一致（手機稿常用 375×812 或 9:19），才不會做出來之後版面全部跑掉。

畫面 01．首頁 Home

首頁是 UI Flow 的起點，也是使用者最常回來的畫面，所以要同時做到「找得到東西」跟「找得到刊登入口」。上半部是搜尋跟分類，中間是物品列表，右下角的圓形「＋」是整個「刊登物品」任務的入口——這一顆按鈕接下來會連到畫面 02。

畫面 02．刊登物品｜上傳照片

點了首頁的「＋」之後，第一步永遠是「先讓使用者看到自己還要走幾步」——所以標題列旁邊放了「STEP 1/3」徽章。主要內容是一個 3×2 的照片格，前兩格已經填入代表「已上傳」，其餘是虛線的空格，暗示還可以繼續加。

畫面 03．刊登物品｜填寫成色與描述

這一頁是整個流程裡輸入欄位最多的地方：成色、分類兩個下拉選單，加一個多行描述欄。描述欄位是這一關的重點——等一下到 Prototype 單元，點下面的描述欄會真的彈出一個模擬鍵盤覆蓋層，體驗 Figma「Open Overlay」互動是什麼感覺。

畫面 04．刊登物品｜預覽確認

這是 UI Flow 裡唯一的「決策」畫面——使用者看完整理好的預覽卡片，要決定「資訊正確嗎？」。正確就送出，不正確就要能回頭修改，所以這一頁一定要同時放「返回修改」跟「確認上架」兩個按鈕，而不是只有一個「下一步」。

畫面 05．上架成功頁

UI Flow 的終點，也是整個任務唯一的「情緒回饋」畫面——用一個大大的打勾圖示告訴使用者「你做完了」，避免送出之後畫面停在原地、使用者不確定剛剛的操作到底有沒有成功。底下的按鈕把使用者導回首頁，形成一個完整的迴圈。

把 5 個畫面組成完整 UI Flow

UI Flow 把一個任務會經過的「畫面」串成一條線，是線框稿之間的目錄。右邊是剛剛 5 頁線框稿組成的完整 UI Flow——點任何一個節點，畫面會直接捲動回去那一頁的線框稿，方便你來回對照「流程圖上的一個方框」跟「實際畫面長怎樣」的對應關係。

Prototype：讓線框稿真的可以點

在 Figma 的 Prototype 面板裡，幫元件之間拉一條連接線，就是設一個「Interaction（互動）」：從哪個「Hotspot（熱點，也就是可以點擊的區域）」出發、觸發什麼動作（例如 Navigate To 換頁）、要不要用 Open Overlay／Close Overlay 疊出或收起一層額外的畫面（例如虛擬鍵盤）。右邊這個模擬器，用的就是你剛剛畫的同一組線框稿——先點「顯示熱點」看看哪裡可以點，再實際點點看。