Mockdown 線上將軟體介面、網頁或應用程式擷圖轉為 Mockup 視覺稿

如果從事網頁設計相關工作應該很常聽到一個名詞「Mockup」，中文稱為模型或原型，若翻譯成「視覺稿」可能比較容易理解，Mockup 通常在「Wireframe」（線框圖）之後，為了讓整體畫面更貼近最終成果，會將一開始的草稿線條圖加入更多視覺元素，例如將排版、圖形和配色呈現出來，也就能夠得出最後設計稿，而在我向設計師朋友詢問後得知 Mockup 通常是透過 Photoshop、Sketch 或 Adobe XD 等軟體繪製。

本文要介紹的「Mockdown」和前面提到的 Mockups 有關，這是一個方便的線上工具，可以將一般軟體畫面、網頁擷圖或手機應用程式介面線上自動轉成 Mockups 圖片。

透過 Mockdown 會將原有可供辨識、閱讀的文字圖片內容轉為色塊，如果要拿來做範例、投影片或操作流程介紹會更適合，使用者無需再手動處理看得到的資訊（可能不一定適合出現在簡報中），線上即可快速轉換處理。根據網站說明，Mockdown 利用人工智慧技術來處理畫面，機器會自動判斷每個區塊，不用再使用 Sketch 或 Photoshop。

網站名稱：Mockdown
網站鏈結：https://epic.ai/mockdown/

使用教學

STEP 1

開啟 Mockdown 網站後，透過中間藍色框將使用者介面（UI）圖片上傳即可，這項服務支援一般桌面軟體、網頁畫面或應用程式擷圖，要注意的是亮色文字可能無法正確轉換。

STEP 2

上傳後需要一段等待時間，Mockdown 會開始分析、判斷圖片中的每個區塊，再將它們轉換為色塊，自動繪製出使用者需要的 Mockups。

STEP 3

下面兩張圖分別是免費資源網路社群網頁擷圖、以及透過 Mockdown 轉換後的 Mockup 視覺稿，可以看到即使是中文內容也可以有很好的轉換效果，轉換後直接儲存圖片即可使用。