幫助初學者快速瞭解墨刀(附原型模板素材)
墨刀是一款適用於產品經理和設計師的原型工具。相對於axure等傳統設計軟體,它最大的特點是 輕、快,不需要下載 , 開啟瀏覽器就能使用,沒有複雜的中繼器、函式概念,上手非常快,可以滿足大部分場景的原型和互動設計。
近期,墨刀又推出了4.0版本,新增加了使用者可以 自定義和批量管理的元件庫、素材庫,並且完善了企業級的協作功能。 這對於產品經理來說是個利好訊息,可以建立團隊的設計系統庫,不管是版本之間,還是 多個團隊之間都可以保持步調一一致。
下面分享一下墨刀4.0的使用方法,一起加油~
Step1:快速建立應用
*官網推薦大家使用墨刀 桌面客戶端 進行操作,能帶來更好的使用體驗。
*如使用 網頁版 ,可以用chrome瀏覽器(最新版)登入,使用IE、360瀏覽器等可能產生相容性問題。
註冊/登入墨刀後,首先到達的是「專案管理頁」,建立的專案都會展示在這個頁面。
點選左上角,可以切換個人空間和企業空間。
點選下方,可以選擇「使用模板專案」還是「建立空白專案」。
使用模板專案:墨刀內建了豐富的模板專案,可先預覽模板效果,挑選成功後點擊「使用模板」即可。通過編輯模板你可以更快地掌握頁面設計、互動設計的方法,也可在此基礎上完善個人產品原型。
建立空白專案:有手機、平板、自定義等多種平臺,建立後可以編輯頁面,還可上傳啟動圖示和啟動介面圖。
Step2 : 建立頁面結構
在偏好設定-推薦模式下,頁面列表位於工作區的左側,與元素列表並排。
你可以在頁面列表下新增新頁面、子頁面、建立副本、移動當前頁到其他專案、刪除等操作。
在頁面列表下方,有「頁面回收站」,14天內誤刪除的頁面可以在回收站進行找回。
PS:良好的頁面結構如同一個清晰的腦圖,能夠幫助製作者在複雜的產品原型中理清思路。
Step3 : 建立頁面內容
墨刀建立頁面內容非常的簡單:從元件區拖出元件到頁面設計區,對齊進行大小、顏色、外觀等屬性設定就可以了。
墨刀有兩個元件區:
高頻元件區:位於左側,當您畫網頁原型時,可以將頁面列表收攏起來,空間會大很多。
右側元件區:包括墨刀內建的元件、我的元件(你可以將高複用的元件新增到這裡)、圖示、母版(有繼承性,一改全改)
快捷鍵A或者在上方工具欄點選「素材庫」,您還可以對素材進行批量的管理。
Step4:新增頁面互動
頁面間互動
頁面設計好以後,要建立頁面間的互動,只需要點選元件,將元件旁邊的 圓形連結按鈕 拖動(連結)到相應的頁面就可以啦!
在新增連結時,還可根據需求,設定不同的觸發手勢、定時器及動效。
頁面內互動
頁面互動可以用動態元件來製作,製作諸如載入動畫、分頁器、元件神奇移動等效果。墨刀也內建了WEUI動態元件、AntDesign元件,可以直接使用。
元件神奇移動
素材庫內建的動態元件
自己製作動態元件
更為深入的互動可以檢視官網 狀態 的使用方法。
Step5:專案預覽、分享及下載
原型製作過程中,不但可以隨時檢查原型在pc或移動裝置上的真實執行效果,還可以將原型分享給你的同事或朋友,讓大家第一時間看到設計成果。
預覽
工作區點選“ 執行 ”按鈕,即可進入原型演示模式。
在“預覽“頁面,你還可以 設定原型是否帶真機外殼,連結區域是否高亮,是否顯示批註,內容區是否滾動。
還可以點選 右上角的“全屏模式” ,帶來更有沉浸感的演示體驗。並支援切換黑白背景色。這個演示效果非常棒!
分享
在墨刀,你可以輕鬆分享原型專案給你的同事或客戶,或者在進行使用者測試時分享給使用者檢視。
只要點選該專案的“分享”按鈕,你就可以獲取一個 二維碼和分享連結 。
將分享連結或二維碼傳給對方,對方就能在電腦端或者手機上檢視你的原型了。
你還可以在分享頁面設定“許可權”和“效果”,保證專案預覽的私密性和順暢性。
下載
常用的圖片、html格式墨刀都又提供。不過離線檔案可供演示、檢視,但是不能用於編輯, 墨刀的檔案必須線上編輯 。一般來說,你可以將已經定稿的專案下載下來,存檔或者交付給開發。
模板素材包
登入墨刀 ,點選建立專案即可使用這些模板素材。
網易考拉原型模板:https://org.modao.cc/app/19b49c4512159d83da68d02d869331044cb9d1c6
支付寶原型模板:https://org.modao.cc/app/f7aa5f2645c63f8a4407b6c317966c43dba7689e
今日頭條模板:https://org.modao.cc/app/62dd5da8ab8aa2ed5bf420cff174e016acff00cf
招商銀行模板:https://org.modao.cc/app/41613ad93a96b857eaa4f9dcfd9daf97704f5250
京東模板:https://org.modao.cc/app/494dad4a60aec643878749f69427302fa8bcc6d9
網易雲音樂模板:https://org.modao.cc/app/5OdUpa7Xthqm67X8DtlGScgSP43Lgjy