影像作品集网站设计：把画面与索引放一起

Jason Bergh的影像作品集网站设计，先用一幅人物近景把人带进作品。暖黄色衬线字落在暗绿影像上，列表和分类藏在画面边缘，却始终留着位置。电影感与查找工具在同一屏里相处，是它值得细看的地方。

同一幅影像叠两次，中心变得更明确

背景是人物眼睛与头部的极近景，中间又嵌入侧脸。两层都来自相近影像，颜色和质感连贯，观看尺度却不同。外层铺满画面，内层四角有轻微标记，像把镜头中的一处重新框出来。

Life’s a Trip与Trippie Redd的大字分列两边，中心留给脸。文字没有压成一整行覆盖人物，画面和标题共同形成横向构图。小号类型、说明和署名围在内层画面上下，信息量虽多，大小关系还算清楚。

暖黄色没有被用成大面积背景，它主要服务标志、标题和小提示。暗绿影像保留了自己的明暗，字形的温度又稍稍拉近距离。这种处理适合画面本身已经有丰富色彩和细节的创作作品集。

顶部导航集中在边缘，底部有Slider / List、内容分类和时间文字。能从静态图看见的是这些入口，并不能确认主图是否自动播放、切换有何动画。文章的判断落在位置与层级，不把电影式气氛写成真实播放体验。

列表给带着明确目的的人另一种浏览方式

手机列表把作品标题、短说明和右侧缩略图按行排列。与主视图的巨幅影像相比，这里每件内容占用的高度更小，几行作品可以同时出现。它适合按名称找作品，也适合快速比较不同画面。

界达设计更看重这两种视图可以互补。初次访问的人可以先被图像吸引，回来找某项内容时则需要稳定索引。做原型时，切换后能否保留当前作品与分类，应该和视觉效果一起核对。

图示列表中多行用了相近标题，部分编号也重复。作为版式样例能看出行结构，但正式内容最好有真实、可区分的项目名称和短说明。缩略图负责视觉识别，文字负责把作品说清，两者都不能只用相似占位内容。

个人介绍沿用气氛，也留出独立的文字列

Reportage介绍把人像放在左边，斜向光线穿过头发与脸；右边是暖黄标题、副标题和两段正文。它延续了作品页的暗底与衬线字，却换成更稳定的左右两栏，适合从看作品转到了解创作方向。

标题字号很大，正文采用大写字母与较紧密行距。大写短句有直接感，连续长段则需要更多阅读耐心。若用于实际介绍，可以让段落更短，并明确区分创作方向、所做职责和履历，让文字补充影像无法说明的部分。

肖像与正文靠在一起，也让介绍不只是一张个人照片。借鉴时可以保留这种配对关系，无需把全部正文都做成视觉纹理。内容越具体，人物页越容易回答“这个创作者适合哪类合作”。

联系分类继续使用作品集的语言

联系页分成TV & Film、Commercial、Social和Direct，较大的分类标题下是小号信息。它没有突然切到复杂表单，而是沿用暗底、暖色字和居中留白，合作入口仍然属于同一个视觉世界。

这几类入口需要有清楚边界。业务合作、社交资料与直接咨询是不同方向，可在正式文案里就近解释，方便访客找到合适渠道。图中出现的联系方式仅作排版观察，本文不把它们转换成外链。