超快速互動原型工具分享 - 墨刀 Mocking Bot

Lulu Cheng
tdpm
Published in
4 min readSep 26, 2018

Hi 我是Lulu,目前在接案團隊的角色大概是50%PM、50%UI,戰鬥小隊嘛什麼都有接,APP、web、Dashboard、系統、行銷,在自家工程師推薦後,驚為天人,果然工程師大大推薦準沒錯,發現這個功能強大的原型設計工具,還是中文介面(客戶操作門檻降低了ya),團隊導入墨刀近一個月,取代原本使用的zeplin、invision、balsamiq,用來產出wireframe和prototype。

當一個專案開始後,對於客戶方的溝通會需要出wireframe來輔助溝通畫押,在墨刀中有很多元件和模板可以供繪製wireframe使用,有互動式的下選單、輪播圖、icon、按鈕、文件上傳、對話框、輸入框等,不用自己生,左側欄直覺式的讓你拖曳使用,還有類似sketch symbol的功能,每個頁面會重複出現的元件,像是footer、header等地方,可以在母版統一管理,改母版其他也會跟這自動更新,不用一頁一頁修。右側欄位可以把資訊層級編排明確,主次分類可以自行調整。

元件直接拖曳

墨刀厲害的在於每個元件都可以很簡單的去設定互動效果,像是最基本APP側邊選單滑入等功能,另外還有影格概念的功能。墨刀因為有這些設定互動的功能,也可以用來製作Prototype。

另外設計師也可以使用墨刀,他有sketch的plugin,可以直接把畫好的頁面輸出到墨刀,在標注頁面,像zeplin一樣,可以讓前端開發人員看每個元件的距離顏色等資訊。

墨刀標注功能

頁面圖完成後,跳到編輯工作流區域,在製作時設定好的頁面跳轉,在工作流區可以自動幫你連結好,或是也可以匯入你想要的頁面來繪製flow,也是直覺式的拉一拉就可以完成。

自動導入頁面繪製flow

交付給客戶或開發團隊,發送每個專案的連結,在運行頁面可以直接操作測試,每個人可以在上面直接在畫面上想溝通的地方留言討論。還有一個很方便、我們家工程師最愛的地方是可以將專案整包下載程成html、apk、iOS IPA或png。

墨刀運行功能
墨刀下載導出格式

目前使用上基本都覺得很好用,也節省很多製作時間,但使用中還是有遇到一些希望能優化的地方,在接案團隊的使用上,若要開給客戶查看專案,一定要把客戶加到團隊成員裡才可以在專案裡留下評論,訪客身份無法評論,所以會客戶會看到其他專案(目前的解決方式:把project建立在”個人帳戶“裡,再添加協作者),留言的功能,自己使用上會遇到打字到一半很容易送出,也不能複製別人留言,有時候會有點困擾,也希望能有list看所有留言,不用一頁一頁翻。

若你也是對於墨刀有興趣的朋友,來試試看快速又好用的墨刀~官方有出了一系列的影音教程,或是互動模組功能的教學。也歡迎加入台灣的FB討論社團互相交流學習👩🏻‍💻

--

--