2、原型设计入门：Figma基础操作、低保真原型绘制、高保真原型设计原则

原型设计，说白了就是把脑子里的想法变成看得见的东西。我见过太多开发者，代码写得飞起，但一跟设计师沟通就鸡同鸭讲。为什么？因为缺少一个共同的语言——原型。

这一章，我们就来搞定这个语言。我会带你从Figma的基本操作开始，然后画低保真原型，最后聊聊高保真原型的设计原则。嗯，别急，一步步来。

2.1 Figma基础操作：别怕，上手很快

Figma是目前最流行的UI设计工具，没有之一。我当年从Sketch转Figma时，其实挺抗拒的——又得学新工具。但用了一周后，真香了。

为什么？因为它基于浏览器，不用安装，团队协作天然支持。你想想看，设计师改了个按钮，你刷新页面就能看到，多爽。

2.1.1 界面布局

打开Figma后，你会看到这几个区域：

• 左侧面板：图层列表和页面管理。所有元素都在这里堆叠，跟PS的图层类似。
• 中间画布：你的工作区。可以放多个画板（Frame），每个画板代表一个页面。
• 右侧面板：属性设置。选中一个元素后，这里可以调颜色、大小、位置、阴影等。
• 顶部工具栏：形状工具、文字工具、钢笔工具等。常用的就那几个。

2.1.2 核心操作：画板、形状、文字

你不需要学完所有功能。先掌握这三个，就能画原型了。

画板（Frame）：按 F 键，然后在右侧面板选择设备尺寸，比如 iPhone 14。画板就是你的手机屏幕。

形状工具：按 R 画矩形，按 O 画圆。按住 Shift 可以画正方形或正圆。我经常用矩形来代表按钮、卡片、图片占位符。

文字工具：按 T 键，点击画布就能打字。别纠结字体，原型阶段用系统默认字体就行。

2.1.3 组件和样式：别重复造轮子

如果你画了10个按钮，每个都重新调颜色、圆角、阴影，那你就是在浪费时间。

Figma的组件（Component）功能就是干这个的。选中一个元素，按 Ctrl + Alt + K，它就变成了组件。之后你复制出来的实例，改一个，所有实例都会跟着变。

我曾经在一个项目中，因为没使用组件，改一个按钮颜色改了30次。嗯，从那以后，我再也不敢偷懒了。

样式（Styles）同理。设置好颜色、文字样式后，保存为样式，下次直接点选就行。

2.2 低保真原型绘制：先搭骨架，再谈装修

很多新手一上来就画高保真，配色、图标、阴影全上。结果改需求时，哭都来不及。

我个人习惯是：先用低保真把页面结构和交互逻辑跑通。说白了，就是画个草图，确认功能没问题了，再考虑好不好看。

2.2.1 低保真原型长什么样？

简单说，就是黑白灰，没有图片，没有真实文字。用矩形和线条表示内容区域。

• 按钮：灰色圆角矩形，里面写「按钮」两个字
• 图片：灰色矩形，中间画个叉或写「图片占位」
• 文字：灰色横线，表示这里有一行文字
• 导航栏：顶部一个深灰色条，中间写标题

你想想看，这种原型画一个页面只要5分钟。如果产品经理说「这个功能不要了」，你删掉一个矩形就行，完全不心疼。

2.2.2 实战：画一个登录页的低保真

我们来画一个最简单的登录页。跟着我做：

1. 新建一个 iPhone 14 画板
2. 顶部画一个深灰色矩形，高度60px，写「登录」
3. 中间画两个浅灰色矩形，代表输入框。一个写「用户名」，一个写「密码」
4. 下面画一个蓝色矩形（其实灰色也行），写「登录按钮」
5. 底部画一行小字：「没有账号？注册」

你看，5个元素，一个登录页就出来了。这就是低保真的威力——快速验证。

2.2.3 交互连线：让原型动起来

Figma的原型（Prototype）模式可以让你把页面连起来。点击右上角的「Prototype」标签，然后拖拽连线：

• 从「登录按钮」拖到「首页」画板
• 从「注册」文字拖到「注册页」画板
• 设置触发方式为「点击」

这样，你点击预览，就能模拟真实的跳转效果了。拿去给产品经理看，比你说一万句都管用。

2.3 高保真原型设计原则：从能用变好看

低保真确认了功能，高保真就是让产品「看起来像真的」。这里有几个原则，是我踩过坑后总结的。

2.3.1 原则一：先定设计规范

别急着画页面。先定好颜色、字体、间距、圆角这些基础规范。

元素	建议值	说明
主色	1个主色 + 2个辅助色	主色用于按钮、链接、标题
字体	系统字体（PingFang / Noto Sans）	不要用花体字，影响阅读
字号层级	标题20px、正文16px、辅助12px	层级清晰，用户一眼能区分
间距	4的倍数（8、16、24、32）	对齐方便，视觉统一
圆角	小元素4px，卡片8px，按钮16px	圆角越大越柔和

把这些存成Figma的样式和组件。后面画页面时，直接拖组件，效率翻倍。

2.3.2 原则二：真实内容填充

高保真原型里，不要再用「Lorem ipsum」或「图片占位」了。用真实的数据。

• 文字：用真实的文案，哪怕是从竞品抄的
• 图片：用真实的照片，Unsplash上找免费的
• 图标：用统一的图标库，比如Feather Icons

为什么？因为只有用真实内容，你才能发现布局问题。比如一段真实的长文案，可能会把按钮挤到屏幕外面去。这种问题，用占位符是发现不了的。

2.3.3 原则三：注意视觉层次

用户看一个页面，视线是有顺序的。你要通过视觉设计引导用户。

• 大小：重要的东西大一点，比如标题比正文大
• 颜色：重要的东西颜色突出，比如主色按钮 vs 灰色按钮
• 间距：相关的元素靠得近，不相关的离得远
• 阴影：需要强调的元素加阴影，比如弹窗、卡片

我记得有一次，一个按钮用户怎么都找不到。后来发现，按钮颜色跟背景太接近了。嗯，这就是视觉层次没做好。

2.3.4 原则四：考虑边界状态

高保真原型不仅要画「正常状态」，还要画「空状态」、「错误状态」、「加载状态」。

• 空状态：列表没有数据时，显示什么？一个空图标加提示文字？
• 错误状态：网络请求失败时，显示什么？重试按钮？
• 加载状态：数据加载中，显示转圈还是骨架屏？

这些状态，开发时最容易遗漏。如果你在原型里画出来了，开发就会照着做。否则，他们可能直接留白。

2.4 从低保真到高保真：一个完整的流程

最后，我分享一下我个人的工作流程。你可以参考：

1. 画低保真：用灰色矩形和线条，快速画出所有页面。重点是页面流程和交互逻辑。
2. 做交互连线：在Figma原型模式下，把页面连起来。确保所有点击都有反馈。
3. 内部评审：自己走一遍流程，看看有没有遗漏的页面或状态。
4. 定设计规范：确定颜色、字体、间距、组件库。
5. 转高保真：在低保真的基础上，替换颜色、填充真实内容、加阴影和图标。
6. 最终评审：跟产品和开发一起过一遍，确认无误后交付。

这个流程，我用了好几年。它最大的好处是：前期改得快，后期改得少。你想想看，在低保真阶段改一个页面布局，只需要拖几下鼠标。到了高保真阶段再改，可能连图标、阴影、间距都要重新调。

好了，这一章的内容就到这里。下一章，我们会开始画一个真正的项目——一个待办事项App。到时候，我会带你从0到1，把原型画出来。