线框图 原型 区别：项目该先做哪一个？

线框图 原型 区别在哪？线框图是一份朴素的布局，显示屏幕上的各个元素放在哪里。原型是一个可以点击的模型，显示产品如何流转。大多数网站、App 和 SaaS 项目两者都需要，先做线框图，再做原型。简单的网站往往做到线框图就够了。App 则不应该跳过原型。

线框图还是原型：先做哪个？

先做线框图，再做原型。线框图确定每个屏幕上放什么。原型则测试用户能不能在这些屏幕之间顺利操作，并完成一项任务。

效果图介于两者之间。下面用一句话说明这三个词，方便你向团队转述：

• 线框图：单个屏幕的朴素、无色布局，由方框、文字和按钮组成。
• 效果图（mockup）：一张屏幕的静态图片，带有真实的颜色、字体和图片，但不能点击。
• 原型：一个可以点击的模型，行为和真正的产品一样，背后却没有真实的代码。

不妨想想盖房子。线框图是平面图。效果图是上好漆、完成装修后的渲染图。原型则是一次实地走查：你推开一扇扇门，看看各个房间是否相通。在至少做完第一样和最后一样之前，你不会去灌水泥。

什么是线框图？

线框图是单个屏幕的简单布局，显示内容和操作放在哪里。它用灰色方框、占位图片、普通文字和按钮来表示。它故意不用品牌色，不用照片，也不做修饰。

这份朴素正是关键。线框图改起来很便宜，所以挪动一个注册按钮，或者删掉整个板块，只需几分钟，而不是几天。它也让讨论集中在结构上。当没有人在争论蓝色对不对时，你就可以问一个更好的问题：这是不是对的页面，上面放的是不是对的内容？

举个小例子：一家记账公司的落地页线框图，可能包括一个标题框、三个服务框、一条客户评价栏，以及一个写着“预约通话”的按钮。你一眼就能看出，价格这个问题没有地方放，在任何人开始设计之前就能补上。

养成几个习惯，线框图会更有用：

• 每项任务画一个屏幕，例如注册、预约参观或支付发票，让每个屏幕只负责一件事。
• 标题和按钮用真实的文字，不要用占位文字。真实的文字会暴露放不下的布局。
• 每个屏幕都要显示主要操作，并让它成为最显眼的元素。
• 先画新用户获得第一个结果所需要的屏幕，再补上其余的。

什么是原型？什么是低保真原型？

原型是产品的可点击模型，行为和真实产品一样，背后却没有真实的代码。你点一下按钮，就会进入下一个屏幕。你填写表单，就会看到确认信息。什么都不会保存，也不会扣款，但你可以看着真人试用整个流程，看看他们在哪里卡住。

原型按保真度来分。保真度指的是它在外观和手感上有多接近成品。低保真原型比较粗糙：通常只是把简单的线框图页面连起来，让你测试步骤的先后顺序。高保真原型用的是最终的颜色、字体和图片，用起来几乎和正式上线的产品一样。低保真修改起来更快，成本也更低。高保真更适合用于最终确认，也适合拿给投资人或相关负责人看。

还有一种是纸面原型。它是一组画在纸或卡片上的手绘页面，由一个人扮演电脑：有人指向按钮时，他就换上对应的那一张。这就是线框图和纸面原型的主要区别。线框图是一张给人看的页面布局。纸面原型是一张用手演示的草图，用来测试流程。线框图可以是这两者的起点。

要避免的错误，是在该测试流程的时候去测试布局。如果你想知道用户能不能在三步之内完成结账，一张线框图是回答不了的。你需要的是他们可以点着走完的东西。

视觉稿属于哪一步？

视觉稿介于线框图和原型之间。它是一张静态的、样式完整的页面图片，最终的颜色、字体、图片和标志都已就位。它展示产品将会是什么样子，但不展示产品会怎么运作。

想象一张首页图片：用上了你的品牌色、真实照片和醒目的标题。你可以欣赏它，也可以认可它的外观，但你没办法点菜单，也打不开表单。这就是视觉稿。当它的各个页面被连接起来，让人可以一页页点下去，它就成了高保真原型。

要避免的错误，是把视觉稿当成产品行得通的证明。好看的图片可能掩盖混乱的流程。用视觉稿来确定外观，用原型来检查步骤。

线框图和原型的并排对比

线框图和原型的区别，说到底就一点：线框图显示东西放在哪里，原型显示你使用它们时会发生什么。下面的表格把视觉稿加进来作为中间一步，这样你可以一次看清这三者。

主要的取舍在于速度和证明之间。线框图修改起来又快又便宜，但它只能证明布局是合理的。原型要花更多功夫，但在这三者中，只有它能显示真正的用户能不能顺利走完这些步骤。

这里有一条简单的判断规则。如果你的问题是“这个应该放哪里？”，就做线框图。如果你的问题是“有人能完成这件事吗？”，就做原型。

你应该先花钱做哪一个：网站线框图，还是应用原型？

把钱花在能回答你最大风险的那一步。对简单的网站来说，风险是版面杂乱，所以线框图就够了。对应用或 SaaS 产品（人们在线使用、通常按订阅付费的软件）来说，风险是流程令人困惑，所以在任何人动手写代码之前，你需要一个可以点击的原型。

来看一个实际的例子。一家水管维修公司的五页网站,需要用线框图来确定电话号码、服务列表和报价按钮放在哪里。预约类应用则需要原型,因为真正的问题是:客户能不能在没人帮忙的情况下选好时间并确认。

有两个陷阱要避开。第一,太早追求精美。评审的人一看到颜色和照片,就会去评论标志,而不是版面布局,真正的问题反而被忽略了。第二,AI 工具现在几分钟就能生成好看的页面,让人很容易从错误的层级起步。一张生成出来的漂亮页面只是视觉稿,并不能证明流程行得通。

Figma 是一款很受欢迎的设计工具,可以制作线框图、视觉稿和原型。但工具本身并不是决定因素。先想清楚你需要弄明白什么,再选择能帮你弄明白的那个层级。

AppDesign360 如何处理线框图和原型?

AppDesign360 会在写任何代码之前,先做好版面布局和可点击的原型,并由你来确认两者。这样的顺序,能在代价还小的时候就发现那些日后花费高昂的错误。具体步骤如下:

1. 你预约一次免费的 20 分钟沟通电话。
2. 你会收到一份书面的工作范围说明,里面有固定价格和上线日期。
3. 在最初的两周里,团队会设计用户流程,并制作可点击的原型。
4. 你点击体验并确认通过。在此之前,不会写任何代码。
5. 开发以两周为一轮冲刺,每一轮结束时,你都能在测试环境链接上看到可运行的软件。

付费的第一步叫作 Blueprint。对于手机应用,App Blueprint 会提供可点击的原型、技术规格和开发报价,起价 $1,250。SaaS Blueprint 的价格为 $1,250 至 $2,500。之后,手机应用的开发,按双方议定的入门范围,起价为 $3,500;而范围明确的 SaaS MVP 起价为 $15,000,参考时间表为 8 到 10 周。

对于只有一个粗略想法的客户,这套方法同样有效。The Motley Fool 的 Max Keeler 说,AppDesign360 把他笼统的一堆说明和需求,变成了一个出色的原型网络应用,界面美观,而且好用。

如果你不确定自己的项目需要线框图、原型,还是两者都要,欢迎来到 appdesign360.com 预约免费沟通电话。聊完之后,你就会知道该先为哪一步付费。