原型設計工具 墨刀

2022-08-14 06:09:10 字數 2309 閱讀 4795

一、墨刀簡介

(摘自 墨刀官網:

二、墨刀功能

素材庫:

可以免費想用豐富素材庫,使用和管理個人的素材庫,以及共享團隊素材庫。

設計:

使用豐富的素材庫,拖拽即可完成介面設計和互動,也可以直接匯入設計稿,並提供多種收集和轉換效果,實現酷炫動效。

高效演示及評審:

可以直接通過瀏覽器登入使用。無需特意儲存,就可以隨時隨地辦公,系統自動儲存所有更改。提供雲端協作以及金融機級安全保障。

三、墨刀的簡單使用

1、建立專案

在「墨刀」主頁點選「工作空間」,點選「新建專案」,即可建立專案,可以自由選擇原型型別,如:手機、平板、電視等,也可以自由選擇解析度。點選「建立」後會自動建立專案,並進入專案編輯頁面。

2、建立頁面結構

先建立頁面結構。在左側的頁面管理欄中,可以新增新頁面、子頁面、建立副本、刪除頁面等操作。刪除的頁面也可以在頁面列表下方的「頁面**站中找回」。

新增頁面、修改頁面名稱以及新增子頁面如下圖所示。

3、新增修改頁面內容

(以訊息列表頁面為例)

①狀態列與標題欄

修改狀態列與標題欄的顏色及大小,點選頁面上的元素,在右側狀態列中顯示該元素資訊,可在其中修改大小、位置、顏色、文字等內容。

為標題欄新增頭像影象、名字框、icon圖示、並將標題欄中的元素組合起來。在左側元件區域拖拽元件到頁面設計區,進行對齊、大小、顏色、外觀等設定。

如設定時,在左側選擇「」元素,拖拽至設計區,在右側修改大小,若想設定圓形,則選擇「圓角」,並將「圓角度」調至100。

最後將標題欄中內容組合在一起,方便編輯。

②製作底部導航欄

拖動左側元件,新增icon圖及文字初步製作出底部導航欄。icon圖可以用本地也可以用墨刀內建的素材。

c、可互動性「母版」相當於原型內的二級專案,支援建立多個頁面及跳轉鏈結,可完成諸如輪播圖等效果。

然後為不同的頁面新增底部導航欄母版,並設定不同的狀態。  

③新增頁面間互動

新增導航欄後,需要實現各個頁面間的跳轉。因為底部導航欄利用母版實現,可以直接在不同母版狀態下直接設定元素的狀態,鏈結至其他頁面,實現頁面間的互動。充分利用母版自動記憶鏈結的特點,可以避免在頁面進行反覆的鏈結,設定好後只要新增不同狀態下的母版即可,不需要在頁面進行鏈結跳轉。

④新增頁面內互動

頁面內互動可以使用同頁面的不同狀態來實現。首先建立同頁面的不同狀態,在設定狀態間的鏈結,實現頁面內的互動。

在qq訊息列表右上角,點選「+」號後彈出選項,該功能可以用訊息列表頁面的不同狀態實現。

首先建立在點選「+」狀態下,選項彈出後的效果。

設定狀態之間的互動,點選「+」後,進行同一頁面的不同狀態之間的跳轉。

預覽:點選工作區「執行」按鈕,即可進入原型演示模式。

原型設計工具 墨刀

什麼是原型?原型設計工具 墨刀 介面介紹 使用流程 建立應用 編輯應用 特點原型,即產品草圖。從產品流程來看,將想法形成草圖原型,原型再由設計師形成效果圖,程式設計師們根據需求和效果圖開發,出來的軟體樣子就是和效果圖差不多。原型在過程中就是產品最終形態的骨架。換乙個角度理解,原型是產品經理人員將文字...

原型設計工具 「墨刀」的介紹

產品介紹 1 產品簡介 2 產品logo 3 發展歷史 2017年6月,墨刀推出3.0版本,主打團隊協同方向,從3.0開始,墨刀不再是乙個只給產品經理用的,用來畫產品原型的工具,而是變成了乙個覆蓋整個產品的設計和開發流程,幫助整個產品團隊最大限度的發揮協同效應的團隊協同工具。6月12日,高保真產品原...

墨刀原型設計工具的介紹

2 進入工作區,新建專案,專案中有多種裝置的選擇,如手機 平板 電視 手環等,可以根據自己 的情況選擇相應的裝置。我選擇的是手機。3 可以對介面進行設計了,在右側有多種元件供我們選擇,如果有需要就可以之家拖進手機框中。4 除了元件之外還有介面的新增與刪除。5 經過簡單的操作,得出了如圖所示的主介面。...