editorial-portfolio-chapters

编辑式作品集章节

将页面构建为一系列各具特色的编辑式章节。先用作品引发兴趣，再介绍工作室。

建立故事线

1. 以一张有力的宣传图片和一句简洁的定位语开场。
2. 直接呈现精选作品。将每个案例视作一本全新的杂志封面。
3. 只有当作品足以吸引注意后，才阐述工作室的观点。
4. 用超大号服务项目排版，从成果展示过渡到联系信息。
5. 以高对比度的联系章节收尾，让它成为最终篇章，而非附加内容。

将所有源内容中的品牌、项目、人物、主张、图片、标签和链接替换为原创内容或客户提供的内容。保留节奏和层级，不要沿用源内容。

构建视觉系统

• 以近黑色作为页面基调，再引入暖白色和每个项目专属的一种低饱和色块。
• 使用 grotesk 展示字体，并搭配中性的正文字体。标签保持紧凑，文案易于阅读。
• 采用 12 列网格，桌面端边缘留白为 40–64px。
• 优先使用方形或经过刻意裁切的媒体，搭配克制的圆角、细线分隔和极少的阴影。
• 让最有力的成果展示在尺寸上有所变化。不要把每个章节都做成主视觉或 Bento 网格。
• 少用通栏章节，并确保每处使用都有明确目的。

编排页面

• 页眉：在两侧边缘放置紧凑导航，并将品牌标识置于中央或醒目位置。
• 主视觉：将首屏的大部分空间留给一张稳定的图片；首个项目应出现在首屏下方。
• 项目：交替使用深色框架和低饱和色面板；无需悬停即可看到标题、角色、年份和操作入口。
• 工作室：采用非对称肖像或工作流程构图，避免使用千篇一律的团队卡片网格。
• 服务：将能力项排版为大型语义标题或链接，并控制换行。
• 联系：切换为一种醒目的信号色，并设置一个主要操作入口。
• 页脚：妥善安排导航、地点、社交链接和法律文本，不要让它们喧宾夺主，影响联系引导。

实现标志性交互

编辑式项目面板揭示

• 在媒体加载前预留面板高度。
• 仅裁切图片图层；标题和元数据应可选中。
• 使用 500–760ms 的遮罩或轻微位移效果进行揭示。
• 悬停或聚焦时，媒体缩放不超过 1.02，并显示同一个项目操作入口。
• 即使没有动画，每个面板也应清晰易懂。

超大服务过渡

• 使用 clamp() 控制尺寸，并添加短小的边缘对齐文字遮罩。
• 悬停和聚焦时调整字重、下划线或色调，不要改变布局。
• 使用语义化的展开交互打开可选详情，支持 Escape 键，并在关闭后将焦点还给触发元素。
• 在移动端有意控制换行；减少动态效果时应立即呈现。

动态效果默认值

• 控件反馈使用 160–220ms，章节进入效果使用 500–760ms。
• 使用 cubic-bezier(.22,.61,.36,1)，让直接子元素以 45–70ms 的间隔依次出现。
• 视差幅度低于 5%，主视觉应保持足够稳定，便于观看。
• 在章节边界处触发导航或背景变化。
• 暂停视口外的媒体和观察器；路由变化时清理时间轴。
• 不要劫持滚动。

验证

• 检查标题顺序是否合乎逻辑、焦点是否清晰可见、替代文本是否有用，以及颜色变化过程中的对比度是否充足。
• 测试键盘操作、触控、200% 缩放、窄屏移动设备、媒体加载缓慢、媒体缺失和减少动态效果设置。
• 确认案例研究在动画开始前仍然易于阅读，并且没有对源内容进行轻微改写。
• 无法提供证据时，删除虚构的奖项、客户、成果或主张。

基于源内容的提示词包

将 Mara Voss Interaction Prompt Pack 作为实践示例，了解如何将一个编辑式作品集转化为可复用的加载器、固定章节、归档、检查、粘性堆叠和页脚交互提示词。复用动态效果逻辑，不要沿用参考作品的身份、文案、图像或主张。

避免

• 先介绍工作室，再展示其作品。
• 在每个章节中重复使用相同的圆角卡片。
• 快速切换卡片、大幅视差效果或装饰性循环动画。
• 将项目标题或操作隐藏，直到悬停时才显示。
• 复制源图像、品牌用语、项目名称或客户声明。