Copyright: filborg / 123RF Stock Photo

如果從事網頁設計相關工作應該很常聽到一個名詞「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 視覺稿,可以看到即使是中文內容也可以有很好的轉換效果,轉換後直接儲存圖片即可使用。

值得一試的三個理由:

  1. 可將軟體介面、網頁或應用程式擷圖轉為 Mockups
  2. 透過 AI 自動處理使用者上傳的圖片
  3. 操作簡單,無需額外下載或開啟繪圖軟體