# 创意机构网站设计：作者名怎样陪着作品出现

原网页：https://www.jvds.cn/share/ui-design/casey-artists-projects-news-u016
语言：zh-CN
发布：2026-10-10
作者：界达设计工作室（JVDS）

CASEY的创意机构网站设计把作者名与项目名放得很大，淡粉色字在黑底上十分醒目。作品照片随后出现，新闻列表则采用更小、更密的条目。这样的字号反差让页面既有海报感，又保留寻找创作者的线索。

## 核心结论

- 细衬线作者名与粗体项目名组成清楚的身份标题。
- 错位缩略图带来编辑节奏，细线与两组筛选保持条目和查找关系。

## 两种字体先交代了两种身份

作者页上方，Frederik Lindstrøm用细衬线字，RIMOWA用粗体大字，两行共用淡粉色。字体的差异让名字和项目分开，颜色又把它们收进同一个标题组。下方行李箱照片面积很大，但没有抢先遮住这些信息。

机构标识位于顶部中央，主导航散在两侧。当前作品的标题明显比机构标识更有分量，浏览者一进来先知道这一页在讲谁和什么。对于代表多位创作者的机构，这种作者作品关系尤其值得保留：漂亮照片之外，也能找到合作对象。

照片上方还有介绍与小型类别信息，体量轻，位置与大标题留出距离。界达设计喜欢这种主次分配，但关键职责不能只靠小字藏在空白里。后续检查可以先读作者名字，再找作品类别，确认两者在小屏上都足够清楚。

![CASEY黑底作者页，Frederik Lindstrøm与RIMOWA淡粉大标题下方展示行李箱照片](https://www.jvds.cn/upload/2026/1008/d187-tp/u016-i1.webp)

作者页上方｜细衬线作者名与粗体项目名并列建立身份，大图在标题之后出现。

## 错位新闻列表有节奏，也有边界

Latest News页用细横线分出条目，缩略图在不同横向位置出现，旁边跟着短标题。列表没有排成整齐的图片墙，因此每一条看起来像一块编辑素材，黑色空隙也成为视觉节奏的一部分。

这种创意作品集排版适合图像差异较大、希望保持杂志感的内容。但缩略图可以移动，标题与它的关系需要稳定。看完一张肖像再读下一条标题时，不能因为横向错位而误认所属条目。行线在这里起了很重要的分隔作用。

移动版转成单列，缩略图与文字连续向下排列，桌面的横向变化没有硬塞进窄屏。读者仍能辨认新闻的图片与名称。截图中的小字比较密，放大后的阅读、触摸范围和[较长标题换行](https://www.jvds.cn/share/website-design/enterprise-website-typography-webfont-guide)值得单独检查。

![CASEY桌面错位新闻列表、Artist与Category筛选弹层以及移动单列版本](https://www.jvds.cn/upload/2026/1008/d187-tp/u016-i2.webp)

新闻列表与筛选展开区｜作者、类别分组选择，手机将缩略图和标题顺序排列。

## 作者和类别，提供不同的查找方向

展开筛选区域后，Artist与Category分别列出复选项。前者适合已经记住作者的人，后者适合按作品领域寻找内容的人。把两者分组，比把所有标签混进一个长列表更容易理解条件的含义。

借鉴新闻筛选设计时，还应检查关闭筛选后能否看到当前条件，以及[没有匹配结果](https://www.jvds.cn/share/website-design/zero-results-search-ux-design)时怎样清除或放宽选择。图里能看到展开状态，不能确认这些反馈是否已经实现。

界达设计认为，这类网站最需要照顾的是名字、类别和作品之间的关系。淡粉大标题能够抓住视线，条目与筛选则帮助读者继续找下去。若要进一步打磨，先确保新闻能准确接到相应作者和作品，再考虑增加视觉变化，会更贴近查找任务。

## 常见问题

### 创意网站的新闻列表适合错位排列吗？

内容以图像为主且条目关系清楚时可以尝试。缩略图、标题和作者必须仍属于同一条记录，手机上可改为更稳定的单列。

## 设计检查清单

- 核对每条新闻的图片、标题与作者是否成组。
- 检查关闭筛选后的当前条件与清除入口。

## 让创作者与作品更容易被找到

如果你在做创意机构、摄影或艺术家作品集，需要同时展示视觉风格和作者资料，可以从作品归属与目录结构开始梳理。

界达设计工作室（JVDS）提供UI/UX设计与网站设计、开发服务，可一起梳理页面内容、界面结构与实现需求。

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