原型设计对于开发车联网移动应用至关重要，可确保其满足用户需求并提供无缝体验。
本文探讨了梅赛德斯-奔驰子公司 MBition 如何使用 ProtoPie 为 Mercedes me 移动应用制作原型。你将了解他们的设计流程、他们如何借助 ProtoPie 组件库构建设计系统，以及为什么 ProtoPie Connect 非常适合原型化车联网体验。
请在下方查看我们的直播回放《Prototyping Connected Experiences: A Look at the Mercedes me App》，或继续阅读，了解来自 MBition 设计流程中的宝贵洞察与工作流示例。
概览
认识 MBition：塑造汽车 UX 设计的未来
Mercedes me App 原型设计：MBition 的创新方法
什么是 Mercedes me App？
Mercedes me App 原型流程洞察
使用 ProtoPie 组件库的 9 条最佳实践
如何构建 ProtoPie 组件库结构
使用 ProtoPie 组件库的优势
使用 ProtoPie Connect 原型化车内互联体验
认识 MBition：塑造汽车 UX 设计的未来
MBition 是梅赛德斯-奔驰的子公司，拥有一支专注于 UX 设计的团队，致力于塑造未来的车载用户体验。MBition 成立并总部位于柏林，是 Mercedes-Benz 软件中心不可或缺的一部分，积极参与汽车研发。团队以“雄心”（双关）为驱动力，致力于为梅赛德斯-奔驰信息娱乐系统打造创新且无缝的用户体验，一次一个原型。MBition 在保加利亚索非亚还设有第二办公点，两地共有 900 多名来自不同国家的员工。
你可能会好奇 MBition 到底是做什么的。一句话概括就是：“Designing the Future of Mercedes-Benz Infotainment Systems（设计梅赛德斯-奔驰信息娱乐系统的未来）。”在这里，信息娱乐（“information”和“entertainment”的结合）指的是通过一个或多个显示屏向汽车用户提供的内容。
查看下方视频，看看这在实践中的一些示例。
细心的你可能已经在视频展示的汽车中注意到一些信息娱乐元素，包括
仪表盘；
HUD（抬头显示）；
HU（主机）；
PD（副驾显示屏）。
梅赛德斯-奔驰信息娱乐系统。
视频还展示了另一款产品——Mercedes me App，我们将在接下来的章节中进一步了解。
Mercedes me App 原型设计：MBition 的创新方法
什么是 Mercedes me App？
Mercedes me app 于 2020 年 10 月首次发布，作为梅赛德斯车主的配套应用。
2020 年 10 月，Mercedes me App 作为梅赛德斯-奔驰车主的配套应用推出。该应用让用户可以通过多种方式与车辆交互，包括控制车辆和查看车辆状态。用户可将车辆与应用配对，并在移动中使用远程启动发动机、远程车门锁止与解锁、车辆定位等服务。
在我们的直播 Prototyping Connected Experiences: A Look at the Mercedes me App 中，我们采访了来自 MBition 的 UI/UX 设计师 Szymon Kościelniak 和 Feri Irsanto Pujianto。他们分享了在设计工具栈中使用首选工具 ProtoPie 的洞察与最佳实践。
Szymon 说：“Mercedes me 是我在 MBition 第一个使用 ProtoPie 做原型的产品。我们尝试过一些不同工具，但最终选择了 ProtoPie，我非常乐于使用它。”
为什么 ProtoPie 是为 Mercedes me App 做原型的理想选择。
他解释说，在开始做原型时，他们希望一开始就把事情做对，因为他们清楚自身限制，例如
团队规模相对较小；
时间压力；
需要高保真原型来说服利益相关方。
MBition 团队确实有坚实基础可依托，包括在 Sketch 中建立的带组件库设计系统。然而，随着新功能持续发布，设计师需要不断验证测试用例。换句话说，他们需要一个高保真原型工具，能够帮助他们快速、轻松地开发功能完整且可交互的原型，这也让他们选择了 ProtoPie。
Mercedes me App 原型流程洞察
在本节中，我们将看看 MBition 创建移动应用原型背后的工作流。
下面是一个展示首页标签页的原型。在当前状态下，用户可以操作车辆锁定功能。
Mercedes me App 原型中的工作流示例。
1. 使用 Sketch 概念稿
Feri 说：“假设我们想扩展原型并添加远程启动发动机功能。我们会先查看概念团队给出的功能概念。在这个示例中，概念被简化了。”
下方概念包括按下启动、页面进入等待状态，随后启动发动机，并提供包含停止按钮的用户界面。
远程启动发动机功能的工作流示例。
2. 使用模板
Feri 说：“我们在 ProtoPie 中使用已创建的模板开始构建，这些模板展示了页面的不同模式。模板不仅包含设计布局，也包含基础交互逻辑。”
以下步骤包括：
找到合适的模板。
将场景复制到他们的配置中。
重命名所有内容（例如变量、数值、警告）。
检查变量是否基于相同逻辑正常工作。
根据要创建的功能重命名场景，并替换占位标题。
替换图标、按钮标签和其他通用文本。
添加 Tap 触发器和 Jump 响应。
在首页标签页中复制 Tap 触发器。
创建跳转到远程发动机页面的 Jump 响应。
团队一开始使用了预定义模板，其中不仅包含设计布局，也包含基础交互逻辑。
3. 使用 Sketch 导出功能
有时，如果某个元素在原型中不计划交互，那么组件可能并非必要。Feri 说：“这种情况下，我们可以直接使用导出功能，或通过 [ProtoPie] 插件 直接从 Sketch 导出元素。”
在该示意中，当发动机处于激活状态时，信息行和单元项元素应可见。
从 Sketch 导出时，你可以选择要导出的元素。
该流程涉及以下步骤：
根据发动机状态使用正向响应。
设置与约束相关的一切，确保其保持在底部。
重命名容器和元素以提供清晰信号。
将所有内容设为零容量。
确定底部操作栏在激活时如何缩放，并保存该值（此处为 206）。
根据发动机状态，将底部操作栏缩放至高度 206，并对信息行和单元项应用相反响应。此处二者均设为 100。
重命名响应以确保清晰。
之后，对关闭与发动机状态执行相反设置，将其改为零，并将底部操作栏缩放回 150
使用 ProtoPie 组件库的 9 条最佳实践
MBition 团队决定在其原型方法中使用 ProtoPie 组件库。
在移动应用原型设计过程中，他们建立了一些最佳实践，帮助团队设计工作流更高效、更透明，减少开发功能原型所需的时间和精力。
为变量、条件、触发器和响应命名是构建有序组件库的关键。
1. 为变量命名
通过为变量添加前缀（例如“int_”“str_”“bool_”），你可以更快识别变量类型，而不必每次都点击并查看检查器。
2. 为条件命名
同样地，为条件语句命名可提升团队中其他成员的可见性与透明度。
3. 为触发器和响应命名
为了更快掌握逻辑概览，也请为触发器和响应命名。
将库拆分为更小的逻辑块可支持协作方式，并加快库上传速度。
4. 使用多个库
MBition 团队拥有许多组件，因此他们发现将库拆分为更小、逻辑清晰的块非常实用。这可以支持协作式工作，并加快库上传速度，让不同团队成员可同时处理不同区域。
5. 使用命名/背景配色方案
MBition 在其库中使用了特定命名和颜色编码，以强调不同库/组件之间的差异。
6. 对触发器分组
将触发器按逻辑块分组，特别适用于逻辑较多、需要更好概览的场景。这也有助于在组件之间保持一致性，从而提升工作流效率。
使用动态值而非硬编码在你希望保持灵活性时尤为重要。
7. 避免硬编码值
如果你希望保持灵活性，使用动态值而非硬编码尤为重要。
Szymon 说：“我看到很多用户偏好硬编码，而每次他们回到原型时，都需要重建原型，因为元素只是稍微移动了一点。”
8. 使用不区分大小写的条件语句
通过移除大小写敏感性，你可以让可覆盖变量更稳健一些。
Szymon 说：“我们会尽量把条件中的字符串值统一成相同格式。比如始终使用大写。这样即使有人用小写或驼峰开头，最终也不会有影响。”
9. 记录你的组件
ProtoPie 中的 组件指南 功能可作为记录组件的工具，供团队成员参考。
在 MBition，样式化能提升文档透明度；如果你与用户或多位共同维护库的同事协作，这一点非常重要。
如何构建 ProtoPie 组件库结构
MBition 团队将组件库拆分为更小的块。下图展示了构成其组件库的不同类别，以及它们之间可能的关联方式。
组件库被拆分为 Helper、Assets 和 Logic-based 库。
动态组件可包含来自 helper 和 asset 库的元素，例如文本样式。
例如，动态组件可包含来自 helper 和 asset 库的元素，如右下角所示的文本样式。
让我们来看看各个独立库。
1. Helper 库
Helper 具有严格的功能性，设计用于接收并返回数据。它们不包含设计元素，也没有资产或其他组件。通常，helper 会作为子元素用于不同组件中。
通常，helper 会作为子元素用于不同组件中。
一个简单例子是计时器 helper：当计时结束时发送信号。
更复杂的例子是图层样式 helper，它复刻了 Sketch 或 Figma 等设计工具的图层样式功能。它接收颜色代码作为输入，并输出对应的十六进制代码，同时兼容浅色模式和深色模式样式。样式 helper 的关键优势在于可同时控制所有组件，无需逐个修改颜色。这时 ProtoPie 的 parseJson function 就非常有用，因为它提升了管理和获取关键信息（如颜色代码和值）的效率。
浅色模式与深色模式。
2. Asset 库
Asset 库是各种组件的集合，包括：
图标：图标使用最少逻辑，可通过 ProtoPie 的 override 功能轻松替换。其职责包括初始化颜色、接收来自父组件的颜色设置器，并借助 helper 应用着色。
文本样式组件：其逻辑与图标相似，但功能更多。它们模拟设计系统，并可接收来自父组件的设置器以修改文本。这些组件还会根据文本长度自动缩放或调整布局，并将高度回传给父组件。
静态组件： 需要的逻辑最少，主要聚焦于初始化颜色和样式。它们使用 helper 来应用颜色，并可针对浅色模式与深色模式采用特定样式。这些组件由矢量、PNG 或视频素材组成，便于应用视觉设计变更而不破坏组件逻辑。
图标组件库。
3. 基于逻辑的库
动态组件可以嵌套来自其他库或同一库的组件。
动态组件用于存储功能逻辑，可嵌套来自其他库或同一库的组件。它们在父子组件间分发信号，并可能包含可覆盖变量（如状态）。
以下是一些示例：
Control Slider 组件 存储状态和位置变量。父组件可通过设置器覆盖它，且其值会回传给父组件。成功交互会向父组件触发信号。
类似地，Slider 与 Status Line 组件 会存储状态、位置、状态值、标题和副标题变量。它们可被父组件覆盖。Status Line 组件还会基于文本高度自动缩放。
通过组合组件，不同组件会通过发送/接收机制进行通信以实现交互。例如，切换滑块负责设置车门开/关状态。依据状态，信号会分发到各个组件，如状态行、汽车插图组件以及滑块本身。
另一方面，地图组件是面向地图场景的逻辑型组件。它们沿用动态组件库中的相同概念，但规模更大。
Mercedes me App 中使用的地图组件示例。
在上方示例中，所有元素都来自组件库。它使用陀螺仪传感器检测设备旋转，并利用用户与车辆位置坐标实现“focus into”交互。
在上方示例中，所有元素都来自组件库。它使用陀螺仪传感器检测设备旋转，并利用用户与车辆位置坐标实现“focus into”交互。
使用 ProtoPie 组件库的优势
Feri 告诉我们，从最初阶段开始，设计团队就知道他们需要“最小化高保真原型的劣势，例如创建原型投入高、可维护性低。”他说，他们在 ProtoPie 中使用组件库进行原型设计的方法带来了多项收益。
节省时间。有了方法论，团队可以节省大量原本用于从零创建原型的时间。
易于维护。 借助指南和通用规则/流程，MBition 团队能够维护更大型的原型。
以用户为导向。如果其他同事计划参与原型工作，他们可以更低摩擦地快速上手。
可扩展。随着概念成熟，可向原型中加入更多功能。
协作性强。 不同人员可在不同库中工作而不会产生合并冲突。
无需代码。 高保真交互无需编程——只需逻辑思维。
ProtoPie 中组件库的优势。
使用 ProtoPie Connect 原型化车内互联体验
梅赛德斯-奔驰生态中的桥接应用与 ProtoPie Connect。
那么，在 MBition 的语境下，**互联体验**究竟是什么？
本文开头的视频展示了多种设备，这些设备要么可在车内找到，要么可与汽车连接使用。 借助 ProtoPie Connect，可以面向所有这些设备进行原型设计，甚至让它们彼此通信。
还可以使用桥接应用为原型注入车辆数据或不同交互点。
Szymon 说：“很棒的是，你可以在手机、平板、笔记本电脑上测试同一个原型，也可以在正确搭建下在真实车辆中测试。”
Szymon 补充说：“只要你有 ProtoPie Connect，我都强烈建议去探索这个庞大的可能性世界。花时间去使用它，去尝试，并构建你自己的桥接应用。”
最后，让我们再回到视频一秒钟。还记得刘易斯·汉密尔顿手里的手机吗？
你猜对了——那个原型就是用 ProtoPie 制作的。
使用 ProtoPie 制作的原型。
用 ProtoPie 改进车载用户体验
汽车 UX 原型设计 对汽车行业的发展与创新至关重要。它使公司能够将新想法落地、优化设计并提升用户体验。
借助 ProtoPie，企业可以显著缩短开发时间，促进设计与工程团队更好协作，并交付能打动客户的前沿车型。立即预约演示，了解 ProtoPie 如何变革你的车内原型流程。
