2026 年 20 个最佳作品集网站，实时检查和速度测试

以下是现在在线上 20 个最佳作品集网站：设计师、开发者、摄影师和建筑师展示自己的作品、工作室和机构销售他们的作品，加上一些项目网站如品牌书和行业报告。品味没有决定这份名单。我从 23 个现场人工审核的作品集网站中随机抽取了全部 20 个，检查了每个网站的加载情况，在手机上测量了它，并记录了你可以为自己的网站改进的内容。惊喜是：8 个有足够真实访客数据的网站中没有一个通过 Google 全部三个核心网页性能指标，中位数移动 Lighthouse 得分是 61.5。这是64 个精美网站，实时检查和速度测试的作品集部分。

这20个网站是如何选择和测试的

最佳作品集网站的大多数名单都是策划的最爱。这对这些选择在加载时间上的成本一无所知，所以我改用了随机抽签。

• 资料库：23 个来自我维护的精选设计数据库的现场作品集网站。每个网站都经过手工审核，具有桌面和移动截图，并在过去 30 天内通过了可用性检查。
• 抽签：20 个网站按固定随机顺序排列，任何一个工作室最多两个。没有网站需要交换。这里没有我的客户作品，也没有人为了被纳入而付费。
• 实时检查：每个网站都在2026年10月31日在浏览器（Chromium）中打开，并加载了列出它的相同网站。
• 实验室测试：2026年10月12日至20日期间每个网站的移动Lighthouse运行，记录性能评分、最大内容绘制和页面大小。
• 真实访客数据：Chrome 用户体验报告中手机的数据，由 Google 从真实 Chrome 用户处收集。页面只有在有足够的访客后才会出现（Chrome 用户体验报告），许多个人作品集网站永远无法达到这个标准，所以 20 个中有 11 个显示"无数据"。
• 非排名：下面的顺序是抽签顺序。

20 个作品集网站在速度上的成本

当页面的最大内容绘制 (LCP) 为 2.5 秒或更短、交互到下一次绘制 (INP) 为 200 毫秒或更短、累积布局偏移 (CLS) 为 0.1 或更短（在第 75 百分位页面加载处测量）时，Google 将其标记为良好。页面只有在满足全部三个条件时才会通过核心网页性能指标（web.dev）。

作为参照，Google 2026 年 9 月发布的 Chrome UX 报告显示，在 18,376,044 个源中，核心网络指标良好的占 55.9%（Chrome UX 报告发布说明）。本次评估的 8 个作品集网站无一通过。其中 7 个未达到 2.5 秒的 LCP 目标，5 个对点击响应过慢，2 个布局偏移过多。

轻量级页面不一定能保证高分，重量级页面也不一定分数低。Karl Barnard 的作品集重 0.7 MB 但实验室得分仅为 37，测试期间脚本运行时产生了 908 ms 的阻塞时间。Glitch&Grit 重 47.4 MB 但得分 66。本次抽样中最轻的页面是 GØDN.studio（0.2 MB），也是唯一得分在 90 或以上的。

实验室和真实访客在此处也存在差异。Gionatan Nese 在实验室得分 37，但真实访客在 1.2 秒内看到主要内容；该网站仅在响应性上失败，延迟为 232 ms（Google 的标准是 200 ms）。Lighthouse 是在模拟手机上的一次运行，当其与 Chrome UX 报告存在矛盾时，web.dev 表示真实访客数据可能是更准确的参考（web.dev）。

这 20 个网站用什么构建

Next.js 驱动 20 个中的 6 个。Nuxt 和 Webflow 各 2 个，Framer、SvelteKit 和 WordPress 各 1 个。其余 7 个网站的技术栈无法从 HTML 中识别。Félix Péault 的 SvelteKit 摄影作品集在 1.4 MB 的页面上得分 76。如果你在为自己的网站选择框架，可以参考 Astro vs Next.js 的对比。

这 20 个网站的共同点

数据库中的每个网站在评审期间都会获得样式标签，技术栈从实时 HTML 中检测，因此这些是计数而非浏览量。

• 大字体是标志性特征。20 个中有 11 个用超大字体显示名称或标题，这是该组最常见的标签。在作品集上，名称通常占据整个首屏。
• 互动优于装饰。7 个被标记为交互式，多于任何其他风格：包括 3D 场景、对鼠标光标做出反应的背景以及可重新排列的投影环。极简主义和排版风格分别有 6 个。
• 作品说话。9 个以摄影开头，8 个以插画开头，其中最好的做法是大幅展示一件作品，而不是小幅展示十件。
• 动画并非让它们变慢的原因。6 个加载了诸如 GSAP 或 Lenis 这样的平滑滚动或动画库。其实验室得分中位数为 77，而其他 14 个为 57.5，所以在本次抽样中，仅凭动画无法解释低分。

20 个作品集网站

下面按抽样顺序列出全部 20 个，先是测量数据，然后是对每个网站的仔细查看，包括首页截图、值得借鉴的模式和需要理解的权衡。真实访客数据来自手机；"无数据"表示 Google 的访客数太少无法报告。关于你自己的网站，请参见作品集网页设计。

1. Hobro Digital

这个名字用很粗很宽的无衬线白体字体，几乎横跨整个画面，覆盖在一张模糊的、裁切紧凑的、深红和琥珀色的人脸照片上。暖色调保持在同一色系内，所以白色字体一眼就能读清。下面用小号等宽字体写着机构描述和地点，厚重的标题字体和轻盈的打字机风格文本之间的对比保持了层级的清晰度。

借鉴这一点：用单一粗重的标题字体，以全宽的方式排列工作室名称，覆盖在模糊的、暖色调的照片或视频截图上，配以小号等宽描述行。

需要注意：这个页面比平均水平重，在实验室测试中得分中等。真实访客也会看到主要内容加载缓慢，以及对点击和触碰的响应迟缓，这与全屏动画背景和脚本动画相符。

设计内部完成。访问 hobro.digital。

2. Valentin Gassend

名字承担了主要工作。一款粗重、高度压缩的黑色无衬线字体堆叠成紧凑的块状，G 和最后的 N 切换到绿色毛笔书法，为普通的字标注入了个性。细绿网格线将浅粉红色背景分割成网格单元，小写大字幕字在角落里，中心保持空白。

借鉴这一点：用巨大尺寸的单一粗重字体排列你的名字，用一种重点颜色的书法字体替换几个字母，并用细网格线在背景中重复这种颜色。

需要注意：实验室测试尽管页面权重轻，但仍然评为速度慢，Google 的真实访客数据不足以确认其对实际用户的性能表现。

设计内部完成。访问 valentingassend.com。

3. Vivien's Creative

一张全出血的浅色沙丘照片填满屏幕，两个穿着深色外套的行人相对较小地衬托着沙地，给页面增添了视觉空间感和宁静感。介绍文字用轻盈、书卷气的衬线字体排在灰绿色的天空上，下面的名字用巨大粗重的白色无衬线字体，从边到边地排列。小写大字的菜单链接避开了中心，因此图像和名字承担了开场屏的全部视觉工作。

借鉴这一点：将全出血照片与裁切到底部边缘的超大字标和上方的短衬线介绍配对，这样一个小工作室就能通过一张好照片和一对字体获得自信的开场屏。

需要注意：页面权重轻，但实验室测试结果仅为中等水平，Google 没有足够的真实访客数据来判断其对实际用户的性能表现。

由 Christopher Doyle & Co. 设计。访问 vivienscreative.com.au。

4. Oimachi

标题用大型、纯净的grotesque字体配合单个斜体衬线词，在人们阅读正文之前就给页面确立了清晰的声调。浅灰色底色、紧凑的边距和带有两个奶油色圆角形状的深色大面板保持了调色板的沉静，而右侧一列狭窄的明信片增添了摄影和橙色重点。在移动端，相同的标题在一个粗黑色图标网格上整齐地堆叠，这些图标绘制在淡色的构造网格上。

借鉴这一点：将纯净的无衬线标题与单个斜体衬线词配对，为文本主导的英雄部分赋予可识别的声调，然后展示诸如淡色构造网格上的图标之类的过程工作。

需要注意：实验室测试发现页面速度慢且权重非常大，检测到 GSAP 动画与 Webflow 一起使用，且 Google 的真实访客数据不足以说明其对实际用户的性能表现。

内部设计。访问 oimachi.co。

5. Squarespace Foundations

近黑色背景上居中放置一条简短声明，使用干净、均匀笔重的无衬线字体，没有其他元素与之竞争。小型图像瓷砖被倾斜成等距透视，环绕四周如同一个松散的轨道，混合了白色标志、带有暖色阴影的陶瓷罐和浅色金属条。克制和宽松间距使页面感觉平静而沉着，倾斜的瓷砖暗示了动感。

借用这个：将一句简洁的短句配以清爽的无衬线字体，搭配几个在平坦深色背景上倾斜的图像瓷砖，只需少数裁剪图像和CSS变换。

注意：这是一份沉浸式品牌书而非销售页面，其图像会产生较大的下载量：真实访问者等待主要内容加载和点击响应的时间超过Google的目标。

由Resn制作。访问brand.squarespace.com。

6. AI in Design Report 2026

一张褪色反转的花卉照片以灰色和桃色呈现，背后散布着橙色、淡紫色和绿色的颗粒渐变卡片。每张卡片都带有微小的等宽字体标签，标注职位名称，为拼贴赋予了安静的编辑秩序。中央的黑色面板配以厚重的白色几何无衬线字标锚定了整个构图，移动端视图保持了调色板，黑色标志块旁边是亮橙色菜单栏。

借用这个：将一个大号紧凑的无衬线标题与小号等宽标签相配，从少数几张颗粒渐变图像分层覆盖单张着色照片来构建英雄拼贴。

注意：该页面比平均水平更重，真实访问者会看到主要内容加载缓慢和一些布局抖动，所以大拼贴是首先需要检查的内容。

由++hellohello制作。访问stateofaidesign.com。

7. Julia Stafi

页面几乎全是空白，中央有一个高对比衬线字标，下方是用较浅衬线字体排列的简短介绍。介绍文字以错落的对角线模式横跨页面，赋予普通段落动感而无需装饰。下方是建筑师在风化斑驳墙面前的黑色高个肖像，增添了唯一的强色调，深色图像与淡色页面相互平衡。

借用这个：通过简单的左缩进将介绍行错落排列在页面上，并将其与淡白底色上的高个肖像相配。

注意：该页面比平均水平更重，实验室测试成绩只是中等水平，这符合围绕大型照片构建的布局，而Google缺乏足够的真实访问者数据来说明它对实际用户的表现。

由Sasha Khudova制作。访问juliastafi.com。

8. Studio K95

平坦的饱和蓝色填满屏幕，由淡色玻璃质块组成的像素化玫瑰坐在中央，不受任何竞争。小型项目卡片在其周围以环形排列漂浮，红色和奶油色海报在手机视图上与蓝色形成鲜明对比。导航采用微小的大写无衬线字体，因此图稿成为主角，界面保持低调。

借用这个：使用平坦的强色块作为舞台，并添加一个小型的"环与螺旋"风格切换，可以重新排列你的项目缩略图，从而以不同的布局浏览相同的作品。

注意：页面本身很轻巧，但实验室测试成绩只是中等水平，真实访问者会看到主要内容加载缓慢和点击响应缓慢，所以3D场景是首先需要检查的内容。

内部设计。访问 k95.it。

9. Direct Design

一个光滑渲染的交通灯靠在柔和的黄色渐变背景上，绿色的笑脸灯和菱形标志将代理商的方向理念化为一幅图像。标题采用大型紧凑的黑色无衬线字体，背景为白色，放在图像旁边，一眼就能读清。黑色圆角导航栏和小黄色联系按钮将配色限制在黑、白、黄、绿四种颜色。

学习这一点：配合单个定制渲染对象和非常大的标题，然后将其颜色延伸到菜单栏和按钮，这样页面就能感觉有品牌感，而无需太多资源。

要注意：该页面比平均水平更重，实验室测试成绩中等，这与渲染图像和检测到的动画库相符，而且没有足够的谷歌真实访客数据来说明其对实际用户的性能。

由 COSMOFLOW Agency 制作。访问 wearedirect.co。

10. 蜜之屋

字标从边缘到边缘以厚重、宽体黑色无衬线字体运行，细斜体衬线"of"切割其中形成对比。设置在平坦的粉红胭脂背景上，用深巧克力棕色显示，一眼就能读清，感觉温暖。标语以小型大写衬线字体位于两个角落，下方的全出血内部照片重复了配色中的粉红和橙色。

学习这一点：配合一个非常厚重的无衬线字标和单个精致的斜体衬线词汇，然后将调色板限制在一个平坦的背景色和一种深色墨水，这样摄影就能承载其他所有内容。

要注意：页面本身很轻，但真实访客会看到主要内容加载速度缓慢（LCP），这是在大型全出血照片是屏幕上第一个内容时的常见成本，实验室结果也只是中等水平。

由Edoardo Lunardi设计。访问houseofhoney.com。

11. Félix Péault

页面几乎只是从深蓝色经过清晰的绿色到温暖的米白色的渐变，这个着色处理了所有的颜色。一对超大深色字母，F 和 P，像字母标志一样坐在角落里，而高个子浓缩无衬线字体则承载了标语和小菜单。在移动设备上，从上方看到的人物照片，带有长阴影，增加了唯一的图像。

学习这一点：将你的首字母设置为相对角落中的超大字母，并用柔和渐变填充背景，这样页面就能拥有身份识别，而无需任何重型图像。

要注意：实验室测试成绩中等，尽管页面本身很轻，而且没有足够的谷歌真实访客数据来说明其对实际用户的性能。

内部设计。访问felixpeault.com。

12. Karl Barnard

标题采用高对比衬线字体，一个词汇改为绿色斜体，承载所有强调。其他一切保持安静：温暖的米白色背景、淡网格线和标签的小等宽字体。肖像由打字字符构建，所以图像与字体呼应，页面感觉像一个想法而不是一堆零件。

学习这一点：在标题中选择一个词汇，用斜体和单一强调色设置它，让调色板的其余部分保持中立色调。

要注意：实验室测试将页面评为缓慢，尽管页面本身很轻，而且没有足够的谷歌真实访客数据来说明其对实际用户的感受。

内部设计。访问 karlbarnard.co.za。

13. Gionatan Nese

一个白色页面，一个小型产品照片、海报和物体集群以宽松的环形排列，几乎没有其他内容。顶部的微小菜单配对了首字母的朴素无衬线字体和"Creative Space"的精致衬线字体，设置在浅灰色标签中，呈现安静的对比。图像以不同大小重叠，所以眼睛在圆圈周围移动，空白的白色边距使每个缩略图感觉像一个展览品。

借用这个：在纯白页面上松散排列你最好的项目缩略图，围成一个圆环，大小不一且相互重叠，让作品自己说话，无需英雄图或标题。

注意：实验室测试发现页面很慢且很重，真实访客对点击反应缓慢（INP），虽然主要内容本身加载很快。

内部设计。访问 gionatannese.com。

14. SUSO Digital

英雄区停在平静的白色背景上，后面是单个柔软的桃色、丁香色和浅蓝色渐变光晕，背后有一个细白色线框形状。标题使用干净、匀称的无衬线字体，大号尺寸，上方有一个小等宽标签，下方有两个清晰的圆形按钮。间距宽松，页面阅读快速，单个图形做装饰。

借用这个：将干净的无衬线标题与小等宽标签和按钮配对，然后在文本后放一个柔和渐变图形，这样页面看起来设计完善，无需摄影。

注意：页面很轻，但真实访客看到主要内容加载速度有问题（LCP），英雄区中的大渐变图形是首先检查的可能原因。

由 Fhoke 构建。访问 susodigital.com。

15. Nordpixel

深色雾蒙蒙的山景照片填满整个屏幕，右下角有一个玻璃前廊的小屋微弱发光。词标位于中间，宽间距粗体几何大写字母，以蓝色点结尾，在徽标和按钮中重复。白色圆角菜单栏浮在图像上方，所以蓝色强调色和浅色字母提供所有对比。

借用这个：将全出血摄影与叠加深色配对，配合宽间距粗体词标和单一强调色，仅用于点和按钮。

注意：页面比平均重量重，实验室测试仅中等水平，这是全屏摄影的代价，而且没有足够的谷歌真实访客数据来说明它对实际访客的表现。

由Michael Schnyder设计。访问nordpixel.ch。

16. Alvara House

黄昏时平顶房屋的全出血摄影坐在巨大宽白无衬线词标下，HOUSE 这个词半透明地经过屋顶线，所以字体和建筑读作一个图像。蓝色天空为小角落标签提供干净、安静的空间，窗户中的温暖光芒与凉爽背景形成对比。一个圆形按钮和一个磨砂卡片是仅有的竞争元素。

借用这个：将一张强势摄影与重叠主体的超大词标配对，并让其他每个元素都保持小号并缩到角落。

注意：实验室测试结果中等，虽然页面很轻，所以大英雄摄影是最有可能获得收益的地方，而且没有足够的谷歌真实访客数据来说明实践中的感受。

由 Visuvate Studio 构建。访问 alvara.visuvate.com。

17. Haoqi Wen

一个光泽、充气的蓝色书写体"hello"坐在浅天蓝色的背景上，它是这个页面上唯一的柔软物体，其余部分由细网格线和小十字准线主导。沉重的黑色宽无衬线标题固定在左下角，而等宽字体处理导航和个人简介。这种playful与technical的对比很适合设计工程师。

借鉴这个：将一个有触觉感的渲染对象与严格的细线网格和一个单一的等宽字体配对用于小文本，这样个人网站既温暖又精确。

注意：实验室测试发现页面加载缓慢且非常沉重，真实访问者会遇到加载、响应速度和布局稳定性问题，这是大型渲染hero和实时细节的通常代价。

内部设计。访问 haoqi.design。

18. Warm & Fuzzy

全出血的、柔和模糊的电影画面填满整个屏幕，其糖果粉红、芥末黄和叶绿色开启了整个设计。光泽的气泡字体坐在中间，而小导航用朴素无衬线体停留在一旁。一行粗体怪诞字体的标语跨越底部边缘固定页面，设定友好、自信的基调。

借鉴这个：使用一个全屏动画图像作为整个开场，然后仅在顶部保留logo、几个短链接和一行粗体文本作为唯一的装饰。

注意：实验室测试结果平庸，尽管页面本身很轻，所以全屏动画背景可能是代价所在，而Google没有足够的真实访问者数据来说明它对实际用户的感受。

由 Neutral Studio 建造。访问 warmnfuzzy.tv。

19. Glitch&Grit

页面沿中线分割屏幕，左边平坦黑色部分承载一个大灰色花形剪影，右边略浅的炭灰色部分。在两者之上是一个巨大的标题，采用粗体、开放式无衬线体，柔和的石灰绿色，对灰色和黑色都保持可读性。导航和工作室名称用小白色大写字母缩在角落，这样中心保持清晰。

借鉴这个：将一个巨大的单一强调色标题与分割的平坦背景和剪裁形状配对，这样页面就能感到与众不同，而不需要摄影预算。

注意：页面非常沉重，在实验室测试中仅为中等，Google的真实访问者数据不足以说明它在实践中的感受，所以大型视觉效果是首先寻找节省的地方。

访问 glitchandgrit.com。

20. GØDN.studio

近黑色的背景上有一个巨大的陈述，采用沉重、紧凑排列的怪诞大写字体，最后一个单词跌入轻型斜体衬线体，立即改变声音。一个粗糙、斑点标记坐在字体后面，如同静电，增加深度而无需摄影。小的、间距开阔的等宽标签保持安静，围绕它，所以标题首先被读取。

借鉴这个：将一个沉重的无衬线标题与一个轻型斜体衬线体字配对，并在暗色背景上保持所有其他内容为小的间距等宽大写字母。

注意：页面在实验室测试中速度快，文件轻，考虑到它运行 GSAP 和 Three.js 这很好，但Google没有足够的真实访问者数据来说明它对实际用户的性能。

由 Bruno Godinho 建造。访问 studio.godn.pt。

如何制作一个美观且快速的作品集

上面的20个作品集表明，在几乎任何技术栈上，作品集都可以有独特的外观。较快的与较慢的区别在于它们加载作品本身的方式。

• 恰当地展示三到五个项目。尼尔森诺曼集团对204位招聘的用户体验专业人士的调查建议选择3到5个项目作为详细案例研究，质量胜于数量（NN/g）。
• 使其易于浏览。同一研究发现，招聘经理很少会逐字阅读整个作品集（NN/g），所以把问题、你的角色和结果放在浏览视线最容易落到的地方。
• 尽早加载第一张图像。不要在填充第一屏的图像上设置loading="lazy"，将其保留在页面的HTML中而不是用JavaScript添加，并给它设置fetchpriority="high"（web.dev）。
• 对其下方的所有内容进行延迟加载，并设置大小。仅对第一屏之外的图像使用loading="lazy"，并为每个图像添加width和height，这样布局就不会移动（web.dev）。
• 关注总量。在第90百分位数，网站已经发送超过5 MB的图像（web.dev），这20个作品集中有5个总重量超过10 MB。
• 自己测量真实访客。一个小型作品集可能永远无法获得足够的流量在Chrome UX报告中出现，web.dev强烈建议设置你自己的真实用户监控（web.dev）。

如果你想要一个能够赢得项目而不仅仅是看起来不错的作品集，作品集网页设计是我构建它们的方式：快速、在搜索中易于发现且围绕作品撰写。如果你现有的网站只需要焕然一新的外观和更快的首屏速度，网站重新设计是开始的地方。

人们常问的问题

什么是好的作品集网站？

大幅、及早展示作品，提供足够的上下文来解释它。在这20个中，最强的首屏只做一件事：非常大的类型的名称、单个项目或单个照片。尼尔森诺曼集团的研究补充了赢得工作的部分：几个作为案例研究撰写的项目，而不是完成图像的墙（NN/g）。

作品集应该展示多少个项目？

尼尔森诺曼集团建议选择3到5个项目作为详细案例研究，质量胜于数量（NN/g）。项目越少，深度越深，页面上的大型图像也就越少。

作品集网站的最佳平台是什么？

这些数据没有给任何一个技术栈带来胜利。Next.js运行其中6个，Nuxt和Webflow各2个，Framer、SvelteKit和WordPress各1个，而7个是以无法检测的方式构建的。仅Next.js就有79和37两个，所以选择你能保持最新的那个，并在图像加载方式上花功夫。

为什么我的作品集网站很慢？

原因通常是作品本身：第一屏上的全尺寸图像和视频，或者第一张图像加载很晚，因为它被延迟加载或由JavaScript添加（web.dev）。在这次抽取中，被谷歌评判的8个作品集中有7个错过了2.5秒的LCP目标。

为什么我的作品集没有Core Web Vitals数据？

Chrome UX报告仅包括拥有足够访客以形成统计显著样本的页面和网站（Chrome UX Report）。这20个作品集中有11个完全没有真实访客数据。在此期间使用Lighthouse等实验室测试，如果你想要实地数字，可以添加自己的真实用户监控。

我在哪里可以看到更多精美网站？

64个美观网站支柱涵盖8个类别，使用相同的测试。对于餐厅和食品品牌，请查看20个最佳餐厅和食品网站，对于要浏览的画廊，请查看网页设计灵感网站综述。