策略型高端网站设计公司

网站流式界面设计表面上是个简单的概念，但实际上相当复杂。需要考虑许多因素，从布局变化、运动偏好、正确的标记以及各种状态，这些可能并不那么明显。如果直播被中断会发生什么？用户能在键盘界面切换时通过Tab键切换吗？可能需要哪些ARIA属性？这些正是本文将要探讨的内容。

现在更多接口在响应生成时渲染。用户界面从一个状态开始，然后随着更多数据的加入而更新。你可以在聊天应用、日志、转录工具以及其他实时系统中看到这种情况。棘手的是，接口并非固定状态;随着新内容的加入，它会不断变化。当排队变长、新方块出现时，会增长。屏幕上下方的东西可能会突然移动，用户的滚动位置变得更难控制。用户在用户已经操作界面时，界面的某些部分甚至可能不完整。

我们做了三个演示，分别以不同方式流媒体内容：聊天气泡、日志流和转录视图。表面上它们看起来不同，但都遇到了同样的三个问题。第一个是卷轴。当内容流式传输时，大多数界面会将视口固定在底部。这在你只是看的时候是有效的，但一旦你往上滚动去阅读内容，页面就会迅速往下。你没有要求这个。界面替你做了决定，现在你在抗拒它而不是阅读。第二个是布局转移。流媒体内容意味着容器不断增长，而随着它们的增长，下面的一切都向下移动。你正要点击的按钮已经不在原位了。你刚才读的一句话已经移动了。页面没有破损;只是没有什么东西能静止到能舒适地互动。第三个是渲染频率。浏览器每秒渲染屏幕大约60次，但流媒体的到来速度远快于此。这意味着DOM，即浏览器对页面所有内容的内部表示，最终会更新一些用户永远不会真正看到的帧。每次更新都会有成本，而这些成本会悄悄累积，直到性能开始下滑。

在你进行每个试玩时，注意哪里开始感觉怪异。当界面开始妨碍你时，那一瞬间的摩擦。这正是我们要解决的问题。为什么界面感觉不稳定以及如何修复。如果你试过聊天演示，并在回复不断涌入时向上滚动，你可能已经立刻发现了第一个问题：界面在更新时不断拉回最新的直播内容。这会让你脱离上下文，且在内容过后永远无法让你有时间充分消化。我们在第二个例子——日志查看器中也看到了完全相同的问题。没有尾巴切换，流媒体内容会覆盖你的滚动位置。这些并非传统意义上的错误，不会导致代码错误;相反，它们是影响所有用户的无障碍问题。不过，只要你在规划和测试工作时仔细考虑用户体验，这些问题是可以修复和预防的。

这些改动本身并不算大工程。但一旦安装好，界面就不再对每次更新都盲目响应。它变得更容易阅读，更容易控制，也更不容易分心，尽管内容依然是持续不断地传入。为了确保稳定、可预测和良好的用户体验，还有更多需要考虑的因素。例如，如果溪流在流动中途被取消会怎样？我们又能做些什么来确保用户在减少动作、键盘导航和屏幕阅读器无障碍等方面得到尊重？大多数流媒体接口都包含停止或取消流的方式。我们在演示中看到了这一点。但停止操作常常会让界面变得尴尬。光标可能会一直闪烁，按钮不更新，消息会在直播中途卡住，没有明确提示没完成。

直播本身基本已经解决了。从服务器到客户端的数据已经不再是难事了。问题在于界面。当内容持续更新时，一些细节开始变得重要，比如滚动行为、布局稳定性、渲染时序以及界面对用户操作的响应。如果这些处理不好，界面会显得不稳定且难以使用。