先打個預防針💉

在不同公司，前端工程師的職責範圍可能會有所不同。有些公司會配置 UI/UX設計師、視覺設計師 或甚至由 創意工程師（Creative Engineer） 來負責視覺與使用者體驗的規劃，但有些公司在人力規劃上未必包含這些職位，因此部份設計相關工作會落到前端工程師身上。
這篇文章將以 我在職場實際遇到的狀況 為基礎，分享當 需求來了卻沒有示意圖 該怎麼處理。請不要過度劃分哪些工作一定是前端或設計的範疇，每間公司的分工與工作流程都不盡相同，一起保持開放的心態來成長，學習更多事物吧！✨

當 PM 丟需求過來，卻沒示意圖時，前端該怎麼辦？

最理想的情況下，公司會有 UI/UX設計師 來負責線框稿（Wireframe）與視覺稿（Mockup），前端工程師只需依照設計稿進行畫面切版與功能開發，當然切版有的團隊是由網頁設計師來負責。
但像我們公司剛好沒有這兩個職位，因此從設計到切版全都由前端工程師一手包辦。
乍看之下，好像工作範圍變多了，但從另一個角度想能在專案中接觸設計思維與頁面架構，其實是寶貴的實務經驗。如果能接手的工作越多，就擁有更多做中學，在職場中「帶薪成長」的好機會，累積跨領域的實戰能力，這些都是專案執行上不可或缺的技能💪。

回到實際的情境舉例———
當 PM 只提供需求，但沒有示意圖時，該怎麼辦？

以第一篇提到的情境來說，PM 只告訴我們：

• 要新增一頁註冊畫面
• 配色沿用目前網站風格
• 欄位還沒確認

這樣資訊真的太少了，沒辦法直接動工！適當的反問再得到答案是有必要的。
若直接動工很可能後續造成大量Task需要處理，影響後續新專案的開發時程。
這時候 適當的反問，才能讓需求更明確。

與 PM、客戶溝通，釐清需求

(與PM討論)
PM：🙍‍♀️、我：🙍‍♂️
🙍‍♀️：我這邊很忙，直接拉你進客戶群做對接哦，感謝。
🙍‍♂️：……好吧（直接跟客戶確認吧💪）

(客戶群組裡)
客戶：🧙‍♂️ 、我：🙍‍♂️
🙍‍♂️：請問您們會員註冊需要哪些欄位呢？登入頁有需要呈現什麼資訊嗎？
🧙‍♂️：欄位……登入要帳號密碼我記不起來耶，我們很多用戶都有LINE，我看有些網站有直接LINE登入這種功能，我們能不能也這樣做？
🙍‍♂️：（這…原來需求根本不是一般填寫表單的註冊登入！）

好了結果問下來，客戶實際需求是這樣：

有些客戶會直接傳他們參考時看到的網站連結，用這種方式來說明他們想要的需求。但這些資訊通常只是一個概念，可能沒有完整的規格或流程，所以我們需要進一步確認細節，避免單純「照做」而忽略客戶網站真正的功能需求。
其實在 UI/UX 設計的流程中，也會用「草圖（Sketch）」來快速發想畫面概念。草圖通常以手繪或簡單線條呈現，重點在於表達整體的畫面概念，沒有明確的細節。而「線框稿（Wireframe）」則是更進一步的表現方式，除了畫面結構外，還會標示按鈕、文字區塊等基本元件，同樣以簡單的線條與區塊呈現，配色也多為灰階，這樣的呈現方式，有助於團隊在初期就建立對設計方向的大致共識。
與客戶核對的過程中，可以透過線框稿工具來繪製出畫面的 Wireframe，確保我們的理解與客戶的預期一致，也可以快速帶客戶進入狀況，了解整個功能畫面。

上面情境對話與客戶討論完後，註冊登入頁面的線框稿範例：

小遊戲：來挑戰你的 UI 直覺！

看完一整篇文章也辛苦啦！可以來玩個 UI 小遊戲輕鬆一下 🎮。
下一章節會正式進入 UI/UX 的分享，這個小遊戲可以幫助大家 訓練 UI 設計的直覺，挑戰比對不同設計細節，挑選哪一種 UI 呈現比較好：前往玩遊戲囉！。

結語

當需求來了卻沒有示意圖時，不要慌張！
1️⃣ 溝通確認、釐清需求 —— 透過 適當的反問，確認客戶真正的需求，避免後續大改。
2️⃣ 製作 Wireframe —— 用 簡單的線框稿 讓畫面概念具象化。

參考資料與延伸閱讀

⑴ 線框稿工具來源：wireframe.cc
⑵ 小遊戲來源：Can't Unsee