documentary-brutalist-agency

纪实粗野主义代理机构

用硬朗的字体确立观点，再让真实项目图像展示成果。

建立故事线

1. 以广告牌般醒目的定位语开场，并采用极简导航。
2. 直接切入黑底上的精选作品。
3. 用留白充足的白色理念章节，说明工作室的思考方式。
4. 用一组纪实拼贴，讲述节奏分明的过程故事。
5. 在浅色证明页面上展示经核实的客户评价或动态。
6. 在超大页脚字标前，用极简 FAQ 解答疑虑。

替换来源名称、项目、人物、摄影作品、引言、声明和链接。使用原创或获得授权的纪实素材。

构建视觉系统

• 使用纯黑和暖白，偶尔搭配浅薄荷色或粉色的证明页面。
• 将一种窄体展示字体与一种中性无衬线字体搭配使用。
• 展示网格线，采用直角，避免玻璃质感、辉光和装饰性渐变。
• 让字体和摄影作品建立层次；图标和装饰应尽量简洁。
• 将换行作为构图的一部分。在每个断点测试换行效果。
• 保持高对比度，但不要让所有元素都同样醒目。

编排页面

• 页眉：使用紧凑的标识、当前章节和醒目的菜单触发按钮。
• 主视觉：设置一行接近广告牌尺寸的窄体标题；辅助文案保持小巧。
• 作品：采用黑底章节，搭配大标题、角色标签和纪实媒体内容。
• 理念：切换为暖白背景，减少文字，留出更多呼吸空间。
• 拼贴：改变图像尺寸和对齐方式，同时保持叙事顺序与 DOM 顺序一致。
• 客户评价：仅在浅色证明卡片中展示经核实的引言。
• 动态：以简洁的编辑式条目呈现，包含日期、类别和操作。
• FAQ：使用硬朗分隔线和可预测的展开行为。
• 页脚：以超大字标收尾，并提供清晰的联系入口。

实现纪实拼贴

• 使用 CSS Grid，并在媒体加载前为每张图片预留空间。
• 即使视觉网格不规则，也要让 DOM 顺序与叙事顺序一致。
• 将轻微变换映射到滚动进度，并将视差控制在 5% 以下。
• 鼠标悬停和获得焦点时显示说明文字；同时确保触控用户和辅助技术用户都能看到。
• 图片加载失败或缺失时，保留网格。
• 仅在有助于讲清故事时使用短暂的固定衔接效果，且绝不覆盖联系区域或页脚。

实现菜单和 FAQ 控件

• 使用语义化按钮和原生的 details/summary，或采用无障碍的披露模式。
• 更新 aria-expanded；保留深层链接和浏览器历史记录。
• 仅在真正的模态菜单中锁定焦点，并在关闭时恢复焦点。
• 悬停、焦点、按下、展开、禁用、加载和当前状态应各有区分，不能只依靠颜色。
• 禁用动画时，导航和 FAQ 仍须完全可用。

动效默认设置

• 控件动画使用 160–220ms，遮罩和章节进入动画使用 500–760ms。
• 优先采用缓慢的拼贴视差、粘性元素的对比度变化，以及干脆利落的黑白切换。
• 一次只播放一种阅读过渡效果。
• 暂停屏幕外的观察器和媒体；清理路由时间轴。
• 不要使用持续浮动、表演式平滑滚动或滚动劫持。

验证

• 在禁用 CSS 和动效的情况下，按 DOM 顺序阅读页面。
• 使用键盘和触控测试菜单、FAQ、拼贴说明文字和项目链接。
• 在 320px、平板、桌面和 200% 缩放下，检查窄体标题的换行情况。
• 验证图片尺寸、替代文本、对比度、焦点、减少动效设置和媒体加载失败状态。
• 删除虚构的项目、客户、引言、奖项或成果。

避免

• 将粗野主义变成随意错位或无障碍对比度不足。
• 使用没有叙事顺序的装饰性瀑布流。
• 使用圆角 SaaS 卡片、玻璃质感、辉光或大量渐变。
• 使用与作品争夺注意力的持续视差。
• 在非模态导航中锁定模态焦点。