一款原型設計工具“墨刀”的介紹


一、什么是墨刀

墨刀 MockingBot 是北京磨刀刻石科技有限公司旗下的一款在線原型設計與協同工具。

墨刀致力於簡化產品制作和設計流程,采用簡便的拖拽連線操作,作為一款在線原型設計軟件,墨刀支持雲端保存,實時預覽,一鍵分享,及多人協作功能,讓產品團隊快速高效地完成產品原型和交互設計。

使用墨刀,用戶可以快速制作出可直接在手機運行的接近真實 app 交互的高保真原型,使創意得到更直觀的呈現。不管是向客戶收集產品反饋,向投資人進行 demo 展示,或是在團隊內部協作溝通、文件管理,墨刀都可以大幅提升工作效率,打破溝通壁壘,降低項目風險。

(摘自 墨刀官網:https://modao.cc/

二、墨刀能干什么

原型設計

1. 支持HTML、PNG、APK、IPA 多格式離線文件下載,還可以下載多倍率圖片,滿足不同分辨率需求;

2. 支持創建 iPhone/iPad、Android、平板、watches、PC 各平台設備的原型,也可以自定義設備尺寸;

3. 提供 iOS、Android 等平台的常用組件及大量精美圖標,同時還可以自定義自己的個性化組件,方便項目之間自由切換、使用;

4. 通過拖拽創建鏈接及交互動效,提供豐富的頁面切換方式、交互手勢及動畫,簡單操作即可創作;

5. 通過二維碼、鏈接分享,可以在網頁、移動端、墨刀預覽助手 app 中快速查看產品 demo 的演示效果。

開發標注

1. 使用Sketch插件上傳設計文件,墨刀標注會自動生成設計標注信息及全平台樣式代碼,可以精准還原標注信息,並提供每個元素的 CSS、Swift、Android 樣式代碼;

2. 提供了業內完善的顏色解決方案。除了展示常規設計文件的全局顏色,還會自動生成當前頁的頁面顏色,還可以手動吸取顏色,隨心定制你的個人色板;

3. 只需設計師導入Sketch切圖,即可自動生成多倍率切圖文件。可以一鍵下載全部切圖,也可以根據實際需要,下載獨立的元素切圖;

4. 除了支持元素在各平台之間的顏色、分辨率換算,還支持手動設置 HTML 的字體大小單位(rem/em)。

Sketch插件

通過Sketch插件上傳設計文件,墨刀標注會自動創建、精准還原設計文件所有樣式信息,並提供元素 CSS、Swift、Android 各系統樣式代碼。 

三、墨刀有什么優點

1. 有桌面版與手機版應用,能夠更方便快捷地編輯、預覽原型;

2. 輕量快速,同步、分享都很便捷;

3. 其控件的拖拉、大小的調整,都會自然的去匹配相應的母版大小;

4. 自帶很多成熟的組件,例如鍵盤,開關,手機模型等。

 四、墨刀有什么缺點

1. 在交互效果上、控件組合上,操作面板的選擇上不夠靈活;

2. 需要付費才能使用更強大的共享創建功能;

3. 墨刀本地下載的功能需要注冊並且購買。普通用戶只能通過頁面分享、或者掃一掃的形式進行觀看;

4. 在保真度方面仍需改進。

五、如何使用墨刀(以網頁版為例)

1. 創建應用

「項目管理頁」,創建的項目都會展示在這里。左上角,可以切換個人空間和企業空間。下方,可以選擇「使用模板項目」還是「創建空白項目」。

「使用模板項目」,可先預覽模板效果,挑選成功后點擊「使用模板」即可。

「創建空白項目」,創建后可以編輯頁面,還可上傳啟動圖標和啟動界面圖。

2. 創建頁面結構

在偏好設置-推薦模式下,頁面列表位於工作區的左側,與元素列表並排。
可以在頁面列表下添加新頁面、子頁面、創建副本、移動當前頁到其他項目、刪除等操作。
在頁面列表下方,有「頁面回收站」,14天內誤刪除的頁面可以在回收站進行找回。

3. 創建頁面內容

從組件區拖出組件到頁面設計區,對齊進行大小、顏色、外觀等屬性設置。

高頻組件區位於左側,畫網頁原型時,可以將頁面列表收攏起來,空間會大很多。
右側組件區包括內置的組件、我的組件(可以將高復用的組件添加到這里)、圖標、母版(有繼承性,一改全改)。
可以通過快捷鍵A或者在上方工具欄點擊「素材庫」對素材進行批量的管理。

 4. 添加頁面交互

頁面間交互

點擊組件建立頁面間的交互,將組件旁邊的圓形鏈接按鈕拖動(鏈接)到相應的頁面。
在添加鏈接時,還可根據需求,設置不同的觸發手勢、定時器及動效。

頁面內交互

頁面交互可以用動態組件來制作,制作諸如加載動畫、分頁器、組件神奇移動等效果。墨刀也內置了WEUI動態組件、AntDesign組件,可以直接使用。

5. 項目預覽、分享與下載

預覽

工作區點擊“運行”按鈕,即可進入原型演示模式。
在“預覽“頁面,還可以設置原型是否帶真機外殼,鏈接區域是否高亮,是否顯示批注,內容區是否滾動。

點擊右上角的“全屏模式”,進入全屏演示。並支持切換黑白背景色。

分享

點擊該項目的“分享”按鈕,可以獲取一個二維碼和分享鏈接。

 

在分享頁面設置“權限”和“效果”,保證項目預覽的私密性和順暢性。

下載

離線文件可供演示、查看,但是不能用於編輯

 

以上就是對“墨刀”的介紹與針對如何使用“墨刀”的一個簡易的基礎教程。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM