4種場景下最合適的原型設計工具推薦

 

原型設計是將想法轉變爲設計過程當中相當重要的一環。常常有設計師小夥伴可能會問到，「哪一個原型設計工具是最好的呢」？實際上這是一種錯誤的提問方式，尤爲是在當下原型工具種類繁多，針對不一樣需求各有優點的大環境中更加如此。就設計師而言，更在乎的應該是「哪一個原型設計工具對我現階段的目標是最好的」？在這裏，筆者列出了在4種常見場景下最合適的原型圖設計工具的推薦清單，但願對你有所幫助。

 

1、設計中低保真、快速的手機端和Web網站場景

 

 

場景特色：

• 構建移動應用（手機端APP和Web網站）
• 中低保真
• 快速搭建

中低保真原型通常指有限的功能和交互原型設計。它們被用於描繪設想、設計方案以及界面佈局……創建這些原型的目的主要用於溝通、演示和報告。對於低保真、快速移動應用程序的原型設計，用於此場景的最佳工具是能夠在短期內以低保真方式展現整個應用體驗流程。

 

工具推薦：

1. Mockplus

2. Balsamiq

 

2、響應體驗設計

 

 

場景特色：

• 構建響應式網站（手機、平板、桌面）
• 省時和高效兼備
• 須要將頁面連接在一塊兒，顯示它們的流程

在面對響應式設計需求的用戶時，首先應當明確如下幾個問題：

1. 爲何必須設計響應？

2. 響應設計真正的目標是什麼？

3. 設計每一個顯示模塊詳細需求是什麼？ 

在進行響應式設計的同時，也須要先後端開發的支持，不然設計高效率的響應設計將會變得很是困難。 

 

工具推薦：

• Raw HTML/CSS/JS（真正的響應式設計）
• UXPin

 

3、高保真設計（手機或者桌面）

 

 

場景特色：

• 在APP上構建特定的動畫
• 須要極高的保真度
• 須要高效率
• 須要顯示運動，動畫元素和時機

設計高保真的原型不只僅是須要特別高的保真度，與此同時還須要顯示應用程序中的整個流程。這是一項很是耗時的任務，若是設計師但願須要構建一個高保真原型，包含有趣的動畫而且實現頁面之間導航，來爲用戶創造一個真正的高保真體驗，那麼可使用下面這些工具：

 

工具推薦：

• Flinto
• Origami

四．特定功能需求

 

 

場景特色：

• 在移動應用上構建特定的動畫
• 須要特別高的保真度
• 須要高效率
• 須要顯示運動，動畫元素和時機

 

工具推薦：

• Adobe After Effects

總結：

 

正如Facebook設計總監Julie Zhuo預測將來十年時所說，「將來的設計思惟，就是產品思惟」。對於設計師而言，應該更專一於設計而不是工具。設計過程當中須要溝通什麼、展現什麼、測試什麼？須要創建怎樣的模塊？須要什麼程度的保真？當專一於原型所須要的目標時，你就知道你要採用何種工具了。建議全部的設計師，都應當普遍的涉獵目前主流的原型圖工具的使用，一旦須要，便可使用。

同時，筆者相信最好的工具，應當具有「更快」、「更簡單」的特質，服務於設計思惟，讓設計師不爲工具所累，而這點偏偏是Mockplus所一直倡導的。建議須要快速建立原型、表達設計想法的小夥伴們，能夠把Mockplus加入本身的經常使用工具清單了，10分鐘玩轉不是問題！

更多設計類相關乾貨（文章及經驗教程），盡在：UI/UX專業博客