1. 项目概述1.1 这个“第二次作业”到底在训练什么看到“第二次作业”这个标题做过设计或前端的人应该都有一种熟悉的既视感。第一次作业往往是零基础入门练习让你把工具链跑通、把简单的流程走顺而第二次作业真正开始考验一个人“能不能独立完成一个小型任务”。我这次要聊的是一个很典型的设计类“第二次作业”做一个自己的作品集展示页。为什么不是博客、不是官网、不是商城因为作品集页面是多数人入行前第一个真正“以自我为中心”的项目。它看起来简单实际涉及信息架构、视觉排版、响应式适配、动效交互、图片处理、性能优化等一堆知识点而且做完之后可以直接拿出去当简历附件。这个作业非常值得认真对待——它往往决定你下一次面试时对方有没有兴趣继续看下去。这篇内容适合正在做“第二次作业”的在校学生、刚转行的设计学习者以及第一次接触响应式页面开发、想找一个完整练习场景的新手。我会从思路拆解开始讲讲清楚每一步为什么要这么做而不是扔一堆代码让你复制。后续再展开实际操作、常见问题和排查技巧都是我反复做过这类页面后踩过的坑和总结出来的规律。1.2 这个项目的实际应用场景和值作品集页面这个载体非常有意思。它既是一个展示窗口又是一个练手阵地。从应用场景来说它可以用来挂在简历上作为个人作品集的访问入口。用作求职面试时的现场演示项目展示你对设计规范、代码实现、交互细节的理解。作为学习阶段的阶段性总结记录自己在某个时间点掌握的能力边界。后续可以持续迭代加入新的作品、新的动效、新的页面结构。我曾经帮几位刚入行的朋友审过作品集页面发现一个共性大多数人的“第一次上线版本”都有排版混乱、图片失帧、页面滚动卡顿的问题。这些问题几乎全都是在“只有静态稿、没有真实页面”的阶段埋下的。做这个作业时如果能把它当成一个小型产品去推进收获会远超对着设计稿临摹。2. 内容整体设计与思路拆解2.1 为什么“第二次作业”要从设计稿走向真实页面先说一个核心观点第二次作业和第一次最大的区别在于“约束条件”突然变多了。第一次作业往往只需要完成一个固定的、别人定义好的任务第二次作业开始让你自己定义目标、自己规划页面结构、自己在有限的周期内做取舍。以作品集页面为例很多人在视觉设计阶段觉得“怎么好看怎么来”结果到代码实现阶段发现根本不是那么回事。比如你在设计稿里使用了三种以上的字重混排笔画细的字在小屏幕上会发虚你设计了大量悬停动效没想到移动端根本没有“悬停”这个概念你为了“有设计感”加了一张大图背景结果页面体积直接飙到 10MB 以上首屏加载慢得让人抓狂。所以我在推进这个项目时先不急着写代码而是先做“设计约束清单”。约束清单里写明目标用户是谁、最核心的展示内容是什么、需要兼容哪些屏幕尺寸、首屏加载时间控制在多少秒以内。把这些想清楚后后面所有的设计决策才有依据否则每一步都在拍脑袋最后改来改去全是返工。2.2 页面结构规划与信息优先级作品集页面虽然内容不多但结构上必须有一个清晰的叙述逻辑。我习惯采用“三段式 顶部锚点导航”的结构首屏Hero 区一句话介绍我是谁、我做什么、我能提供什么价值。这一屏必须在 3 秒内让访客知道“这个页面是谁的、有没有继续往下看的必要”。作品展示区2 到 4 个精选项目每个项目配一张封面图、一段简短说明、一个“查看详情”的链接。关于我与联系方式简要经历、技能标签、社交链接让对方知道怎么联系你。这个结构看起来平淡无奇但它的好处是信息层级清晰第一屏解决“你是谁”第二屏解决“你做过什么”第三屏解决“怎么找到你”。很多作品集页面让人看了犯困不是因为内容不好而是因为这三件事的顺序被打乱了访客必须花大量精力去猜信息在哪。在信息优先级上我的建议是作品永远比自我描述更靠前。不要一上来写一大段个人感言访客不关心这些他们想先看作品产生兴趣后才愿意了解你这个人。所以首页尽量少放文字把大部分篇幅留给作品图片和案例说明。2.3 技术方案选型静态页面就够了我在做这类页面时除非对方明确要求接入内容管理系统否则我默认采用纯静态技术栈HTML CSS 少量 JavaScript不需要引入 Vue 或 React。原因很简单。首先作品集页面的内容更新频率很低不需要复杂的动态渲染。其次静态页面可以直接部署在任何静态托管平台上加载快、维护成本低、不容易出兼容性问题。但这不代表你可以完全不用框架思维。即使只是手写 HTML也要讲究“组件化”的思路。比如作品卡片会反复出现多次那就应该把它抽象成统一的卡片结构而不是每次复制粘贴再改一改导致三个卡片样式细节不一致。这个习惯会直接影响你在团队协作中的代码质量和维护效率。3. 核心细节解析与实操要点3.1 布局系统用栅格而不是靠感觉很多新手排版时喜欢靠“感觉”调边距一会儿这挪一点一会儿那挪一点页面到最后比例越来越怪。我的做法是直接从开始就建立一套栅格系统用统一的数值节奏来约束所有间距。关于栅格我是这样处理的以 12 列栅格为基准页面总宽度最大 1200px两侧留出安全边距列与列之间的间隙定为 24px。这样算下来一个标准卡片位占 4 列一行可以放三个卡片间距均匀视觉平衡感天然就好。栅格的本质是提供一个“看不见的尺子”让你在做每个局部决策时都有参考而不是凭感觉猜。栅格参数校准举例容器最大宽度1200px列数12 列列间距24px安全边距移动端 16px桌面端 32px内容区左右留白20px 到 40px 之间视屏幕宽度弹性适配这套参数在大多数场景下都适用它兼顾了桌面端的舒展感和移动端的紧凑感。如果项目风格偏活泼可以适当加大间距但建议以 8px 为基本单位递增比如 24、32、40、48这样变化有规律可循不会显得杂乱。3.2 响应式适配的断点策略响应式是第二次作业里最容易被忽略、也最容易翻车的点。很多人的页面在桌面端看起来很完整一缩小到手机宽度就乱成一团。这往往是因为没有提前规划断点而是等布局自己崩了才去“打补丁”。我常用的断点策略是三个档位断点档位屏幕宽度适配目标桌面端 1024px三栏卡片布局双栏结构平板端768px - 1023px双栏卡片布局减少留白手机端 767px单栏卡片布局导航折叠这套断点策略的优先级是“从大到小向下适配”。我在写样式的标准做法是优先写桌面端样式然后用媒体查询逐级覆盖小屏样式。这样做的好处是桌面端作为主要体验场景细节打磨得更充分小屏只做必要的“降级”不会因为规则过多导致样式互相打架。适应性调整的实际例子一个作品卡片在桌面端是三列并排平板端改成两列并排手机端改成单列。这个变化看起来简单但需要考虑图片比例、文字字号、间距等多个因素。我建议所有图片统一采用 4:3 比例裁剪这样在任何断点下都不会因为图片比例不同而破坏卡片整体感。3.3 图片处理与加载性能作品集页面最怕的是“图好但加载慢”。我见过太多人直接把单反原图拖到网页里用一张图五、六兆页面滚动起来一顿一顿的体验非常糟糕。处理图片这件事应该在设计阶段就完成而不是等部署上线后才补救。我的图片处理流程是先在图片工具里把宽度缩放到适合展示的尺寸比如卡片图压缩到 800px 宽以内再按质量参数导出一般保存为 JPEG 格式质量控制在 80% 左右然后对 PNG 格式的透明图做无损压缩。这样一张图通常能控制在 100KB 到 300KB 之间页面整体体积保持在 2MB 以内加载速度处于可接受的范围。大量使用图片的场景下还要注意一件事图片文件务必命名规范。不要用“截图1.png”“未命名-01.jpg”这种名字而是用“project-name-cover.jpg”“profile-avatar.png”这种含义清晰的命名方式。这样做不仅方便你在代码里调用还能让搜索引擎更容易理解图片内容对后续收录也有帮助。3.4 导航与交互细节作品集页面的导航一般不需要太复杂但有两个交互细节值得专门打磨。第一个细节是“锚点定位的平滑滚动”。点击导航链接跳到页面某个区块时默认行为是瞬间跳转体验很生硬。加一行平滑滚动效果后整个页面的质感立刻不一样。这个效果可以用 CSS 轻松实现在根元素上设置scroll-behavior: smooth;即可。如果还想更精细地控制滚动距离可以用 JavaScript 配合scrollIntoView方法。第二个细节是“滚动渐显动画”。当用户向下滚动时卡片逐渐浮现而不是直接砸到屏幕上。这种微动效能让页面显得更灵动但要注意度不要每个元素都弹来弹去。我通常只对作品卡片和首屏标题做“淡入 上移”的效果动效时长控制在 0.5 秒到 0.8 秒之间缓动函数用 ease-out让运动一开始快、快结束时慢下来观感最自然。4. 实操过程与核心环节实现4.1 第一步搭建目录结构与基础骨架到手一个新项目时我习惯先把目录结构规划好让代码文件各归其位。对作品集页面来说一个很清爽的目录结构长这样project/ ├── index.html ├── css/ │ └── style.css ├── js/ │ └── main.js ├── images/ │ ├── project-1-cover.jpg │ ├── project-2-cover.jpg │ ├── project-3-cover.jpg │ └── profile-avatar.png └── assets/ └── resume.pdf这个结构的好处是“进来一眼就能知道该碰哪个文件”。CSS 放在独立文件夹里方便后续引入更多样式图片集中管理方便压缩和替换如果有简历 PDF 之类的附件单独放在 assets 目录下不会跟页面资源混在一起。在index.html骨架中有几处细节需要认真对待。首先是要写一个语义化且能概括页面内容的title。我在 SEO 工具里见过不少标题为“未命名文档”或“index.html”的岗位候选人页面这种疏忽会直接影响别人对页面专业度的判断。其次是viewport标签这是移动端适配的重要基础没有它手机浏览器会按默认宽度渲染页面会直接被缩小成一个全局缩略图。index.html的基础骨架示例!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title个人作品集 - 设计师网站设计/title link relstylesheet hrefcss/style.css /head body header classsite-header nav classnav-container a href#home classlogoMy Works/a ul classnav-menu lia href#works精选作品/a/li lia href#about关于我/a/li lia href#contact联系方式/a/li /ul /nav /header main section idhome classhero-section/section section idworks classworks-section/section section idabout classabout-section/section section idcontact classcontact-section/section /main script srcjs/main.js/script /body /html这样写出来的骨架每个区块不管里面有没有内容页面语义是完整的也很容易继续往下填充细节。4.2 第二步CSS 变量与全局设计基调页面整体观感是否统一很大程度上取决于颜色、字号、间距这几类“全局变量”是否提前定义好。我强烈建议在样式表最开头定义 CSS 变量把核心设计参数集中管理。后续想微调配色或调整间距时只需要改最上面的几行代码就能让全站同步更新。我在这类作品中会定义以下几组变量:root { /* 配色 */ --color-bg: #f5f5f7; --color-card: #ffffff; --color-text: #1d1d1f; --color-text-secondary: #6e6e73; --color-accent: #0071e3; /* 布局 */ --container-width: 1200px; --spacing-base: 24px; /* 字号 */ --font-size-hero: clamp(2rem, 5vw, 3.5rem); --font-size-title: 1.75rem; --font-size-body: 1rem; --font-size-caption: 0.875rem; /* 圆角 */ --radius-card: 12px; --radius-btn: 20px; }这组变量的选择不是随意的。颜色上我选了偏中性的灰白背景配合深色文字这是目前行业里最稳妥的方案既显得干净又不会让作品本身的色彩被背景抢了风头。强调色选了蓝色系它和偏白背景的对比度高又不会像红色系那样过于扎眼。字号上用了clamp()函数做响应式字号这样在手机、平板、桌面端可以自动调整不用为每个断点设置单独的字号。4.3 第三步Hero 区的实现细节首屏是整个页面的门面值得花心思打磨。设计上要避免两种极端一种是什么都往里塞把首屏做成信息瀑布另一种是过于极简除了一个大字号标题什么都没有访客容易一头雾水。我的 Hero 区会储备四个基本元素一个主标题比如“你好我是XX一名专注于品牌视觉的设计师”主标题字号最大是全页面的视觉焦点。一句副标题补充说明你具体擅长什么比如“UI 设计、插画、动效设计”这句话要写得具体不要泛泛的“热爱生活、追求美感”。一个行动按钮比如“查看作品”或“下载简历”给访客一个明确的下一步操作。一张无干扰的背景图或几何装饰增强视觉层次感但不要喧宾夺主。为了确保首屏在整个视口内完整显示Hero 区的高度一般设置为100vh也就是视口高度的一整屏。在移动端要注意虚拟地址栏的高度差异建议用min-height: 100vh配合padding保持内容安全间距避免内容被顶部栏遮挡。还有一个容易被忽略的细节Hero 区的文字在加载时容易出现闪烁尤其是依赖自定义字体时。我的做法是先加载系统字体作为后备自定义字体加载完后再覆盖掉配合font-display: swap属性能有效避免文字不可见的“白屏等待”时间。4.4 第四步作品卡片组件的完整写法作品卡片是作品集页面的核心控件它的设计与代码质量直接决定页面给人的专业印象。我在写卡片组件时会严格遵循三个原则同一结构、同一间距、同一图片比例。卡片内部从上到下依次是封面图、项目标题、一句话简介、标签列表和链接按钮。做一个结构完整的卡片HTML 代码长这样article classwork-card div classwork-card__cover img srcimages/project-1-cover.jpg alt项目封面品牌视觉设计 loadinglazy /div div classwork-card__body h2 classwork-card__title品牌视觉设计/h2 p classwork-card__desc为一家独立咖啡品牌完成了完整的视觉形象设计覆盖标志、包装和店面物料。/p ul classtag-list li品牌设计/li li包装/li liVI 规范/li /ul /div /article对应 CSS 样式中的关键点是卡片用display: flex; flex-direction: column;保证封面图和文字区域垂直排列。封面图容器使用aspect-ratio: 4 / 3;固定宽高比再用object-fit: cover;让图片在限定容器里自动裁剪。卡片 hover 时做一个轻微的阴影提升效果用box-shadow和transform: translateY(-4px)配合实现过渡动画控制在0.3s ease。{: .note }提醒一个特别注意的点在写图片alt属性时不要只写“图片”。alt 的作用是让屏幕阅读器用户和图片加载失败时都能理解这个位置的内容应当简短而准确地描述图片含义。比如“项目封面品牌视觉设计”就比“图片1”要好得多。4.5 第五步响应式布局代码的落地方式我在写响应式布局时核心手段是grid配合媒体查询。作品卡片的容器桌面端是三列平板端是两列手机端是单列直接用grid-template-columns控制代码清晰省事。.works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-base); } media screen and (max-width: 1023px) { .works-grid { grid-template-columns: repeat(2, 1fr); } } media screen and (max-width: 767px) { .works-grid { grid-template-columns: 1fr; } }这段代码的巧妙之处在于它完全不需要在 HTML 里判断设备类型所有适配逻辑都收拢在 CSS 里。到平板端自动变成两列到手机端自动变成单列省掉了大量重复的 DOM 操作。如果要调整间距只需要改一下gap的变量值全站卡片间距同步生效。但要注意单纯改列数是远远不够的。手机端的卡片标题可能比桌面端更长、图片的可视范围更小所以还需要在媒体查询里同步调整内边距、标题字号和描述文字的行高。这些细节都会影响最终的阅读体验。4.6 第六步导航与交互动效实现导航菜单在桌面端展示为顶部横排在手机端则需要做折叠处理。折叠菜单最简单的实现方式是使用复选框或 JavaScript 切换class。JavaScript 侧的核心逻辑示例const menuToggle document.getElementById(menu-toggle); const navMenu document.querySelector(.nav-menu); menuToggle.addEventListener(click, () { navMenu.classList.toggle(nav-menu--open); });对应 CSS 侧折叠菜单在手机端默认隐藏点击按钮后通过.nav-menu--open类将其展开为从顶部滑下的菜单面板。滚动渐显动画的实现也很轻量在页面滚动时用IntersectionObserver观察卡片元素是否进入视口一旦进入就给卡片加上“可见”类驱动 CSS 过渡动画。{: .note } 常见的坑是动画结束后卡片如果没有移除“隐藏”状态用户重新滚动到该区域时可能出现元素消失的问题。所以“可见”类要保留不变只用隐藏类做初始状态而不要让隐藏类在动画后重新加回去。4.7 第七步表单联系方式与内容页扩展作品集页面通常需要一个联系入口。联系方式不建议放复杂的表单一个mailto:邮件链接就足够。如果一定要做表单可以接第三方表单服务不要自己维护服务端。联系区的最终结构包括一个“联系我”标题。一两个可点击的邮箱链接和社交主页链接。如果觉得页面内容不够丰富可以额外增加“技能标签区”用标签云展示你掌握的设计工具和技能名称。如果后续想扩展为多页面思路也很清晰做一个公用的头部导航与底部信息区然后每个作品详情独立成一个页面用链接跳转。这样既能保持统一风格也方便单个作品的深度展示。5. 常见问题与排查技巧实录5.1 页面无法在移动端正常显示这个问题最常见的场景是桌面端看到页面好好的一用手机打开页面变成全屏缩略图文字小到看不见。十有八九是meta nameviewport标签漏掉了。加上这行标签页面才能按照设备真实宽度渲染而不是按桌面端宽度缩小显示。另外如果是因为在 CSS 里写了固定宽度比如width: 1200px导致手机端横向滚动就需要把所有固定宽度改成max-width或者百分比宽度让容器跟着屏幕宽度弹性变化。5.2 图片加载太慢打开页面要等很久图片才出来原因基本两个一是图片没有压缩二是没有设置loadinglazy让非首屏图片延迟加载。排查思路很简单在浏览器开发者工具里打开“网络”面板看页面尺寸和图片大小。如果单张图片超过 500KB基本就要压缩。图片格式方面普通照片用 JPEG图形和文字为主的用 PNG需要透明背景且追求体积小可以用 WebP。我自己的标准是首屏 Hero 背景图控制在 200KB 以内作品卡片图控制在 150KB 以内。这个标准能让绝大多数网络环境下页面秒开。5.3 锚点跳转后导航栏遮挡内容锚点跳转有个老问题纯锚点定位会让目标区块紧贴视口顶部如果页面有固定导航栏目标区块的标题会被导航栏盖住一截。解决方式有两种。方法一给目标区块加一个灵巧的scroll-margin-top属性。section { scroll-margin-top: 80px; }这样锚点定位时浏览器会自动预留出顶部 80px 的空间标题就不会被遮住了。方法二用 JavaScript 监听锚点点击手动计算导航栏高度并调整滚动位置。前者的方案更轻量推荐先用它。5.4 动画导致滚动卡顿做动效时新手最容易犯的错是给width、height、top、left这些属性加过渡这些属性会频繁触发浏览器布局与绘制消耗很大导致滚动时明显掉帧。优化的原则是尽量只对两个属性做过渡动画——transform和opacity。这两个属性能直接由浏览器合成器处理不需要重新计算布局性能最好。我所有卡片的浮起动效都用transform: translateY()来实现从没出现过卡顿问题。5.5 卡片压图片变形这是一个高频问题。很多人从网上下载好图片后没有调整尺寸就放进卡片容器结果图片要么被拉伸变形要么被压缩到模糊。解决办法是组合使用aspect-ratio和object-fit: cover。前者固定容器宽高比后者让图片在容器内自动裁切并居中显示不管原图尺寸是横的、竖的还是方的都能在卡片里保持比例不变。6. 工具选型与效率提升建议6.1 代码编辑工具与浏览器调试工具工欲善其事必先利其器。写这类页面时编辑器我一般会选带代码高亮和自动补全的工具只要能打开 HTML、CSS、JS 文件并且能快速预览即可。调试阶段一定要善用浏览器自带开发者工具。开发者工具真正常用的三个面板是元素面板查看和临时修改 CSS实时预览效果。网络面板查图片大小、接口耗时、加载失败资源。移动模拟器一键切换到手机尺寸视图检查响应式适配。我自己调试页面时会把开发者工具固定在屏幕右侧左边是代码右边是页面实时预览改动即时生效。这个工作流能极大缩短“发现问题—修改代码—刷新页面”的反馈循环。6.2 图片处理工具与切图建议图片压缩工具选择很多我用得最多的是一个在线压缩网站和一款本地图片编辑工具。在线工具适合快速压缩本地软件适合批量处理多张图片。实际切图时的推荐参数卡片封面图输出宽度 800px质量 60%-80%。Hero 背景图输出宽度 1920px如果页面优先考虑性能也可以降到 1600px。头像图输出宽度 400px 左右。尽量在导出时就统一文件命名避免后期改代码。6.3 部署上线与维护心得页面写完后部署是最后一个环节。一个典型的静态页面推荐直接部署到静态托管平台。部署流程通常只需要三步注册账号、新建项目仓库、把本地文件夹推上去。平台会自动生成一个在线网址之后每次修改代码再推送一次就能自动更新。部署完成后要做的第一件事不是到处分享链接而是先在手机浏览器里完整地浏览一遍页面检查图片清晰度、文字可读性、导航菜单能不能展开、锚点跳转有没有被遮挡。等这些问题都确认没问题了再把这个链接放进简历里。7. 经验总结与个人体会做了这么多版作品集页面我个人最大的体会是第二次作业这类项目的成败往往不在于你会多少炫技的动效或有多么独特的创意而在于你能不能把一个基础需求稳定地、完整地实现出来。页面上每一个细节——从标签声明的完整性到图片是否压缩到位再到锚点跳转是否顺滑——都会在别人打开页面时形成连续的印象。真正的专业感就是这么一点一点积累出来的。如果想把作品集页面做得再好一层我建议考虑以下几个扩展方向一是给每个作品单独做详情页让作品深度展示得更充分二是增加一个简单的博客或笔记区持续输出学习心得保持页面更新频率三是接入数据统计工具看看访客的停留时间和点击热区用数据辅助后续优化。但不管怎么扩展你的第二次作业最有价值的产出是那个“从想法到落地全程有据可循”的完整过程。把这个过程养成习惯后续所有的设计、开发和内容创作项目速度和质量都会有明显提升。