{{detailStore.author.is_follow?'已关注':'关注'}}
首页推荐
管理
Aspen 3.1.0|全新浅色用户界面设计介绍
文章

1月14日,Aspen 3.1.0版本正式发布,全新浅色用户界面也终于和大家见面了。NIO数字座舱设计团队也在此借助这个契机,和大家分享一些浅色模式在设计过程中的思考和心得。

写在前面

相较于2.0版本的浅色模式,Aspen 3.1.0版本应该说有了很多创新和变化。在2.0版本里,浅色模式的设计目标是有温度感的“白”,同时注重文字和背景的对比值,借助天色变化体现品牌的调性。而在新版本里,浅色模式的设计目标是怎样处理好各种层级的“灰”,同时对颜色的使用保持一定的克制。

灰色渐层能更好的区分层级关系,保证桌面地图、卡片、控件层次明显;减少不必要的彩色(桌面卡片变成白色),延续了我们3.0版本的设计原则,彩色尽量体现在功能方面,不做太多调性的表现。

经过对用户的反馈和分析,团队决定抓住 “易用” 这个核心来定义3.0浅色模式。为此我们考虑到了每个场景的搭配,对大部分的色相、色调和明暗对比关系都做了调整,并对冲突关系做了细致的分析,期待能为用户带来最佳的体验。

此处,通过一段视频来引入Aspen 3.1.0浅色用户界面设计的介绍与解读。

视频上传成功

极致的易用

要想给用户在使用过程中带来舒适的体验,易用是首要要满足的条件。为此,在Aspen 3.0.0深色模式的底层逻辑基础上,我们着重从 明度、对比度、色彩比例和真实度 这四个维度做了深入的分析,指导浅色模式的设计:

- 温和的明度

Aspen 3.1.0版本的色彩更加柔和,主背景颜色明度保持温和适中,不会因为过于明亮而产生刺眼感;高亮色(Teal)也做了相应调整,避免过分鲜艳。

2、包容的对比度

新版本的浅色模式,前后景的对比值在7:1 - 15:1之间,既保证了信息的有效呈现,又不会让文字在地图上显得“凌乱”“跳跃”,确保用户阅读的舒适度。

3、黑白灰层次比例

在2.0版本中,白色的比例占据了80%以上,所以给人感觉哪里都很白,甚至“刺眼”,这是用户反馈体验不好的一个关键因素。新版本中,我们加大了灰色比重,白色只作为关键控件中的高亮部分(比如桌面卡片),既不突兀,也达到了醒目的效果。一套系统理论上用色的比例关系应该是黑白灰在 1:3:6,新版本基本符合这个比例关系,整体画面主次分明更融洽。

新版浅色模式的比例更接近黄金比例

4、与现实接近

Aspen 3.1.0版本的浅色模式,让道路和车辆回归现实。通过更加精细化的模型处理,品质更加细腻的三维世界光感,以及更加真实的投影,努力使界面呈现和用户心理模型保持一致,尽可能照顾真实感。

打造更多易用场景,持续优化

这次Aspen 3.1.0版本的浅色模式,也是在2.0版本基础上的延续和创新。例如自动模式延续了2.0的整体策略,即日出后切换为浅色模式,日落后切换为深色模式。其中,中控屏支持任何时段进行任意模式切换;为保障夜间驾驶安全,仪表屏切换仅支持自动模式或深色模式。

为了在各个场景的易用性更好,我们做了大量的验证:比如在不同场景下,隧道、地库这种周围环境暗的时候做到画面不刺眼,依然能保证屏幕内信息清晰;以及不同天气环境下的验证,在阴雨天和烈日下找到一个最舒适的色域范围;还有在清晨,正午,傍晚哪些阈值更合适。

此外,我们已着手对浅色模式和深色模式的亮度曲线进行优化调节,针对白天进出隧道、地道、地库以及阴雨天气等的体验问题,补足了针对性逻辑,即在日出后,通过RLS(雨量阳光传感器)监听环境光照信号判断,当环境光照低于X1值且持续时长高于Y1值时,切换为深色模式;当环境光照高于X2值且持续时长高于Y2值时,切换为浅色模式。为确保带给大家更准确更完善的体验,目前这个功能还在优化联调,将在下一个版本里跟大家见面。

根据感光度自动切换深浅色模式会在下一个版本上线

座舱团队始终希望给大家带来最佳的体验。作为一次大的版本迭代,Aspen 3.0.0版本带来了很多新的功能和体验。所以,也是从稳定性的角度考虑,我们选择优先上线深色模式,以便在用户真实反馈的基础上推出适应性更好的浅色模式。未来,我们将会通过改进体系化的效率,在今后的大版本更新时保证深浅两套模式同步上线。

最后感谢在新版浅色模式验证过程中参与测试的车主朋友们,期待新版本能给大家更舒适更易用的体验!也希望大家继续给我们提供宝贵意见和建议!

写评论
积分赞赏
点赞
评论区
  • 编辑
  • {{is_favourite ? '已收藏' : '收藏'}}
  • 举报
  • 加入黑名单
  • 删除
  • 取消置顶
  • 置顶推荐
    • 6小时
    • 12小时
    • 24小时
    • 3天
    • 一周
    • 长期
  • {{digest?'撤销精华':'设为精华'}}
回到顶部
  • 全部评论{{detailStore.commentnum}} 条
  • 只看作者
  • 最热
  • 最新
  • 最早

「待审核」

{{ comment.relativeTime }} 已被赞赏 {{comment.integral}} 积分 回复

暂无相关评论

发表一下个人看法吧