iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 7
2
Modern Web

前端工具百寶箱 - 六角學院系列 第 28

MarkMan - 高效的設計稿標註與測量工具

MarkMan – 馬克鰻是一款方便又高效的標註工具,可以節省設計師在設計稿上添加和修改標註的時間,簡單又易用的介面和工具,很快就能上手,除了設計師可以使用,工程師在自己做一些 Side Project 時也可以用在自己找的版型,讓自己本身也能將頁面版型的間距、色碼、尺寸都快速的標註出來。 馬克鰻是基於 Adobe AIR 平台,可以跨平台使用,減少了在不同平台使用可能會產生的問題。

markman 官網:http://www.getmarkman.com/#/download-modal

安裝

到官網上點選下載,在手動安裝這邊有個下載安裝包。檔案為 air 檔,所以如果電腦中沒有裝過 Adobe AIR 會無法開啟安裝,因此如果沒有安裝過的,請先點 Adobe AIR 運行時,進行下載安裝,裝完以後再裝 MarkMan 就沒有問題囉!

功能

安裝完以後可以看到這個畫面,只要將圖片拖入或是貼上圖片就可以使用了

丟入圖片就可看到這個介面,就可利用下面的工具列

核心功能

主要的功能都可以從下面的工具列來選擇,接下來一個一個介紹。

間距標註

按住 Tab 就會自動偵測距離並表示出來,按一下 Tab + 1 或是 Tab + L 就可以切換直或是橫的偵測

寬高標註

用滑鼠框住要測量寬高的目標,MarkMan 就會自動顯示寬高距離並標註出來

顏色標註

直接拉到要偵測的顏色區域就會自動吸取顏色,並顯示色碼

在顯示的色碼上點一下右鍵,可以直接複製色碼,也可以顯示 10 進制色值,也可以直接改變顏色

轉 10 進制色值標註就會變成 RGB

標註說明

點一下要標註的位置,就會出現輸入框可以輸入文字

變更單位與標注的內容文字大小

在空白處點一下右鍵可以看到下圖的選項,就可以在這邊更改整個標註的單位以及顯示的文字大小,也可以修改標註顏色。

除了以上的基本功能以後,MarkMan 還有一些貼心的功能,例如:它支援 Retina 模式,遇到 @2x 結尾的文件名,會在載入時自動縮小 50% 。除此之外,MarkMan 也支援 PSD 檔,並且會即時同步更新,也就是說你可以一邊更改 PSD 檔案中的內容一邊標註這個文件。MarkMan 免費版大概的功能有以上幾個,在標註設計稿上已經完成了大部分的需求。免費版在輸出後會在輸出的檔案上加上浮水印,如下圖:

如果不想要浮水印可以付費激活,正式版的授權是一年一人使用需要付費 60 元人民幣,購買之後不但沒有浮水印,還有其他更完整的功能可以使用,最吸引人的是可以保存編輯的進度來進行二次編輯,在易用性上會更有彈性更好使用。

小結

免費的體驗版已經提供相當實用及主要的幾個功能,MarkMan 的實用性算是高的,但在界面與顯示上並無統一管理的介面,因此在顯示上會叫不易閱讀,這在叫大型與複雜的設計稿可能會比較不建議使用,但針對工程師想自行找一些圖來做 Side Project 練習就是相當好上手與應用的工具。


上一篇
validate.js - 輕鬆完成表單驗證
下一篇
Firebase Functions - 實現 Serverless (上)
系列文
前端工具百寶箱 - 六角學院30

尚未有邦友留言

立即登入留言