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

原网页：https://www.jvds.cn/share/ui-design/jason-bergh-project-discovery-u022
语言：zh-CN
发布：2026-10-11
作者：界达设计工作室（JVDS）

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

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

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

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

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

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

![Jason Bergh层叠人物影像、作品标题及Slider/List入口](https://www.jvds.cn/upload/2026/1008/d187-tp/u022-i1.webp)

作品主视图中央与底部｜大图建立气质，视图切换为明确查找留下路径。

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

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

界达设计更看重这两种视图可以互补。初次访问的人可以先被图像吸引，回来找某项内容时则需要[稳定索引](https://www.jvds.cn/share/website-design/website-taxonomy-categories-tags)。做原型时，切换后能否保留当前作品与分类，应该和视觉效果一起核对。

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

![移动作品列表、联系类型与个人介绍页面](https://www.jvds.cn/upload/2026/1008/d187-tp/u022-i2.webp)

移动列表左上区域｜按行组织名称和缩略图，但重复标题削弱了项目辨认。

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

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

标题字号很大，正文采用大写字母与较紧密行距。大写短句有直接感，[连续长段](https://www.jvds.cn/share/website-design/enterprise-website-typography-webfont-guide)则需要更多阅读耐心。若用于实际介绍，可以让段落更短，并明确区分创作方向、所做职责和履历，让文字补充影像无法说明的部分。

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

![Reportage介绍中的左侧人物与右侧标题和大写段落](https://www.jvds.cn/upload/2026/1008/d187-tp/u022-i3.webp)

介绍页左右两栏｜人物建立作者感，长篇大写正文增加了连续阅读负担。

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

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

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

## 作品集也需要有可查找的结构

摄影、影像或创意团队如果希望同时展示风格与合作方向，可以把大图、索引和介绍页一起规划。界达设计工作室（JVDS）提供UI/UX设计与网站设计、开发服务，欢迎带着现有作品和内容目录交流。

[联系界达设计，聊聊你的项目](https://www.jvds.cn/contact)