个人作品集：设计师的网格 Gallery

背景：一个朋友想换个工作，需要一个作品集页面。他说「Figma 做太慢，Webflow 太贵，我要一个能打开的页面，2 小时内搞定的那种」。我用 huashu-design 给他做了一个网格 Gallery 作品集，25 分钟。

作品集的设计目标：让作品说话

作品集页面是所有设计类型里最特殊的——设计的目的是让用户忘记设计的存在。

如果你点开一个设计师的作品集，第一反应是「这个页面的排版好精致」，那这个作品集就是失败的。好的作品集，你的第一反应应该是「这个项目好有意思」。

第一步：网格系统的选择

作品集的核心是网格。AI 开工前给了 3 个选项：

选了 3:2 比例网格——每张项目卡片宽高比固定为 3:2，排列整齐但通过封面图本身的差异化来产生节奏感，而不是靠 layout 的变化。

第二步：项目卡片的设计

每张卡片的信息量控制：

┌────────────────────┐
│                    │
│    项目封面图       │  ← 占卡片 75% 面积
│    (3:2 比例)       │
│                    │
├────────────────────┤
│  项目名称（16px）    │  ← 衬线字体
│  标签 · 标签（12px）  │  ← Inter，灰色
└────────────────────┘

关键细节： 项目名称用衬线字体（Noto Serif SC），标签用 Inter。字体切换本身就在传递「这是内容，这是元信息」的层级信号。

hover 时封面图有一个极轻微的上移（translateY -2px，300ms ease），不做放大/旋转/彩色覆盖——那些是模板行为。

第三步：页眉——3 秒建立信任

页眉区不需要太多信息：

[头像 · 姓名 · 职位]    [Dribbble · GitHub · LinkedIn]

• 左侧：圆形头像 + 姓名 + 一行职位描述（「产品设计师 · 专注 AI 体验」）
• 右侧：3 个社交链接 icon（Lucide 图标，不要用品牌 color——保持统一）

页眉高度控制在 80px 以内，不要 hero，不要大图背景。作品集的核心是作品，不是自我介绍。

第四步：筛选——给用户选择权

如果作品超过 6 个，需要筛选功能。huashu-design 的筛选器设计：

[全部 · 品牌 · 界面 · 动效 · 数据可视化]

• 水平排列，不用下拉菜单
• 当前选中的标签用品牌色下划线
• 点击后网格用淡入过渡（opacity 0.3 → 1，200ms）

筛选不是为了炫技，是为了让看作品集的人更快找到他想看的方向。面试官可能只看 UI 作品，忽略品牌项目——好的筛选器帮他节省时间。

第五步：项目详情页

点击卡片进入详情页（同一 HTML 内的视图切换，不是新页面）：

← 返回  项目名称

项目概述：2 行文字
我的角色：UX 设计 · 前端实现
时间：2026.01 - 2026.03

[图片 1] [图片 2] [图片 3]

设计过程：简短的 3 段式
1. 问题定义
2. 设计方向
3. 落地结果

详情页不做花哨的排版——左文右图、全文宽、两列图片——取决于内容。把设计权交给内容本身。

细节：图片加载的诚实性

作品集最容易踩的坑：放一堆高分辨率大图，页面加载慢。

huashu-design 的方案：
- 缩略图用 600px 宽（WebP 格式）
- 详情图用 1200px 宽
- 点击可查看原图（新标签页打开）
- 懒加载（Intersection Observer）

不要把 4000px 的 Figma 导出图直接丢进 HTML。

耗时复盘

核心心得

作品集设计的本质：你不需要告诉别人你有多好，展示你的作品就够了。

好的网格、干净的卡片、克制的动效——这些只是让作品能被看到的基础设施。真正打动人的永远是作品本身。

下次你要做作品集的时候，花 80% 的时间选作品和写项目描述，花 20% 的时间做页面。方向反了，页面再精致也没用。

截图清单

1. ✅ 个人作品集（3:2 网格 + 项目卡片 + 筛选 + 详情页）— 已插入上文