在 SX-Creval 系统中，我们为你准备了 2 款 极具交互感的流程步骤展示组件。它们不仅能清晰地拆解你的定制服务（OEM/ODM）、品质控制（QC）或打样交货流程，更搭载了苹果官网级别的“滚动侦测动画”，让枯燥的流程介绍变成一场沉浸式的视觉汇报。
1. 两大顶级流程版式 (Process Layouts)
款式一：滚动引导线 (Scroll-Guided Timeline)
- 视觉特点：步骤卡片以网格形式（2列、3列或4列）排布，每个步骤上方都有一个带有数字的“节点 (Node)”，节点之间由虚线连接。
- 魔法动效 (Scroll Magic)：这是极其惊艳的交互设计！当访客向下滚动网页时，系统会侦测滚动位置，自动将原本灰色的虚线一节一节地“点亮”为品牌主色；同时，数字节点会放大发光，卡片会随之上浮，甚至卡片背后隐藏的工厂实景图也会随之淡入浮现！
- 节点形状自定义：你可以根据行业属性，将数字节点设置为 经典圆形、圆角方块，甚至是极具锐利工业风的 锐利菱形 (Diamond)。
- 适用场景：适合展示步骤较多、逻辑严密的完整供应链全景（例如：从概念设计 -> 模具开发 -> 试产 -> 大货 -> 全球交付 的 6 步流程）。
款式二：视差横向滚动 (Horizontal Scroll)
- 视觉特点：最受全球顶尖设计机构追捧的排版方式！卡片排列成水平的一行，卡片背景带有巨大的透明数字水印（1, 2, 3...）。
- 魔法动效 (Pin & Slide)：在电脑端，当访客向下滚动鼠标滚轮时，网页会“吸附”停留在当前位置，而流程卡片会自动从右向左滑动。这种“向下滚=向右走”的空间视差错觉，能带来极其高级的浏览体验。(注：在手机端会自动转为顺滑的左右滑动浏览，完美适配。)
- 悬停揭幕特效：当鼠标悬停在某张卡片上时，卡片背景会优雅地淡入并放大一张高清实景图，瞬间提升画面张力。
- 适用场景：适合用于空间有限的首页，展示“合作指南（How to Order）”或“质检 4 步法”。
2. 卡片质感与图片遮罩 (Card Styling & Masks)
如果你在步骤卡片中上传了“背景图片”，为了保证前面的黑色或白色文字绝对清晰可读，系统为你配备了专业的**“图层遮罩引擎 (Mask Overlay)”**：
- 卡片图遮罩色：你可以选择在图片上方蒙上一层 黑色、白色 或 深蓝色 的半透明膜。
- 遮罩透明度 (%)：
- 如果你上传的工厂背景图颜色非常杂乱、对比度很强，建议将透明度拉高（例如 60% 或 80%），让背景图若隐若现，确保前方的文字一目了然。
- 如果你希望文字以白色显示，请选择 黑色遮罩；如果文字是深色，请选择 白色遮罩。
- 卡片颜色反转 (Dark Mode)：
如果你整个网页的背景是深色的（或垫了深色大图），请务必开启此选项！卡片会瞬间变为极具科技感的半透明毛玻璃质感（Glassmorphism），文字会自动变白，与深色背景完美融合。
3. 内容排版微调 (Typography)
- 卡片文字对齐：
- 左对齐：适合描述文字较多（3行以上）的步骤，符合欧美阅读习惯，显得严谨商务。
- 居中对齐：适合描述极其简短（1-2行）的步骤，显得对称、大气。
- 卡片圆角设置：一键切换卡片的边缘锋利度（推荐使用默认的 rounded-2xl，最符合现代网页审美）。
- 字号控制：系统默认提供了黄金比例的字号。你也可以单独放大“卡片标题”或缩小“卡片描述”。
💡 SX-Creval 外贸流程撰写避坑指南 (Pro Tips)
1、用真实图片代替网图（核心转化点）：
无论是在【滚动引导线】的浮出背景，还是在【横向滚动】的悬停背景中，建议上传你们自己工厂对应环节的真实照片。
2、不要为了流程而流程：
如果你们只是简单的“付钱-发货”贸易逻辑，就不要硬凑 6 个步骤。把流程组件用来展示你们的 “包装安全标准” 或 “售后服务支持响应”，同样能起到极佳的营销效果。