嘉宾分享
汽车用户体验原型设计：Mercedes Me应用案例研究
了解MBition如何使用ProtoPie来对Mercedes Me应用进行原型设计，并了解ProtoPie组件库的最佳实践。
Iulia Sorodoc, Product Marketing Manager
July 3, 2024
原型设计对于开发连接汽车的移动应用至关重要，我们必须确保它们能够满足用户需求并提供丝滑的体验。
在这篇文章中，我们会探讨梅赛德斯-奔驰子公司MBition如何使用ProtoPie来对Mercedes me移动应用进行原型设计。你会了解到他们的设计过程，如何使用ProtoPie组件库构建设计系统，以及为什么ProtoPie Connect是原型设计连接汽车体验的理想选择。
概要
- 了解MBition：塑造汽车用户体验设计的未来
- 原型设计Mercedes me应用：MBition的创新方法
- Mercedes me应用是什么？
- Mercedes me应用原型设计过程的见解
- 使用ProtoPie组件库的9个最佳实践
- 如何构建ProtoPie组件库
- 使用ProtoPie组件库的优势
了解MBition：塑造汽车用户体验设计的未来
MBition是梅赛德斯-奔驰的子公司，拥有一支专注于用户体验设计的团队，致力于塑造未来的汽车用户体验。MBition成立并将总部设在柏林，是梅赛德斯-奔驰软件中心的重要组成部分，它们积极地参与汽车研究与开发。团队以创造创新和丝滑的用户体验为目标，通过原型设计来提升奔驰的娱乐信息系统。MBition在保加利亚的索菲亚设有第二基地，拥有来自不同国家的900多名员工。
你可能会好奇MBition的主要业务是什么。一句话概括：“设计梅赛德斯-奔驰娱乐信息系统的未来。” 在这个背景下，娱乐信息系统（infotainment）是“信息”（information）和“娱乐”（entertainment）的结合，指的是通过一个或多个显示屏给汽车用户提供内容。
原型设计Mercedes me应用：MBition的创新方法
Mercedes me应用是什么？
Mercedes me应用首次发布于2020年10月，作为梅赛德斯车主的伴侣应用。
2020年10月，Mercedes me应用作为梅赛德斯-奔驰车主的伴侣应用推出。该应用使用户能够以多种方式与他们的汽车进行互动，包括控制车辆和检查其状态。用户可以将车辆与应用配对，并且可以远程启动引擎、远程锁门和解锁、定位车辆等服务。
我们与MBition的UI/UX设计师Szymon Kościelniak和Feri Irsanto Pujianto进行了交流。他们分享了使用ProtoPie的见解和最佳实践，ProtoPie是他们设计工具链中的首选工具。
“Mercedes me是我在MBition开始使用ProtoPie进行原型设计的第一个产品，”Szymon说道。“我们尝试了其他一些工具，但最终选择了ProtoPie，我对它的使用非常满意。”
为何ProtoPie是原型设计Mercedes me应用的完美选择
他解释说，在开始进行原型设计时，他们希望从一开始就能做到正确，因为他们知道自己存在局限性，例如：
- 相对较小的团队；
- 时间压力；
- 需要高保真的原型来说服利益相关者。
MBition团队确实有坚实的设计体系，包括一个包含Sketch组件库的设计系统。然而，由于新功能的定期发布，设计师们需要不断验证测试用例。换句话说，他们需要一个高保真的原型设计工具，能够帮助他们快速轻松地开发功能性和交互式的原型，因此他们选择了ProtoPie。
Mercedes me应用原型设计过程的洞见
在这一节中，我们将了解MBition创建移动应用程序原型的工作流程。
以下是一个展示应用主页的原型。在当前状态下，用户可以操作车辆锁定功能。
Mercedes me 应用原型设计工作流程案例
1. 使用Sketch的概念
“假设我们想要扩展我们的原型并添加远程启动引擎功能，”Feri说道。“我们首先从概念团队了解到相关的功能概念。在这个例子中，概念被简化了。”
下图的概念包括按下启动按钮，将页面发送到挂起状态，然后通过包含停止按钮的用户界面启动引擎。
远程引擎的工作流示例
2. 使用模板
“我们在ProtoPie中使用已经创建的模板开始构建，展示不同页面的模式，”Feri说道。“因此，模板不仅包含设计布局，还包括基本交互逻辑。”
以下是主要步骤：
- 找到合适的模板。
- 复制场景到个人资料。
- 重命名所有内容。
- 检查变量逻辑。
- 根据要创建的功能重命名场景，替换占位符标题。
- 替换图标、按钮标签和其他通用文本内容。
- 添加点击（Tap）触发器和跳转响应。
- 在主页标签中复制点击（Tap）触发器。
- 创建跳转（Jump）响应到远程引擎页面。
团队一开始使用他们预定义的模板，该模板不仅包含设计布局，还包括基本交互逻辑。
3. 使用Sketch导出功能
有时，如果元素在原型中不需要交互功能，则组件可能不是必要的。“在这种情况下，我们可以使用导出功能，或者直接使用[ProtoPie]插件从Sketch中导出元素，”Feri解释道。
在图示中，当引擎启动时，信息线和单元项目元素应可见。
从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团队将其组件库分为较小的部分。以下是组成其组件库的不同类别的说明，以及它们如何相互关联。
组件库被拆分为辅助库、资产库和基于逻辑的库。
动态组件可以包含来自辅助库和资产库的元素，比如文本样式。
例如，一个动态组件可以包含来自辅助库和资产库的元素，比如文本样式，如右下角所示。
让我们看看各个库的细节。
1. 辅助库
辅助工具严格功能性，旨在接收和返回数据。它们不包括设计元素，不包含资产或其他组件。通常，辅助工具作为不同组件内的子元素使用。
通常，辅助工具作为不同组件内的子元素使用。
一个简单的例子是一个计时器辅助工具，当计时器完成计时时发送信号。
一个更复杂的例子是层样式辅助工具，复制设计工具如Sketch或Figma的层样式功能。它接受颜色代码作为输入，并输出相应的十六进制代码，适用于浅色模式和深色模式样式。样式辅助工具的关键优势在于它能够同时控制所有组件，无需单独更改每个组件的颜色。在这方面，ProtoPie的parseJson函数非常有用，因为它提高了管理和检索关键信息（如颜色代码和数值）的效率。
夜间模式和白天模式
2. 资产库
资产库是各种组件的集合，包括：
- 图标：图标使用最少的逻辑，可以通过ProtoPie的覆盖功能轻松替换。它们负责初始化颜色、从父组件接收颜色设置，并在辅助工具的帮助下应用颜色。
- 文本样式组件：这些组件遵循与图标相似的逻辑，但具有附加功能。它们模仿设计系统，可以从父组件接收设置器以修改文本。这些组件还会根据文本长度自动调整或重新布局，并将高度反馈给父组件。
- 静态组件：需要最少的逻辑，主要专注于初始化颜色和样式。它们使用辅助工具应用颜色，可以有特定的浅色模式和深色模式样式。这些组件包括矢量图、PNG或视频材料，允许轻松应用视觉设计更改而不破坏组件逻辑。
图标组件库
3. 基于逻辑的库
动态组件可以嵌套来自其他库或同一库中的组件。
动态组件存储功能逻辑，可以嵌套来自其他库或同一库中的组件。它们在父子组件之间分配信号，并可能具有可重写的变量，如状态。
以下是一些例子：
- 控制滑块组件（Control Slider component）：存储状态和位置变量。父组件可以使用设置器（setters）来重写这些变量，并将数值返回给父组件。当交互成功时，组件会向父组件发送信号。
- 滑块和状态线组件（Slider and Status Line components）：存储状态、位置、状态、标题和副标题变量。它们可以被父组件重写。状态线（Status Line）组件还会根据文本高度自动缩放。
- 组合组件（combining components）：不同组件通过发送（send）/接收（receive）概念进行通信，以实现交互。例如，切换滑块负责设置车门的打开和关闭状态。根据状态，信号会分配给各个组件，如状态线、汽车插图组件和滑块本身。
- 地图组件（map components）：基于逻辑的组件，专门用于地图。它们使用动态组件库中的相同概念，但规模更大。
在上述示例中，所有元素都来自组件库。它使用陀螺仪传感器来检测设备的旋转，利用用户和车辆位置的坐标进行“focus into”交互。
使用ProtoPie组件库的好处
Feri告诉我们，从初期阶段开始，设计团队就知道他们需要“最大限度地减少高保真原型设计的缺点，例如创建原型的高成本和低可维护性。” 他说，他们在ProtoPie中使用组件库进行原型设计的方法主要有如下好处：
- 节省时间：这种方法使团队节省了大量时间，否则他们通常需要从头开始创建原型。
- 易于维护：得益于指南和通用规则/惯例，MBition团队能够维护更大的原型。
- 用户导向：如果其他同事想创建原型，他们可以更顺利地加入。
- 可扩展：随着概念的成熟，可以向原型添加更多功能。
- 协作性强：不同的人可以在不同的库上工作而不会产生冲突。
- 无需编码：高保真交互不需要编码——只需要逻辑思维。
组件库的好处
使用ProtoPie Connect进行车内连接体验的原型设计
在梅赛德斯-奔驰生态系统中使用Bridge Apps和ProtoPie Connect
那么，在MBition的背景下，什么是连接体验？
得益于ProtoPie Connect，可以针对所有车内找到或与车连接使用的设备进行原型设计，甚至让它们彼此通信。
使用Bridge Apps为原型提供汽车数据或不同的交互点也是可能的。
“好处是你可以在移动设备、平板电脑、笔记本电脑以及在适当设置的实际汽车中测试同一个原型，”Szymon说。
Szymon补充说：“我建议一旦你开始使用ProtoPie Connect，你就应该去探索这个它的各种可能性。找时间去使用它，尝试各种不同的玩法，创建你自己的bridge apps。”
使用ProtoPie改善汽车用户体验
汽车用户体验原型设计对于汽车行业的发展和创新至关重要。它使公司能够将新想法变为现实，完善设计，并提升用户体验。
使用ProtoPie，公司可以显著减少开发时间，促进设计和工程团队之间更好的协作，并交付使用户惊叹的尖端车辆。预约演示，了解ProtoPie如何改变你的车内原型设计过程。