打算给自己搭个个人网站，打开设计工具发现连第一屏放什么都不确定，花了两个周末研究了47个设计师主页，总结出四种新手也能做出来的版式

一、单栏纵向叙事型：把网页当成一个长卷轴

这47个站里有19个用了这种版式，是使用率最高的一种。结构很简单：从上到下，一屏一屏地展开内容。第一屏是身份声明（名字+一句话定位），第二屏是核心能力或项目，第三屏是具体案例展开，最后是联系方式。整个页面就像一个纵向卷轴，用户只需要往下滚就行了。

这种版式的核心逻辑是把用户的注意力压缩成一条纵向的线。没有左右选择，没有并列判断，只有"往下看"这一个动作。对于个人网站来说，这是最不容易出错的选择——因为个人网站最大的敌人不是"不好看"，而是"用户不知道看哪里"。

具体怎么搭？先说宽度。桌面端内容区的宽度控制在680-760px之间，不要再宽了。超过800px之后单行文字太长，用户读完一行回到下一行开头时容易串行。移动端自然撑满，左右各留16px的padding就行。

配色方面，单栏叙事型用低饱和度的主色+大面积留白最稳。背景就用#ffffff或#fafafa，文字用#1a1a1a到#666的灰度梯度，只用一个强调色（比如#2563eb蓝或#059669绿）来标记按钮和链接。别在单栏叙事里用多色系统，颜色一多，纵向的阅读节奏就被打断了。

二、首屏冲击+瀑布流作品集型：第一屏定生死

这47个站里有14个设计师主页用了这种版式。它的逻辑和单栏叙事型完全相反：单栏是"慢慢讲故事"，瀑布流是"上来就亮底牌"。第一屏通常是一句极具个人风格的主张，然后紧接着就是作品墙，2列或3列的网格瀑布流直接铺开。

这种版式有个隐藏的设计难点：首屏那句主张如果没写好，整个页面就塌了。因为瀑布流本质上就是图片矩阵，如果用户看完第一屏没有产生"我想看他的作品"的冲动，就不会往下滚。所以这句主张不能是"UI/UX设计师"这种职位描述，得是一句让人停下来想一秒的话。

瀑布流的列数建议桌面端3列、平板2列、手机1列。每张作品卡片里包含一张预览图、项目名称、一个标签，不要再塞更多信息了。作品集页面的核心目的是让用户"快速扫描→找到感兴趣的→点进去看详情"，不是在卡片上就把所有信息交代完。卡片越干净，点击率越高。

三、左右分栏信息型：把导航焊死在左边

47个站里有9个技术背景的开发者主页用了左右分栏。左边是一个固定不动的侧边栏（宽度约240-300px），放头像、名字、一句话介绍、导航链接；右边是滚动内容区，放项目经历、技术栈、博客文章等。左侧永远是可见的，右侧内容可以无限往下滚。

这个版式最大的好处是降低了用户的认知切换成本。传统顶部导航，用户滚到页面中间想跳转，得滚回顶部。左右分栏不存在这个问题——导航始终在视野里。对于信息模块比较多的个人网站（比如同时有"关于我""技术栈""开源项目""博客""演讲"五个板块），左右分栏是效率最高的选择。

四、卡片网格通用型：最不容易翻车的方案

剩下的5个站用了纯卡片网格。顶部一个简洁的header（名字+导航），下面直接就是2列或3列的卡片网格，每张卡片代表一个项目/文章/作品。没有复杂的视觉叙事，没有花哨的首屏动画，就是一个结构清晰的内容矩阵。

这种版式的优点是容错率极高。不管你往里面填什么内容，只要卡片尺寸统一、间距一致，整体看起来就不会乱。缺点是辨识度低——50个卡片网格站放在一起，很难记住哪个是哪个。所以如果选这种版式，一定要在配色或字体上做一个强记忆点。

五、配色和字体：两条线守住底线

四种版式选好之后，配色和字体是往上填的"血肉"。这两样如果没选对，骨架再好看也救不回来。

先说配色。个人网站配色有一条核心原则：60-30-10法则。60%是主色（通常是背景色），30%是辅助色（大面积区域色块、卡片背景），10%是强调色（按钮、链接、高亮标签）。很多人配色翻车是因为把比例搞反了——用一个很鲜艳的颜色做背景，占了60%的面积，用户眼睛根本受不了。

新手最容易犯的配色错误：用纯黑（#000000）做文字色太刺眼，改成#1a1a1a或#2d2d2d；同时用三个以上的强调色页面像圣诞树，坚持只用一个强调色；背景用了图案或渐变文字却还是灰色，对比度不够，有图案背景时文字要加深或加白色半透明底衬。

再说字体。个人网站中文字体选系统默认字体栈是最稳的，不需要加载Web字体，打开速度最快。推荐字体栈：font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;。Mac上走苹方，Windows上走微软雅黑，覆盖99%的用户。

六、四个版式怎么选，对号入座

四种版式没有绝对的优劣，只有适不适合你的内容类型。对着自己的情况看一眼就知道该选哪个。

七、三个新手最容易掉进去的设计坑

研究了47个站之后，发现新手做的个人网站有三个几乎人人都会踩的坑，但改起来成本极低。

三个坑具体说一下：第一，全居中对齐——居中在首屏用没问题，但全文居中会产生一个微妙问题，左对齐文字每一行从同一位置开始，扫读时不需要重新定位，居中文字每一行起点都不一样，阅读速度明显下降。第二，留白太小——模块间距只有8-12px看起来像一团粥，留白不是"浪费空间"，是给信息分组，间距大于模块内部间距，大脑就能自动识别"这是不同组"。第三，从不在手机上打开看——超过一半流量来自手机，桌面端设计完成后把浏览器拉到375px宽滚一遍，花5分钟能发现60%的问题。

八、从设计稿到上线，用什么工具

版式选好了，配色字体定了，接下来就是落地。根据不同人的技术背景，工具选择分三档。

Figma的免费版对个人用户完全够用。画板、自动布局（Auto Layout）、组件系统这三个功能掌握了，配合前面说的四种版式骨架，一个下午就能把整个个人网站的视觉稿搭出来。

如果你是做SEO流量的个人站，对收录和排名有要求，自建独立站是绕不开的选择。用UC建站系统搭个人站有个好处：底层是WordPress架构，HTML直出、搜索引擎友好；上层用AI管理层做内容策略和页面生成，不用每次都手动写页面结构。独立部署、独立IP、独立模板，版式完全自定义。对于想长期运营个人品牌站的来说，比挂在第三方平台可控得多。

九、先跑起来再说，不要死在设计阶段

有个很残酷的事实：大部分个人网站不是"没设计好"，是"根本没上线"。在Figma里改到第18版，配色纠结了三天，首屏换了六个方案——最后因为一直不满意，干脆不做了。

我自己的经验是：第一版个人网站的目标不是"完美"，是"上线"。从四种版式里选一个最适合你的，照着参数把骨架搭起来，配色用60-30-10法则快速定一个方案，字体用系统默认栈不纠结——这一套流程下来，一个周末足够从零到上线。上线之后，你会收到真实的反馈：哪里看着别扭、哪个信息用户找不到、手机端哪里崩了。这些反馈比在设计稿里凭空纠结有价值一百倍。

说穿了，个人网站的设计不是艺术创作，是信息传达。四种骨架、60-30-10配色法、系统字体栈、留白梯度，这些工具够用了。剩下的事情是在真实用户面前检验你的选择，而不是在设计稿里跟自己较劲。