作品集网站线框图模板
用 Hero、关于我、技能、项目、经历和联系等区块规划你的个人主页布局。低保真线框图，帮你在动手开发前定好信息架构。
使用此模板模板亮点
- 预设 Hero、关于我、技能、项目、经历、联系六大区块
- 低保真占位让注意力聚焦在布局和内容层级上
- 单页滚动结构——可自由编辑和重新排列各区块
这个模板适合做什么
这个作品集网站线框图模板帮你在写代码或打开设计工具之前，先把个人主页的结构定下来。用低保真的方式规划关键区块——Hero、关于我、技能、项目、经历、联系方式——专注于信息架构而非视觉美化。很多作品集的问题并不是配色不好，而是结构一开始就没有想清楚：项目区块藏得太深，关于我写成简历复述，联系入口放在访客已经失去耐心之后。先画线框图，可以把这些选择提前暴露出来。你能测试页面顺序，决定哪些能力证明应该放在首屏附近，也能删掉那些对目标访客没有帮助的区块。不管你是开发者、设计师、自由职业者、学生还是学者，这个模板都提供了一版实用的页面草稿：清晰导航、可编辑内容区块、可复用项目卡片，以及足够的留白来判断阅读节奏。先用它把布局确定好，再进入视觉设计、建站工具或手写代码，后面会少很多返工。
适用场景
- 规划开发者作品集，包含项目展示、GitHub 动态和技术博客入口。
- 画自由职业者落地页，突出服务项目、过往客户和联系表单。
- 搭建学术个人主页，展示论文发表、教学经历和研究方向。
- 设计创意人作品集，用全宽主图和项目画廊网格。
- 规划产品经理作品集，突出案例研究、产出物和业务结果。
- 设计数据分析作品集，展示看板、分析方法和业务影响。
- 规划个人主页，包含自我介绍、社交链接和 Newsletter 订阅入口。
- 做一页式简历风格站点，滚动展示经历、技能和学历。
使用步骤
- 1从顶部的 Hero 区域开始——一句标题说明你是谁、做什么。
- 2在 Hero 下方加入关于我区域，放简短介绍、头像占位和关键数据亮点。
- 3规划技能区域，让访客一眼看到你的技术或创意能力。
- 4布置项目区域——在网格、列表或轮播布局中做出选择。
- 5放置经历和学历区域，展示职业背景和资质。
- 6以联系区域结尾，包含表单字段或社交链接，让访客能找到你。
简单示例
开发者作品集线框图
相关资源
和相似工具的对比
线框图 vs. 建站工具
线框图先规划信息架构和内容层级，不涉及视觉设计。建站工具（Wix、Squarespace）直接跳到精美页面。先用线框图确定什么内容重要、按什么顺序讲，再用建站工具或写代码去执行一个你已经验证过的方案。
作品集线框图 vs. 简历
简历列出你做过什么。作品集线框图规划你如何用视觉方式呈现——带层级、导航和行动号召。线框图帮你决定哪些项目最值得占据空间、哪些区块访客应该最先看到。
线框图 vs. 设计稿
线框图是低保真、结构性的——灰框、占位文字、没有真实颜色或字体。设计稿是高保真、视觉化的——真实图片、精确排版、品牌风格。先用线框图锁定布局，再在设计稿上打磨视觉。
常见误区
一边设计一边规划
当你还在纠结区块怎么放的时候就开始选颜色和字体，两个决策都会受影响。用线框图先把结构定下来，然后在扎实的布局上叠加视觉设计。
把所有内容塞进首屏
把全部信息挤在第一屏会造成视觉噪音。作品集是一种叙事——让访客往下滚动。Hero 回答你是谁。往下翻来证明你行。
到最后才想起联系方式
作品集存在的目的是让人找到你、雇用你、联系你。如果联系方式只是一个事后加上的 mailto 链接，你在让对的人找到你这件事上设置了不必要的障碍。早点规划。
常见问题
作品集网站应该包含哪些区块？+
至少包含：Hero（你是谁）、关于我（你的故事）、项目/作品（能力的证据）、联系方式（怎么找到你）。大多数作品集还会加上技能、经历和学历。具体区块取决于你的受众——开发者作品集可能强调项目和技术技能；自由职业者作品集可能强调服务和客户评价。
应该用线框图模板还是从零开始？+
模板给你一个验证过的结构，比你自己一个个放框快得多。从零开始给你完全自由但耗时更长，而且容易漏掉重要区块。第一次做作品集，用模板开始再自定义——反正你做真实版本时还会迭代。
作品集里应该放多少个项目？+
3–6 个有背景说明的好项目，远好过 20 个没有解释的项目画廊。每个项目包含：解决了什么问题、你的具体角色、使用的技术或方法、链接或截图。质量和叙事远远重于数量。
需要单独的关于我页面还是首页上一个区块就够了？+
单页作品集的话，首页上的关于我区块就够了。如果你有更长的职业故事、演讲经历、论文发表，或者想把个人和专业内容分开——值得加一个独立的关于我页面，从首页链接过去。这个线框图模板两种方式都支持。
这个模板也能当个人主页模板用吗？+
可以。作品集网站和个人主页共享相同的核心结构——Hero 区块、关于我区块、以及让访客联系到你的方式。这个模板可以直接当个人主页模板来用：Hero 放你的姓名和一句话介绍，关于我放你的故事，然后把项目、经历等区块按你想突出的内容来调整——博客入口、Newsletter 订阅、演讲经历或者社交链接都可以。
在线开始编辑
打开模板，几分钟内规划好你的个人主页布局——免费、无需注册。
