原型設計工具在產品設計、互動設計和使用者體驗設計中扮演著重要角色，本篇部落格將介紹Axure RP、墨刀、Pixso、Adobe XD這4種主流原型設計工具。
Axure RP
特點
- 強大的互動能力：強大的互動設計功能，支援複雜的互動流程和狀態轉換。
- 豐富的元件庫：Axure RP 內建了大量的元件，包括按鈕、表單元素、圖示等，方便快速構建原型。
- 靈活的匯出選項：支援匯出為 HTML、PDF、Word 等多種格式，方便與團隊和客戶分享。
- 多人協作和版本控制：支援團隊協作和版本控制。
侷限性：
- 學習曲線陡峭：Axure RP 功能豐富，對新手要求較高，需要花費時間學習和熟悉軟體。
- 價格較高：Axure RP 專業版的價格較高，可能對個人或小型團隊來說是一筆不小的支出。
- 缺少簡單的繪圖工具：相比其他原型工具，Axure RP 在繪製基本圖形方面的功能相對有限。
- 容易發生卡頓：在處理複雜原型時，Axure RP 可能會出現效能問題。
使用方法：
需求分析：
- 收集關於產品、目標使用者、品牌風格等的資訊。
- 確定首頁需要展示的內容，如商品分類、推薦商品、廣告位等。
繪製草圖：
- 使用 Axure RP 繪製一個簡單的頁面草圖，包括頂部導航、商品分類、輪播圖等。
新增互動元素：
- 在草圖中新增導航連結、商品分類按鈕等。
- 建立一個輪播圖，讓使用者可以點選切換廣告圖片。
建立互動動效：
- 為導航連結新增點選效果，模擬使用者點選後的頁面跳轉。
- 為輪播圖新增自動切換效果，讓使用者可以瀏覽不同的廣告。
測試原型：
- 在 Axure RP 中測試導航連結、輪播圖的互動效果。
- 確保使用者能夠順利瀏覽網站內容。
匯出原型：
- 匯出為 HTML 檔案，分享給團隊成員和客戶。
MODAO（墨刀）
特點：
- 豐富的互動和動畫功能：墨刀提供了豐富的互動和動畫功能，可以幫助設計師建立高度互動性的原型圖。
- 多人協作和實時預覽：墨刀支援多人協作，團隊成員可以實時編輯和預覽設計檔案，方便團隊合作。
- 適用於移動端產品設計：墨刀的設計元件針對移動端產品，使得繪製移動端原型圖更加便捷，展示效果更好。
- 易於上手：墨刀具有直觀的介面和簡單的操作，適合初學者快速上手。
侷限性：
- 免費版功能有限：墨刀的免費版功能可能有一些限制，一些高階功能和團隊協作功能可能需要付費。
- 安全性和保密性問題：墨刀是一款線上產品設計工具，設計的產品儲存在雲端，安全性和保密性可能不如離線工具。
- 介面和操作適應時間：墨刀的介面和操作可能需要一些時間來適應，特別是對於初次使用的使用者。
使用方法：
安裝和建立專案：
- 首先，您需要選擇適合您作業系統的墨刀版本並下載安裝12。
- 開啟安裝好的墨刀，點選“新建專案”，為專案取個名稱，並選擇“網頁/電視”作為預設大小（通常為1440✖1024）。
- 點選“建立”即可開始您的設計。
介面熟悉：
- 建立專案後，您會看到一個空白介面。讓我們簡單瞭解一下墨刀的操作介面：
- 左側工具欄：包含基礎的文字、形狀等工具。
- 右側屬性欄：選中畫布上的物件，可以修改大小、顏色等屬性。
- 頂部素材庫：提供免費的素材供您使用。
頁面編輯：
- 在畫布上新增元素，如文字、形狀、圖片等。
- 設定頁面連結跳轉，建立長頁面的滾動演示，固定底部與頂部的內容等。
元件的使用：
- 墨刀提供了一些高頻元件，如輪播圖、連結區域、表格、批註等。您可以在左側工具欄中找到它們並拖拽到畫布上使用。
分享和交付：
- 下載專案資料，設定專案分享連結。
- 預覽、標註和評論專案。
Pixso：
特點：
- 中文介面：Pixso 提供中文介面，方便中文使用者操作，不會出現缺字漏字的問題。
- 穩定性高：Pixso 目前暫未出現大範圍當機崩潰的情況，使用體驗較為穩定。
- 頁面開啟速度快：Pixso 不需要特殊上網即可快速開啟頁面，方便使用者隨時隨地訪問。
- 個人使用者免費：個人使用者完全免費，可以建立無限檔案，並支援儲存過往的所有編輯記錄。
- 多色向量網格：Pixso 提供了向量網格和多色向量網格功能，方便繪製複雜的圖形和圖示。
- 免費可商用中文字型庫：Pixso 內建了多個免費可商用的中文字型，完美相容中文內容。
侷限：
- 效能相對較差：與一些上線時間更早的工具相比，Pixso 在效能方面還有一定的差距，但正在努力追趕中。
- 功能相對有限：雖然Pixso內建了豐富的功能，但與一些其他原型設計工具相比，可能還有一些功能上的差距。
使用方法：
下載和安裝：
- 首先，您需要前往 Pixso 官網，點選“免費使用 Pixso”或進入工作臺，註冊一個 Pixso 賬號。
- Pixso 支援 Windows 和 Mac 版本，您可以根據自己的作業系統下載並安裝。
- 安裝完成後，登入 Pixso 賬號即可開始使用。
建立專案和檔案：
- 登入後，Pixso 會引導您建立團隊和專案。您也可以直接新建資料夾開始設計。
- 在工作臺的左上方，點選“新建”按鈕，建立文件。
- 如果您有現有的設計檔案，可以點選“匯入”並選擇本地檔案，Pixso 可以輕鬆支援多種不同格式的設計檔案。
主介面和畫板：
- Pixso 的檔案不是儲存在本地計算機上，而是在雲端。您可以隨時隨地透過瀏覽器訪問所有工作。
- 建立新畫板：按 A 或 F 在右側的屬性皮膚中檢視所有畫板選項，選擇要使用的尺寸或先隨意建立一個。
- 巢狀畫板：與傳統的畫板不同，您可以將畫板彼此巢狀，方便以後建立更復雜的互動設計。
柵格和佈局：
- 移動端：可使用標準的 8 點柵格。
- Web 端：建立佈局柵格很重要，先建立 5 欄引導柵格。
- 在右側的柵格屬性選單中調整列與行，並根據需要設定邊距。
圖層和組：
- 圖層：新增的每個新元素都會自動建立一個圖層。您可以透過拖放來重新排列圖層或對圖層進行分組。
- 元件：在 Pixso 中，可以新增元件，有利於原型設計。
- 頁面：設定設計的不同部分或區域，會新增不同的頁面，不同的頁面之間可以新增互動。
向量形狀設計：
- Pixso 使用一種稱為向量網格的方法，用來建立複雜的形狀。
- 使用向量圖形工具直接在畫布繪製常見向量圖形，如矩形、直線、橢圓、多邊形、星形。
- 按住 Shift 鍵以保持形狀比例不變，使用鋼筆工具創作更復雜的形狀。
圖片樣式設定：
- 在任意形狀中，點選右側屬性視窗的“填充”，選擇“圖片”填充，即可填充任意圖片。
- 調整圖片的透明度，注意圖片版權問題，推薦使用高質量的圖片網站。
安裝本地字型：
- Pixso 內建大量字型樣式，但如果您更喜歡使用本地字型，可以透過 Pixso 提供的本地字型助手實現。
Adobe XD：
特點：
- 跨平臺支援：Adobe XD 可以在 Mac 和 Windows 系統上執行，適用於不同作業系統的設計師。
- 免費計劃：對於 Creative Cloud 使用者，Adobe XD 提供免費計劃，雖然有一些儲存空間和專案數量的限制，但對個人使用者非常友好。
- 專注於設計：Adobe XD 專為設計而設計，具有堅實的基礎架構。您可以使用可重複使用的元素進行設計、快速調整元件大小，並建立通用的元素、樣式或網格。
- 向量編輯：XD 具備精確的向量編輯功能，方便設計師進行圖形設計。
- 互動式原型：您可以使用流程、動畫、語音原型、遊戲支援和移動預覽建立互動式原型。
- 協作和雲端儲存：Adobe XD 支援檔案協作和以檢視模式共享，您可以透過連結儲存在雲中。
侷限性：
- 付費計劃：如果您不是 Creative Cloud 使用者，需要單獨付費（每月9.99美元）才能使用全部功能。
- 基本形狀限制：雖然可以繪製基本形狀，但無法選擇自定義形狀。
- 匯出 CSS 限制：如果沒有外掛，無法直接從 XD 中獲得 CSS 程式碼。
- 頻繁更新：雖然不斷更新是好事，但有時可能會導致一些不穩定性或錯誤。
使用方法：
- 建立新專案：開啟 Adobe XD 後，您可以選擇新建專案的大小，或開啟最近的專案。
- 介面熟悉：瞭解左側的附加裝置，可以下載外掛和元件庫。
- 重複網格：使用重複網格建立常見的列表效果，直接拖入文字或圖片檔案。
- 響應式調整大小：XD 支援響應式佈局，自動調整圖片寬度，防止拉伸。
- 資源庫：集中管理專案中的資源，包括圖示、元件等。
- 原型設計：新增點選事件、設定動畫，右側修改動畫屬性。
- 匯出設計：點選左上角的漢堡按鈕，選擇匯出，根據需求切圖。
