热门标签 | HotTags
当前位置:  开发笔记 > 程序员 > 正文

车载系统中,交互设计的「三秒原则」

作者:隔壁老李全文共2602字18图,阅读需要7分钟————BEGIN————车载系统的设计目前来说仍然是一个混沌状态,市

640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1

作者:隔壁老李

全文共 2602 字 18 图,阅读需要 7 分钟


———— / BEGIN / ————


车载系统的设计目前来说仍然是一个混沌状态,市场上并没有一套完整统一的设计标准与规范,大多数厂家的设计仍然沿用移动端式的设计思维,这显然与实际场景是不符合的。


虽然现在仍然没有一套标准强大的系统规范和交互形式来约束大家,但我们可以通过站在使用场景与用户行为的角度,找到一些基本且重要的交互原则与设计理念来规避系统设计中的一些问题。


一、车载系统的三个主要特点


第一:车载系统的单次操作行为无法超过3秒


640?wx_fmt=png


移动端系统为沉浸式操作,而车载系统不一样,在驾驶过程中,用户95%的精力在于聚焦驾驶上行为上,用户只能抽取仅5%左右的精力与时间来操控车载。因此也就决定了车载系统的功能逻辑,信息布局都必须在极短的时间内以最好的方式呈现。


而如果用户没有在这个时间以内完成操作任务,要么用户选择放弃,重新再来;要么用户花费更多时间和精力,但这样驾驶的危险系数会成倍增长。


经笔者多次在不同路段试验,统计下来平均每次操作,即视线与注意力专注在车载上的时间,无法超过三秒——事实上,当进入第三秒时,已不得不需要利用余光开始注意前方路况了。


因此,在三秒以内,无论是用户第一次操作失败,重新注意路况后,再重复操作,还是用户持续操作直到任务完成,都是非常危险的行为,在这里,由于用户试错的成本非常巨大,也因此交互的设计与信息布局的设计都需要做到最极致。


第二:车载系统对信息与功能需要高度的聚合


在第一点提到的特殊操作环境下,我们无法用传统移动端沉浸式的设计思维来设计车载的界面与功能——因为在极短时间内导致我们必须对所有可能用到的功能入口一步触达,对信息的布局必须做到一眼即见的程度。


这也是为什么飞机驾驶舱内、国际空间站内的各种操控开关拉杆都是星罗密布式的摆放——并非以如今的科技无法做到像科幻片里一样简洁干净的操控台,而是因为考虑到在实际应用场景下,专业素质的人员不需要也没有时间去欣赏美观的界面,学习我们所认为的交互方式。


试想在紧急情况下,机长是不可能像我们在移动端上完成任务一样,先找到主TAB栏,再一级一级点进去确认告诉大家要坐稳扶好不要乱跑。


640?wx_fmt=png


因此在车载系统的设计中,我们需要放下传统移动端的设计思维和所谓的美学,紧扣实际场景下的交互方式与用户需求来设计:


640?wx_fmt=png


第三:车载系统有明显的操作热区与高效的交互方式


640?wx_fmt=png


由于驾驶场景的特殊性,用户只能用离车机最近的一只手去操作,而无法出现像移动端那样,用另一只手或者双手操作的情况。


这也就决定在设计车载系统的功能入口时,会有着强烈的偏向性,并也会影响视觉信息的排布。


同时,在操控车载的过程中,点击仍然是最有效率的交互方式,滑动与长按在上述的3秒安全操作时间内,都会极大的增加操作难度和驾驶风险。


640?wx_fmt=png


通过以上三个特点分析,我们可以了解车载系统设计的大背景与环境,由此我们可以推导出一些比较详细的设计原则。


二、关于交互行为的“三秒设计”


640?wx_fmt=png


第一秒:视觉


用户在0到1秒的时间内,对车机进行扫视,在这个过程中,应用场景的重点信息与功能入口必须能被用户在这个时间以内发现:


  • 不可让用户频繁转动视角以搜索信息;

  • 不可让用户花费过长时间搜寻信息;


640?wx_fmt=png


第二秒:行为


用户在交互行为过程中从开始至结束时间上不能超过一秒


  • 避免需要用户点击两次才能完成,功能要一步必达;

  • 不要让用户滑动或长按;


640?wx_fmt=png


第三秒:反馈


内容在交互行为结束后,在第三秒的时间里必须有强烈明显的反馈告知用户操作成功。


例如明确的点击效果反馈,可通过声音或者界面动画,但过于滞后(超过三秒)的动画反馈将脱离用户的有效感知时间,将不能很好的体现反馈本身的价值。


  • 内容的变化反馈需要有明显且引导性质的动画转场支持;

  • 去除不必要的装饰性的动态展示,将使反馈效果更加聚焦。


640?wx_fmt=png


在满足以上“三秒设计”的原则下,车载系统设计才能达到可用性范畴。


由于特殊的使用场景和交互行为的规则,视觉设计需要保证信息传递的效率以及不同场景下合理的视觉表现。


三、视觉设计需要注意的几点


1.色彩


关于色彩,夜间模式下不宜过多使用高饱和的颜色。


640?wx_fmt=png


由于驾驶环境的变化,车载系统的视觉整体色彩需要跟随场景智能调整。


当进入夜晚模式时,长时间驾驶本身精神与视觉会更加需要集中注意力在前方;此时车内环境中,不宜有过于强烈明显的色彩干扰视线。


试想你在电影院中看电影时,身边的人的手机亮度最高,此时会严重影响视觉的余光,难以聚焦在前方画面上。


640?wx_fmt=png


因此视觉设计的整体色彩体系应当适当的降低饱和度。


同样地,车载系统视觉的设计也应避免使用同一色系的方案,这样无法在1秒的安全时间以内让用户有效果的判断识别信息。


640?wx_fmt=png


2. 字体


文字内容应当通过字号字重来区分主次关系,用户在扫一眼的过程中即可准确的看到重点信息。


640?wx_fmt=png


3. ICON


ICON的设计形式,可更多结合应用的内容,应注意在内容与形式结合时,视线上要保持一致性,可有助于在一秒的安全时间内让用户快速浏览并判断信息。


640?wx_fmt=png


而视线不一致的情况会导致视觉解析的负担:


640?wx_fmt=png


4. 内容排版


由于车载有明显的操作热区,因此在功能与入口的布局上应尽可能的根据热区分布来设计。


640?wx_fmt=png


功能布局尽量设计在离手最近的位置,缩短操作距离,将信息展示区放置在右侧。


以上主要为车载系统设计中视觉部分的一些基础规则,除此之外,我们还可以针对系统底层的响应设计做优化,如对触控区域的优化设计,内容的响应区域应当根据功能入口的布局,进行智能调整,以防止操作无效或者误操作。


640?wx_fmt=png


640?wx_fmt=png


5. 不同场景下的提示


除以上正常驾驶场景外,还有部分对特殊场景的提示;如油耗、故障、雨雪天、超速、疲劳等 。


所以要想系统整体跳出基础可用性范围,进阶到好用的层次,系统对各种复杂交插的应用场景的处理需要更加智能(如导航中的来电,紧急路况的提示),对车内环境控制(如声音、气温)需要更加敏感。


车载系统的设计相比于移动端有着更明显的约束,不论是从空间(使用环境)、时间(三秒原则)、行为(交互方式)、心智(心理诉求),都有着明显独特的场景和特点,要做好车载系统设计,我们需要有丰富的同理心以及亲身体验并反复验证设计。


———— / END / ————


作者:隔壁老李,欢迎一切产品设计相关的话题讨论。

本文由 @隔壁老李 原创发布于人人都是产品经理。未经许可,禁止转载


640?wx_fmt=jpeg

点击“阅读原文”下载APP


推荐阅读
  • 本文介绍了新款奇骏的两个让人上瘾的功能,分别是智能互联系统和BOSE音响。通过对新款奇骏的配置和功能进行评测,探讨了这两个新增功能的使用体验和优势。此外,还介绍了新款奇骏的其他配置和改进,如增加的座椅和驾驶辅助系统,以及内饰的舒适性提升。对于喜欢音响的消费者来说,BOSE音响的升级也是一个亮点。最后,文章提到了BOSE音响的数字还原能力,以及7座版无法配备BOSE音响的原因。 ... [详细]
  • 近年来,大数据成为互联网世界的新宠儿,被列入阿里巴巴、谷歌等公司的战略规划中,也在政府报告中频繁提及。据《大数据人才报告》显示,目前全国大数据人才仅46万,未来3-5年将出现高达150万的人才缺口。根据领英报告,数据剖析人才供应指数最低,且跳槽速度最快。中国商业结合会数据剖析专业委员会统计显示,未来中国基础性数据剖析人才缺口将高达1400万。目前BAT企业中,60%以上的招聘职位都是针对大数据人才的。 ... [详细]
  • 本文分享了一个关于在C#中使用异步代码的问题,作者在控制台中运行时代码正常工作,但在Windows窗体中却无法正常工作。作者尝试搜索局域网上的主机,但在窗体中计数器没有减少。文章提供了相关的代码和解决思路。 ... [详细]
  • 如何配置小米wifi放大器来增强家庭无线路由器信号?
    本文介绍了如何通过配置小米wifi放大器来增强家庭无线路由器信号的方法。通过打开米家APP,选择设备添加,搜索并选择需要添加的wifi放大器,根据系统提示进行下一步操作即可完成配置。配置完成后,家庭无线路由器信号将得到增强。 ... [详细]
  • Win10下游戏不能全屏的解决方法及兼容游戏列表
    本文介绍了Win10下游戏不能全屏的解决方法,包括修改注册表默认值和查看兼容游戏列表。同时提供了部分已经支持Win10的热门游戏列表,帮助玩家解决游戏不能全屏的问题。 ... [详细]
  • 本文讨论了如何在不使用SearchBar display controller的情况下,单独使用SearchBar并捕获其textChange事件。作者介绍了实际状况,即左侧SliderMenu中的SearchBar需要在主页TableView中显示搜索结果。然后,作者提供了解决方案和步骤,帮助读者实现这一功能。 ... [详细]
  • 电脑公司win7剪切板位置及使用方法
    本文介绍了电脑公司win7剪切板的位置和使用方法。剪切板一般位于c:\windows\system32目录,程序名为clipbrd.exe。通过在搜索栏中输入cmd打开命令提示符窗口,并输入clip /?即可调用剪贴板查看器。赶紧来试试看吧!更多精彩文章请关注本站。 ... [详细]
  • 本文介绍了使用postman进行接口测试的方法,以测试用户管理模块为例。首先需要下载并安装postman,然后创建基本的请求并填写用户名密码进行登录测试。接下来可以进行用户查询和新增的测试。在新增时,可以进行异常测试,包括用户名超长和输入特殊字符的情况。通过测试发现后台没有对参数长度和特殊字符进行检查和过滤。 ... [详细]
  • javascript  – 概述在Firefox上无法正常工作
    我试图提出一些自定义大纲,以达到一些Web可访问性建议.但我不能用Firefox制作.这就是它在Chrome上的外观:而那个图标实际上是一个锚点.在Firefox上,它只概述了整个 ... [详细]
  • Excel数据处理中的七个查询匹配函数详解
    本文介绍了Excel数据处理中的七个查询匹配函数,以vlookup函数为例进行了详细讲解。通过示例和语法解释,说明了vlookup函数的用法和参数的含义,帮助读者更好地理解和运用查询匹配函数进行数据处理。 ... [详细]
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
  • 推荐系统遇上深度学习(十七)详解推荐系统中的常用评测指标
    原创:石晓文小小挖掘机2018-06-18笔者是一个痴迷于挖掘数据中的价值的学习人,希望在平日的工作学习中,挖掘数据的价值, ... [详细]
  • JVM 学习总结(三)——对象存活判定算法的两种实现
    本文介绍了垃圾收集器在回收堆内存前确定对象存活的两种算法:引用计数算法和可达性分析算法。引用计数算法通过计数器判定对象是否存活,虽然简单高效,但无法解决循环引用的问题;可达性分析算法通过判断对象是否可达来确定存活对象,是主流的Java虚拟机内存管理算法。 ... [详细]
  • 微软发布OneNote for WordPress插件,支持一键从OneNote获取内容发布
    微软今日发布了OneNoteforWordPress插件,该插件支持从OneNote一键获取 ... [详细]
  • 本文介绍了在Mac上搭建php环境后无法使用localhost连接mysql的问题,并通过将localhost替换为127.0.0.1或本机IP解决了该问题。文章解释了localhost和127.0.0.1的区别,指出了使用socket方式连接导致连接失败的原因。此外,还提供了相关链接供读者深入了解。 ... [详细]
author-avatar
雙子座的魚love
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有