一.墨刀

墨刀是一款線上原型設計與協同工具，藉助墨刀，產品經理、設計師、開發、銷售、運營及創業者等使用者群體，能夠搭建為產品原型，演示專案效果。墨刀同時也是協作平臺，專案成員可以協作編輯、審閱，不管是產品想法展示，還是向客戶收集產品反饋，向投資人進行Demo展示，或是在團隊內部協作溝通、專案管理 。

操作簡單

簡單拖拽和設定，即可將想法、創意變成產品原型。

演示

真機裝置邊框、沉浸感全屏、離線模式等多種演示模式，專案演示效果逼真。
與同事共同編輯原型，效率提升；一鍵分享傳送給別人，分享便捷；還可在原型上打點、評論，收集反饋意見，高效協作.

互動簡單

簡單拖拽就可實現頁面跳轉，還可通過互動面板實現複雜互動，多種手勢和轉場效果，可以實現一個媲美真實產品體驗的原型。

自動標註及切圖

將 Sketch 設計稿墨刀外掛上傳至墨刀，將專案連結分享給開發人員，無需登入可直接獲取到每個元素寬高、間距、字型顏色等資訊，支援一鍵下載多倍率切圖。

素材庫

內建豐富的行業素材庫，也可建立自己的素材庫、共享團隊元件庫，高頻素材直接複用。

免費版

支援產品設計、工作流、原型預覽、Sketch標註外掛、移動端演示，可免費建立3個專案，每個專案20個頁面，以及總共50MB素材容量。

個人專業版

享受免費版所有功能，可以建立不限數量的專案及頁面，支援檔案匯出。    介面功能一覽

二.Axure

Axure是一款提供了足夠多高階功能，卻又極其極其簡單

的軟體。

所以，不必擔心說，Axure很難入門。

就我自己的工作經歷，可以這麼武斷地說——

工作中，Axure用到的功能基本上只有：部件的選擇，擺放和屬性設定。

關於是否有必要用Axure來製作高保真原型，會在下面一些可能的討論裡提及。

 

部件的選擇

部件用到最多的是common（預設）、Forms（表單）、Flow（流程圖）。

可以隨意拖到畫布上看看。

大部分的部件，都很好理解。不好理解的，類似Dynamic Panel（動態面板），Repeater（中繼器）等，無視就好。

這裡，再提下Placeholder（佔位符）：我個人很少用到佔位符，感覺佔位符的使用，更接近於，在輸出原型圖的過程中，因區域性還不太確定，臨時先佔個位置。

部件拖動到畫布上，右上角還會出現灰色的圓，點選可以變為一些基本上用不到的圖形。

 

 

部件的擺放

部件的擺放，在技能上沒什麼要特別說明的，主要是一些常見佈局的輸入。

不合理的部件擺放，不僅會影響轉化，也會造成使用者不好的體驗。

以下方法，也許會有幫助

• 嘗試用Axure臨摹一些平時在使用的APP或網頁
• 頁面分為幾大塊，各塊又分別有哪些元素
• 哪些你認為是優先順序更高的，在什麼位置
• 瞭解一些ios，或Material Design的設計規範

部件的屬性設定

不同的部件存在不同的屬性，可以逐個設定，看畫布裡的部件發生了什麼變化。

 

這裡也稍微提下圖層的概念：

有學習過Photoshop，或者做過稍複雜PPT的朋友，應該都比較好理解。

位於上方的圖層，會遮擋住下方圖層。所以，代表手機螢幕的矩形，要放在最底部。

 

 

 

小Tips

三.Figma Figma 是一個 基於瀏覽器 的協作式 UI 設計工具，從推出至今越來越受到 UI 設計師的青睞，也有很多的設計團隊投入了Figma 的懷抱.無需下載，開啟瀏覽器即可使用，同時也提供桌面端。但是缺點是沒有中文版，由於伺服器在國外所以國內使用起來載入很慢，另外Figma主打設計，原型互動這塊比較基礎。 優點：

• 檔案儲存在雲端
• 不用同步，在任何電腦上都可以訪問
• 沒有傳統中檔案的概念（不用來回傳檔案）
• 設計稿永遠是最新的
• 線上協作
• 可以同時處理一個檔案
• 可以一起檢視檔案而無需共享螢幕
• 任何人都可以對設計稿評論
• 多平臺（Win,、Chrome、Linux、Mac）
• 快
• 內建原型功能（更易用）
• 內建版本控制
• 內建批量重新命名（可以使用正則表示式）
• 更強大的元件（後面會說到）
• 可以訪問和修改元件中任何層的任何屬性而無需將其分離
• 更容易交付給開發，只需分享一個連結
• 工程師可以及時檢視標註，自己匯出切圖
• 為 UI 優化的功能
• 智慧排列（統一調整間距，重新排列內容）
• 批量圖片置入
• Layout（卡 Padding、標示切圖大小、影響約束區域）
• Web Font & Font Icon
• Style（字型、顏色、描邊、陰影）分開
• Figma 中的字型 Style 不用管對齊方式，只包含文字本身屬性缺點

• 中英文混排時文字的 fallback，到目前為止對中文的支援依然不太友好
• 外掛較少，缺少很多拓展性功能
• 如果要轉平臺，需要從頭開始移植
• 不能斷網工作，同步受網路影響
• 快速穩定的體驗需要 
• 價格略貴
• 專業版每人每月 15 刀，企業團隊版每人每月 45 刀
• 不能按比例縮放
• 不支援動態按鈕
• 不支援陰影擴充套件
• 不支援多層描邊

 四.Moqups

Moqups是一款線上設計平臺，基於Web架構，支援在網頁端進行原型設計，能夠輕鬆管理設計規範和資源。上手快，可實現團隊成員間協作的無縫連結，減少溝通成本。但是這款無法進行平面設計，沒有向量工具。

價格：一個專案免費（限制200個objects和5MB記憶體）

功能亮點：

• -支援頁面互動、命令互動、狀態互動等多種互動觸發方式
• -可直接繪製流程圖，直觀展現產品邏輯
• -支援多人團隊線上協作

使用場景：高保真原型、線框圖、 移動端原型

 

五.Proto.io

Proto.io是一個基於瀏覽器的原型設計工具，無需安裝即可使用。有豐富的原型元件，能夠實現多種互動效果，預覽、分享、評論這些基礎功能也都有。

價格：

15天免費。

功能亮點：

-很多現成的元件和模板資源，拖拽即可使用，非常方便

-能夠實現多種互動，包括頁面互動、高階動畫、各種事件手勢等

-檔案儲存在雲端，可跨平臺訪問，也可以支援評論協作

使用場景：

高保真原型、Web線框圖、網頁原型

 六.InVision

InVision是一款介面互動設計軟體，內含豐富的視覺設計功能，幫助快速建立原型。完成具有一定互動效果的原型設計後支援研發人員進行測試，適合團隊使用。

價格：可免費使用3個專案。

功能亮點：

• -可快速將靜態螢幕轉變為可點選的互動式原型
• -可快速建立熱點連結頁面
• -支援匯入Sketch、Phooshop檔案
• -線上多人團隊線上協作

使用場景：線框圖、移動端原型