# 字体动画师作品集网站：用字形带出作品关系

原网页：https://www.jvds.cn/share/ui-design/mat-voyce-three-work-categories-u125
语言：zh-CN
发布：2026-10-20
作者：界达设计工作室（JVDS）

Mat Voyce 的作品集把字体表现放在很靠前的位置：青色大字、夸张的字形和带播放符号的作品预览一起构成首页。这里值得关注的并非字够不够大，而是姓名、作品类型和具体项目能否在丰富的视觉变化中保持清楚的关系。

## 核心结论

- 字形可以展示职业个性，但职业信息与项目入口仍需明确。
- 双列表的关键在于名称、选中状态与预览指向同一个项目。
- 不同作品类别可采用不同密度，同时保持栏目含义稳定。

## 姓名也是第一件作品

首页将 MAT 和 VOYCE 分别放在画面上下两侧，青色斜体字占据很大面积，中间仍留出个人介绍、所在地与作品预览的位置。姓名承担识别作用，同时直接展示字体处理的个性；短介绍补上“字体设计师与动画师”这一职业信息，让访客不必只靠画面猜测服务内容。

带播放符号的小型 Pepsi 预览与下方较大的项目画面形成两个观看尺度。前者像一个快速入口，后者让作品内容更充分地露出。Featured Work 的黑色斜体标题、卡通电视与星形装饰继续延伸字形语言。这个组合适合强调个人风格，不过播放入口和项目详情入口需要有明确区分，才能让“先看一段”和“了解这一项目”各自顺畅。

![巨大青色姓名、带播放图形的预览及精选作品提示组成首页](https://www.jvds.cn/upload/2026/1008/d187-tp/u125-i1.webp)

首页入口｜看创作者特征与作品入口的层级

## 两份列表围绕同一张预览

Commercial 页面把作品预览放在中间，项目名称和品牌名称分列左右。画面中选中行以蓝色横条贯穿两侧，两边相同的序号提示它们指向同一个项目。这个安排让商业合作关系成为浏览内容的一部分，访客看到作品时，也能知道它与哪个名称对应。

相邻条目逐渐变灰，远处的文字更淡，中心预览因而较为突出。但如果列表本身也承担查找任务，[未选中的名称](https://www.jvds.cn/share/ui-design/wcag-color-contrast-ui-design)仍应保留足够的可读性。界达设计工作室（JVDS）更倾向于让选中状态、两侧名称和预览保持稳定对应，再用颜色与位置制造变化；这样表现性的排版仍能支撑具体项目的定位。

![商业作品两侧名称与中央预览对齐，蓝色行标出Play new和Nike](https://www.jvds.cn/upload/2026/1008/d187-tp/u125-i2.webp)

商业栏目｜看名称、品牌与预览是否对应

## 合作名单与个人实验各有组织方式

Collabs 页用较安静的浅色背景承载合作方名单，当前名称加深并加下划线，旁边给出植物题材的作品图。Personal 页则采用色彩密集的网格，多张字体作品同时出现。两页虽然共享顶部标志和菜单入口，却没有为了统一而套用同一种内容密度。

合作名单适合从关系进入项目，网格适合比较不同字形与表达范围。前一种详情可补充合作中的[具体职责](https://www.jvds.cn/share/ui-design/how-to-write-ui-design-case-study)，后一种可说明实验主题与作品形式，让访客进一步判断这些表达能怎样用于自己的需求。分类的价值应在点入之后继续成立，而不只是让首页显得内容丰富。

![合作名称列表配作品预览，个人栏目以多彩字体网格展示](https://www.jvds.cn/upload/2026/1008/d187-tp/u125-i3.webp)

合作与个人｜看两种作品如何使用不同阅读密度

## 菜单延续风格，也需要稳定的路标

菜单画面中的 Work、About、Media 分别使用多彩团块、蓝黄立体字和巨大描边斜体，字形变化本身成为导航的记忆点。角落的 Close 与底部 Contact Mat 又提供了相对直接的退出和联系位置，让全屏菜单不至于只剩视觉表演。

移动画面列出 Work、About、Media、Playground。这个较完整的文字清单有助于辨认栏目，但 Playground 与作品页里的 Personal 如何对应，最好在栏目名称或介绍中说清楚。鲜明的菜单可以保留，入口含义和跨设备的栏目关系则应尽量稳定，避免读者每次换页面都重新理解一次。

![桌面菜单展示Work、About、Media的不同字形，手机另含Playground与联系](https://www.jvds.cn/upload/2026/1008/d187-tp/u125-i4.webp)

表达性菜单｜看字形变化与栏目关系

## 让个人风格成为可查找的作品集

字体设计、动画与创意服务作品集，既需要展示表达能力，也需要让客户看懂作品类别、合作职责与下一步沟通方式。可以先整理项目之间的关系，再决定哪些位置适合放大字形与视觉变化。

界达设计工作室（JVDS）提供UI/UX设计与网站设计、开发服务，可围绕作品分类、项目详情和联系路径梳理作品集网站。

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