原型 屏幕 界面 如今 App 和网页可交互原型的制作方法和设计流程早已普及，但 HMI 可交互原型制作方法和设计流程还处在探索阶段，比起只需考虑屏幕内交互的 App 和网页，HMI 还要考虑屏幕在汽车内的位置。这次带来一篇相关译文，文章的作者 Casper Kessels（德国 Snapp 汽车软件公司设计总监），使用 VR 来探索 HMI 可交互原型的设计制作。本文译自：https://www.theturnsignalblog.com/blog/behind-touch-concept原文作者：Casper Kessels（德国 Snapp 汽车软件公司设计总监）往期HMI干货：HMI的点击区域应该多大？总监上路帮你实测！设计师都知道根据《苹果 iPhone 人机界面设计指南》，手机 UI 的最小点击区域是 44px。阅读文章 > 在过去的几周里，我设计了一个新的概念原型，用于测试在汽车中触摸屏的交互。在这篇文章中，我想聊聊我遵循的设计流程和迭代过程。一、行动和目标下图是我遵循的简略设计流程。现在汽车 HMI 界面复杂的主要原因之一是功能太多。所以在开始时，我退一步评估了人们在汽车中真正需求是什么，并以此为基础进行了设计。我首先列出了一辆典型汽车的所有功能，并研究了这些功能实现的潜在目标。例如，提高风扇速度的潜在目标是更快地降温。最终得出一个包含 20 个目标的列表，我将其作为设计界面的基础。但在将这些目标转化为具体界面的过程中，我很难走出第一步。在大多数项目都存在一些限制，如屏幕大小、图像性能、时间、预算等。如果没有这些限制你可以自由地做出完美的设计，可有限制就很难起步了。最困难的问题是没有真实屏幕硬件。为根本没造出来的汽车屏幕设计界面是很困难的。所以我希望至少有一个真实屏幕硬件让我能做实验。我画了不同的屏幕布局，但仅凭一张糟糕的草图很难判断出哪个设计方向更好。所以我更进一步打算在 VR 中探索。我的草图二、在 VR 中探索屏幕布局我很想在真车或模拟器上测试屏幕布局，但新冠病毒危机让这变得相当困难。我不得已退而求其次用 VR。我没有 VR 眼镜，但感谢谷歌 Cardboard，我可以用手机加纸壳当 VR 眼镜。我们的目标是探索屏幕布局可能性的大致概念原型，而不是创造一个精确的内部布局模型。我不想花几个小时搭建精确模型。谷歌 Cardboard（译者配图）首先，我找到一个包含内饰的免费汽车 3D 模型。我把 3D 模型拆开，创建了三种不同的屏幕布局方案，用于后续探索。车内屏幕示例在 Unity 中，我导入谷歌 Cardboard SDK，并修改了默认场景。我又导入汽车模型并下载了一个免费的道路素材。我的 Unity 屏幕不到一个小时，我就配置好了一切，开始在 VR 中探索场景。Unity 中 三种屏幕布局之一这三种不同的屏幕布局是根据目前汽车公司的发展方向而选择的。我发现把屏幕放在司机的视线附近最不会让人分心。因此，小屏幕横放是最佳选择。三种屏幕布局三、草图和线框图在确定了屏幕大小的方向后，我将目标转化为界面就没那么困难了。我很早就明白必须对功能进行分组才能开展设计。我按多媒体、环境控制和导航功能进行分组。另一个核心理念是，我希望用户尽可能少点击来实现他们的目标。我基于可调整大小的窗口做了一些简单的布局。我的想法是，在一个平面上呈现所有东西会尽可能简单，并能最大限度地减少点击次数。我画的窗口布局的简略线框图然后，我为每个功能分组设计草图和线框图。同时对屏幕布局做一些小的调整。四、快速原型想要找到像调节音量一样直接控制的交互方式是很难的。我在之前探索汽车手势交互的概念原型的基础上提出了一个新想法。为了更具体地了解它的工作原理，我使用 Axure 制作了一个非常简单的可交互原型。点击并按住屏幕边缘会显示一个覆盖层。通过滚动到喜欢的位置并释放，选项就会被选中。我认为这个方案有潜力，所以我把它整合到概念原型的第一个版本中。五、第一次迭代第一个概念原型很简单。它在屏幕底部有一个菜单栏，上面有导航、媒体、环境控制和摄像头功能。导航总是覆盖屏幕的左半部分，其他功能总是覆盖屏幕的右半部分。每个菜单项都可以进入全屏模式。我还做了一点简单的视觉设计，使原型变得栩栩如生。我在 Figma 中设计了所有界面，并使用 After Effects 创建了两个手势交互的动画。一个用来控制音量，一个用来调整温度。反馈我联系了有汽车设计经验的设计师，寻求他们对这个概念原型的反馈。从他们的反馈中，我们可以清楚地看到有三点要改进。使用可调整大小的窗口非常受限。如果使用多层级界面而不是窗口，那么界面就有更多的自由和空间。第二点是这个概念原型系统功能过于宽泛。相反，当你开车时，你只需要导航和多媒体功能。这些功能应该是基本功能，其余都是额外功能。在这个概念原型中，所有功能都同等重要。最后一个建议是，这个概念原型相当保守。这是为现在市场上的汽车设计的。而在汽车行业，由于开发周期较长，设计师需要提前设计 3-4 年之后的汽车。所以我不应该害怕创造新的概念原型，应该同时使用不同的屏幕，并着眼于 3-4 年后的用户体验。六、第二次迭代我把上一个原型中反馈的问题在这次迭代中改进了，并更多关注导航和多媒体功能。我还想看看是否可以围绕菜单栏进行设计，创造更自然的交互。所以我尝试将菜单栏转换为一个 3D 多层界面，每一层都对应一个驾驶模式。第二个原型使用分层系统而不是菜单栏最高一层是”通勤模式“，展示多媒体、环境控制和导航功能。其次是“导航模式”，以导航为中心。最后，还有一个“专注模式”，界面菜单占用空间最小。每个模式都对应一个类似的仪表盘界面。用户可以通过方向盘上的按钮或与中央屏幕交互来循环切换这些模式。我遇到的问题是没有控制环境的地方了。我想了一个办法，把控制器分开，放在不同的屏幕上。这样中央屏幕界面更加简单，有助于整个系统的可用性。反馈我已经注意到，在设计这个概念原型时，我引入了许多不必要的复杂性。其他设计师和我交谈也得出了同样的结论。使用层和驾驶模式相结合的想法很有趣，但太复杂了。理想的解决方案是将第一个概念原型和第二个概念原型结合一下。另一个观点说，这些多层级界面看起来相当混乱。所以在最后的概念原型中，我需要找到一种视觉风格，最大限度地减少混乱，使它看起来更简洁。七、最终版本在最终版本中，我删除了在不同驾驶模式中切换的交互。我想保持专注模式的理念。因此，我没有使用 3D 多层界面在驾驶模式中循环切换，而是将两个主要控件放在屏幕的角落，让用户决定他想要显示什么。最后，我在 VR 中测试了这个概念原型，看看控制的可达性如何。我曾担心多媒体按钮会被放置得离司机太远而不舒服。在用谷歌 Cardboard 在 VR 中观察后，我注意到情况并非如此。然而，我使用的车辆 3D 模型的车内空间不大。在大型 SUV 中，这仍然是一个问题。所以这将是下一个版本概念原型需要改进的地方。我还为准备了一个更沉着的视觉设计风格，这有助于减少界面层级的混乱样式。最终的概念原型其结果就是我在上一篇文章中提到的概念原型。像本文提到的这种的项目没有终点，我将继续改进和迭代。我已经收到很多读者的评论和反馈，这将有助于改善概念原型！因此，如果你有任何意见，我会很乐意接受！本篇来源：优设网原文地址：https://www.uisdc.com/hmi-prototype-design-process
用户 屏幕 座舱 Hi 大家好，在半年前我和亚辉、Shadow 一起主编的《智能座舱的人因与人机交互设计》（书名待定）的撰写工作已接近尾声，和大家商议后，在此我来提前共享书中的部分初稿，希望能对读者有所帮助，以下进入正文。更多车载交互类设计干货：HMI设计干货！滑动和点击哪个更不容易让司机分心？车载触摸屏与手机/平板电脑最大的区别之一是使用场景 —— 车载触摸屏可在汽车驾驶使用。阅读文章 > 笔者还记得在 2019 年，大家都在讨论未来的座舱只有一个屏幕还是屏幕的数量越来越多，从当前来看后者是大多数车企选择的答案。为什么？为副驾和后排乘客增加屏幕的确有助于提升乘坐体验，不过当前更重要的原因是车辆增加屏幕的成本并不高，但它能给这辆车带来一定的溢价和利润空间，同时能让整个座舱更显科技感与豪华感，所以车企都会选择在自己的中高端车型上设置多个屏幕。那么，未来座舱内是否还会有更多的屏幕？这些屏幕究竟用来做什么？这两个问题成为车企当前思考的问题，以下是笔者的一些看法。HUD、仪表盘、中控屏、车控屏、副驾屏甚至是方向盘屏都是我们在以往车型中所看到的，常见组合可以参考以下不同屏幕的布局演变方式。在多屏交互上，很多车企都会关注屏幕之间的信息切换，包括仪表盘和中控之间的信息切换，例如几何汽车允许驾驶员通过三指左滑的形式将中控的地图信息切换到仪表盘上；以及中控和副驾屏之间的信息切换，例如小鹏 G9 允许用户无论在主屏或者副屏观看电影时，都可以通过两指滑动分享屏幕。除了以上常见的屏幕，透明 A 柱和电子后视镜两种新屏幕在未来都有可能成为各个车型的配置选项。透明 A 柱的作用是避免驾驶员在行车过程中视野被 A 柱部分遮挡，而电子后视镜相比传统光学后视镜能做到防水、防雾、防污和夜视能力，同时电子后视镜的屏幕摆放位置在车内，驾驶员需要扭头获取信息的难度明显降低。除此之外，当透明 A 柱及电子后视镜和 ADAS 联动显示增强现实信息，在一定程度上能和 HUD 在空间和方位上互补，为驾驶员带来更丰富的车外环境信息显示。以上都属于座舱内部的屏幕，而手机、智能手表甚至 AR 眼镜等设备属于用户随身携带的屏幕，车企和手机终端设备厂商都在相互探索不同屏幕之间的交互方式有哪些，例如苹果在 WWDC 2022 上发布的最新一代 Carplay，它允许用户的 iPhone 应用和信息直接显示在汽车多个屏幕上，打破了手机和车辆数据的交互隔阂。那么智能座舱的多屏交互该如何设计？目前工业界和学术界都没有一个明确的答案。笔者认为智能座舱多屏交互是一个很前沿的领域，指导我们向前探索的最好方法是从其他领域参考和吸取一些可用的原则，并对此进行合适的改造，以下是笔者通过大量的观察和分析总结出来的 5 条设计原则：一、0-3 步内完成绝大部分的多屏交互和设置提出这条原则主要有两点的考量。一是从安全、高效的角度出发，我们不希望用户在驾驶过程中还需要多步的操作才能将当前屏幕的信息流转到另外一个屏幕上，目前多个厂商实现的通过多指滑动分享数据也是同一个道理。二是参考了苹果在跨设备交互上的做法，笔者在过往发现苹果绝大部分的跨设备交互都能在 3 步内完成，这也是为什么苹果用户高度依赖苹果生态的原因之一。要实现该原则，那么用户随身携带的手机、手表和车载系统需要无缝、实时地连接在一起，否则用户使用时需要的连接步骤会远大于 3 步，这时需要手机厂商和车企有更深的配合和联动。在手机和车载系统联动上，笔者以问界 M7 的鸿蒙系统作为参考案例。当用户的手机和车载系统都登录了华为账号，用户上车后无需任何操作两台设备已经互联一起，这时用户可以通过“打开应用列表”-“切换到手机应用列表”两步操作直接在中控大屏上访问手机上的应用，这种高效、直接、无感的交互方式值得每一位从业人员去学习和探索。二、多屏之间的交互过程需要符合用户的预期当座舱内屏幕越来越多，用户对于每个屏幕的详细作用需要一定的认知和理解过程，在这过程中用户很有可能按照过往经验以及所处环境对其进行理解，例如使用鸿蒙系统的用户不一定了解苹果的 Carplay 系统。另外，每一块屏幕的分工应该是明确且能根据用户和车辆状态而动态变化的，例如当车辆左后方即将出现危险，应当使用左侧的电子后视镜而不是通过中控来提示驾驶员；在驾驶过程中车载系统应当避免显示无关要紧的信息，尤其是车辆处于高速驾驶或者驾驶员处于高负荷的状态下。众所周知，国内绝大部分车型的仪表盘属于 QNX 系统，中控的系统有 Android、鸿蒙、Linux 等等，绝大部分用户的手机设备属于 Android、iOS 或者鸿蒙系统，每个系统之间的交互细节和表现都需要人为重新定义好，定义不好极有可能引起用户的突兀或者不解。例如用户上车后，车载系统直接和副驾的手机系统建立了连接，而不是和主驾的手机进行互联；驾驶过程中，中控不断显示手机的消息推送以及在多人场合下直接显示视频通话请求的推送.......这些明显都是不好的预期。那么什么是好的或者不好的用户预期？这部分需要读者多以用户为中心的角度进行思考、设计和测试才能知道。三、信息的交互需要符合当前屏幕的使用体验当中控信息显示在仪表盘或者 HUD 时，第一我们应当遵循仪表盘和 HUD 的设计规范，这时响应式设计能起到较大的帮助。第二我们需要关注信息的交互方式，我们不可能让用户通过触控仪表盘的方式对此信息进行交互，也不可能在仪表盘或者 HUD 上显示文本框并让用户通过文本输入法进行输入。每一块屏幕有各自的交互行为，笔者认为这些交互行为可以分为 4 种情况，它们分别是：瞥一眼、轻交互、中等交互和沉浸式交互，每一种交互行为承载的信息量大小以及需要的注意力和时间会依次增加。以手机的消息推送为例，只需要用户注意一下就能完成的任务都能认为是“瞥一眼”；如果用户需要关闭这条推送可以等待几秒或者将其往上推，而这种只需要 1-2 步操作会定义为“轻交互”。在驾驶过程中，HUD、仪表盘、电子后视镜以及透明 A 柱需要承载的信息应该尽可能符合“瞥一眼”的原则，如果需要交互则允许用户通过方向盘按键、语音等方式一步完成。如果读者想不到合理的设计方法，可以参考智能手表操作系统的设计原则和规范。“中等交互”更多是指需要若干步骤才能完成的任务，例如用户在手机上回复短信；而“沉浸式交互”可以理解为用户在手机上全神贯注地看视频或者玩游戏。很明显“中等交互”和“沉浸式交互”不应该影响正在手动驾驶的驾驶员，但有些“中等交互”确实需要驾驶员在驾驶过程实施，例如中途切换导航规划。在过往我们会将这些信息和交互全部显示在中控上，其实我们也可以通过仪表盘和方向盘的方式承载和交互信息，这时候方向盘是否有可能出现一个屏幕将成为车厂讨论的问题。笔者认为，从手机和车载系统融合的角度来看，方向盘屏幕在一定程度上比中控屏幕更好地完成“中等交互”，例如驾驶过程中用户可以在方向盘屏幕操纵地图和完成多项设置步骤。当每块屏幕都有了自己的交互定义，手机信息如何合理显示在多个屏幕上将成为问题。这里有两种方法供读者参考，第一种是赋予每一个屏幕不同的参照，例如仪表盘可以参考智能手表，它只呈现简单的内容或者消息推送，用户需要查看则去中控查看（这时中控相当于智能手机）。第二种是重构每一款服务和应用，让内容可以根据规则动态显示在相应的屏幕上，例如以下表格中微信会结合 OBD 数据、车内人物数量等参数动态调整自己的信息显示和交互策略（这属于笔者遐想的方案），不过这种方法需要手机厂商和车企的深度参与才能实现。无论是哪种方法，我们都应该尽可能让当前信息的交互符合当前屏幕的使用体验以及符合用户的预期。四、信息的显示策略应当根据场景和用户状态动态调整智能座舱的每个屏幕都有自己的职责，信息的显示策略应当基于每块屏幕的职责而定制，例如驾驶信息更多呈现在 HUD 和仪表盘上，娱乐信息更多显示在中控屏上，外界环境信息更多显示在 HUD、电子后视镜和透明 A 柱上。但是信息的呈现不应该一成不变，因为在驾驶过程中，所处环境和驾驶水平都会影响驾驶员的认知负荷，结合多重资源理论和耶德定律可知，每个感官通道都有自己的负荷容量，当接收的信息越多，认知负荷越高，越容易引起人的分心甚至紧张。因此信息在哪显示、什么时候显示需要读者重点关注。显示策略的动态调整也要关注用户的个人设备，因为个人设备也有责任避免用户分心或者认知负荷过载的情况发生。以智能手表为例，智能手表是很好的身体状况监测器，当智能手表检测到驾驶员身体出现异常，这时最好的提示方法是通过仪表盘以及扬声器进行反馈，而不是让用户抬手去看手表上的信息，因为这有可能造成风险。同理，手机信息也应当根据座舱每个屏幕的特性，以及场景和用户状态的变化去动态调整自己的显示策略，具体可参考上述笔者提供的微信案例。五、隐私的保护在于预防而非补救每个人都有自己的一点小秘密，当驾驶员的手机信息直接暴露在公共空间中容易造成隐私泄露，因此如何保护隐私在智能座舱中是不可忽略的问题。笔者认为，由 Ann Cavoukian 博士撰写的 Privacy By Design 7 项原则中可被智能座舱重点参考的设计原则是：主动而非被动；预防而非补救。简而言之，隐私设计是关注事前而非事后。随着人数和双方关系的变化，智能座舱会从个人空间转化为公共空间，将手机中涉及隐私的信息直接映射到中控屏幕或者通过扬声器播放是不合适的。为了避免用户隐私的泄露，笔者有以下设计建议：个人设备和公用设备互联时需要身份认证校验，校验手段包括人脸识别，声纹识别、设备位置定位等等。所有涉及隐私的跨设备交互能力需要用户了解和并允许关闭，尤其个人新设备首次进入设备群后。假设在未来同账号下的个人设备都可以直连到座舱的屏幕上，设备首次连接时应该询问用户是否将短信等隐私信息推送到屏幕上，同时也允许用户设置一系列的信息同步选项。根据车内人数和空间位置合理呈现信息。在智能座舱中副驾和后排乘客较难观察到仪表盘、HUD 上的内容，因此涉及驾驶员的隐私信息可以优先显示在仪表盘、HUD 上。在多人乘坐的场景下，我们需要重点关注声音的播放，因为这容易引起隐私的泄露。上述的微信案例也是考虑到这些细节。最后，由于智能座舱多屏交互跟场景变化、用户意图、驾驶状态等多个因素有关，而且这项工作在业界和学术界仍处于初期阶段，笔者建议读者多从人因工程和以用户为中心的角度进行思考和设计。这次内容更新到这，下期再见。欢迎关注作者的微信公众号：「薛志荣」本篇来源：优设网原文地址：https://www.uisdc.com/cockpit-multi-screen-interactive-design
拖动 屏幕 窗口 本文为 Material Design 折叠屏设计指南中文版译文第三篇，超多干货建议收藏。往期回顾：Material Design 折叠屏设计指南（1）：概述折叠屏使用柔性屏幕可以折叠或展开，根据你的需要无缝扩展可用的屏幕空间。阅读文章 > 如何设计折叠屏？来看这份设计指南！最近做了HUAWEI Mate Xs手机折叠屏的相关设计，借此机会「趁热打铁」分享一手界面操作体验、适配技巧分享给大家，希望对各位设计师同学有所帮助和参考。阅读文章 > 导航组件在可折叠设备上，将导航组件放在靠近屏幕边缘的地方，因为这样更容易触及。使用导航栏组件作为主导航。使用底部导航栏作为主要导航，会使用户很难触及屏幕中间的位置。当心！底部导航栏最好用于移动设备，而侧边导航栏（Navigation rail）则更适用于可折叠和屏幕较大的设备。App 可以在到达次级页面后隐藏侧边导航栏，只要你能显示返回到主页面的按钮。次级页面在打开时可能会隐藏导航栏，所以显示返回按钮有助于返回主页面。次级导航1. 顶部应用栏（Top app bars）应用栏容器用于显示和对组件分组，帮助用户执行主要操作，或对主体容器中的元素执行操作。应用栏容器可以与导航容器组合使用。当心！使用顶部应用栏会在屏幕上产生带状效果临时组件1. 对话框将对话框放在屏幕两侧，避免将关键交互放在中间。可以这样！将对话框放在屏幕两侧。多窗口交互折叠屏提供更大的显示面积，经过优化，可以同时显示多个 App。这种额外的空间对于多任务处理或依赖信息比较或管理的工作流程特别有用。通过最大限度地减少用户在单个屏幕上的 App 之间的切换，使得生产力、授权和更无缝的用户流成为可能。在 Android 12 中，用户可以在新的概览（overview）中创建和审视多个窗口。请点击以下链接了解更多关于 Android 12 “最近使用的应用屏幕”的内容。（ https://developer.android.com/guide/components/activities/recents ）拖或放（Drag & ｄｒｏｐ）使用 Android 的拖和放框架，你可以让用户以图形化地拖放手势来移动数据。该手势可以在同一 App 中移动到一个视图到另一个视图，或者在启用多窗口模式在一个 App 和另一个 App 之间移动。尽管该框架主要是为数据移动而设计，但你也可以将其用于其他 UI 操作，例如，你可以创建 App，当用户将一个颜色的图标拖到另一个图标上时，将两个颜色混合。1. App 连续性在可折叠设备上运行 App 时，App 可以从一个屏幕自动过渡到另一个屏幕。过渡后，App 应该在相同的状态和位置上继续运行，当前的任务无缝衔接。用户需求创建、排列和调整窗口的方式对所有用户和任何屏幕尺寸来说都应该直截了当。无缝窗口管理的模式包括：运用 Material 动效指南中所描述的平滑过渡（smooth transitions）确保用户可以轻松创建多个窗口，并根据需要在它们之间移动确保心智模式（mental models）和交互模式的简单性，这样用户就不需要考虑哪种模式适合哪种任务。在可折叠设备中，包括那些带物理、有缝铰链的设备，设计和实现窗口交互应该一致用户通常使用多个窗口来并排显示和使用 App。例如，收件箱 和 照片 App 并排。窗口创建和行为Android 为用户提供了多种创建多窗口视图的模式。1. 任务栏（Taskbar）在 Android 12 中，任务栏为钉住和建议的 App 提供了一个启动点，可以很轻松把 App 变成独立的窗口。要创建一个新窗口，用户需要从任务栏中选择并拖动 App，然后移动 App 图标来指示窗口应该显示的位置。任务栏可以作为创建多个窗口的起点。将 App 从任务栏拖到屏幕的一侧会创建一个分窗口视图（split-window view）。上下文菜单用户可以通过 App 上下文菜单的概览（overview）来创建多个窗口。当使用上下文菜单将 App 固定在屏幕边缘后，从概览中点击第二个 App 将触发分屏。3. 调整窗口大小默认情况下，多窗口被创建为 50/50 并排分割窗口。多窗口是一种临时状态。当把手（handle）拖动到屏幕的边缘时，被缩小的窗口将关闭，退出多窗口视图。窗口可以进一步调整为 1:3 或 2:3 的比例。这些比例提供了主窗口和副窗口相互转换，提供了更大的灵活性，并允许根据需要将重点放在其中一个 App 上。屏幕把手可以被拖动和释放以创建所需的窗口比例。把手会自动调整到最近的捕捉点（Snap point）。把手也可以用来关闭其中一个窗口，这将退出多窗口视图。使用分屏把手调整和关闭多个窗口大小竖屏 50/50 分割横屏 50/50 分割App 的大小可以填满三分之一的可用窗口空间。由于屏幕面积减少和对布局的挤压，确保 App 在这个狭窄的宽度上仍然可以提供可用的体验，避免在这个比例下进行复杂的操作。App 的大小可以填满三分之一的可用窗口空间。由于屏幕面积减少和对布局的挤压，确保 App 在这个狭窄的宽度上仍然可以提供可用的体验，避免在这个比例下进行复杂的操作。拖和放（Drag and ｄｒｏｐ）在可折叠设备上的拖和放交互用于组织、编辑和一次为一个或多个元素应用操作，使普通用户目标更简单、更高效。可折叠设备为拖和放操作提供一个优势，因为额外的屏幕或表面区域可以简化操作，并为拖和放的项目提供即时反馈。请记住，对于较大的屏幕，当拖动由触摸板或追踪速度较慢的鼠标控制时，可能很难将一个对象移动较大的距离，因为手指可能在拖动的对象到达目的地之前就移动到了触摸板的边缘。Android 拖和放框架（Android drag and ｄｒｏｐ framework）尽管该框架主要是为数据移动而设计，但你也可以将其用于其他 UI 操作，例如，你可以创建 App，当用户将一个颜色的图标拖到另一个图标上时，将两个颜色混合。1. 粗略和精细的投放投放的粗细程度通常应该随着完成一个动作对交互的预期依赖而提高。对于触摸交互，避免将拖动的项目放在可能被手指或手遮挡的地方。粗略投放可拖动项目的目标可以是粗略的，也可以是精细的，这取决于 App 场景的不同。拖动到一个粗略的位置通常会导致该项出现在一系列条目或内容块的末端。精确投放相比之下，对于精确投放的交互在过程中提供反馈，提示投放将发生的确切位置。例如，在发信息和编写文件时，光标可以用来显示被放下元素将出现的相对精确的位置。光标反馈对被拖动的图形的移动做出反应。这些微妙的指示器显示了对象将在文本中精确位置。视觉指示器显示可拖动个元素的视觉指示器可以非常突出，也可以大部分时候隐藏，这取决于优先级。指示器模式从最明显到最不明显排列如下：对象上可见的持久可供性（affordance，译者备注：人对事物功能的理解），如表示视觉抓握的把手上下文中的明确的提示（call-out），比如标签文案（labels）在被动交互（如悬停）或通过上下文暗示之前，线索在视觉上是隐藏的完全隐藏直到拖动动作被启动根据用例和流程，有时可能需要提高指示器的级别，而在其他时候，它可能不是流程中的主要交互，作为支持和补充性的指示器更合适。放置区域（ｄｒｏｐ zones）放置区域是一致的视觉模式，它阐明了预期和交互类型。放置区域模式的例子包括：持续性区域： 在任何拖动操作开始之前，静止时显示的占用空间。用于告知拖放操作是可用的，并且可以作为功能拖放。例如页面上用于上传文件时的加载区域。热点（Hotspots）： 当拖动开始时出现的指示器，以帮助告知可发生拖放交互的位置。当有个多个拖放区域可用时，或者当它有助于指出屏幕的哪一部分将被拖放影响时，这种方法可能很有用。预定义区域： 当拖动启动时显示边界。告知作为容器的预定义空间，拖放将填充该空间。例如，在主屏幕上重新对 App 排序，或者显示重新排序的列表条目将被放置在哪里。窗口： 告知拖动的条目将在何处替换屏幕的一部分，例如用于创建多窗口。默认情况下，这种模式是共平面的（coplanar，译者备注：几何术语，指几何形状在三维空间内占用同一平面的关系），导致周围屏幕元素被推动。1. 在 App 之间拖动当一个条目从一个 App 移动到另一个 App 时，交互会受到拖动项目的 MIME 类型（Mutipurpose Internet Mail Extensions Type，译者备注：网络中的媒体类型，比如图片、视频、文本等）和放置区域的影响。大多数被拖动的元素都属于图像或文本类型。拖动单一条目2. 无障碍无障碍拖和放交互的主要考虑因素包括：依靠键盘导航的用户可能看不到光标的变化状态来表示某个条目是可以拖动的。可以增加视觉可供性（例如抓握、图标或更高的视觉层级）来向用户传达这一信息。为启动拖动提供一致的模式，或者引入后备方案，以帮助用户在多个产品和平台上迁移。Aria 和 Role 属性（译者备注：帮助视力障碍用户的功能，例如放大镜、语音朗读和高对比度等）、一致的键盘控制和读屏器支持应该在整个交互过程中表明可拖动性和状态。打开、关闭和旋转设备1. 折叠状态到横屏展开动效被用来突出由更大的展开的画布所显示的新内容。导航栏和详情页的动画用来引起人们的注意。可折叠设备上的邮件 App 从折叠姿态到展开的横屏姿态。避免在折叠或展开后停留在之前姿态的布局上。相反，随着设备的折叠和展开，进行不同姿态的无缝过渡。千万别这样！避免启动布局变换时出现延迟。姿态的连续性也可以在 banner 的动效中得到加强，banner 宽度延展以利用更大的屏幕宽度。搜索栏也可以有类似的表现。当进入立放模式时，像视频这样的主角元素可以扩展到屏幕的上半部分。像媒体控件这样的辅助元素填补屏幕的下半部分。2. 组件变换边框进入和退出这种变换用于靠近屏幕边缘的组件，这些组件根据布局自适应时退出或进入。底部导航侧边导航应用栏面板（Sheet）媒体控制随着屏幕的展开，底部导航变换成侧边导航新增一个面板这种变换是用来吸引人们对一个新面板的注意，这个面板由一个更大的画布（canvas）展示出来。随着屏幕尺寸的增加，一个辅助面板从侧面进入视图。同级变换：导航顶级导航条目之间的对等变换使用共享的 Y 轴。详情页面根据所选列表条目的对应顺序向上或向下滑动。Y 轴上的元素同步变换，以加强内容状态的微妙变化。父子导航：列表嵌套列表的父子变换使用共享的 X 轴转换。列表条目转换成详情视图父子导航：卡片卡片使用容器变换进行父子变换。卡片容器可以从一个小元素扩展到沉浸式视图对话框出现使用动效将注意力吸引到对话框中显示的新内容。文本和按钮的垂直动效为对话框扩展增加了细节。可以这样！可以用分阶段垂直动效来显示对话框不要从中心均匀地展开对话框。对话框展开时，内容不应淡入、重叠或相反的方向运动。千万别这样！避免引入拒用统一缩放的对话框。欢迎关注作者的微信公众号：「龙爪槐守望者」本篇来源：优设网原文地址：https://www.uisdc.com/material-design-component
屏幕 铰链 设备 折叠屏使用柔性屏幕可以折叠或展开，根据你的需要无缝扩展可用的屏幕空间。设备与环境了解硬件和 UI 的注意事项是设计自适应体验的关键。当 App 适应可折叠屏幕时需要考虑的条件和限制。姿态姿态是指可折叠设备可以采取的屏幕配置，能为 App 提供多少种不同的布局环境。折叠折叠姿态的正面屏幕使用了与典型手机相似的比例。当你为折叠姿态的屏幕设计时，请参考 Material Design 中有关移动设备的通用指南。与普通手机的比例相似，折叠姿态有一块正面屏幕。展开姿态展开姿态是指打开的屏幕，它通常是正面屏幕的两倍大小或一个小平板电脑的大小。展开的姿态分为横屏和竖屏方向。在展开姿态下，设备的折叠铰链在某些型号上可能会很明显。最为独特的是微软的 Surface Duo，铰链完全从物理上把屏幕分割开。Sureface Duo 铰链完全把屏幕分成两块（译者配图）展开横向横向模式适用于较长的屏幕边水平，较短的边竖直。在展开横向时，较长的屏幕边是水平，较短的边垂直。展开竖向竖向模式适用于较长的屏幕边垂直，较短的屏幕边水平。在展开竖向时，较长的屏幕边垂直，较短的屏幕边水平。立放姿态（tabletop）立放姿态描述一种特别的屏幕姿态，其中折叠屏一半与另外一半垂直。立放姿态类似于笔记本电脑：屏幕的一半是水平的，就像平放在桌上一样，而另一半则约 90 度一样竖立着。立放姿态是一种屏幕姿态，屏幕一半水平，另外一半垂直或者半折。可达性当屏幕展开时，除非调整手的握姿，否则对于大多数人来说，屏幕上方的 25% 是够不着的。为了适应设备和手的大小，限制放置在屏幕上方 25% 的交互元素数量。此外，避免将重要的交互元素放在离屏幕下方边缘太近的地方。有些用户，特别是手比较大的用户，可能很难触及屏幕下方边缘的区域。当用户拿着一个展开的设备时，他们的手指触及范围是有限的。在布局中指定说明交互的时候，要考虑到以下这三个人体工程学区域。用户可能通过伸长手指到达这个区域，这使得许多人在触及这个区域时略显不便。用户可以舒适地到达这个区域。当手握住设备时，触及这个区域具有挑战性。展开的设备示意图，呈现三个不同的交互注意区域。限制屏幕上方四分之一的交互。如果不改变持握姿势，屏幕上方的 25% 是很难触及的。当用户用两只手握住设备时，屏幕的顶部区域（1）难以触及。将关键和常用的元素放在靠近屏幕下方和角落的地方，会使得它们更难接触到千万别这样！避免将 FABs（浮动动作按钮）等元素放在离屏幕下方太近的地方。这使得它们难以触及，因为较大的设备会限制拇指能够伸向的距离，特别是在单手使用设备时。中心铰链由于设备的铰链实现了折叠，折叠屏幕的中心会有触觉差异。避免将重要的信息和动作放在展开的屏幕的中心 48dp 上。展开屏幕上中心的铰链示意图以竖向模式下的中心铰链举例。避免在这个区域放置重要的交互元素处于竖向模式下设备中心的铰链示意图折叠设备的铰链有两种类型：几乎看不到的无缝铰链，尽管一些用户可能会感觉到屏幕表面有触觉差异。铰链在物理上将设备划分成两个屏幕（比如前文提到的微软 Surface Duo）。无缝铰链的设备在有物理铰链的设备上，将屏幕设计成两个不同的部分，这样就可以使接缝和屏幕之间显得很和谐。有缝铰链的设备一个对话框案例，该对话框位于有缝铰链半边屏幕的中心附近。避免放置关键动作（比如对话框）沿中心铰链放置。千万别这样！避免将关键动作放在中心铰链上。可以这样！将对话框等关键元素放在屏幕的两边。千万别这样！避免将关键动作放在屏幕的中间。划分屏幕当把屏幕划分成组合区域时，避免在屏幕中间的 48dp 放置重要动作。2 栏布局的组合效果最好。横向在横向模式下，把主要的导航组件放在屏幕的垂直边缘（1）上，并将内容和元素分割成两列（2）。内容和元素被分成两列，一个导航栏（1）提供符合人体工程学方式的导航体验。而内容被分成两列，使用屏幕的宽度（2）。竖向在纵向布局中使用一列。在纵向模式下，水平空间是有限的，几乎没有空间可以实现有意义的两列。在可折叠的 App 的纵向布局中使用单列如果内容能在狭窄的视野中容纳而不会过度失真，那么可以使用两列展开的纵向布局。当心！只有当内容适合较窄的视图时，才能在纵向布局中使用两列。复杂的列表条目使人很难在两个压缩的列中舒适地查看内容。当心！扩展或组合窗口在为可折叠设备进行设计时，有两种主要的方法来管理扩展和收缩的屏幕空间。当屏幕空间因为设备的展开而扩大时，更大的画布可以用来扩展现有视图或添加一个单独的、额外的视图。当展开时，列表中的第一个对象应该默认打开，除非有条目被选中。扩展窗口扩展意味着采取典型的移动设备设计，重新排列元素和内容，以更好地利用空间。这可能意味着增加第二列内容或重新排列内容区域。这种方法类似于网页上的响应式设计。包括以下例子：增加第二列内容创建一个更复杂的照片布局引入更多的负空间（留白）与通常使用单列（左图）的移动设备布局相比，可折叠设备（右图）可能会使用多列布局。合并窗口为了适应更大的屏幕，移动设备 UI 中的两个不同的视图可以在一个更大的设备上作为单个视图呈现。考虑从一个流程中提取多个屏幕，并将它们呈现在可折叠设备上以单一视图呈现。包括以下例子：收件箱视图与单消息视图并列文本消息列表视图和单对话视图并列文件浏览器视图与打开的文件夹并列音乐家专家信息与音乐播放器控件同时出现。在移动端（左图），一个应用程序有两个屏幕，可以合并成单个两列布局，用于开发的可折叠设备（右图）。滚动根据你的 App 如何扩展或组合窗口，折叠设计的滚动行为在展开设计中发生变化。如果你扩展一个窗口，你可以决定整个屏幕是一起滚动还是每一边（每一列）独立滚动。如果你选择组合窗口，屏幕的每一面将作为独立的滚动区域操作。两个可折叠的设备。1（左边）显示两个独立的滚动列，2（右边）显示单页的滚动内容。沉浸式布局沉浸式布局将注意力集中在单一的动作或窗口上，为一个特定的目标创造无干扰的环境。包括以下例子：玩游戏看电影视频通话创意 App通过使 App 的布局专注在视频电话上，这种体验不会与其他内容争夺注意力如何设计折叠屏？来看这份设计指南！最近做了HUAWEI Mate Xs手机折叠屏的相关设计，借此机会「趁热打铁」分享一手界面操作体验、适配技巧分享给大家，希望对各位设计师同学有所帮助和参考。阅读文章 > 欢迎关注作者的微信公众号：「龙爪槐守望者」本篇来源：优设网原文地址：https://www.uisdc.com/folding-screen-design-2
布局 屏幕 面板 本文为 Material Design 折叠屏设计指南中文版译文第二篇，超多干货建议收藏。Material Design 折叠屏设计指南（1）：概述折叠屏使用柔性屏幕可以折叠或展开，根据你的需要无缝扩展可用的屏幕空间。阅读文章 > 核心布局核心布局是一系列大屏幕布局，作为设计和实现的起点。在为大屏幕适配 App 时，这些布局可以用来帮助定义布局和组织共同元素。这些布局支持常见的活动，如内容浏览和消费，以及身临其境的媒体体验。列表详情视图许多布局可以基于列表和详情之间的关系来建立。在屏幕左边显示列表，右边显示列表对应的详情，可以在空间上建立它们之间的关系。只能用于横屏。在竖屏时，要考虑调整布局。列表详情视图的用途包括：文本消息和对话文件浏览器和打开的文件夹音乐家和专辑1. 布局用例列表详情视图最好用于浏览内容和快速查看详情信息。这对显示一系列对话和文本信息、浏览文件和查看它们的详情、浏览多个专辑封面和它们各自的曲目的布局来说，都很有帮助。即时通讯 App，显示联系人列表和他们的对话列表详情视图使用两列，一列用于列表或条目组，另外一列用于详情视图。1. 列表区域。2. 详情区域1:1 布局将屏幕分割为两个相等的空间，来显示列表和详情。邮件 App 使用 50/50 分割屏幕空间1:2 布局如果列表上的内容可以轻松阅读的话，也可以使用三分之一的列表和三分之二的详情来划分屏幕。消息 App 使用 1:2 划分屏幕顶部的应用栏可以放在详情视图内。在滚动内容时看到详情视图内固定位置的顶部应用栏当切换到竖屏模式时，最好使用单列布局，让内容舒适地在狭窄的屏幕里流动。在竖屏模式下使用单列布局。如果在竖屏模式下使用列表详情视图，确保有足够的空间来列表条目具备可读性。当心！ 确保在竖屏模式下有足够的空间，使得列表条目易于阅读当用户从横屏变成竖屏并选择了一个条目时，在过渡到竖屏模式时显示所选条目的详情视图。当从横屏（左图）过渡到右图时，如果用户以及在列表中选中了条目，则在竖屏时显示选中的内容。如果用户没有做出选择，在切换屏幕方向时返回到竖屏模式的列表视图。如果用户没有从列表中进行选择，在竖屏模式以单一视图显示列表。辅助面板（Supporting panel）辅助面板布局是一种扩展屏幕的方法。辅助面板布局的用途包括：生产力软件Word 文档和评论注意：辅助面板与列表详情视图布局不同，因为主要和次要的焦点同时是彼此不可分割的。1. 布局用例辅助面板布局通过使用占据屏幕三分之二的详情容器或焦点面板，和占据剩余空间的辅助面板，两者配合创造一种焦点和辅助的关系。这种布局适用于无缝铰链设备。一个详情容器或焦点面板占据了屏幕的三分之二，而辅助面板则占据了剩余的空间。屏幕分为焦点面板（左）和辅助面板（右）。1. 焦点面板。2. 辅助面板。对于有物理铰链的可折叠设备，最好将屏幕分成相等的两半，用其中一半作为辅助面板。如果设备有物理铰链，组合结构可以把一个面板作为焦点，另外一个显示补充或辅助信息。在竖屏模式时，辅助面板可以放在焦点面板下面。竖屏时，辅助面板可以放在焦点面板下面。信息流（Feed）信息流是新闻和社交 App 中常见的布局。信息流由多个卡片（tiles）构成，用户通过卡片探索内容。信息流的整体交互体验在移动设备和可折叠设备上是相同的。在这两种设备尺寸上，打开一个条目都会打开一个新页面；在可折叠设备中，由于屏幕尺寸更大，信息流更具有沉浸感。1. 布局用例信息流可用于通过卡片和列表来显示不同的内容。信息流布局支持内容和浏览，通常用于新闻或照片等 App。通过卡片和列表展示各种内容，信息流布局支持内容发现和浏览。信息流可以使用卡片、列表、banner 和其他元素等组件，以呈现进入 App 的多个入口。1. 信息流区域信息流允许内容组件扩展多个列，以创造为大屏幕优化的布局。内容组件在多列上扩展，创建为大屏幕优化的布局。主角式布局（Hero）主角式布局优先考虑屏幕顶部的内容，并使用辅助面板。布局的主角区域提供了专门的空间来突出单一内容。译者备注：主角式布局（hero layout）来源于戏剧表演的 hero prop（主角/主要道具），指制作最精美，适合特写镜头，用于凸显最重点的部分。1. 布局用例主角式布局使用屏幕顶部为图片、适配或轮播图等元素提供更多的空间。这种布局可以用于内容的详情视图，比如文章或者 App 商店中的 App。主角式屏幕显示一个带有视频或图片的轮播图，并在下方显示辅助面板。在主角式布局中，顶部区域使用大图或视频作为屏幕上最突出的视觉元素。这种布局可以与其他布局相结合，如辅助面板。1.主角式区域在主角式屏幕中，后退按钮帮助用户导航回到前一个屏幕。主角式屏幕显示导航栏上的后退按钮。Material Design 折叠屏设计指南（1）：概述折叠屏使用柔性屏幕可以折叠或展开，根据你的需要无缝扩展可用的屏幕空间。阅读文章 > 欢迎关注作者的微信公众号：「龙爪槐守望者」本篇来源：优设网原文地址：https://www.uisdc.com/material-design-foldable-devices
铰链 手机 屏幕 大家有没有感觉到，最近关于折叠屏的新闻越来越多了。虽然我周围没见到什么人买折叠屏，但架不住厂商热情高涨啊。全球各大厂商几乎都在拼命钻研折叠屏手机，而且几乎每发布一款都有技术革新。根据面板供应链市场研究机构 DSCC 的数据，2021 年第三季度折叠屏手机迎来了爆发性的销量成长，除了比前一季度增加了 215%，出货量更是达到 260 万台。虽然这点数据比起全球 2.66 亿的手机总销量来说不算什么，但未来的事情谁又说得准呢？随着折叠屏越来越火，作为一个做过好几年手机 APP 的设计师，我内心隐隐有些不安。如果折叠屏手机真的普及了，恐怕会给 UI 和交互设计带来很大的变化。到时候，稍微讲究一点的 APP 都要补充很多适配规则，甚至可能需要重新设计布局架构，因为做不做折叠屏的适配，对体验和视觉效果的影响真的很明显。例如，下图就是 Google Due 为折叠屏做适配的真实案例： 做好适配后，折叠屏看起来酷炫，优势展露无遗。如果不做适配，折叠屏不但显得毫无优势，你还会觉得中间那条缝十分碍眼。为了把折叠屏的优势发挥出来，设计师们可以操心的地方多了去了。苹果现在是没有折叠屏手机，所以想要了解折叠屏适配设计的话，最好是去看看 Android 系统—— Google 确实做了一番研究。最新版的 Material Design 设计系统中，有专门针对折叠屏适配的研究，我今天就以此为基础，给大家捋一捋：触摸范围页面分割铰链弹窗触摸范围折叠屏的手机屏幕更大，触摸范围肯定也不一样。非折叠屏手机以单手操作为主，但是折叠屏手机如果展开，就不可能单手操作了，以双手为主。上图来源：Material You上面三个区域中，3 号区需要手指弯曲较大，1 号区需要手指尽力，2 号区是操作起来最舒适的。顶部，尤其是中间那一部分，手指很难触达，避免放置常用操作。页面分割首先，有的屏幕是原来手机的尺寸，从中间对折的，有的还没有 90 的状态，要么折叠要么展开。这种还比较好办，因为大部分时间都是展开使用，不太需要额外的适配设计。比较麻烦的是双屏尺寸的折叠屏，因为这种屏幕会经常使用展开 90 的桌面模式。最简单的适配方式是下图这种单列适配，适合上下翻折，但这种就对桌面模式很不友好。这种不太适合左右翻折，否则中间容易看到一条竖直折痕。如果是左右翻折，最好是考虑这种左右布局了，更大效率地利用 2 倍的屏幕空间。但是这种左右布局也会有风险，折叠屏的展开宽度毕竟不及平板设备，也要考虑分成两列之后空间够不够用。桌面模式可能是看视频或打字的常用模式，也要考虑如何快速切换布局：铰链上面那么多模式，已经很让人汗颜，但折叠屏的复杂性还不止如此。因为硬件限制，折叠屏中间都会存在一个铰链。各大厂商都在努力抹平铰链造成的视觉影响，但用久了几乎没有哪家不出现凹痕的。那个小凹痕平时也没什么，但如果图片或文字段落跨越那道铰链，就难保不看出问题。退一万步说，就算凹痕小到看不出来，铰链依旧会给交互造成影响。因为铰链上的触感肯定不怎么好，重要的信息和按钮都最好避开那道杠。更何况，还可能存在铰链处触控问题，甚至屏幕分段的问题。弹窗前面讲了为什么铰链的存在会给 APP 设计造成很大影响，这里就要说影响最大的一个组件了。弹窗是不能直接用以前的样式了，否则刚好卡在铰链那个地方。Material You 的解决办法是，让折叠屏的弹窗出现在屏幕一侧。哪怕是完全展开状态，也不能把弹窗放在中间，因为你无法确定用户的这个折叠屏，是不是真的无缝。总结今天这篇文章的内容有没有用，主要还是取决于折叠屏会不会普及。就我个人而言，如果要买折叠屏，估计主要奔着尝鲜去，对用户体验这块其实并没有什么指望。但是以后的事情真不好说，不知道大家怎么看？如何设计折叠屏？来看这份设计指南！最近做了HUAWEI Mate Xs手机折叠屏的相关设计，借此机会「趁热打铁」分享一手界面操作体验、适配技巧分享给大家，希望对各位设计师同学有所帮助和参考。阅读文章 > 欢迎关注作者的微信公众号：「体验进阶」本篇来源：优设网原文地址：https://www.uisdc.com/flexible-screen
在路上
落霞与孤鹜
张大湿
