行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

行业

汽车

航空

金融

游戏

医疗科技

物联网

数字产品

使用场景

面向企业

面向个人

面向团队

用于教育

主要特点

硬件与系统集成

公测版

ProtoPie MCP

多设备原型设计

交互逻辑

开发交接

ProtoPie AI

用户测试

插件

Figma

Sketch

Adobe XD

洞见与灵感

博客

白皮书

客户成功案例

活动与网络研讨会

ProtoPie 画廊

产品学习与支持

ProtoPie 学堂

下载 ProtoPie

产品文档

社区

提示

7

阅读时间

关于打造高保真 MacBook 体验原型的 5 个经验教训

探索在 ProtoPie 中进行高级原型设计的 5 个技术技巧,以及我们的实习生一路上关于情境和用户体验所学到的更重要经验。

蒂姆·韦德特, ProtoPie 内容撰稿人
connect ai agents like claude, cursor and more to protopie via mcp

我们请我们的创意技术实习生 Joy 挑战一个重大任务:创建一个高保真原型,展示 ProtoPie 最具代表性且强大的多个功能。最终成果是一个互动且充满趣味的、对熟悉的 MacBook 设置体验的重现,并且她是从零开始搭建的。

我们对此印象深刻,因此请她分享在这一过程中学到的内容。以下是她向我们讲述的使用 ProtoPie 的体验。

“当我刚被分配这个项目时,最大的挑战是如何避免让原型看起来像一堆割裂功能的拼凑。灵感来自我意识到,MacBook 的设置流程本身就可以作为统一概念,每一个步骤都映射到一个具体的 ProtoPie 功能。


Macbook setup accessibility screen

这个项目被证明是一段非常棒的学习经历。虽然完整教程内容很丰富,我还是想分享我学到的五个最有趣的技术技巧,以及最后一个更大的收获——原型设计的力量。”

[点击这里 查看详细的分步教程,了解你如何亲手创建这个 pie!]

亮点 1:从实时文本输入生成字母组合


Generating Monograms from Live Text Input

这是最有成就感的部分之一。我希望当用户输入姓名时,字母组合能够实时更新。

诀窍是使用一个Detect 触发器,实时监测“Full name”输入框。通过公式,我构建了用于检查文本是否包含空格的逻辑。

  • 如果没有空格,就把输入值赋给First_Name变量,并取其首字母作为 Initial。

  • 如果存在空格,就把文本拆分为First_NameLast_Name变量,再组合两者首字母生成双字母组合。

亮点 2:动态改变语音播放速度


Dynamically Changing Speech Speed

对于“Speak Selection”功能,我不希望文本转语音只有一种速度。我希望用户可以在正常、快速和慢速播放之间进行选择。

我的实现方式是:每次点击播放按钮时发送一条“Check Rate”消息。该消息会检查用户选择,并将对应时长(Normal/Fast/Slow)赋给Speak response,从而让 Selected_Text 以所选速度播报。随后我使用带延迟的“Start Playing”和“End Playing”消息来管理播放状态,并相应更新 UI。

亮点 3:构建自定义语音命令超时机制


Building a Custom Voice Command Timeout

语音助手需要知道当用户什么都不说时该怎么做。我没有让交互直接停止,而是构建了一个自定义超时处理器。

解决方案是创建一个小型不可见方框,并使用“Timer Start”消息让它在 10 秒内横穿屏幕。一个Detect 触发器会持续检查该方框是否到达目标位置。如果到达,就意味着用户已超时。此时原型会停止监听,说“抱歉,我无法理解”,并根据用户在流程中的当前位置提示下一步可以说什么。

亮点 4:创建自动滚动的实时字幕


Creating Auto-Scrolling Live Captions

为了让“Live Captions”功能正常工作,随着新词出现,文本容器必须自动滚动,以确保最新的转写内容始终可见。

为此,我创建了一个Text_Height变量,持续跟踪文本容器增长时的高度。然后我使用一个Detect 触发器来检查该高度是否超过可见滚动容器的高度。如果超过,就会自动触发Scroll response,使容器向下移动恰到好处的距离,以显示新的一行文本。

亮点 5:处理播放期间预先输入的文本


Handling Pre-Typed Text During Playback

在“Type To Speak”功能中,用户可能会在原型已经播报时输入新的文本。我需要优雅地处理这种“缓冲”输入。

解决方法是利用播放流程中的“End Timer”处理。当原型播报结束后,它会检查Preparing_Input变量。

  • 如果该变量中有内容(意味着用户输入了新内容),就用新的预备文本替换旧文本。

  • 如果该变量为空,就直接清空输入框。这样可以确保用户输入不会丢失,交互体验也更顺滑。

[点击这里*** 查看详细的分步教程,了解你如何亲手创建这个 pie!]***

一个更大的收获:语境决定一切

除了技术技巧之外,这个项目还让我学到了几条关于用户体验以及原型设计角色本身的关键经验。

  • 原型本身也可以是内容:我以前一直认为原型只是用于测试功能的最后一步,但这个项目让我看到,交互式原型本身就可以成为强大的学习工具。它让用户能够亲身体验产品,并真正触摸和感受它的可能性。

  • 熟悉感是一种超能力:人们并不总是需要全新的东西。通过围绕熟悉的 MacBook 设置流程构建原型,我能够让 ProtoPie 的高级功能显得更易接近、更直观,尤其是对初次使用者而言。基于共享心智模型进行设计非常有效。

  • 统一概念至关重要:我最初的尝试看起来像一个割裂的演示,因为我只是把功能硬塞进去。直到我把项目重新框定为“设置”这一概念,一切才真正顺畅起来。这让我明白,语境和叙事与内容本身同样重要。你呈现功能的方式会塑造整个体验。

想了解更多关于如何开始使用 ProtoPie 的技巧与窍门吗?

你可以在我们的ProtoPie School专区找到大量学习资料,其中包括可直接使用的示例 Pies!