系统设计 · 设计优化 · 多平台适配 · 全球化设计
系统设计 · 设计优化 · 多平台适配 · 全球化设计
系统设计 · 设计优化 · 多平台适配 · 全球化设计
系统设计 · 设计优化 · 多平台适配 · 全球化设计
Flyme Auto 2.0 系统设计升级
Flyme Auto 2.0 系统设计升级
Flyme Auto 2.0 系统设计升级
Flyme Auto 2.0 系统设计升级
概览
在 2.0 系统设计中，我负责整体系统设计优化升级，针对 1.0 版本里，高频使用场景的一致性问题、操作动线问题，提出解决方案，并为后续多品牌接入、开拓海外市场、涉及到多屏幕兼容、系统多语言适配等进行规则定义撰写。
我的贡献
设计负责人
分析&设计调研
发现&解决问题
撰写设计规范
···
团队
2 UX Designer
5 UI Designer
2 Motion Designer
概览
在 2.0 系统设计中，我负责整体系统设计优化升级，针对 1.0 版本里，高频使用场景的一致性问题、操作动线问题，提出解决方案，并为后续多品牌接入、开拓海外市场、涉及到多屏幕兼容、系统多语言适配等进行规则定义撰写。
我的贡献
设计负责人、分析&设计调研、发现&解决问题、撰写设计规范···
团队
2 UX Designer、5 UI Designer、2 Motion Designer
概览
在 2.0 系统设计中，我负责整体系统设计优化升级，针对 1.0 版本里，高频使用场景的一致性问题、操作动线问题，提出解决方案，并为后续多品牌接入、开拓海外市场、涉及到多屏幕兼容、系统多语言适配等进行规则定义撰写。
我的贡献
设计负责人、分析&设计调研、发现&解决问题、撰写设计规范···
团队
2 UX Designer、5 UI Designer、2 Motion Designer
概览
在 2.0 系统设计中，我负责整体系统设计优化升级，针对 1.0 版本里，高频使用场景的一致性问题、操作动线问题，提出解决方案，并为后续多品牌接入、开拓海外市场、涉及到多屏幕兼容、系统多语言适配等进行规则定义撰写。
我的贡献
设计负责人、分析&设计调研、发现&解决问题、撰写设计规范···
团队
2 UX Designer、5 UI Designer、2 Motion Designer
项目背景
项目背景
项目背景
项目背景
Flyme Auto 系统是魅族 Flyme 系统在智能座舱上的延续，致力于打造更简洁、更高效、更智能的车乘体验 ，也是公司在智能座舱领域的重要布局，“简洁、实用”是魅族的核心设计理念。在过去一年里，团队已将 Flyme Auto 1.0上线至领克 08，我们对 1.0 版本进行复盘反思，为此，开展了 2.0 集体探索。
Flyme Auto 系统是魅族 Flyme 系统在智能座舱上的延续，致力于打造更简洁、更高效、更智能的车乘体验 ，也是公司在智能座舱领域的重要布局，“简洁、实用”是魅族的核心设计理念。
在过去一年里，团队已将 Flyme Auto 1.0上线至领克 08，我们针对 1.0 版本进行复盘反思，为此，开展了 2.0 集体探索。在 2.0，我们打磨基础体验，寻找新的竞争力，体现设计价值。通过系统设计升级，让 Flyme Auto 系统在易用性和兼容性上有更多的突破，我将这些设计亮点归纳总结，主要体现在三个层面：
Flyme Auto 系统是魅族 Flyme 系统在智能座舱上的延续，致力于打造更简洁、更高效、更智能的车乘体验 ，也是公司在智能座舱领域的重要布局，“简洁、实用”是魅族的核心设计理念。在过去一年里，团队已将 Flyme Auto 1.0 上线至领克 08，我们针对 1.0 版本进行复盘反思，为此，开展了 2.0 集体探索。在 2.0，我们打磨基础体验，寻找新的竞争力，体现设计价值。通过系统设计升级，让 Flyme Auto 系统在易用性和兼容性上有更多的突破，我将这些设计亮点归纳总结，主要体现在三个层面：
Flyme Auto 系统是魅族 Flyme 系统在智能座舱上的延续，致力于打造更简洁、更高效、更智能的车乘体验 ，也是公司在智能座舱领域的重要布局，“简洁、实用”是魅族的核心设计理念。在过去一年里，团队已将 Flyme Auto 1.0上线至领克 08，我们对 1.0 版本进行复盘反思，为此，开展了 2.0 集体探索。
设计升级亮点总结
设计升级亮点总结
设计升级亮点总结
设计升级亮点总结
在 2.0，我们打磨基础体验，寻找新的竞争力，体现设计价值。通过系统设计升级，让 Flyme Auto 系统在易用性和兼容性上有更多的突破，我将这些设计亮点归纳总结，主要体现在三个层面：
Flyme Auto 系统是魅族 Flyme 系统在智能座舱上的延续，致力于打造更简洁、更高效、更智能的车乘体验 ，也是公司在智能座舱领域的重要布局，“简洁、实用”是魅族的核心设计理念。
在过去一年里，团队已将 Flyme Auto 1.0上线至领克 08，我们针对 1.0 版本进行复盘反思，为此，开展了 2.0 集体探索。在 2.0，我们打磨基础体验，寻找新的竞争力，体现设计价值。通过系统设计升级，让 Flyme Auto 系统在易用性和兼容性上有更多的突破，我将这些设计亮点归纳总结，主要体现在三个层面：
Flyme Auto 系统是魅族 Flyme 系统在智能座舱上的延续，致力于打造更简洁、更高效、更智能的车乘体验 ，也是公司在智能座舱领域的重要布局，“简洁、实用”是魅族的核心设计理念。
在过去一年里，团队已将 Flyme Auto 1.0上线至领克 08，我们针对 1.0 版本进行复盘反思，为此，开展了 2.0 集体探索。在 2.0，我们打磨基础体验，寻找新的竞争力，体现设计价值。通过系统设计升级，让 Flyme Auto 系统在易用性和兼容性上有更多的突破，我将这些设计亮点归纳总结，主要体现在三个层面：
在 2.0，我们打磨基础体验，寻找新的竞争力，体现设计价值。通过系统设计升级，让 Flyme Auto 系统在易用性和兼容性上有更多的突破，我将这些设计亮点归纳总结，主要体现在三个层面：
1.体验和效率的提升
1.体验和效率的提升
1.体验和效率的提升
1.体验和效率的提升
在车载交互中，安全至关重要。我们努力降低驾驶员在任务中的认知和交互成本，使其能够迅速回到标准驾驶姿态进行交互。
通过实车走查，发现问题，为 2.0 设计系统上常见的问题提出优化思路，从“体验与效率提升”的角度，我们能提升的都有哪些？
我们针对驾驶场景下最高频使用的两个业务模块：系统小窗、按摩调节模块进行了信息架构及场景交互合理性的优化调整。
在车载交互中，安全至关重要。我们努力降低驾驶员在任务中的认知和交互成本，使其能够迅速回到标准驾驶姿态进行交互。
通过实车走查，发现问题，为 2.0 设计系统上常见的问题提出优化思路，从“体验与效率提升”的角度，我们能提升的都有哪些？
我们针对驾驶场景下最高频使用的两个业务模块：系统小窗、按摩调节模块进行了信息架构及场景交互合理性的优化调整。
在车载交互中，安全至关重要。我们努力降低驾驶员在任务中的认知和交互成本，使其能够迅速回到标准驾驶姿态进行交互。
通过实车走查，发现问题，为 2.0 设计系统上常见的问题提出优化思路，从“体验与效率提升”的角度，我们能提升的都有哪些？
我们针对驾驶场景下最高频使用的两个业务模块：系统小窗、按摩调节模块进行了信息架构及场景交互合理性的优化调整。
在车载交互中，安全至关重要。驾驶员必须在尽量接近标准驾驶姿态下完成屏幕操作，以确保行车安全。我们努力降低驾驶员在任务中的认知和交互成本，使其能够迅速回到标准驾驶姿态进行交互。
我们通过实车走查，发现问题，为 2.0 设计系统上常见的问题提出优化思路，从“体验与效率提升”的角度，我们能提升的都有哪些？我们针对驾驶场景下最高频使用的三个业务模块：系统小窗、车辆设置、按摩调节模块进行了信息架构及场景交互合理性的优化调整。
1.1 系统小窗-优化交互，提高操作灵活性
1.1 系统小窗-优化交互，提高操作灵活性
1.1 系统小窗-优化交互，提高操作灵活性
1.1 系统小窗-优化交互，提高操作灵活性
小窗是 Flyme 的灵魂，同样作为系统使用频率最高的应用窗口，其定位为灵活、轻量、能够承载临时任务，如：高效调取音乐、通话界面展示、手机应用上车等功能。
小窗是 Flyme 的灵魂，同样作为系统使用频率最高的应用窗口，其定位为灵活、轻量、能够承载临时任务，如：高效调取音乐、通话界面展示、手机应用上车等功能。
小窗是 Flyme 的灵魂，同样作为系统使用频率最高的应用窗口，其定位为灵活、轻量、能够承载临时任务，如：高效调取音乐、通话界面展示、手机应用上车等功能。
小窗是 Flyme 的灵魂，同样作为系统使用频率最高的应用窗口，其定位为灵活、轻量、能够承载临时任务，如：高效调取音乐、通话界面展示、手机应用上车等功能。
以下是车载系统的1.0 小窗现存主要及次要问题，出现这些问题是因为我们直接迁移了手机上的小窗的能力，但手机上的屏幕尺寸和车机截然不同。
以下是车载系统的1.0 小窗现存主要及次要问题，出现这些问题是因为我们直接迁移了手机上的小窗的能力，但手机上的屏幕尺寸和车机截然不同。
以下是车载系统的1.0 小窗现存主要及次要问题，出现这些问题是因为我们直接迁移了手机上的小窗的能力，但手机上的屏幕尺寸和车机截然不同。
以下是车载系统的1.0 小窗现存主要及次要问题，出现这些问题是因为我们直接迁移了手机上的小窗的能力，但手机上的屏幕尺寸和车机截然不同。
其次，不同内容的小窗的顶部操作栏的能力没被规范，不统一：如有些内容是支持全屏，有些不支持，虽都使用小窗承载内容，但实际体验感官是存在偏差的。
其次，不同内容的小窗的顶部操作栏的能力没被规范，不统一：如有些内容是支持全屏，有些不支持，虽都使用小窗承载内容，但实际体验感官是存在偏差的。
其次，不同内容的小窗的顶部操作栏的能力没被规范，不统一：如有些内容是支持全屏，有些不支持，虽都使用小窗承载内容，但实际体验感官是存在偏差的。
其次，不同内容的小窗的顶部操作栏的能力没被规范，不统一：如有些内容是支持全屏，有些不支持，虽都使用小窗承载内容，但实际体验感官是存在偏差的。
为此，我优化了小窗的基础体验，2.0中，优化交互和视觉，统一了导航样式，更强调小窗可拖动的自由度。我围绕着埋点数据分析/用户反馈，发现实际上的小窗最高频的操作，其实手势交互和拖动。
为此，我优化了小窗的基础体验，2.0中，优化交互和视觉，统一了导航样式，更强调小窗可拖动的自由度。我围绕着埋点数据分析/用户反馈，发现实际上的小窗最高频的操作，其实手势交互和拖动。
为此，我优化了小窗的基础体验，2.0中，优化交互和视觉，统一了导航样式，更强调小窗可拖动的自由度。我围绕着埋点数据分析/用户反馈，发现实际上的小窗最高频的操作，其实手势交互和拖动。
为此，我优化了小窗的基础体验，2.0中，优化交互和视觉，统一了导航样式，更强调小窗可拖动的自由度。我围绕着埋点数据分析/用户反馈，发现实际上的小窗最高频的操作，其实手势交互和拖动。
在2.0，为了解决小窗之间相互打断的问题，我们在小窗里提供了上个任务切换的能力，小窗之间切换更为高效灵活；小窗避让应用后，会默认贴边显示在屏幕左侧，更短的操作距离和更少的应用遮挡，既满足小窗在系统中的即时性，也带来更佳的交互体验。
在2.0，为了解决小窗之间相互打断的问题，我们在小窗里提供了上个任务切换的能力，小窗之间切换更为高效灵活；小窗避让应用后，会默认贴边显示在屏幕左侧，更短的操作距离和更少的应用遮挡，既满足小窗在系统中的即时性，也带来更佳的交互体验。
在2.0，为了解决小窗之间相互打断的问题，我们在小窗里提供了上个任务切换的能力，小窗之间切换更为高效灵活；小窗避让应用后，会默认贴边显示在屏幕左侧，更短的操作距离和更少的应用遮挡，既满足小窗在系统中的即时性，也带来更佳的交互体验。
在2.0，为了解决小窗之间相互打断的问题，我们在小窗里提供了上个任务切换的能力，小窗之间切换更为高效灵活；小窗避让应用后，会默认贴边显示在屏幕左侧，更短的操作距离和更少的应用遮挡，既满足小窗在系统中的即时性，也带来更佳的交互体验。
1.2 按摩调节-精简层级，优化信息架构
1.2 按摩调节-精简层级，优化信息架构
1.2 按摩调节-精简层级，优化信息架构
1.2 按摩调节-精简层级，优化信息架构
以座椅按摩调节为例，1.0中，调节按摩需要进入弹窗，才能选取其余的模式，虽然弹窗能展示更多的信息。但绝大部分用户反馈，对于不同的按摩模式、按摩名称其实不能直观感受到区别，所以切换模式才是是高频场景，按摩选择过程中更倾向以随机性，调节过程不够高效，费力。
以座椅按摩调节为例，1.0中，调节按摩需要进入弹窗，才能选取其余的模式，虽然弹窗能展示更多的信息。但绝大部分用户反馈，对于不同的按摩模式、按摩名称其实不能直观感受到区别，所以切换模式才是是高频场景，按摩选择过程中更倾向以随机性，调节过程不够高效，费力。
以座椅按摩调节为例，1.0中，调节按摩需要进入弹窗，才能选取其余的模式，虽然弹窗能展示更多的信息。但绝大部分用户反馈，对于不同的按摩模式、按摩名称其实不能直观感受到区别，所以切换模式才是是高频场景，按摩选择过程中更倾向以随机性，调节过程不够高效，费力。
以座椅按摩调节为例，1.0中，调节按摩需要进入弹窗，才能选取其余的模式，虽然弹窗能展示更多的信息。但绝大部分用户反馈，对于不同的按摩模式、按摩名称其实不能直观感受到区别，所以切换模式才是是高频场景，按摩选择过程中更倾向以随机性，调节过程不够高效，费力。
在优化后的方案里，从交互样式上看， Popover 选项比弹窗更轻量，且没有阻断感，更符合实际用车场景。通过优化布局、交互样式，对按摩名称进行精简，使用体验上，对比 1.0 版本，不仅让操作动线大大缩短，也提升交互效率。
在优化后的方案里，从交互样式上看， Popover 选项比弹窗更轻量，且没有阻断感，更符合实际用车场景。通过优化布局、交互样式，对按摩名称进行精简，使用体验上，对比 1.0 版本，不仅让操作动线大大缩短，也提升交互效率。
在优化后的方案里，从交互样式上看， Popover 选项比弹窗更轻量，且没有阻断感，更符合实际用车场景。通过优化布局、交互样式，对按摩名称进行精简，使用体验上，对比 1.0 版本，不仅让操作动线大大缩短，也提升交互效率。
在优化后的方案里，从交互样式上看， Popover 选项比弹窗更轻量，且没有阻断感，更符合实际用车场景。通过优化布局、交互样式，对按摩名称进行精简，使用体验上，对比 1.0 版本，不仅让操作动线大大缩短，也提升交互效率。
我们以按摩调节为例，提出优化方案，并传递给团队内设计师们，可以基于用户反馈，对各自业务流程进行优化、思考页面优先级。持续打磨迭代，提升每个业务在 2.0 系统上的用户体验。
我们以按摩调节为例，提出优化方案，并传递给团队内设计师们，可以基于用户反馈，对各自业务流程进行优化、思考页面优先级。持续打磨迭代，提升每个业务在 2.0 系统上的用户体验。
我们以按摩调节为例，提出优化方案，并传递给团队内设计师们，可以基于用户反馈，对各自业务流程进行优化、思考页面优先级。持续打磨迭代，提升每个业务在 2.0 系统上的用户体验。
我们以按摩调节为例，提出优化方案，并传递给团队内设计师们，可以基于用户反馈，对各自业务流程进行优化、思考页面优先级。持续打磨迭代，提升每个业务在 2.0 系统上的用户体验。
2.视觉感官一致性
2.视觉感官一致性
2.视觉感官一致性
2.视觉感官一致性
当前智能座舱内的地位日趋重要，减轻用户的驾驶负荷尤为重要，其中减少用户的视觉负担便是其中重要的一环。
当前智能座舱内的地位日趋重要，减轻用户的驾驶负荷尤为重要，其中减少用户的视觉负担便是其中重要的一环。
当前智能座舱内的地位日趋重要，减轻用户的驾驶负荷尤为重要，其中减少用户的视觉负担便是其中重要的一环。
当前智能座舱内的地位日趋重要，减轻用户的驾驶负荷尤为重要，其中减少用户的视觉负担便是其中重要的一环。
2.1 深色模式优化—视觉层级统一，更加专注内容
2.1 深色模式优化—视觉层级统一，更加专注内容
2.1 深色模式优化—视觉层级统一，更加专注内容
2.1 深色模式优化—视觉层级统一，更加专注内容
1.0 系统里，我们的深浅色模式视觉感官体验不一致，主要是因为，前期设计时，系统应用采用了大量 Unity 渲染（System UI、车辆设置、能量中心等），对于场景的深色背景色，未考虑与公共控件的关系。
1.0 系统里，我们的深浅色模式视觉感官体验不一致，主要是因为，前期设计时，系统应用采用了大量 Unity 渲染（System UI、车辆设置、能量中心等），对于场景的深色背景色，未考虑与公共控件的关系。
1.0 系统里，我们的深浅色模式视觉感官体验不一致，主要是因为，前期设计时，系统应用采用了大量 Unity 渲染（System UI、车辆设置、能量中心等），对于场景的深色背景色，未考虑与公共控件的关系。
1.0 系统里，我们的深浅色模式视觉感官体验不一致，主要是因为，前期设计时，系统应用采用了大量 Unity 渲染（System UI、车辆设置、能量中心等），对于场景的深色背景色，未考虑与公共控件的关系。
通过将页面内容通过不同海拔高度来模拟三维空间，以提高某些UI元素的视觉突出性。清晰的区分页面层次结构和提升专注感。
通过将页面内容通过不同海拔高度来模拟三维空间，以提高某些UI元素的视觉突出性。清晰的区分页面层次结构和提升专注感。
通过将页面内容通过不同海拔高度来模拟三维空间，以提高某些UI元素的视觉突出性。清晰的区分页面层次结构和提升专注感。
通过将页面内容通过不同海拔高度来模拟三维空间，以提高某些UI元素的视觉突出性。清晰的区分页面层次结构和提升专注感。
我们对所有应用的深色模式进行了重新适配，通过降低用户的视觉负担，减轻用户的驾驶负荷。不仅能让驾驶员更聚焦呈现的信息，可以让信息传达更加准确直观。提升了系统应用视觉感官的一致性。
我们对所有应用的深色模式进行了重新适配，通过降低用户的视觉负担，减轻用户的驾驶负荷。不仅能让驾驶员更聚焦呈现的信息，可以让信息传达更加准确直观。提升了系统应用视觉感官的一致性。
我们对所有应用的深色模式进行了重新适配，通过降低用户的视觉负担，减轻用户的驾驶负荷。不仅能让驾驶员更聚焦呈现的信息，可以让信息传达更加准确直观。提升了系统应用视觉感官的一致性。
我们对所有应用的深色模式进行了重新适配，通过降低用户的视觉负担，减轻用户的驾驶负荷。不仅能让驾驶员更聚焦呈现的信息，可以让信息传达更加准确直观。提升了系统应用视觉感官的一致性。
2.2 手车互联小窗-智能调节显示字号，跟随系统深浅模式
2.2 手车互联小窗-智能调节显示字号，跟随系统深浅模式
2.2 手车互联小窗-智能调节显示字号，跟随系统深浅模式
2.2 手车互联小窗-智能调节显示字号，跟随系统深浅模式
通过 Flyme Link手车互联后，车端将通过小窗投屏显示手机上的内容，但现在有 2 个问题：一是互联小窗的字号过小、在座舱的环境内，阅读性差，太小的操作热区，不好触控相关内容；二是由于直接投屏，小窗与车机的深浅模式不一致，视觉割裂感强。
通过 Flyme Link手车互联后，车端将通过小窗投屏显示手机上的内容，但现在有 2 个问题：一是互联小窗的字号过小、在座舱的环境内，阅读性差，太小的操作热区，不好触控相关内容；二是由于直接投屏，小窗与车机的深浅模式不一致，视觉割裂感强。
通过 Flyme Link手车互联后，车端将通过小窗投屏显示手机上的内容，但现在有 2 个问题：一是互联小窗的字号过小、在座舱的环境内，阅读性差，太小的操作热区，不好触控相关内容；二是由于直接投屏，小窗与车机的深浅模式不一致，视觉割裂感强。
通过 Flyme Link手车互联后，车端将通过小窗投屏显示手机上的内容，但现在有 2 个问题：一是互联小窗的字号过小、在座舱的环境内，阅读性差，太小的操作热区，不好触控相关内容；二是由于直接投屏，小窗与车机的深浅模式不一致，视觉割裂感强。
🤔️为了解决上述两个问题，我提出一个巧妙的方案：在手机互联时，充分利用手机侧的字体调整功能，通过后台智能调节，使得互联小窗中的字体得以优化，让用户在阅读和操作时更为舒适。我与研发团队保持同步，👏得知这不仅可行，且是最低成本的解决方案！
🤔️为了解决上述两个问题，我提出一个巧妙的方案：在手机互联时，充分利用手机侧的字体调整功能，通过后台智能调节，使得互联小窗中的字体得以优化，让用户在阅读和操作时更为舒适。我与研发团队保持同步，👏得知这不仅可行，且是最低成本的解决方案！
🤔️为了解决上述两个问题，我提出一个巧妙的方案：在手机互联时，充分利用手机侧的字体调整功能，通过后台智能调节，使得互联小窗中的字体得以优化，让用户在阅读和操作时更为舒适。我与研发团队保持同步，👏得知这不仅可行，且是最低成本的解决方案！
🤔️为了解决上述两个问题，我提出一个巧妙的方案：在手机互联时，充分利用手机侧的字体调整功能，通过后台智能调节，使得互联小窗中的字体得以优化，让用户在阅读和操作时更为舒适。我与研发团队保持同步，👏得知这不仅可行，且是最低成本的解决方案！
我们通过优化系统的深色模式、互联小窗体验优化，确保用户在不同光线环境下，都能享受最佳的阅读体验。提升了系统整体的易读性和易操作性，为用户提供更舒适、高效的使用体验。
我们通过优化系统的深色模式、互联小窗体验优化，确保用户在不同光线环境下，都能享受最佳的阅读体验。提升了系统整体的易读性和易操作性，为用户提供更舒适、高效的使用体验。
我们通过优化系统的深色模式、互联小窗体验优化，确保用户在不同光线环境下，都能享受最佳的阅读体验。提升了系统整体的易读性和易操作性，为用户提供更舒适、高效的使用体验。
我们通过优化系统的深色模式、互联小窗体验优化，确保用户在不同光线环境下，都能享受最佳的阅读体验。提升了系统整体的易读性和易操作性，为用户提供更舒适、高效的使用体验。
3.开放平台-无界智行
3.开放平台兼容-无界智行
3.开放平台兼容-无界智行
3.开放平台-无界智行
无界智行平台是将 Flyme Auto 的核心能力，拆解为多个可选模块，供车企根据自身需求灵活选择、自由定制接入，最终帮助车企以更低成本，更高效率提升座舱智能化程度、优化座舱终端使用体验。
无界智行平台是将 Flyme Auto 的核心能力，拆解为多个可选模块，供车企根据自身需求灵活选择、自由定制接入，最终帮助车企以更低成本，更高效率提升座舱智能化程度、优化座舱终端使用体验。
无界智行平台是将 Flyme Auto 的核心能力，拆解为多个可选模块，供车企根据自身需求灵活选择、自由定制接入，最终帮助车企以更低成本，更高效率提升座舱智能化程度、优化座舱终端使用体验。
无界智行平台是将 Flyme Auto 的核心能力，拆解为多个可选模块，供车企根据自身需求灵活选择、自由定制接入，最终帮助车企以更低成本，更高效率提升座舱智能化程度、优化座舱终端使用体验。
为了后续海外市场、多品牌多车型更好的接入 Flyme Auto 系统，我们梳理了多语言设计、多屏幕尺寸适配的规则。即顺应市场需求，也为提供更好的用户体验、满足不同车型的个性化需求，以及在竞争激烈的市场中保持领先地位
为了后续海外市场、多品牌多车型更好的接入 Flyme Auto 系统，我们梳理了多语言设计、多屏幕尺寸适配的规则。即顺应市场需求，也为提供更好的用户体验、满足不同车型的个性化需求，以及在竞争激烈的市场中保持领先地位
为了后续海外市场、多品牌多车型更好的接入 Flyme Auto 系统，我们梳理了多语言设计、多屏幕尺寸适配的规则。即顺应市场需求，也为提供更好的用户体验、满足不同车型的个性化需求，以及在竞争激烈的市场中保持领先地位
为了后续海外市场、多品牌多车型更好的接入 Flyme Auto 系统，我们梳理了多语言设计、多屏幕尺寸适配的规则。即顺应市场需求，也为提供更好的用户体验、满足不同车型的个性化需求，以及在竞争激烈的市场中保持领先地位
3.1 多语言适配-为所有用户、为所有地区、为所有场景而设计
3.1 多语言适配-为所有用户、为所有地区、为所有场景而设计
3.1 多语言适配-为所有用户、为所有地区、为所有场景而设计
3.1 多语言适配-为所有用户、为所有地区、为所有场景而设计
Flyme Auto 1.0 系统中，团队只涉及到了中文语言设计，2.0 里，我们以设计师视角，介绍多语言适配设计过程中需关注的要点和建议，帮助团队设计师规避设计产出到落地过程中可能存在的“坑”，更好的与各侧协作。
Flyme Auto 1.0 系统中，团队只涉及到了中文语言设计，2.0 里，我们以设计师视角，介绍多语言适配设计过程中需关注的要点和建议，帮助团队设计师规避设计产出到落地过程中可能存在的“坑”，更好的与各侧协作。
Flyme Auto 1.0 系统中，团队只涉及到了中文语言设计，2.0 里，我们以设计师视角，介绍多语言适配设计过程中需关注的要点和建议，帮助团队设计师规避设计产出到落地过程中可能存在的“坑”，更好的与各侧协作。
Flyme Auto 1.0 系统中，团队只涉及到了中文语言设计，2.0 里，我们以设计师视角，介绍多语言适配设计过程中需关注的要点和建议，帮助团队设计师规避设计产出到落地过程中可能存在的“坑”，更好的与各侧协作。
字段的倍率整理：尽量增加文案占位的宽度
字段的倍率整理：尽量增加文案占位的宽度
字段的倍率整理：尽量增加文案占位的宽度
字段的倍率整理：尽量增加文案占位的宽度
设计师在初始设计时，需尝试将中文文案复制 3 倍，模拟测试多语言效果。如不能承载 3 倍文字，则建议调整长度。尽量增加文案占位的宽度，在这个思路下进行设计，哪怕只是使用英语、法语语言进行单语言设计，也能有效帮助避免由文案或单词长度带来的展示问题。
设计师在初始设计时，需尝试将中文文案复制 3 倍，模拟测试多语言效果。如不能承载 3 倍文字，则建议调整长度。尽量增加文案占位的宽度，在这个思路下进行设计，哪怕只是使用英语、法语语言进行单语言设计，也能有效帮助避免由文案或单词长度带来的展示问题。
设计师在初始设计时，需尝试将中文文案复制 3 倍，模拟测试多语言效果。如不能承载 3 倍文字，则建议调整长度。尽量增加文案占位的宽度，在这个思路下进行设计，哪怕只是使用英语、法语语言进行单语言设计，也能有效帮助避免由文案或单词长度带来的展示问题。
设计师在初始设计时，需尝试将中文文案复制 3 倍，模拟测试多语言效果。如不能承载 3 倍文字，则建议调整长度。尽量增加文案占位的宽度，在这个思路下进行设计，哪怕只是使用英语、法语语言进行单语言设计，也能有效帮助避免由文案或单词长度带来的展示问题。
自适应布局
自适应布局
自适应布局
自适应布局
向团队强调控件自适应的重要性。在内部宣讲中，强调采用 Autolayout 设计视觉控件，以确保文字和内容在不同屏幕和语言环境下的最佳显示效果。包括使用具有宽容度和灵活度的布局，最大限度地提高各种语言的显示能力。目标是启发设计师以动态角度思考布局。
向团队强调控件自适应的重要性。在内部宣讲中，强调采用 Autolayout 设计视觉控件，以确保文字和内容在不同屏幕和语言环境下的最佳显示效果。包括使用具有宽容度和灵活度的布局，最大限度地提高各种语言的显示能力。目标是启发设计师以动态角度思考布局。
向团队强调控件自适应的重要性。在内部宣讲中，强调采用 Autolayout 设计视觉控件，以确保文字和内容在不同屏幕和语言环境下的最佳显示效果。包括使用具有宽容度和灵活度的布局，最大限度地提高各种语言的显示能力。目标是启发设计师以动态角度思考布局。
向团队强调控件自适应的重要性。在内部宣讲中，强调采用 Autolayout 设计视觉控件，以确保文字和内容在不同屏幕和语言环境下的最佳显示效果。包括使用具有宽容度和灵活度的布局，最大限度地提高各种语言的显示能力。目标是启发设计师以动态角度思考布局。
多采用符号化代替文字，预留足够的纵向空间
多采用符号化代替文字，预留足够的纵向空间
多采用符号化代替文字，预留足够的纵向空间
多采用符号化代替文字，预留足够的纵向空间
对于常见功能入口，采用通用 icon 符号化。这种提高了界面的一致性和可理解性，有助于用户在不同语言环境下迅速识别和理解功能。同时，当界面中原有（1-4）横向布局不能满足多语言适配时，可考虑（2+2）的宫格布局，通过拓展控件的宽度达到适配的效果。
对于常见功能入口，采用通用 icon 符号化。这种提高了界面的一致性和可理解性，有助于用户在不同语言环境下迅速识别和理解功能。同时，当界面中原有（1-4）横向布局不能满足多语言适配时，可考虑（2+2）的宫格布局，通过拓展控件的宽度达到适配的效果。
对于常见功能入口，采用通用 icon 符号化。这种提高了界面的一致性和可理解性，有助于用户在不同语言环境下迅速识别和理解功能。同时，当界面中原有（1-4）横向布局不能满足多语言适配时，可考虑（2+2）的宫格布局，通过拓展控件的宽度达到适配的效果。
对于常见功能入口，采用通用 icon 符号化。这种提高了界面的一致性和可理解性，有助于用户在不同语言环境下迅速识别和理解功能。同时，当界面中原有（1-4）横向布局不能满足多语言适配时，可考虑（2+2）的宫格布局，通过拓展控件的宽度达到适配的效果。
文案简写和单位统一
文案简写和单位统一
文案简写和单位统一
文案简写和单位统一
在面对一些通用词汇，且控件无法压缩的情况下，建议使用更具国际化的缩写表达。提高文案的简洁度和适应性，在不同的语言系统里，使用统一的单位表达方式，减少混淆，确保信息的一致性，提升用户体验。
在面对一些通用词汇，且控件无法压缩的情况下，建议使用更具国际化的缩写表达。提高文案的简洁度和适应性，在不同的语言系统里，使用统一的单位表达方式，减少混淆，确保信息的一致性，提升用户体验。
在面对一些通用词汇，且控件无法压缩的情况下，建议使用更具国际化的缩写表达。提高文案的简洁度和适应性，在不同的语言系统里，使用统一的单位表达方式，减少混淆，确保信息的一致性，提升用户体验。
在面对一些通用词汇，且控件无法压缩的情况下，建议使用更具国际化的缩写表达。提高文案的简洁度和适应性，在不同的语言系统里，使用统一的单位表达方式，减少混淆，确保信息的一致性，提升用户体验。
3.2 多屏幕适配-基准屏制定、多尺寸屏幕形态梳理
3.2 多屏幕适配-基准屏制定、多尺寸屏幕形态梳理
3.2 多屏幕适配-基准屏制定、多尺寸屏幕形态梳理
3.2 多屏幕适配-基准屏制定、多尺寸屏幕形态梳理
现有系统基于 16:10 的比例，我们以此作为基准屏。并收集市面上常见品牌的屏幕尺寸，绘制多尺寸屏幕图并进行分类。
现有系统基于 16:10 的比例，我们以此作为基准屏。并收集市面上常见品牌的屏幕尺寸，绘制多尺寸屏幕图并进行分类。
现有系统基于 16:10 的比例，我们以此作为基准屏。并收集市面上常见品牌的屏幕尺寸，绘制多尺寸屏幕图并进行分类。
现有系统基于 16:10 的比例，我们以此作为基准屏。并收集市面上常见品牌的屏幕尺寸，绘制多尺寸屏幕图并进行分类。
适配必知：了解屏幕极限值
适配必知：了解屏幕极限值
适配必知：了解屏幕极限值
适配必知：了解屏幕极限值
屏幕极限值取决于右手操作范围的便利级别：根据研究报告表明，驾驶者肩点最长距离60cm，为此我们需要考虑可流畅交互的操作范围，考虑平均人体尺寸和学术研究资料，以肩点平（7，7）距离为原点，总结了驾驶员右手操作的便利级别。10～40cm 为最佳区域，40～50cm 是可接受区域。
屏幕极限值取决于右手操作范围的便利级别：根据研究报告表明，驾驶者肩点最长距离60cm，为此我们需要考虑可流畅交互的操作范围，考虑平均人体尺寸和学术研究资料，以肩点平（7，7）距离为原点，总结了驾驶员右手操作的便利级别。10～40cm 为最佳区域，40～50cm 是可接受区域。
屏幕极限值取决于右手操作范围的便利级别：根据研究报告表明，驾驶者肩点最长距离60cm，为此我们需要考虑可流畅交互的操作范围，考虑平均人体尺寸和学术研究资料，以肩点平（7，7）距离为原点，总结了驾驶员右手操作的便利级别。10～40cm 为最佳区域，40～50cm 是可接受区域。
屏幕极限值取决于右手操作范围的便利级别：根据研究报告表明，驾驶者肩点最长距离60cm，为此我们需要考虑可流畅交互的操作范围，考虑平均人体尺寸和学术研究资料，以肩点平（7，7）距离为原点，总结了驾驶员右手操作的便利级别。10～40cm 为最佳区域，40～50cm 是可接受区域。
所以，当横屏宽度超过某个极限值后，最右侧是很难看清的距离，我们根据一些研究资料，以及1.0系统上车领克08的实际感受，当达到某个的零界点，内容就不在往右边去拉伸。
所以，当横屏宽度超过某个极限值后，最右侧是很难看清的距离，我们根据一些研究资料，以及1.0系统上车领克08的实际感受，当达到某个的零界点，内容就不在往右边去拉伸。
所以，当横屏宽度超过某个极限值后，最右侧是很难看清的距离，我们根据一些研究资料，以及1.0系统上车领克08的实际感受，当达到某个的零界点，内容就不在往右边去拉伸。
所以，当横屏宽度超过某个极限值后，最右侧是很难看清的距离，我们根据一些研究资料，以及1.0系统上车领克08的实际感受，当达到某个的零界点，内容就不在往右边去拉伸。
根据横竖屏、屏幕极限值，对不同比例的屏幕我们总结出了 8 个适配规则，后续通过几个典型页面，快速做个适配示意。
根据横竖屏、屏幕极限值，对不同比例的屏幕我们总结出了 8 个适配规则，后续通过几个典型页面，快速做个适配示意。
根据横竖屏、屏幕极限值，对不同比例的屏幕我们总结出了 8 个适配规则，后续通过几个典型页面，快速做个适配示意。
根据横竖屏、屏幕极限值，对不同比例的屏幕我们总结出了 8 个适配规则，后续通过几个典型页面，快速做个适配示意。
横屏适配
横屏适配
横屏适配
横屏适配
比如横屏变成高度较低的横屏，可参考标题栏和列表内容横向拉伸，封边压缩的做法，如下 mini 播放器做隐藏的处理。如果在宽横屏时，超过这个临界点，主驾是很难看到的，那对应的 2000dp 右侧的内容，就通过背景或氛围的视觉元素做填充。
比如横屏变成高度较低的横屏，可参考标题栏和列表内容横向拉伸，封边压缩的做法，如下 mini 播放器做隐藏的处理。如果在宽横屏时，超过这个临界点，主驾是很难看到的，那对应的 2000dp 右侧的内容，就通过背景或氛围的视觉元素做填充。
比如横屏变成高度较低的横屏，可参考标题栏和列表内容横向拉伸，封边压缩的做法，如下 mini 播放器做隐藏的处理。如果在宽横屏时，超过这个临界点，主驾是很难看到的，那对应的 2000dp 右侧的内容，就通过背景或氛围的视觉元素做填充。
比如横屏变成高度较低的横屏，可参考标题栏和列表内容横向拉伸，封边压缩的做法，如下 mini 播放器做隐藏的处理。如果在宽横屏时，超过这个临界点，主驾是很难看到的，那对应的 2000dp 右侧的内容，就通过背景或氛围的视觉元素做填充。
竖屏适配
竖屏适配
竖屏适配
竖屏适配
比如全屏应用的横屏变竖屏的情况，标题栏采用横向压缩方式，以及内容区重组的做法重新排列。若导航栏选项低于 4 个时，建议竖屏适配重定位为顶部栏。
比如全屏应用的横屏变竖屏的情况，标题栏采用横向压缩方式，以及内容区重组的做法重新排列。若导航栏选项低于 4 个时，建议竖屏适配重定位为顶部栏。
比如全屏应用的横屏变竖屏的情况，标题栏采用横向压缩方式，以及内容区重组的做法重新排列。若导航栏选项低于 4 个时，建议竖屏适配重定位为顶部栏。
3.3 品牌定制平台
3.3 品牌定制平台
3.3 品牌定制平台
3.3 品牌定制平台
2.0 系统会接入更多品牌车型进行适配，考虑到接入的各家车企都有自己的品牌特性，为此，我们需要将设计系统提供为灵活的适配能力，为不同品牌提供个性化定制的空间。主要涉及到以下几方面：
2.0 系统会接入更多品牌车型进行适配，考虑到接入的各家车企都有自己的品牌特性，为此，我们需要将设计系统提供为灵活的适配能力，为不同品牌提供个性化定制的空间。主要涉及到以下几方面：
2.0 系统会接入更多品牌车型进行适配，考虑到接入的各家车企都有自己的品牌特性，为此，我们需要将设计系统提供为灵活的适配能力，为不同品牌提供个性化定制的空间。主要涉及到以下几方面：
2.0 系统会接入更多品牌车型进行适配，考虑到接入的各家车企都有自己的品牌特性，为此，我们需要将设计系统提供为灵活的适配能力，为不同品牌提供个性化定制的空间。主要涉及到以下几方面：
颜色系统-全局主题色自定义
颜色系统-全局主题色自定义
颜色系统-全局主题色自定义
颜色系统-全局主题色自定义
1.0 系统中存在颜色梯度过多、模块一致性差的问题，颜色结构不清晰、对比度不足，层次感不够明确。在 2.0 系统的优化中，我们参考了安卓的颜色系统，将颜色内容分为三个基础部分：首先是高亮色，即主题色，同时还包括其他状态的标识性颜色，主要包括文字或图标。这样的分类使得整体颜色更加清晰，提高了一致性和层次感。
1.0 系统中存在颜色梯度过多、模块一致性差的问题，颜色结构不清晰、对比度不足，层次感不够明确。在 2.0 系统的优化中，我们参考了安卓的颜色系统，将颜色内容分为三个基础部分：首先是高亮色，即主题色，同时还包括其他状态的标识性颜色，主要包括文字或图标。这样的分类使得整体颜色更加清晰，提高了一致性和层次感。
1.0 系统中存在颜色梯度过多、模块一致性差的问题，颜色结构不清晰、对比度不足，层次感不够明确。在 2.0 系统的优化中，我们参考了安卓的颜色系统，将颜色内容分为三个基础部分：首先是高亮色，即主题色，同时还包括其他状态的标识性颜色，主要包括文字或图标。这样的分类使得整体颜色更加清晰，提高了一致性和层次感。
1.0 系统中存在颜色梯度过多、模块一致性差的问题，颜色结构不清晰、对比度不足，层次感不够明确。在 2.0 系统的优化中，我们参考了安卓的颜色系统，将颜色内容分为三个基础部分：首先是高亮色，即主题色，同时还包括其他状态的标识性颜色，主要包括文字或图标。这样的分类使得整体颜色更加清晰，提高了一致性和层次感。
基于安卓的HCT色彩原理和工具，我们提出了自定义全局主题色的概念。通过在HCT色彩空间中仅调整色相，即可获得一系列符合WCAG对比度要求的新颜色。这种方法使颜色使用更规范，结构更合理，通过微调生成一整套新颜色，以低成本实现系统全局主题色的改变。
我们对车辆设置的现有页面做了些试验，可以高效的达到整体替换主题色。
基于安卓的HCT色彩原理和工具，我们提出了自定义全局主题色的概念。通过在HCT色彩空间中仅调整色相，即可获得一系列符合WCAG对比度要求的新颜色。这种方法使颜色使用更规范，结构更合理，通过微调生成一整套新颜色，以低成本实现系统全局主题色的改变。
我们对车辆设置的现有页面做了些试验，可以高效的达到整体替换主题色。
基于安卓的HCT色彩原理和工具，我们提出了自定义全局主题色的概念。通过在HCT色彩空间中仅调整色相，即可获得一系列符合WCAG对比度要求的新颜色。这种方法使颜色使用更规范，结构更合理，通过微调生成一整套新颜色，以低成本实现系统全局主题色的改变。
我们对车辆设置的现有页面做了些试验，可以高效的达到整体替换主题色。
基于安卓的HCT色彩原理和工具，我们提出了自定义全局主题色的概念。通过在HCT色彩空间中仅调整色相，即可获得一系列符合WCAG对比度要求的新颜色。这种方法使颜色使用更规范，结构更合理，通过微调生成一整套新颜色，以低成本实现系统全局主题色的改变。
我们对车辆设置的现有页面做了些试验，可以高效的达到整体替换主题色。
控件、字体自定义
控件、字体自定义
控件、字体自定义
控件、字体自定义
在2.0系统中，将影响主题的最小控件元素设计为 Design Token。通过修改 Design Token，我们可以呈现出各种各样的主题或者控件。例如，以下就是“领克—极星”车型上搭载Flyme Auto系统的控件差异。
在2.0系统中，将影响主题的最小控件元素设计为 Design Token。通过修改 Design Token，我们可以呈现出各种各样的主题或者控件。例如，以下就是“领克—极星”车型上搭载Flyme Auto系统的控件差异。
在2.0系统中，将影响主题的最小控件元素设计为 Design Token。通过修改 Design Token，我们可以呈现出各种各样的主题或者控件。例如，以下就是“领克—极星”车型上搭载Flyme Auto系统的控件差异。
在2.0系统中，将影响主题的最小控件元素设计为 Design Token。通过修改 Design Token，我们可以呈现出各种各样的主题或者控件。例如，以下就是“领克—极星”车型上搭载Flyme Auto系统的控件差异。
通过Design Token，我们不仅可以快速做到字体粗细的调整，以及图标的粗细调节，让团队在面对多品牌车型时，设计系统适配变得更便捷、更高效。这极大提高了公司设计和研发团队的协作效率。
通过Design Token，我们不仅可以快速做到字体粗细的调整，以及图标的粗细调节，让团队在面对多品牌车型时，设计系统适配变得更便捷、更高效。这极大提高了公司设计和研发团队的协作效率。
通过Design Token，我们不仅可以快速做到字体粗细的调整，以及图标的粗细调节，让团队在面对多品牌车型时，设计系统适配变得更便捷、更高效。这极大提高了公司设计和研发团队的协作效率。
通过Design Token，我们不仅可以快速做到字体粗细的调整，以及图标的粗细调节，让团队在面对多品牌车型时，设计系统适配变得更便捷、更高效。这极大提高了公司设计和研发团队的协作效率。
品牌元素植入
品牌元素植入
品牌元素植入
品牌元素植入
在 2.0 中，为了系统更好的进行多品牌适配，其中一个设计策略就是：系统应用中预留了一些“品牌位”，让品牌方可以高效且低成本地替换一些元素为对应品牌元素。包括但不限于车模底纹、语音光波反馈、音乐背景动画、Smartbar的背景、应用列表图标定制等等。
在 2.0 中，为了系统更好的进行多品牌适配，其中一个设计策略就是：系统应用中预留了一些“品牌位”，让品牌方可以高效且低成本地替换一些元素为对应品牌元素。包括但不限于车模底纹、语音光波反馈、音乐背景动画、Smartbar的背景、应用列表图标定制等等。
在 2.0 中，为了系统更好的进行多品牌适配，其中一个设计策略就是：系统应用中预留了一些“品牌位”，让品牌方可以高效且低成本地替换一些元素为对应品牌元素。包括但不限于车模底纹、语音光波反馈、音乐背景动画、Smartbar的背景、应用列表图标定制等等。
在 2.0 中，为了系统更好的进行多品牌适配，其中一个设计策略就是：系统应用中预留了一些“品牌位”，让品牌方可以高效且低成本地替换一些元素为对应品牌元素。包括但不限于车模底纹、语音光波反馈、音乐背景动画、Smartbar的背景、应用列表图标定制等等。
我们通过统一的设计系统，确保不同品牌车型的应用在适配时保持一致性，提供更统一的用户体验。减少自主设计和开发的成本，从而提高效率。
我们通过统一的设计系统，确保不同品牌车型的应用在适配时保持一致性，提供更统一的用户体验。减少自主设计和开发的成本，从而提高效率。
我们通过统一的设计系统，确保不同品牌车型的应用在适配时保持一致性，提供更统一的用户体验。减少自主设计和开发的成本，从而提高效率。
我们通过统一的设计系统，确保不同品牌车型的应用在适配时保持一致性，提供更统一的用户体验。减少自主设计和开发的成本，从而提高效率。
小结：此次Flyme Auto 2.0 系统升级，是一次庞大而有挑战性的设计工作，我通过保持的设计一致性，优化用户体验，以及开放平台兼容适配，我能站在更全局的角度上思考设计驱动业务。不仅培养了对细节的关注和对规范任务的谨慎态度。让我更深的感受到持续学习与不断改进的重要性。
小结：此次Flyme Auto 2.0 系统升级，是一次庞大而有挑战性的设计工作，我通过保持的设计一致性，优化用户体验，以及开放平台兼容适配，我能站在更全局的角度上思考设计驱动业务。不仅培养了对细节的关注和对规范任务的谨慎态度。让我更深的感受到持续学习与不断改进的重要性。
小结：此次Flyme Auto 2.0 系统升级，是一次庞大而有挑战性的设计工作，我通过保持的设计一致性，优化用户体验，以及开放平台兼容适配，我能站在更全局的角度上思考设计驱动业务。不仅培养了对细节的关注和对规范任务的谨慎态度。让我更深的感受到持续学习与不断改进的重要性。
小结：此次Flyme Auto 2.0 系统升级，是一次庞大而有挑战性的设计工作，我通过保持的设计一致性，优化用户体验，以及开放平台兼容适配，我能站在更全局的角度上思考设计驱动业务。不仅培养了对细节的关注和对规范任务的谨慎态度。让我更深的感受到持续学习与不断改进的重要性。