# 💡 Summary # 🧩 Cues # 🪞Notes # 深度解析“科技极简风”视频风格：复现全指南 你分享的小红书博主“UX 设计 Rey”的视频是目前非常流行且高效的一种风格，通常被称为**科技极简风 (Tech Minimalist)**、**UX/UI 展示风**，或者在中国设计圈内被称为**“果味动效” (Apple-style Motion)** 或 **“高级感交互”**。这种风格的特点是干净的视觉美学、丝滑的动效，以及专注于以极具吸引力的方式展示数字产品或设计概念。 本指南将拆解这种风格的核心组成部分，并为你提供复现该风格的详细工作流。 ## 1. 风格定位：视觉与动效基因 这种风格大量借鉴了苹果（Apple）等顶级科技公司的设计语言，强调清晰、精准和高级感。它不仅关乎你看到了什么，更关乎它是如何运动的。 | 组成部分 | 核心特征 | | :--- | :--- | | **视觉基因** | **毛玻璃与发光 (Glassmorphism & Glow):** 使用磨砂玻璃效果和微妙的霓虹发光来营造深度并突出元素。你分享的视频中使用了非常明显的蓝色发光效果。<br>**纯净排版:** 使用类似 SF Pro 的无衬线字体，具有极强的层级感和对比度。<br>**深色模式美学:** 通常以深色、带有微妙纹理（如网格或渐变）的背景为底，使色彩和特效更加突出。<br>**3D 样机 (Mockups):** 在真实的设备框架（手机、电脑）中展示设计，增加真实感。 | | **动效基因** | **丝滑缓动 (Smooth Easing):** 动画不是线性的。它们使用自定义的缓动曲线（如 ease-in-out 或自定义贝塞尔曲线）来营造自然、流畅的感觉。<br>**微交互:** 按钮、图标和其他 UI 元素上细小而令人愉悦的动画。<br>**有目的的过渡:** 动画用于引导观众的视线并解释用户流程或概念，而不仅仅是为了装饰。 | ## 2. 工具箱：必备软件 复现这种风格需要结合设计、动画和视频编辑工具。你链接中的创作者提到了使用 Figma 和 Rive。 | 工具 | 用途 | 推荐插件/功能 | | :--- | :--- | :--- | | **Figma** | **核心设计与基础动画:** 创建所有静态 UI 元素、布局，并使用 Smart Animate 进行简单的过渡。 | `GlassForge` 或 `Glassmorphism` (毛玻璃效果), `MockRocket` 或 `Vectary 3D` (3D 样机)。 | | **Rive / Jitter** | **高级动画:** 用于制作超出 Figma 能力范围的复杂、交互式或基于时间轴的动画。Jitter 在导出视频方面更为简单。 | Rive 支持实时交互动画；Jitter 提供了极其流畅的 Figma 到视频的工作流。 | | **剪映 (CapCut)** | **后期剪辑:** 小红书创作者最常用的工具。用于添加背景音乐 (BGM)、字幕、音效和最终调色。 | N/A | ## 3. 步进式复现指南 让我们以制作一个类似“1000粉感谢”的视频为例： ### 第一阶段：在 Figma 中设计 1. **设置画布:** 使用垂直比例，小红书通常为 3:4 或 9:16。 2. **创建背景:** 设计一个带有微妙网格图案的深色背景。添加一个具有强色调（如视频中的蓝色）的形状，并应用重度的 **层模糊 (Layer Blur)** 效果来创建标志性的发光感。 3. **设计核心元素:** 创建主要文本（“感谢关注”、“1000 FOLLOWERS”）。使用粗体、干净的无衬线字体。对于“1000”这个数字，可以考虑添加微妙的渐变或内阴影来增加厚度。 4. **准备动画:** 在 Figma 中创建两个主要框架（画板）： * **起始帧:** 动画的初始状态（例如：元素较小、在屏幕外或透明）。 * **结束帧:** 动画最终停止的状态。 ### 第二阶段：制作动效 你有两个主要选择： * **选项 A (简单): Figma Smart Animate** 1. 在 Figma 的 **原型 (Prototype)** 模式下连接起始帧和结束帧。 2. 将触发方式设置为“延时 (After Delay)”以实现自动播放。 3. 选择 **智能动画 (Smart Animate)** 过渡。 4. 微调缓动曲线（如 "Ease Out Back"）和持续时间（如 800ms），以获得那种丝滑且带有轻微回弹的感觉。 5. 预览原型并进行录屏。 * **选项 B (进阶): Jitter 或 Rive** 1. 使用 Figma 中的 Jitter 或 Rive 插件导出你的设计。 2. 在 Jitter/Rive 中，你拥有完整的时间轴。可以分别为每个元素的属性（缩放、位置、不透明度）设置动画，实现更细腻的控制。 3. 在这里你可以添加更复杂的效果，如交错动画（元素一个接一个出现）或光效扫过。 4. 将最终动画导出为高质量视频文件 (MP4)。 ### 第三阶段：在剪映中后期润色 1. **导入视频:** 将录屏或导出的动画导入剪映。 2. **添加背景音乐 (BGM):** 这至关重要。搜索带有科技感、氛围感或 Lo-fi 风格的音轨。音乐决定了整个视频的格调。 3. **添加字幕与音效:** 添加必要的文字说明或细微的音效（如“嗖”的一声或点击声）来增强动画的打击感。 4. **调色与导出:** 如果需要，应用最终的滤镜，并以高分辨率导出，上传至小红书。 ## 4. 提升质感的专业建议 * **像素级观察:** 持续观察像 “UX 设计 Rey” 这样博主的视频。仔细研究他们动画的节奏感（Timing）和手感（Spacing）。 * **克制美学:** 这种风格的核心是极简。每一个动画都应该有其目的，避免在屏幕上堆砌过多的特效。 * **死磕细节:** 优秀与卓越的区别在于细节——微妙的发光、完美的缓动曲线以及图形的清晰度。 通过遵循这份指南，你可以有效地拆解并复现这种流行的视频风格，为自己的项目创作高质量的内容。 --- ### 参考文献 [1] Figma Community: Prototyping & Animation Plugins (https://www.figma.com/community/prototyping-animation) [2] Rive Official Website (https://rive.app/) [3] Jitter - Animation for Figma (https://www.figma.com/community/plugin/1009390499383588699/Jitter---Animation-for-Figma) [4] CapCut for Creators (https://www.capcut.com/resource/xiaohongshu-web-version/)