【UI设计培训】：UI设计中的原型图用什么工具？

Date 2024-03-31 09:32:39

设计师必须知道，在网站或应用程序开发的早期阶段，需要设计原型图，然后向开发和客户展示。

原型图的目的：

一是给自己看，方便规划整个设计，继续完成下一步；

二是开发，能更好地说服和完善软件；

第三个目的是向客户展示，更高质量的原型图可以促进合作，让客户更满意。

然而，在实践中，许多用户界面初学者对原型程度的界限不是很清楚。他们拿着原型图给客户看，有的被拒绝，有的效率低下，造成严重的沟通问题。有的拿着开发的原型给客户看，导致客户不清楚不满意，谈判过程艰难。更重要的是，拿着你看到的原型图给开发／如果顾客看，后果不堪设想。

所以接下来，让我们找出哪些工具与谁合作制作什么样的原型。

1.给自己看原型图

重点：草图

工具：UX流程图卡、白板、纸笔Balsamiq、Xmind

给自己看的原型图可以稍微简单一点，不需要太多花哨的东西。但UX流程图卡既花哨又实用，网站结构规划工具强大，网站建设者专业，覆盖54种常用UX模板，让设计师快速构建专业用户体验流程图，节省大量时间，结构清晰。帮助设计师和产品经理把握产品全貌，思考用户体验，聚焦重要环节。

UX流程图卡

官网：https://www.uxdock.com/

这张卡可以直接与白纸板和笔交互，节省了用笔画线和框架的时间。UX流程图卡可以让你想出无数的想法

原型解释，需求可视化

流程卡是将需求转化为具体设计稿的一种非常有效的思维工具。

讨论方案，随时修改和纠正错误

修改、移动、自定义都很容易，大大节省了创建修改的时间成本。

头脑风暴，快速构建思维模式

操作简单，帮助设计师和产品经理快速记录想法。

Balsamiq Mockups

网址：https://www.macbl.com/app/graphics-design/balsamiq-mockups

线框图可以更有效地分类。虽然这个工具没有交互设置，但素描风格也是一个很好的灵感来源。虽然组件不多，但也足以满足原型图的要求。

Xmind

官网：https://www.xmind.cn/xmind8-pro/

这是一个帮助你整理自己的思维导图，更好地改进所有的过程步骤，简单易用，美观，功能强大，视觉思维模式高效，可扩展、跨平台、稳定性和性能，真正帮助用户提高生产率，促进有效的沟通和合作。

2、给开发人员看的原型图

重点：交互

工具：UX流程图卡，Axure RP、Mockplus

每个人都看到一切都是不同的，所以为了更好地与开发人员达成协议，我们应该尽最大努力使用工具制作更直观的原型图，以减少误解，提高效率，加快节奏。

UX流程图卡在这里又派上用场了，不仅仅是为了给它设计师自己看，也可以拿出卡片和开发人员讨论跳转互动，随时修改纠错。

AxureRP和Mockplus是高级版本。在敏捷开发的团队中，时间是宝贵的。我们想要的是创造更快更好的效果来表达最接近客户想法的设计，然后更好地与开发沟通和讨论。

AxureRP

网址：https://www.macbl.com/app/business/axure-rp-pro

它是一种专业的快速原型设计工具，允许负责定义需求和规格、设计功能和界面的专家快速创建应用程序或网站的线框图、流程图、原型和规格描述文档。

Mockplus

官网：https://www.mockplus.cn/product/mockplus

它是一个简单、快速、免费的原型工具，适合软件团队和个人在软件开发的设计阶段使用。该工具具有低保真度、无需学习、快速启动等功能特点，可帮助用户轻松制作专业原型设计。

3、向客户展示原型图

重点：精致

工具：Origami Studio、Framer

对于不太了解软件设计的客户来说，他们需要一个99.99%接近应用程序的原型。

此时请使用Origami Studio、Framer这两种工具，为什么这种工具不仅能保证精致，还能保证高保真我到这个时候才拿出来？原因很简单。这两种工具的步骤相对复杂，后者基本上依赖代码。无论是画面效果还是交互效果，这两种工具都可以与真实的应用程序相媲美，从而达到真实的效果。但由于要求高，时间成本高，不建议日常使用，最后可以预防。

Origami Studio

网址：https://www.macbl.com/app/graphics-design/origami-studio

Facebook推出了基于iOS和Android设计风格的Facebook设计语言的原型开发工具。该工具提供了必要的设计元素、动画效果和各种图书馆，使产品设计师能够更快、更方便地开发原型。

Framer

网址：https://www.macbl.com/app/graphics-design/framer

它是制作屏幕设计和交互式原型的最佳工具。让你从简单的代码开始你的设计生活。

以上是三种情况下的基本说明。这里没有提到很多优秀的工具。希望大家能根据自己的实际情况合理选择工具，更好的沟通，更快的开发，做出更好的设计。

以上是优漫教育小编为您介绍的“[UI设计培训]：UI设计中的原型图用什么工具？相关内容，学习UI设计培训，您可以参考优曼教育提供的UI学习路线。学习路线包括PS软件介绍、人工智能和品牌设计、视觉表达技术、网络视觉设计、图标设计、产品交互、移动终端设计等。根据优曼提供的UI学习路线图，您可以清楚地了解您需要掌握的知识！

上一篇：平面设计避坑设计指南

下一篇： ps抠图花样多，常用四大抠图方法分享

课程推荐

— Course recommendation —

红喵设计

红喵设计

红喵设计

红喵设计

红喵设计

红喵设计

红喵设计

红喵设计

more

【UI设计培训】：UI设计中的原型图用什么工具？

课程推荐

— Course recommendation —

课程

友情链接

关于红喵

快速导航

红喵平面设计