——目錄——
什么是原型設計？
兩種原型設計比較
Axure優點和缺點
墨刀優點和缺點
我的第一次原型設計——“AR雲家具”
頁面介紹
使用步驟
產品經理的最基本一項技能就是熟練使用原型工具，但是很多新入門的產品經理會困惑，如何選擇原型圖工具？作者本人當然也不例外，本學期擔任學校“軟件開發與創新”課程的PM(項目經理)，要帶領全組成員在2~3個月內實現一個簡單APP的核心功能並進行Demo展示。在了解到軟件開發其中一個環節是原型設計時，我們便面臨原型設計工具的選擇這一問題。
經過老師的介紹和查閱相關的資料，我發現如今的原型設計工具種類還是非常豐富的，有：Axure、墨刀、摩客（Mockplus）、xiaopiu、Sketch等，各自也有優缺點和一批受眾者。但最熱門的原型設計工具還要屬axure和墨刀。下面我就簡單地對這兩種工具進行一個對比。
墨刀和Axure就像是美圖秀秀和Photoshop的關系,兩者並沒有絕對的優劣之分。
Axure優點和缺點
Axure作為老牌的原型圖工具，功能最齊全，交互最多樣，可以實現非常多條件判斷、巧妙運用可以實現更復雜的交互，尤其在制作PC端原型圖上有優勢。設計區域是無限畫布，方便給設計稿添加文字注解。
但Axure缺點同樣也相當明顯，由於細節過於繁瑣，不容易搞懂，所以會加重產品經理或交互設計師在畫原型時的負擔，帶來“效率不高”的問題。Axure的素材也是很頭疼的問題，大部分PM 都會在Axure原型庫、素材庫去尋找相應的第三方素材庫，進行載入，需要花費相應的時間。
墨刀優點和缺點
墨刀是一款在線原型設計與協同工具，借助墨刀，產品經理或設計師能夠搭建產品原型，演示項目效果。墨刀同時也是協作平台，項目成員可以協作編輯、審閱 ，不管是產品想法展示，還是向客戶收集產品反饋，向投資人進行Demo展示，或是在團隊內部協作溝通、項目管理。墨刀的系統控件都是基於APP，以及系統平台IOS和安卓，因此在里面可以首先選擇相應的設備布局，減少了不少工作環節。
墨刀的缺點就是在交互效果、控件組合、操作面板的選擇上都不如AXURE 靈活，並且效果切換因為是采用連線的方式，有時候會讓使用者腦子錯亂的感覺。這也於墨刀的產品定位有關，它是移動端原型設計工具，並且目前原型的交互效果系統自帶的還比較少，更強大的共享創建功能也需要充費才能夠使用。
由於考慮到我們的軟件“AR雲家具”是一款移動端的APP，且我又是剛開始接觸原型設計軟件，於是選擇了較好上手的、定位是移動端的原型設計工具——“墨刀”。在電腦上下載好“墨刀”客戶端后，我的第一次原型設計就開始啦！
界面介紹
- 基礎操作
工作區上一些基礎的操作，比如保存、撤銷、橫豎屏、放大縮小、分享、運行等等，這些操作一看就知道是做什么的了，這里就不記錄，有興趣的可以去看操作教程。
- 控件區
包含基礎組件庫、平台組件庫、圖標庫、母版，無論是內置還是自定義組件都可以在控件區查找。
基礎組件庫，提供文本、矩形、直線之類的基礎組件元素，利用基礎組件可以創造出變幻無窮的原型。
平台組件庫，包括iOS組件庫、Material Design組件庫、自定義組件庫（自己進行多個組件的組合）。
- 母版
母版具有繼承屬性——即編輯母版，當前項目中的所有對應母版實例都會同步發生改變。
母版主要用於快速修改當前項目內某固定模塊的內容及布局。
使用步驟
一、新建項目
填入項目的名稱“AR雲家具”，選擇對應的設備“手機”，再在下面選擇手機的型號，這決定了界面的大小，我這里選擇的是“iPhone 11”。這樣就創建好一個新的工程了。
二、設計主界面
新建應用的標題欄會自動顯示應用的名稱（AR雲家具），標題欄文字可以自行修改。制作里布導航欄，從左側“組件”欄目中找到底部組件，拖入應用之中，大小和樣式可以自行修改。然后拖入三個導航標簽，修改標簽的位置和名稱。至此完成底部導航欄的制作。
再搭配背景圖片和文字，一個還看得過去的主界面就設計完成了！
導航欄里有三個選項：擺放家具、我的收藏和購物記錄，點擊不同的圖標后，會跳轉到不同的頁面。
三、擺放家具頁面制作
在軟件右上角點擊“+新頁面”即可生成新的頁面，每一個頁面有復制、刪除、添加子頁面的功能。在新的頁面中添加標題欄，復制首頁的底部導航，粘貼至新的頁面，注意粘貼時用於粘貼至“原位置”。我在這個頁面設置了一個下拉菜單，用來隱藏不同家具的類型。
當對應點擊不同的圖標時，會出現這一類型家具中不同的款式，同時頁面現實場景中也會相應出現這個款式的虛擬家具，可以旋轉、放大縮小、刪除等等。
另外兩個頁面“我的收藏”和“購物記錄”也同樣可以根據自己的喜愛和想法來制作，在這里就不贅述。
四、頁面之間的跳轉
再介紹一個墨刀非常有特點的功能，就是通過連線的方式進行頁面之間的跳轉，在應用中選擇任何一個控件，圖片或者文字都可以通過添加手勢和頁面切換方式實現頁面跳轉。優點在於操作方便，且比較直觀。缺點是如果頁面復雜，跳轉比較多，會有非常多交叉在一起的線，容易連接出錯。
我們之前制作了家具擺放的頁面，現在需要把這個頁面和主頁面下方導航欄的“擺放家具”聯系在一起。直接拖動“家具擺放”頁面左邊的小圓圈至“主界面”即可實現跳轉。
五、添加局部手勢
另一個在移動端比較重要的功能，應用全局手勢的添加，在左側“組件”欄目找到全局手勢組件，拖入至應用的任意位置，然后選擇你要發動手勢后跳轉的頁面，選擇手勢方式和動畫效果即可。手勢方式有：滑動、點擊、兩指捏合等多種供使用者選擇。
六、試運行和手機預覽功能
點擊右上角的運行按鈕，可以完整地操作一遍流程，就像Android Studio中的手機模擬器。當然，除了在電腦上運行外，也可以直接將原型導到手機上查看。只需要在運行界面，點擊分享，用手機瀏覽器（墨刀app）可以掃描二維碼即可直接在手機上查看原型，更加方便你為團隊演示和講解自己的原型。
以上就是我第一次使用墨刀做原型設計的全部過程，當然其中的功能也只嘗試了一小部分，后面也還會慢慢“開拓”。總的來說，“墨刀”可視化的界面看着很舒服，也很容易上手，不需要編寫代碼，用作PM向別人展示的軟件確實是再好不過了。墨刀像一雙無形的大手，可以幫人省去很多解釋說明的時間，而花更多的精力在“思考”上面，這也正是“墨刀”的初衷。
下面附上墨刀官網的鏈接給需要的小伙伴~https://modao.cc/