比起線框稿（Wireframe），Mockup 可以更進一步呈現畫面的細節，像是配色、字型與實際圖片等，能更真實模擬設計最終完成的樣貌。這類的視覺稿不僅有助於設計師確認網站的視覺風格，也能讓前端工程師在切版時有更明確的參考依據。
若有興趣了解線框稿，可以閱讀第二篇，本篇將聚焦在 Mockup 的用途與我在職場上的實際製作應用方式。
如果專案本身有企業識別系統（CIS, Corporate Identity System）可以參考，那當然是最理想的依據，可以直接使用其中的色碼。在前幾篇情境舉例也有提到，新頁面的配色會沿用現在的風格。
假如原專案沒有 CIS，就從現有素材取色。在這個階段我們可以先將網站畫面截圖，擷取畫面中的配色，並透過色碼確認實際使用的顏色。
由於後續會使用 Figma 製作 Mockup，所以在操作上可以先在畫布中建立幾個矩形（Rectangle），透過 Fill 裡的 滴管工具（Eyedropper Tool），從截圖中吸取主色調與輔色調。
這樣的方式有助於 Mockup 製作時直接沿用現有配色，維持網站整體的設計風格一致性。完成取色後，建議將色碼整理成專案的調色盤（Color Palette）記錄下來（這邊分享一個好用的調色盤工具👉Figma Color Palette），方便日後所有設計與開發人員沿用。
除此之外，也可以搭配線上取色工具作為輔助，例如非常實用的 Coolors。
最後，我們靠滴管工具完成取色🎨，收集好後的配色結果如下：
主色調是網站中最主要、最具代表性的色彩，也是品牌視覺裡最核心的元素，奠定網站視覺風格與初步觀感。 可以想像成，只要使用者看到這個顏色，就能直覺聯想到你的產品、服務或品牌，進而形成獨特的品牌記憶。
輔色調則是在主色之外，協助提升整體視覺層次感與增強品牌形象的關鍵配色。
它不一定搶眼，卻能巧妙地豐富畫面、強化風格，也常應用在按鈕、標題或互動元件上。
收集完配色的色碼後我們就開始根據線框稿來繪製Mockup吧！
（註冊登入頁面的線框稿範例）
根據線框稿可以看出：
左側區塊說明
左側區塊預計會放上一張圖片。若是輪播圖（Carousel），常見的呈現方式包括：圖片左右有切換箭頭、下方有指示器（Indicators），或是以「兩張圖片其中一張切半」的形式顯示。也有些視覺稿會直接在該區塊標註「Carousel」。
假設線框稿是由其他人員設計，建議這個部份要再次確認，因為圖片的實際呈現方式，會直接影響到 Prototype 的設計與前端開發的實作方式。
上方區塊說明
最上方可以看到線框稿裡有一組導覽列（Navigation Bar），內容包含Logo與四個連結。
右側區塊說明
再來我們看到右側區塊，可以發現內容包含主標題、副標題、按鈕、一段文字內容區塊，以及兩個連結。通常這兩個連結會放置「隱私權政策」或「服務條款」這類資訊。
至於按鈕，在前面有提到客戶希望使用 LINE Login 作為社群註冊方式，因此這裡的按鈕（Button）是用來做 LINE 帳號註冊使用。所有文字部份，可以先詢問客戶是否已有固定文案。若沒有，在視覺稿製作前我們可以先以亂數假文填入設計，再提供給客戶確認大致的畫面呈現。
不過在實務上，有些客戶來自非軟體或設計背景，對於各類元素內該放什麼文字內容，可能完全沒有概念。這邊就看各家公司的做法了，可能要請設計師們動動腦筋、發揮創意，思考並提出合適的文案選項，協助客戶做出決定 💡。
首先我們要先拉出一個框架容器，到下方工具列找到Frame。因為這次是設計 網頁版 的介面，所以尺寸中選擇「 Desktop 」作為畫布大小。
首先點選右側的屬性面板，找到「 Layout grid 」，選擇「 Columns 」並設定為 12 欄， 這樣可以幫助我們設定佈局時，對齊元素、維持整體排版的規則性。
接著使用「 Rectangle 」先大致拉出主要區塊，像是：導覽列（Navigation Bar）、左側圖像區塊與右側文字與按鈕的內容區塊，讓整體版面結構先有個清楚的雛形，再進一步細化內容。
先建立右側區塊的內容，設定好主標題與副標題，元素的位置可以依照我們剛才設計的 Grid System 來對齊，這樣整體排版會更整齊、也更有一致性。
開始製作右側區塊內的所有元素，如果有需要重複使用的區塊，建議可以直接製作成元件（Component），方便每個頁面重複使用統一的元件，如果對 Component 還不太熟悉，可以回到第六篇參考元件（Component） 內容，裡面有分享如何製作。
文字部分可以直接使用工具列上的「 Text 」來新增文字，像主標題、副標題等固定文字，建議如果有確定了，就可以輸入實際要使用的文案，這樣切版人員在開發時也能直接對照製作。
按鈕與內容文字區塊，可以透過工具列的「Rectangle」去製作，再到右側的屬性面板設定像是邊框圓角、填色等細節。
最後，若要製作 LINE 註冊的按鈕，按鈕icon的部份我們可以使用之前提到的套件 Iconify，打開後搜尋「line-social」，就能快速找到 LINE 的 icon 匯入使用，這樣就可以很簡單又方便製作Icon。
製作完成後，如果覺得「 Layout grid 」會干擾查看成品，可以點擊👁icon，把Grid隱藏起來，右側成品如下：
再來我們來製作上方的導覽列（Navigation Bar）。
Logo 圖片的部分：實務上建議可以直接向客戶索取品牌 Logo，如果是自己練習使用、或客戶還沒提供，也推薦一個超方便的Logo線上生成工具 給各位，只要輸入關鍵字與配色，就能自動生成多組 Logo，還可以加上標語，真的非常實用與方便！
導覽列連結的部份：我們一樣是使用工具列裡的「 Text 」來新增每個連結文字。而在最右側的註冊／登入圖示，透過套件 Iconify 搜尋 「user」，選好Icon後匯入使用。最後再搭配 Alignment 工具，快速對齊調整每個連結的位置，讓導覽列（Navigation Bar）元素能夠快速對齊，視覺上也更一致。
整個導覽列（Navigation Bar）製作完成後，也建議直接製作成元件（Component），之後在其他頁面（Frame）就能快速套用，不需要每頁都重拉一遍，而且未來如果 Logo 需要更換、或導航連結順序要調整，只要修改一次主元件（Main Component），所有套用的實例都會自動同步更新，這樣就超省力！
接下來是左側區塊的製作。
背景上色和放上圖片囉~在先前有先用滴管工具取原網站配色，所以一樣使用滴管工具去吸取抓好的配色去做上色即可，這邊是使用Linear做漸層背景。
圖片的部分可以先拉出一個「Rectangle」，再將填色類型改為 Image，這樣就能放入圖片。
最後我們來設定每個區塊裡的元素對齊與自動排版。
點選導覽列（Navigation Bar）、左側區塊與右側區塊中的元素，分別加上約束條件（Constraints），例如設定為 Left、Top 。接著按下快捷鍵 Shift + A ，開啟自動排列（Auto Layout） ，根據需求調整排列方向（Direction），用來設定子圖層的排列方式。
如果希望子圖層寬度能占滿整個父圖層，記得將寬度（Width）設為與父層相同，並選擇填滿容器（Fill container）。這樣當我們將網頁版 Frame 的寬度縮小時，就能簡單模擬不同裝置下的變化，觀察裡面圖層如何隨著寬度變化自動調整。
當然，若要更細緻控制各種裝置的呈現 ❗還是建議針對不同尺寸建立對應的 Frame，會更好設計也更清楚呈現真實畫面。
OK！這樣我們網頁版的註冊頁面 Mockup 就完成啦 🎉
最後別忘了幫建立好的圖層命名與分類，之後回頭維護、查找或交接也會比較方便。
以上就是使用 Figma 製作網頁版「註冊頁面」 Mockup 的流程 🎨！從建立畫面框架容器（Frame）、設定柵格系統（Grid System）、製作導覽列（Navigation Bar）套用元件（Component）到內容區塊，透過這樣的過程分享，能感受到設計與開發之間的默契與關聯。
接下來的章節，我們將正式進入互動原型（Prototype）的製作，讓靜態設計開始模擬使用者操作，也能更直覺理解整個操作流程！Let's go～🚀
⑴ 產生Logo工具來源：brandmark.io
⑵ 使用工具來源：Figma
⑶ 線上取色工具來源：Coolors
⑷ 製作線框稿範例工具來源：wireframe.cc
⑸ Figma 調色盤工具來源：Color Palette
iThome鐵人賽
看影片追技術