主流原型设计工具 2152814陈嘉盛

原型设计工具是用于创建和展示应用程序、网站或软件的交互原型的软件工具。下面我将介绍几种主流原型设计工具的特点和使用方法。

 

1、Sketch（适用于Mac）

特点：Sketch 是一款专为用户界面和用户体验设计而打造的矢量绘图工具。它具有简洁直观的界面和丰富的功能，适用于创建高保真的原型设计。Sketch 还支持插件系统，可以通过第三方插件扩展其功能。

使用方法：在 Sketch 中，可以通过绘制形状、添加文本和图像，以及应用样式和效果来创建原型。用户可以设置交互动作，如链接页面和创建交互式按钮。通过 Sketch 的原型模式，可以预览和演示交互原型，以便进行测试和反馈。

 

2、Adobe XD

特点：Adobe XD 是 Adobe 公司推出的一款原型设计工具，适用于创建应用程序、网页和移动应用的交互原型。它提供了强大的设计工具和协作功能，能够无缝连接其他 Adobe Creative Cloud 应用程序。

使用方法：在 Adobe XD 中，可以通过绘制矢量形状、添加图像和文本来创建原型。用户可以创建交互式按钮、滚动区域和切换状态，以模拟真实的用户体验。Adobe XD 还支持共享原型和协作，可以邀请团队成员进行评论和反馈。

 

3、Figma

特点：Figma 是一款基于云端的协作设计工具，适用于团队合作创建交互原型。它提供了实时协作和评论功能，可以让团队成员实时在同一设计文件上进行编辑和交流。

使用方法：在 Figma 中，可以通过绘制形状、添加图层和应用样式来创建原型。用户可以设置交互动作、创建过渡效果和制作动画。Figma 还提供了原型演示功能，可以在浏览器中预览和测试原型，并收集用户反馈。

 

4、InVision Studio

特点：InVision Studio 是一款专注于用户体验和动画的原型设计工具。它提供了强大的动画制作功能和设计系统，能够创建具有交互性和动感的原型设计。

使用方法：在 InVision Studio 中，可以通过绘制图层、创建交互元素和应用动画效果来制作原型。它支持无缝的设计到开发转换，可以与 InVision Cloud 集成，方便团队协作和反馈收集。

 

5、Axure RP

特点：Axure RP 是一款功能丰富的原型设计工具，适用于创建复杂的交互原型和高保真的设计文档。它提供了强大的条件逻辑、数据驱动和团队协作功能。

使用方法：在 Axure RP 中，可以使用各种图形、交互元素和数据集来创建原型。它支持创建复杂的交互流程和动态内容，如表单验证、状态切换和数据展示。Axure RP 还可以生成详细的设计文档，包括交互规范和注释。

 

6、Proto.io

特点：Proto.io 是一款基于云端的交互原型设计工具，适用于创建移动应用和网页的交互原型。它提供了丰富的界面元素和交互动作，可以模拟真实的用户体验。

使用方法：在 Proto.io 中，可以通过拖放方式添加界面元素和屏幕，并为元素添加交互动作。它支持创建过渡效果、滚动区域和条件逻辑。Proto.io 还提供了原型演示和共享功能，方便与团队成员和利益相关者进行交流和反馈。

 

7、Axure

特点：高保真度；可拓展控件；自定义库；适配；少交互；能够熟练运用自定义控件之后，使用的效率能够大大提升。

缺点：生成的原型在移动端很难用。

 

8、OminiGraffle

特点：在调整控件时流畅稳健，在绘制草图时能够保证其美观程度。

缺点：操作比较困难，生成的html没有目录，文档可读性差，生成的交互原型更难用到手机上。

 

9、Quartz Composer

就是专门用来制作交互动画原型的产品，免费，但是需要苹果开发者账号，学习曲线非常高，但是可以制作非常精美的强交互动画。

 

10、Liveview

PS play等都可以快速把电脑上的内容投影到手机上。但是唯独liveview可以支持交互。打开交互模式后，电脑端可以接受手机的点击和滑动手势。非常强大。

 

11、Icon Stricker

专门用来测试icon的网站，出自Flinto。快速在主屏查看图标。

这些原型设计工具各有特点，根据具体的项目需求和个人喜好，选择适合自己的工具进行原型设计是很重要的。

下面我将着重介绍一下Axure（RP）这款原型设计工具。

Axure RP 是一款功能强大的原型设计工具，它专注于创建复杂的交互原型和详细的设计文档。以下是 Axure RP 的特点和使用方法的详细介绍：

特点：

1、强大的交互功能：Axure RP 提供了丰富的交互元素和交互动作，如链接、状态切换、条件逻辑和数据驱动。它允许设计师模拟真实的用户交互，创建复杂的交互流程和动态内容。

2、详细的设计文档：Axure RP 可以生成详尽的设计文档，包括交互规范、注释、页面流程和视觉样式。这有助于与开发团队、产品经理和利益相关者进行有效的沟通和理解。

3、数据驱动设计：Axure RP 允许使用动态数据集来创建交互原型，如表单验证、搜索功能和数据展示。这样设计师可以更好地模拟真实的用户体验和测试不同的数据情况。

4、团队协作：Axure RP 支持多人协作，多个设计师可以同时在同一项目上进行编辑和评论。它提供了版本控制、注释和反馈收集等功能，方便团队成员之间的协作和沟通。

 

使用方法：

1、创建原型页面：在 Axure RP 中，首先创建一个新的页面，并设置页面尺寸和背景样式。可以通过拖放方式添加界面元素，如按钮、文本框、图像等。

2、设计交互元素：选择一个元素，例如按钮，然后使用交互元素面板设置其交互动作。可以设置点击按钮后链接到其他页面、显示和隐藏元素、切换状态等。

3、应用条件逻辑：使用 Axure RP 的条件逻辑功能，可以根据用户的操作和输入来改变元素的行为。例如，当用户输入无效数据时，可以显示错误提示。

4、创建动态内容：使用动态面板和数据集功能，在 Axure RP 中可以创建动态内容。例如，可以通过数据集来模拟搜索功能，根据用户的输入显示相关结果。

5、设计页面流程：使用 Axure RP 的页面流功能，可以在不同页面之间创建交互流程。这样设计师可以更好地模拟用户的导航和体验。

6、生成设计文档：完成原型设计后，可以使用 Axure RP 生成详细的设计文档，包括页面规范、交互规范、注释和视觉样式。这些文档可以与开发团队和利益相关者分享和讨论。

总结：

Axure RP 是一款适用于创建复杂交互原型和详细设计文档的强大原型设计工具。它提供了强大的交互功能、详细的设计文档和团队协作功能。使用 Axure RP，设计师可以创建高度可交互的原型，并与开发团队和利益相关者进行有效的沟通和理解。通过使用条件逻辑和数据驱动设计，设计师可以模拟真实的用户体验和不同的数据情况。Axure RP 还具有版本控制、注释和反馈收集等功能，有助于团队成员之间的协作和沟通。

举例来说，假设我们正在设计一个电子商务网站的购物流程原型，以下是使用 Axure RP 的步骤：

创建页面：在 Axure RP 中，创建一个新的页面，命名为"购物流程"。设置页面的尺寸和背景样式，以便适应设备和界面设计。

添加元素：通过拖放方式添加购物流程所需的界面元素，如产品列表、购物车图标、结算按钮等。根据需要设置元素的样式，如颜色、字体和大小。

设计交互动作：选择一个元素，例如产品列表中的某个商品，通过 Axure RP 的交互元素面板设置它的交互动作。例如，当用户点击商品时，跳转到该商品的详细页面。

应用条件逻辑：对于结算按钮，可以使用条件逻辑功能来设置其可点击状态。只有当购物车中有商品时，结算按钮才可点击，否则显示禁用状态。

创建动态内容：对于购物车图标，可以使用动态面板和数据集功能来模拟购物车中的商品数量。通过更新数据集中的数值，购物车图标上显示相应的数量。

设计页面流程：在 Axure RP 中，使用页面流功能连接不同的页面，以模拟用户在购物流程中的导航和体验。例如，从产品列表页面跳转到购物车页面，然后再跳转到结算页面。

生成设计文档：完成原型设计后，使用 Axure RP 的导出功能生成详细的设计文档。文档中包括页面规范、交互规范、注释和视觉样式，以便与开发团队和利益相关者分享和讨论。

通过以上步骤，使用 Axure RP 可以创建一个具有交互性的购物流程原型，并生成详细的设计文档，以便与团队成员和利益相关者进行讨论和协作。Axure RP 的强大功能和灵活性使其成为复杂原型设计和详细文档制作的理想选择。