軟件綜合實踐專題做業--墨刀的使用

一．    墨刀整體介紹

墨刀，一款在線原型設計與協同工具，藉助墨刀，產品經理、設計師、開發、銷售、運營及創業者等用戶羣體，可以搭建爲產品原型，演示項目效果。同時也是協做平臺，項目成員能夠協做編輯、審閱，不論是產品想法展現，仍是向客戶收集產品反饋，向投資人進行Demo展現，或是在團隊內部協做溝通、項目管理。墨刀爲北京磨刀刻石科技有限公司旗下一款在線原型設計與協做工具產品，用戶羣體包括：產品經理、設計、研發、運營銷售、創業者等。

二．   墨刀的發展歷史

APP原型設計工具墨刀完成500萬Pre A輪融資，FreeS資本領投。此前，墨刀曾得到150萬元天使輪融資。2017年6月，墨刀推出3.0版本，主打團隊協同方向，從3.0開始，墨刀再也不是一個只給產品經理用的，用來畫產品原型的工具，而是變成了一個覆蓋整個產品的設計和開發流程，幫助整個產品團隊最大限度的發揮協同效應的團隊協同工具。6月12日，高保真產品原型製做及團隊協同工具公司墨刀宣佈推出最新3.0版本，這次發佈會墨刀主打團隊協同方向，將來重點打造高效團隊協做工具，加速團隊內部效率和流程。同期墨刀宣佈與石墨文檔、吆喝科技、輕芒、聯創工廠等多家上下游企業達成合做，將來打通整個產品設計流程。2018年1月推出Sketch插件2.0版本，Sketch設計稿能夠導入墨刀，進行交互設計，自動獲取標註信息，推動開發進程；2019年1月，墨刀啓動To B 戰略上線企業版，提供諸如企業項目及成員管理、基本數據統計等功能。

三．   墨刀的註冊登陸以及版本介紹

1.目前墨刀分爲網頁版和客戶端，網頁版能夠直接使用，客戶端其實也是網頁版的功能，咱們通常下載客戶端，使用過程當中須要聯網

2.登陸以後，就會出現以下界面：

 

 

四．   網頁版的大概使用方法：

1.建立新的應用：

進入網頁以後，能夠看到有兩個選項，一個是一個例子，一個是使用原型設計。咱們選擇第二個進行咱們須要的原型設計。點擊右上方的建立應用，能夠選擇不一樣的模板和設備類型，填寫應用名稱以後便可完成應用的建立，比方說上圖的泡影就是我建立的一個應用，而後咱們能夠隨時編輯應用或者與他人共同編輯和分享應用。

 

 

2．建立新的應用

進去以後如圖所示能夠看到分爲幾個部分，菜單欄等比較簡單的就不介紹了。最左邊是組件欄，能夠選擇須要的組件，中間編輯欄，對選取的組件進行編輯，右邊是預覽排列，就是最終咱們看到的頁面。點擊咱們建立的對應應用進行編輯，進去以後會看到下圖，其分爲菜單欄、組件欄、編輯欄和預覽排列欄幾個部分。最左邊是組件欄，咱們能夠在這裏選擇須要的組件，而後拖拽到中間編輯欄中進行設計；中間編輯欄裏能夠對選取的組件進行編輯；右邊是預覽排列，就是最終咱們看到的頁面的基本排列。

 

 

3.組件的使用

咱們把一個頁面要的組件所有都拉到這個右邊的排列欄，經過雙擊對應的組件進行文字的編輯，經過中間欄進行如顏色之類的改變。

 

 

4.頁面管理

新建頁面：

若是咱們須要作另外一個頁面以及頁面的管理，咱們能夠在最右邊的頁面管理欄進行新建或者複製頁面，這樣咱們的原型也能夠在不一樣頁面之間跳轉

頁面跳轉：

若是要進行頁面之間的跳轉，能夠點擊組件，而後拉動組件旁邊的超連接的樣式圖標到相應頁面便可執行進行頁面跳轉功能

5. 導出下載圖片或者安裝包

點擊頁面上方的下載圖標，具體以下圖所示：

 

 

五．     軟件版墨刀製做一個app首頁原型的案例

1.建立應用

首先打開墨刀軟件，新建一個應用，選擇應用類型（這裏我選擇了iPhone設備），輸入應用稱，設備類型和應用尺寸，點擊建立按鈕，完成應用建立名。

 

 

1.製做底部導航欄

新建應用的標題欄會自動顯示應用的名稱（人人都是產品經理），標題欄文字能夠自行修改。製做里布導航欄，從左側「組件」欄目中找到底部組件，拖入應用之中，大小和樣式能夠自行修改。而後拖入三個導航標籤，修改標籤的位置和名稱。至此完成底部導航欄的製做。

 

 

3.製做原型頁面

而後咱們開始簡單的製做下「產品經理」的首頁原型，在左側的「組件」欄目中找到搜索組件，拖入App首頁中，在「母版」欄目中找到輪播圖模版，拖入應用之中。墨刀中有一些已經作好的組件或母版，可直接拖入使用，加快建立原型的時間。

 

 

而後回到「組件」欄目，爲首頁插入圖片和文字。圖片調節在右邊的設置欄，這裏推薦你們直接拖入圖片，而後用鼠標調節大小這樣會比較方便。文字的調節在左邊的主題欄目，可調節文字的大小和樣式，而後用鼠標擺至合適的位置。

4.建立頁面

在軟件右上角點擊「+新頁面」便可生成新的頁面，每個頁面有複製、刪除、添加子頁面的功能。在新的頁面中添加標題欄，複製首頁的底部導航，粘貼至新的頁面，注意粘貼時用於粘貼至「原位置」。按如此方式製做「發現」頁面和「個人」頁面。

5.頁面跳轉

這裏介紹一個墨刀很是有特色的功能，就是經過連線的方式進行頁面之間的跳轉，在應用中選擇任何一個控件，圖片或者文字均可以經過添加手勢和頁面切換方式實現頁面跳轉。優勢在於操做方便，且比較直觀。缺點是若是頁面複雜，跳轉比較多，會有很是多交叉在一塊兒的線，容易鏈接出錯。利用連線的方式便可快速的實現底部導航的切換，設置完成後選擇右上角運行按鈕，便可查看實際效果。

6.添加全局手勢

最後說一個在移動端比較重要的功能，應用全局手勢的添加，在左側「組件」欄目找到全局手勢組件，拖入至應用的任意位置，而後選擇你要發動手勢後跳轉的頁面，選擇手勢方式和動畫效果便可。利用全局手勢組件，在應用添加滑動的頁面切換效果。運行測試，效果以下。

 

 

7.手機預覽

手機預覽功能，能夠直接將原型導到手機上查看。只須要在運行界面，點擊分享，用手機瀏覽器（墨刀app能夠）掃描二維碼便可直接在手機上查看原型，更加方便的你爲團隊演示和講解本身的原型。

8.總結

「墨刀」總的來講操做是很是方便的，若是有其餘的原型工具基礎，用起來可能更好上手。自己支持手機預覽功能，更加方便於移動產品的建立和展現。本人也推薦app的產品或設計師使用墨刀來快速建立原型，能夠加快本身的製做和展示的時間。

六．客戶端版本的詳細介紹

1.建立移動端

在墨刀，你既能夠建立移動端項目（iPhone/Android）、平板項目、也能夠建立Web/電視項目、Watch項目，並能夠自定義尺寸，爲各類屏幕建立原型。

登錄墨刀以後，點擊「新建項目」便可。

 

 

固然，您能夠選擇「從模板中建立項目」。

鼠標懸浮在模板上方，點擊「使用模板」，就能建立該模板項目。

2.修改原型尺寸和機型

鼠標懸浮在項目卡片上，點擊「..."，而後點擊「設置」，

再修改項目的名稱、設備類型和尺寸，而後保存便可。

3.添加和編輯頁面

添加頁面

添加同級頁面：選中一個頁面，再點擊頁面列表頂部的「添加新頁面」，即可以新建該頁面的同級頁面。

 

 

添加子級頁面：鼠標懸浮某頁面上，點擊「...」展開更多按鈕，單擊「添加子頁面」便可爲該頁面添加子級頁面。目前最多支持建立7級頁面。

修改頁面名稱

雙擊修改頁面名稱：可以使用「數字」+「頁面功能」方式命名，既便於頁面識別，又可彌補多級列表演示時的不足，更清晰地展現頁面邏輯關係。

調整頁面順序

 

 

拖拽調整頁面順序：拖動某頁面在頁面列表上下移動位置便可。若是將頁面 A 移動爲頁面 B 的次級頁面，直接拖拽 A 至 B 區域處便可。

複製/轉移/刪除頁面

鼠標懸浮某頁面，頁面名稱右側會顯示「...」更多按鈕，點擊更多按鈕展開「建立副本」、「移動到」以及「刪除」的按鈕。

編輯頁面式樣

在右側的「頁面設置面板」，你能夠選擇頁面是「豎屏」仍是「橫屏」演示，能夠修改背景顏色

能夠選擇是否顯示「佈局」，並能夠修改「列數」/"間隔"/「尺寸」。

能夠選擇是否顯示「網格」，並能夠調節網格大小。

能夠查看當前頁面連接數，並在這裏一鍵刪除。

 

4.添加組件和圖標

在最右的設置面板左側裏有「組件」、「個人組件」、「圖標」庫，點擊便可打開相應的素材庫。

組件（官方組件）庫：墨刀官方提供豐富的組件庫，除了基礎組件，還有蘋果的 iOS, 谷歌的Material design, 微信的 WeUI，螞蟻金服的 Ant Design, Windows 10 等多套組件庫。這些均可以直接使用，畫原型效率大大提高。

個人組件：你自定義的組件庫。

圖標：覆蓋各領域的圖標，來自 Font Awesome, Material Design 和墨刀圖標系列。

 

墨刀目前有兩種方式添加組件/圖標到畫布上：

1 雙擊組件/圖標

2 拖拽組件/圖標到畫布

對於左側（在「推薦」模式下）的「快捷組件」來講，還有第三種添加方式：按住對應的快捷鍵而後鼠標畫出。好比畫「長方形」組件，就按住「R」。至於其餘組件用什麼快捷鍵，鼠標懸浮在「快捷組件」上就能夠看到啦！

 

 

5.編輯組件屬性

在面板裏能夠編輯組件的各類屬性，好比位置、大小、顏色、透明度、陰影、動效等等。

選中多個組件，能夠編輯它們的佈局方式，好比「左對齊」、「右對齊」、「居中對齊「、「水平等間距」、「垂直等間距」…

選中組件，在設置面板中點擊「小眼睛」得圖標便可顯示、隱藏組件。

顯示、隱藏組件快捷鍵：

選中組件，在工具欄中點擊「鎖定」，或者在外觀設置中點擊「小鎖」圖標便可鎖定、解鎖組件。鎖定組件後，點擊組件右上方的「小鎖」圖標也可解鎖組件。

鎖定、解鎖組件快捷鍵：

組件和頁面目前還不支持漸變色設置。

 

 

6.保存自定義組件，以重複使用

畫原型時，會遇到這樣的狀況：我設計好了一套組件，以後會屢次利用，但我不想每次都從新設計，該怎麼辦？

在墨刀，你能夠將任何組件（組合）建立爲「個人組件」，收錄到「個人組件」庫中，以後便直接從組件庫中拿出來使用便可。

「個人組件「跟隨你的帳號，所以不管你是在哪臺電腦使用墨刀，只要登陸你的帳號，就能夠在任何項目裏使用你以前設計的組件，助你提高設計效率。

 

有2種方式能夠建立「個人組件」：

1 選中組件，右鍵彈出面板，選擇「建立個人組件」。

2 直接拖拽組件到「個人組件」面板空白區域。

建立成功後，即可以經過雙擊或者拖拽的方式直接使用啦！

若是你自定義的組件數量不少，還可使用「搜索」功能來提高工做效率。 

此外還能夠在「個人組件」面板創建文件夾來管理你的組件，更多批量處理能夠經過打開「素材庫」實現。

 

 

7.使用母版批量修改組件

你在畫原型時或許面臨這樣的問題：同一個組件（組合）在多個頁面多處都用到，可是當後期須要修改時，你想一次性修改全部這樣的組件。

此時你就能夠利用墨刀的「母版」了。

母版：

墨刀支持將任何組件，不管是靜態仍是動態，轉化成母版（master）。

母版的特色是具有「繼承性」：只要改動母版（master），那麼它全部的實例（instance）都能同步更新改動。

新建母版：

選中組件——右鍵「轉換爲母版」——命名。在該項目建立的全部母版都會存放在「母版庫「中。

編輯母版：鼠標懸浮在母版縮略圖上方，點擊「…」—「編輯」，便可進入修改母版。修改完成後，它在該項目裏全部的應用實例都會同步更新修改。

8.添加交互設置

在墨刀，你能夠很快捷地實現頁面之間的跳轉。有2種方式：

給出其中一種方法

選中組件，在「連接設置面板「點擊「添加事件」。

 

 

而後設置」觸發動做「和」動做「。

 

 

9.管理素材庫：

組件：你能夠在這裏新建、複製、移動、刪除組件，新建和刪除組件文件夾，也能夠將組件置入畫板。支持按住Shift或command/ctrl鍵多選。

 

 

圖片：有一個好的圖片庫至關於一個井井有理的圖書館，能夠快捷高效的取用所需素材。

於是這一版有兩個小改動：

1. 直接上傳到工做區的圖片再也不自動添加到素材庫，咱們沒法判斷這些圖片是隻使用一次仍是要屢次使用，過多的無關圖片有可能會污染素材庫。你能夠手動把之後可能會用到的圖片添加到素材庫，保持素材庫的整潔。
2. 要先建立文件夾，再添加圖片，甚至是對圖片添加標籤，對每張圖片都分門別類。（您能夠將按照項目來建立文件夾，按照標籤來歸類。固然您也能夠按照本身的習慣來作分類。）

 

良好的整理習慣，必定會讓你往後的工做受益無窮。

添加文件夾、添加標籤

1. 建立文件夾後，你能夠直接拖拽圖片到空白區域，或者點擊「添加圖片」，就能夠上傳圖片。目前支持上傳PNG/JPEG/JPG/SVG/GIF 格式。
2. 選中圖片，能夠接着添加標籤、刪除、下載或者移動到其餘文件夾，也能夠將其置入到畫板。
3. 在「圖片標籤」，便可經過選擇「標籤」快速查看相關圖片。點擊「管理」，便可刪除某個標籤。
4. 能夠按照名稱、大小、建立時間，以列表或橫排形式排序。更快的找到所需

 

 

 

以上就是對墨刀的學習總結