# 技术视角下的动态设计策略 - ID: 11 - URL: https://www.stoyard.com/viewpoint/11 - English URL: https://www.stoyard.com/en/viewpoint/11 - Category: 网站数字化 - English Title: Dynamic Design Strategy from the Perspective of Technology ## 中文主体 > 在动态视觉的实现过程中，技术选型是保障性能的关键环节。 网站数字化 / 动态视觉服务 #### **（一）轻量化技术选型**  在动态视觉的实现过程中，技术选型是保障性能的关键环节。不同的动效场景对技术的要求各不相同，合理选择动效实现方案和优化加载策略，能够在提升视觉效果的同时，确保页面的流畅运行。 **动效实现方案分级：**根据动效的复杂程度和性能需求，我们采用分级策略来选择合适的技术方案。对于基础交互动效，如按钮 hover 效果，采用 CSS3 硬件加速是最佳选择。 对于复杂场景动画，如产品 3D 演示，GSAP 高性能动画库则展现出其强大的优势。GSAP 专门优化了动画性能，能够实现和 CSS 一样的高性能动画效果，同时还提供了丰富的动画控制和插值函数，让开发者能够精确控制动画的每一帧。在产品 3D 演示中，GSAP 可以轻松实现物体的旋转、缩放、平移等复杂动画，配合 Three.js 等 3D 库，能够为用户呈现出逼真的 3D 场景，展示产品的全方位细节。 矢量图标动效集成 Lottie 实现跨平台兼容，为我们解决了不同平台之间的动效展示问题。Lottie 是 Airbnb 开源的跨平台矢量动画渲染库，它能够将 Adobe After Effects 创建的动画导出为 JSON 文件，并在 iOS、Android 和 Web 等多个平台上流畅渲染。通过 Lottie，我们可以轻松实现矢量图标的动态效果，如加载动画、菜单切换动画等，而且这些动画在不同平台上的表现一致，确保了低端设备也能流畅运行，为用户提供了统一的视觉体验。 **加载策略优化：**为了提升页面的加载速度，我们对动效的加载策略进行了全面优化。首屏核心动效优先加载，确保用户在进入页面的第一时间就能看到关键的动态元素，提升用户的初始体验。这些核心动效可能包括品牌标志的动画展示、产品的关键卖点展示等，它们对于吸引用户的注意力和传达品牌信息至关重要。 非关键动效，如底部模块的动画，则采用滚动触发的方式。通过 Intersection Observer API，我们可以监听元素是否进入视口，当用户滚动到相关区域时，才触发相应的动效加载和播放。这样可以避免在页面加载时一次性加载过多动效资源，减轻服务器和客户端的负担，提高页面的加载速度。 动态资源的压缩也是优化加载策略的重要一环。我们将动态资源，如动画文件、图片等，压缩至原体积的 60% 以下，同时保持较高的画质和动效质量。通过采用先进的压缩算法和工具，如 WebP 格式的图片压缩、动画文件的二进制压缩等，我们在不影响用户视觉体验的前提下，有效减少了资源的下载量，保障页面加载速度符合 Core Web Vitals 标准，为用户提供了快速、流畅的访问体验。 #### **（二）多终端适配策略**  在如今的移动互联网时代，用户使用的终端设备种类繁多，屏幕尺寸、分辨率和操作系统各不相同。因此，确保动态视觉在多终端上的适配性，是提供一致用户体验的关键。 **响应式动态设计：**基于设备分辨率自动调整动效参数，是实现响应式动态设计的核心。例如，在移动端，由于屏幕尺寸较小，用户的操作习惯和注意力集中程度与桌面端有所不同。因此，我们将移动端按钮点击动画的时长缩短 30%，使其更加简洁明快，符合移动端用户快速操作的需求。同时，对于动效的速度、缓动曲线等参数，也会根据设备的性能和屏幕尺寸进行动态调整，确保动效在不同设备上都能流畅展示，且不会给用户带来视觉上的不适。 在适配横竖屏切换时，动效的连贯性是需要重点关注的问题。我们通过技术手段，确保动效在横竖屏切换过程中能够平滑过渡，避免因屏幕尺寸变化导致的视觉断层。例如，在切换过程中，动效的位置、大小和旋转角度等参数能够实时调整，与新的屏幕尺寸相匹配，让用户感觉动效是在一个连续的空间中进行，而不是突然中断或出现异常。 **无障碍访问优化：**为视障用户提供动态效果文本描述，是实现无障碍访问的重要一步。通过 ARIA 标签，我们可以为动态元素添加详细的文本说明，让屏幕阅读器能够读取这些信息，帮助视障用户理解页面上的动态内容。例如，对于一个旋转的图标，ARIA 标签可以描述为 “旋转的设置图标，点击可打开设置菜单”，使视障用户能够像正常用户一样了解图标的功能和操作方式。 支持动态内容的键盘导航，也是确保无障碍访问的关键。我们确保所有动态元素都可以通过键盘进行操作，如按钮的点击、菜单的展开和关闭等。通过合理设置 tab 键的顺序和焦点管理，视障用户可以使用键盘轻松浏览和操作页面上的动态内容，实现与产品的交互。 考虑到不同用户对动效速度的接受程度不同，我们提供了动效速度可调节的功能。用户可以根据自己的需求，在设置中调整动效的播放速度，无论是喜欢快速浏览的用户，还是需要更慢速度来理解动效的用户，都能找到适合自己的设置，满足 WCAG 2.1 AA 标准，让每一位用户都能平等地享受动态视觉带来的信息和体验。 ## English Content > In the process of implementing dynamic visual effects, technology selection is a critical step for ensuring performance. Website digitization/dynamic visual service #### **Selection of (I) Lightweight Technology**  In the realization of dynamic vision, technology selection is the key link to ensure performance. Different dynamic scenarios have different technical requirements. Reasonable selection of dynamic implementation schemes and optimized loading strategies can ensure the smooth operation of the page while improving the visual effect. **Dynamic effect implementation scheme classification:**According to the complexity and performance requirements of dynamic effects, we adopt a grading strategy to select the appropriate technical solution. For basic interactive effects, such as the button hover effect, using CSS3 hardware acceleration is the best choice. For complex scene animations, such as product 3D demos, the GSAP high-performance animation library shows its strong advantages. GSAP specifically optimizes animation performance to achieve the same high-performance animation effects as CSS, while also providing a wealth of animation controls and interpolation functions that allow developers to precisely control each frame of the animation. In the 3D demonstration of products, GSAP can easily realize complex animation such as rotation, zoom and translation of objects. With 3D libraries such as Three.js, GSAP can present realistic 3D scenes for users and display all-round details of products. Vector icon dynamic integration Lottie to achieve cross-platform compatibility, for us to solve the problem of dynamic display between different platforms. Lottie is Airbnb's open source cross-platform vector animation rendering library, which can export animation created by Adobe After Effects as JSON files and render smoothly on multiple platforms such as iOS, Android and web. Through Lottie, we can easily realize the dynamic effects of vector icons, such as loading animation, menu switching animation, etc., and these animations perform consistently on different platforms, ensuring that low-end devices can also run smoothly and provide users with a unified Visual experience. **Load strategy optimization:**In order to improve the loading speed of the page, we have fully optimized the dynamic loading strategy. The core dynamic effect of the first screen is loaded first to ensure that users can see the key dynamic elements as soon as they enter the page, thus improving the user's initial experience. These core dynamics may include the animation of the brand logo, the display of key selling points of the product, etc., which are essential to attract the user's attention and convey the brand message. Non-critical dynamic effects, such as the animation of the bottom module, are triggered by scrolling. Through the Intersection Observer API, we can monitor whether the element enters the viewport, and trigger the corresponding dynamic loading and playback when the user scrolls to the relevant area. This can avoid loading hyperactive resources at one time when the page is loaded, reduce the burden on the server and client, and improve the loading speed of the page. Compression of dynamic resources is also an important part of optimizing loading strategies. We compress dynamic resources, such as animation files, pictures, etc., to less than 60% of their original volume, while maintaining high picture quality and dynamic quality. By adopting advanced compression algorithms and tools, such as image compression in WebP format and binary compression of animation files, we effectively reduce the download amount of resources without affecting the user's visual experience, ensure the page loading speed meets the Core Web Vitals standard, and provide users with a fast and smooth access experience. #### **(II) multi-terminal adaptation strategy**  In today's mobile Internet era, users use a wide variety of terminal devices, with different screen sizes, resolutions, and operating systems. Therefore, ensuring the adaptability of dynamic vision on multiple terminals is the key to providing a consistent user experience. **Responsive Dynamic Design:**Automatic adjustment of dynamic parameters based on equipment resolution is the core of responsive dynamic design. For example, in the mobile terminal, since the screen size is smaller, the user's operation habit and concentration degree are different from those in the desktop terminal. Therefore, we shorten the duration of the mobile button click animation by 30%, making it more concise and lively, meeting the needs of mobile users for fast operation. At the same time, parameters such as the speed and slow motion curve of the dynamic effect will also be dynamically adjusted according to the performance of the device and the screen size to ensure that the dynamic effect can be smoothly displayed on different devices and will not bring visual discomfort to the user. When adapting horizontal and vertical screen switching, the continuity of dynamic effect is a problem that needs to be paid close attention. We use technical means to ensure that the dynamic effect can smoothly transition during the horizontal and vertical screen switching process and avoid visual faults caused by screen size changes. For example, in the process of switching, the position, size and rotation angle of the dynamic effect can be adjusted in real time to match the new screen size, so that the user feels that the dynamic effect is carried out in a continuous space, rather than suddenly interrupted or abnormal. **Accessibility Optimization:**Providing dynamic effect text description for visually impaired users is an important step to achieve barrier-free access. Through ARIA tags, we can add detailed text descriptions to dynamic elements, so that screen readers can read this information and help visually impaired users understand the dynamic content on the page. For example, for a rotated icon, the ARIA label can be described as "rotated setting icon, click to open the setting menu", so that the visually impaired user can understand the function and operation mode of the icon like a normal user. Keyboard navigation that supports dynamic content is also key to ensuring accessibility. We ensure that all dynamic elements can be operated through the keyboard, such as button clicks, menu expansion and closing, etc. By properly setting the order of tab keys and focus management, visually impaired users can easily browse and operate the dynamic content on the page using the keyboard to achieve interaction with the product. Considering that different users have different degrees of acceptance of dynamic speed, we provide the function of adjustable dynamic speed. Users can adjust the playback speed of dynamic effects in the settings according to their own needs. Whether they are users who like fast browsing or users who need slower speed to understand dynamic effects, they can find their own settings to meet the WCAG 2.1 AA standard, so that every user can enjoy the information and experience brought by dynamic vision equally.