🔥 热搜 🔥
上海习近平新疆鄂州父女瓜乌鲁木齐疫情H工口小学生赛高习明泽芊川一笑图包印尼排华
分类
社会娱乐国际人权科技经济其它
🔥 热搜 🔥
上海习近平新疆鄂州父女瓜乌鲁木齐疫情H工口小学生赛高习明泽芊川一笑图包印尼排华
分类
社会娱乐国际人权科技经济其它
查看原文
其他

更高级！蔚来Banyan 2.0焕新升级UI及交互设计揭秘

UI设计达人 2023-07-30
来源：蔚来数字座舱设计团队
蔚来数字座舱设计团队：距离Banyan · 榕智能操作系统首次与大家见面已经一年多了。一年间，Banyan经历了20+个版本迭代，为车主朋友们带来常用常新的智能体验，完善着大家用车的方方面面。
在优化过往版本的同时，蔚来数字座舱设计团队也在不断尝试和探索新的方向。从还原高频用车场景、甄别真实用户需求、发掘需求中的设计机会、创造符合时代的展现形式……过程中我们不断修正策略、打磨方案、反复验证。历时一年，完成了Banyan 2.0.0用户界面设计。
在这里我们也希望一如既往与用户保持连接。通过这篇文章，和朋友们聊聊这段时间的设计成果和背后的思考。首先，和大家分享Banyan 2.0.0界面与交互设计视频：


背景
从NIO OS 1.0到2.0，我们和用户一起共创，逐步覆盖和解决了大多数日常用车的功能诉求和痛点，完成了从传统汽车中控台到数字化车载系统的认知迁移，为NIO OS系统信息结构打下了基础。
在之后的两年，随着技术发展和设计趋势的演进，催生出更高层次的用户诉求亟待满足，而当时的数字系统难以保证持续的竞争力。为了应对这一情况，我们在2021年8月发布了蔚来第三代车载数字操作系统，也就是被大家熟知和喜爱的Aspen 3.0。

Banyan 2.0.0 设计焕然升级
今天，我们迎来了数以十万计的车主，由此需要面对更多样的用户群体和更丰富的用户需求。这就要求数字设计在保障基础用车体验的同时，兼顾更“千人千面”的差异化需求满足。
而在Banyan平台的数字座舱体系中，我们也尝试接入了能力更强、种类更丰富的「数字触点」，例如后排屏、更大尺寸的HUD、AR眼镜等。希望通过多种数字触点的独特优势和整体协同，来满足和提升用户在舱内的驾乘体验，让用户享受到全程的用车愉悦，从体验上更接近蔚来「创造愉悦生活方式」的品牌愿景。
“数字设计”不是座舱体验的全部结果，却是传递体验结果的直接媒介

「有温度、有边界」的设计意向
蔚来是一家用户企业。从数字体验设计层面，我们对于“以用户为中心”一句有着自己的思考。在我们的理解中，从用户出发绝不是简单的“听任”和“盲从”，而更多的是和用户传递“亲近”和“尊重”的态度。我们希望通过有温度、不单调的设计拉近与用户间的距离，通过有边界、不越矩的体验给用户不受束缚，却又成竹在胸的掌控感。
通过「有温度、有边界」的设计意向和精细化的体验打磨，蔚来座舱数字体验在既有基础上更进一步，Banyan 2.0.0整体从精致度和易用性上均实现了显著的正向升级。我们将这些设计亮点总结归纳，体现在以下四个层面：

More Pure 层级轻量
区别于与移动设备间相对自由的交互关系，当驾驶员在行车状态下需要与座舱内的屏幕发生触控行为时，其“眼 - 手 - 屏幕”间的关系和姿态是相对确定的。而为了确保行车安全，首先是需要驾驶员在尽量接近标准驾驶姿态下完成与屏幕间的交互任务；其次是降低驾驶员在任务中的认知、交互成本，使其在完成后可以快速回到标准驾驶姿态。
为了达成上述目标，我们针对驾驶场景下最高频使用的三个业务模块：导航、媒体、设置 进行了信息架构及场景交互合理性的优化调整。

层级轻量 —— 导航一图到底
首先是导航。旧版本发起导航需要经过3次页面跳转，每个页面的布局都有较大差异，会造成一定的认知负担；且如需全程通过触控完成任务，用户的手就必须在屏幕左-中-下有较大范围的移动。操作动线不合理导致交互不够高效的问题，在Banyan平台车型大尺寸中控屏上变得愈发明显。
导航任务操作动线 1.3.3 vs 2.0.0
Banyan 2.0.0中，导航业务层级迎来简化。基础导航功能页面及LBS服务页面被整合到一层，并通过一张地图图面承接，达成“一图到底”的直观感受。此外，我们将触控的核心交互区域固定在屏幕的左1/3，方便驾驶员取用的同时，也让操作动线尽可能缩短，进而提升交互效率。
地图图面“一图到底”

层级轻量 —— 媒体窗口简化

在旧版设计的复盘中，我们发现在系统窗体的定位、形态和能力上应该更清晰明确，才能更好地服务多样的业务诉求，因此对全局窗体进行了重新的评估和梳理。体现在这次的媒体改版中，旧版本的“半屏”媒体面板被移除，取而代之的是结构更清晰合理的全屏应用，操作界面更易懂，交互起来也更直接。
1.3.3 vs 2.0.0
媒体卡片能力也得到了强化，更适合在行车场景使用。用户的高频任务例如通过播放列表切换歌曲、查看历史播放内容等，无需再进入完整的应用进行调节；多音源在新版本中也支持手动编辑：用户可以将不常用的音源隐藏，这样在行车中想要切换音源时，操作效率也会大大提升。
播放列表 & 音源管理 & 进度条拖动

层级轻量 —— 设置 & 快捷控制
用户在通过中控屏进行车辆设置调整时，一般都会进入「设置」寻找对应的设置项；在驾驶时，也会习惯从屏幕边缘右滑进入「快捷控制」完成部分个性化的快捷操作。
在过往的沟通中，我们发现用户经常会遇到进入「设置」和「快捷控制」找不到想要的功能。为了让功能更容易被发现并提升触达效率，新版本中我们简化了「设置」的信息结构：先把全量功能重新归类合并，使左侧分栏缩减到能在一屏之内展示，结构更稳定；之后将部分功能、分类用更贴近用户认知的名称命名，方便查找。
1.3.3 vs 2.0.0
而在「快捷控制」中，我们首先利用数据分析和用户访谈，提炼出用车中需高频调用的功能，将其固定在界面顶部，并利用差异化的呈现方式明确了视觉“锚点”，以提升识别效率；此外，通过做减法将可自定义部分缩减至单页，使用户能放置真正“必要”功能而避免空间的滥用。通过以上的设计处理，将「快捷控制」的敏捷属性发挥到极致。
1.3.3 vs 2.0.0

More Human 场景灵动
数字化车载系统相较传统车载系统的优势之一在于其整合信息的能力。因此在满足法律法规的基础上，如何能更好地利用屏幕有限的信息优势区域，在多场景下用最适合的方式、做最必要的信息呈现，是蔚来数字座舱设计团队一直努力研究的课题。
场景灵动 —— 全新动态面板
在Banyan 2.0.0设计中引入了一种新形式的信息反馈容器“Live Panel 动态面板”。它可以依据用户是否有交互需求呈现不同大小的形态。既能满足在信息优势区即时性地出现被用户注意，又能有效地避免对原有区域关键信息（例如导航TBT）的覆盖。
另外我们还利用动态面板形态可变的属性，将唤醒NOMI出现的ASR和后续呈现的语音结果合并，使得“从用户语音唤起 —— NOMI 聆听处理 —— 中控屏呈现”的交互流程更整体、自然，引导性也更强。
动态面板承接“NOMI记事”

场景灵动 —— HUD信息呈现
全新EC7/ES8上搭载的16.8英寸HUD，硬件升级带来了更大的显示范围，进而能显示更丰富的驾驶信息：更大的沉浸式导航，看的更远更清晰。
然而，更丰富的信息显示在用户眼前势必带来更大的视觉负荷。为此，我们利用上下式信息布局、流畅且克制的场景过渡动效设计，根据动态场景合理分配和引导用户的注意力，突出信息重点，恰到好处地呈现当前场景的高优信息，减少驾驶负荷，也使认知更轻松自然。
依据场景变化的HUD信息内容呈现

场景灵动 —— AR信息架构
Banyan平台车型全系搭载PanoCinema全景数字座舱，通过AR头显设备和7.1.4沉浸声音响系统，营造出3D立体的沉浸视听体验。而在Banyan 2.0.0中AR数字系统信息架构也完成了正向体验升级。
首先，基于N-BOX增强娱乐主机加持，全新AR数字系统支持3-DoF空间交互，用户左右转头即可获取更多信息，不仅获得更广阔的视野，整体操作上也更具自由感；与此同时，为了应对行车中会频繁遭遇转向、颠簸等状况，进入沉浸观影时，FOV会跟随视野吸附关键信息区域，并同时触发防抖算法。通过这种方式使界面呈现更稳定，也能有效降低乘客使用的晕眩感。
自由的3-DoF空间交互 & 聚焦的沉浸观影

More Sophisticated 感官精致
Banyan 2.0.0延续了从Aspen 3.0开始的以黑色为主色调，并用纯粹的辅助色来点缀的色彩体系。这让界面整洁的同时也有足够的生动性，不仅传递了蔚来品牌的高级感，还能有效地透出核心信息给用户。而在继承和延续之余，我们也在探索如何在此之上继续提升。

感官精致 —— 全局平滑圆角
蔚来Logo内精心设计的圆角象征蔚来的车所营造的柔软舒适、安全安心的体验，这种特征的在产品细节中也得到了呼应。在屏幕上我们也引入不同曲率的连续曲线来修正界圆角，以减少线条不流畅的接缝处，去除界面上的“毛刺感”，带来视觉上的温润与舒适，形成内外饰一体的体验。

感官精致 —— 系统图标重构
Banyan平台车型普遍搭载了具有更广色域和更精密的屏幕，而越是高级的屏幕则越可以显示更多丰富细节，因此我们在Launcher图标增加了细腻的3D表现。最大化发挥出屏幕界面的品质的同时，精致的轻拟物化细节也能与座舱的物理材质和内饰完美地融合。
此外，在满足车载场景的易用性基础上，系统图标引用蔚来特征的圆角和断点设计，同时增强蔚来品牌感与一致性，配合线形表达，让界面更轻量化。


感官精致 —— 全新字体设计
除了图标之外，文字作为界面中最小单位的基础视觉元素，我们也进行了更深入的设计。
从NIO OS 1.0开始，系统使用的字体一直是我们的品牌字体“BlueSky”，这是一款设计精美，风格简洁现代的字体。不过在车机界面中使用时，这款字体在小字号及长文本环境下的识别性与易读性就显得有些捉襟见肘了。为此，在本次Banyan 2.0.0版本中我们重构了“BlueSky”，并将其拆分成“BlueSky Display”与“BlueSky Text”两种字体，用以提升整体的视觉体验。
除此以外，我们也新设计了一款等宽数字变体，这款字体在动态变化的时候不会进行跳变、产生抖动感，应用在车速、时间等场景下，视觉观感更稳定、舒适。
最后，我们还赋予了字体智能的能力，来精进方寸之间的美感。
例如，内容类应用常用的各种全角符号【（《 等，能够对段首场景进行智能识别，消除不必要的留白区域，使排版效果更加美观。又比如，在时间显示的场景下，冒号与数字会进行自动智能上下居中对齐，但在其他（如网址）的场景下，冒号的位置会出现在它应该在的位置上。

感官精致 —— 全局动效升级
动效为系统注入了有机的“生命体征”，成为提升系统品质感的的关键保障。全新Banyan 2.0.0旨在打造与物理世界紧密联系的体验。以“水母运动”为灵感，灵动和流畅为目标，全面升级了系统的动效设计。
通过观察自然界的运动规律，我们精心打磨动态曲线，细致调控动效编排，使得界面的运动表现更加真实而自然，仿佛真实物体在我们的指尖舞动。

在用户体验的核心领域，我们进一步提升了手势反馈体验，为用户呈现更加精准的阻尼、更加真实的边界回弹效果、更加明确的按压反馈。每一次触摸都将带来卓越的流畅和清晰，助力用户更好地领略和驾驭数字世界。


More Progressive 触点协同
蔚来一直致力于将座舱打造成属于用户的「第二起居室」。而当用户进入座舱这个相对独立和静谧的空间时，除了可以通过传统的内饰外观、质感等感受蔚来的品牌和设计调性之外，舱内的各个数字触点也是不可忽略的重要一环。在设计中，我们希望通过多数字触点的协同，满足舱内多类型、多角色的场景差异化诉求的同时，达成座舱体验的一体化呈现。

触点协同 —— Sport+双屏联动展示
在全新的Sport+模式的界面设计中就合理利用了中控屏和仪表屏的联动，在一键切换的该模式过程中双屏均会呈现表意的视觉动画，并同时辅以极具动感音效反馈，带给用户一触即发的驾驶体验仪式感。

触点协同 —— 多屏导航信息呈现
在当下，高效获取导航信息仍是用车时的第一诉求，而我们的策略则是在驾驶相关的多数字触点上都布置并合理地展示导航内容。所以这次仪表也支持了地图模块的呈现，这使得驾驶者能够依据个人习惯、或在处于差异化场景时，在 HUD、仪表和中控之间更灵活地查看行驶线路、路口大图等关键信息，进而有效降低开错路的概率。

触点协同 —— 空调前后排差异布局
在同样的功能上，舱内不同角色的差异化需求，往往也会在不同数字触点上带来差异化的设计呈现。
例如在全新空调界面设计的案例中，通过对前后排用户画像的进一步分析，我们发现前排体验在满足极致效率的同时，也需给予用户足够的“掌控感”。因此在中控屏上，我们提供了更大更丰富的全尺寸控制界面，同时也加强了座舱渲染模型的表现效果；而后排乘客的操作往往更简单直接，因此需要提供更明确清晰、且低学习成本的“指向性”。所以我们选择在后排屏上将空调基础功能的优先级前置，并弱化了模型的展示。

✍️ 写在最后
后疫情时代，数字技术的发展重回正轨。愈发多样的数字产品、新颖的交互方式走进大众的生活，并开始被认识和接受。数字座舱维度的体验域也因此被拓宽，催生出多元化的设计观点和趋势。而相比“鳞次栉比”的解决方案和“哗众取宠”的行业业态，蔚来的设计师们则一直坚持用同理心做感同身受的设计，以优雅、谦逊的形式向用户传递情感。在取舍时，我们也会更关注设计能否支持长期的发展、能否与品牌调性融洽结合、能否解决实际的用户问题，才能更聚焦本质，更好地为我们的车主朋友服务。
“设计驱动，持续创新”是蔚来数字座舱设计团队一直秉承的宗旨、也是我们一直想要接近和达成的目标。希望这次 Banyan 2.0.0 的界面与交互设计升级，能让朋友们体会到每个设计细节，带给大家真正超越期待的全程体验！Blue Sky Coming！
希望对大家有所启发，请记得把文章转发到你的朋友圈，点个在看，咱们一起加油吧！

推荐阅读

（点击标题可跳转阅读）

ChatGPT涨不动了，研究发现用户不想用是因为…苹果VisionOS设计原则深度解读，引领下一代设计趋势-UI篇
大厂设计团队AIGC落地项目解析点个 “ 在看” 好文不断

您可能也对以下帖子感兴趣

文章有问题？点此查看未经处理的缓存