Source 是一家产品设计与开发机构，受一个雄心勃勃的目标驱动：无论环境多么复杂，都要为客户打造同类最佳的数字产品与体验。这一雄心促使他们与欧洲一些最负盛名的品牌合作，其中包括欧洲首家院线公司 Pathé Cinemas。
随着 Pathé 希望在竞争激烈的市场中进一步巩固领先地位，这家公司找到 Source 来优化其应用 UX 中的情感层面。对 Source 而言，这意味着要快速开发一个移动应用原型，以赢得利益相关方的认可。
而让这一切成为可能的工具是？ProtoPie。
概览
Pathé Cinemas 的挑战：静态的移动应用设计
设计中“情感”的概念
原型设计在 Source 产品设计工作流程中的作用
设计机构理想的原型工具
Source 如何使用 ProtoPie 为“情感”做原型
开发移动应用原型的四个步骤
用原型获得利益相关方支持
Pathé Cinemas 的挑战：静态的移动应用设计
Pathé Cinemas 以卓越的观影体验闻名，他们看到了提升移动应用用户体验的机会。
高层管理团队发现可以为 Pathé 应用加入“惊艳”元素，以与领先的流媒体平台竞争。虽然该应用功能齐全，但他们设想的是一种更具动态感与流畅性的设计，从而增强导航、过渡和微交互。
这一反馈凸显了一个令人兴奋的机会：为应用注入情感吸引力，以呼应影院体验以及 Pathé 品牌本身带来的那种激动感。
自然地，Source 团队对此感到非常兴奋，并已完全准备好迎接这一挑战。
设计中“情感”的概念
在 Source，他们坚信应用不仅应满足功能需求，也应让用户感到愉悦。这种方法并不会损害业务表现。相反，通过数字触点传递愉悦与乐趣，能够提升品牌偏好、客户满意度和忠诚度。
Source 的高级产品设计师 Théo Grandin 解释说：“在这个项目语境下，‘情感’这一概念旨在体现与 Pathé 影院相关的高端定位和沉浸式娱乐体验。”
然而，移动应用中的“情感”概念往往在亲身体验之前都较为抽象。这使得原型设计成为应用设计流程中极其宝贵的一步，因为它让设计师能够在交付给开发人员之前，可视化并测试情感元素将如何发挥作用。
原型设计在 Source 产品设计工作流程中的作用
Source 的 Théo Grandin 解释说，他们的团队由设计师和开发者共同组成，并将代码确立为事实依据，因为“终端用户交互的是编码后的界面，而不是设计工具。”
在他们的产品设计流程中，他们希望通过以下方式让设计到开发的交接尽可能顺畅：
建立通用语言；
交付已编码的资源；
提供全面的文档。
原型设计被纳入 Source 的交接文档中，以确保设计稿与线上产品之间具有高保真和一致性。
在 Pathé 应用 UX 项目中，他们使用原型在真实智能手机上演示情感化设计原则，以说服利益相关方。
为什么 ProtoPie 是像 Source 这样的设计机构的理想原型工具
由于团队已经熟悉 ProtoPie 的功能与能力，Source 团队认定它是本项目的理想原型工具，因为他们希望：
在真实移动设备上测试原型。 这家设计机构需要确保原型在真实移动设备上运行顺畅，结果不仅要可用，还要流畅且响应迅速。
模拟 iOS 原生功能。 该项目需要逼真地模拟 iOS 特有手势和功能，例如 长按、拖拽、捏合、使用加速度计以及实现画中画。ProtoPie “开箱即用”支持这些能力，使 Source 团队能够集成可提升用户体验的复杂交互。
更深入地微调过渡与动效。 ProtoPie 对动画时序和缓动选项的控制，让设计师能够不断微调这些方面，直到达到期望的情感效果。
现在，让我们来看看他们如何使用 ProtoPie 设计这个移动应用原型。
Source 如何使用 ProtoPie 为“情感”做原型
在构建原型时，Source 团队聚焦于三个核心轴线：
沉浸感。这通过信息流式滚动来实现，结合视频和更大的海报，把用户带入视觉丰富的环境中。
导航流畅性。 应用设计包含直观的过渡与手势，例如拖拽关闭和长按评分，确保应用既实用又有趣。
标志性时刻。 为了让用户的体验更难忘，产品设计师聚焦关键交互，例如在购票确认时使用精致动画。
开发移动应用原型的四个步骤
在原型制作过程中，Source 团队由三名设计师组成，并与 Pathé 的一名产品经理和一名市场总监紧密合作。
以下是 Source 团队一步一步、系统化推进开发的方法：
1. 创建首个端到端流程
设计机构团队首先在 ProtoPie 上创建首个端到端流程，并加入基础动画。
2. 测试以找到合适的时序与缓动
在完成完整流程原型后，团队进行了大量测试，以确定每种动画类型的最佳时序与缓动效果。
3. 统一原型
在确定最佳设置后，团队将精力集中于统一原型，以在所有元素上提供一致的用户体验。
4. 为开发交接编写规格文档
最后，他们在 Figma 上使用幻灯片记录规格，用于开发交接。
在整个过程中，Source 团队为客户细致记录了所有动画原则——这也促成了一个新的规格模板，供他们在未来项目中复用。
用原型获得利益相关方支持
原型完成后，下一步是向 Pathé 的利益相关方展示。
Source 团队没有提供具体说明或场景，而是直接交付了一台已加载原型的设备。
该原型被设计得如同真实应用，所有页面和关键功能都已实现。通过让利益相关方自由探索并交互——无论是浏览电影、观看预告片，还是模拟购票——Source 团队能够观察他们的自然反应。
“使用 ProtoPie 的主要优势在于，实时高保真原型比数百张设计稿更有冲击力，”Théo Grandin 告诉我们。“我们知道每个人看幻灯片都会感到无聊。”
最终，Pathé 的利益相关方印象深刻，并立即开始讨论将这些新功能整合到应用中的时间表。他们的强力支持清晰地表明，已准备好在应用的下一次更新中整合许多提议的改进，凸显了原型在提升用户体验和契合品牌创新精神方面的能力。
尽管 Source 并不总是在原型阶段推进到如此深入，Théo Grandin 告诉我们，这个项目为他们提供了一个具体案例，证明高级原型工具在特定场景中的实用性与有效性。
Théo Grandin 进一步补充说，如果不使用 ProtoPie，他们“无法在如此短的时间（2 周）内实现高质量成果。”
用 ProtoPie 将你的移动应用设计提升到新高度
ProtoPie 让超过 15,000 家公司的设计师和开发者能够在最终构建之前就打造复杂的高保真原型。如果你和你的团队已准备好将移动应用愿景变为现实，今天就免费开始使用 ProtoPie 吧！
