三年前我干过一件挺丢人的事把当时一个很火的极简风个人站案例整个扒下来改了个主色、换了两张图第二天就上线了。结果发到朋友群里有人回了一句你这首页怎么空得像没做完。那一刻我才意识到设计案例这东西看的时候觉得我也行抄的时候才发现自己抄的全是结果人家背后的前提条件一个都没带过来。这篇文章想聊的就是个人网站和个人博客的设计案例到底该怎么看、怎么拆、怎么落到自己的站点上。我不会给你一套照着做就好看的模板因为那东西根本不存在——同样一套版式放在一个写了四百篇长文的博客上叫克制放在一个只有六篇文章的站点上就叫空旷。适合谁看正在纠结自己第一个个人主页怎么排版的人、博客写了半年觉得丑得不想打开的人、还有把设计案例收藏夹塞满两百个却一个都没用上的人。下面这些内容都是我这些年做站、改站、帮朋友看站攒下来的具体判断有数值、有取舍理由也有翻车现场。1. 先泼盆冷水直接照搬设计案例我翻过三次车1.1 第一次翻车极简风首页在我的内容量下塌了那个案例站的主人是个设计师作品集只有九张图每一张都是精细打磨过的视觉作品。他的首页之所以敢大面积留白、只放一句话加一个滚动提示是因为他每一个像素的内容都撑得住。而我当时站里放的是十几篇技术随笔封面图是随手截的终端窗口标题长度参差不齐摘要有的是两行有的只有六个字。这种情况下留白不会变成呼吸感只会变成没内容。这里面的道理其实很朴素留白是一种需要用内容质量去兑换的奢侈品。当你的内容本身密度高、质量齐、视觉统一时留白是在帮读者聚焦当你的内容参差不齐时留白就是在放大这种参差。所以我在拆任何案例的第一步不是看它用了什么栅格、什么字体而是先数它的内容量——首页露出几个条目每个条目的标题长度区间是多少有没有配图把这些数出来你才知道这套设计是为多少内容设计的。后来我做了个粗略的对照把常见案例按内容量分成三档判断起来会快很多内容量档位首页条目数案例常见做法你直接照抄的风险轻量10 条3-5 条大留白、大图、单列内容一多立刻显得松散中量10-50 条6-12 条双列卡片 摘要摘要长度不齐会崩重量50 条时间线 / 列表密集列表 分类视觉冲击弱需要靠排版撑这张表不是什么权威标准但它帮我省了很多时间。看到一个案例觉得好看先对号入座档位不对就直接跳过不要去研究它的细节因为那些细节是服务于它的内容量的搬过来就是错配。1.2 第二次翻车抄了配色没抄间距第二次更隐蔽。我把一个案例的配色原样取了下来主色、辅色、背景灰、文字黑连色值都一致。放到我站上却怎么看怎么别扭说不上哪里不对就是很挤。后来我用开发者工具量了一下才发现问题那个案例的段落间距是字号的 1.6 倍标题上边距是 2.5 倍卡片内边距 28px卡片之间 32px而我的站全是默认值——段落间距差不多 1em标题上边距 1.2em卡片内边距 16px。配色决定了看起来什么风格间距决定了看起来专不专业。前者一眼能看见所以大家都去抄后者看不见所以大家都漏掉。这件事之后我养成了一个习惯拆案例时一定打开开发者工具把这几项量出来记在备忘录里——正文宽度、字号、行高、段间距、标题上边距、容器内边距、卡片间距、圆角半径。这八个数值基本能还原一个站点的体感。色值反而排在后面因为色值最容易改也最不决定体验。1.3 一套我自己在用的案例拆解法现在我看到一个喜欢的站会走这么五步大概十分钟数内容量首页露出几条正文有多少字判断这套设计是为多大规模的内容服务的。量间距用开发者工具量上面说的八个数值重点看正文宽度和行高。看骨架把页面结构画成方块图标出导航、首屏、列表区、页脚各占多少高度比例。问动机这个站的主人是谁他的访客是谁他为什么要这么排比如一个求职用的作品集站首屏放我是谁 联系方式就是必然的。做减法只带走一到两个能解决你当前痛点的点其他一律不碰。第三步特别值得说。很多人拆案例时盯着视觉细节其实页面的高度分配比例信息量更大。一个垂直内容站的首页列表区通常占 60% 以上一个作品集站首屏可能独占 80% 屏幕高度。这个比例直接告诉你站长的优先级在哪里。我自己的博客改版时就是参照一个垂直技术博客的比例把列表区从 45% 提到 68%页面立刻像个博客了。提示拆案例时不要一边看一边想我要不要也这样。先量、先记全部量完再统一决策。边看边改最容易做出一锅夹生饭。2. 骨架先于皮肤个人站和博客根本不是同一类产品2.1 动手前先回答三个问题我在帮朋友看站的时候发现大部分设计不好看的问题根源其实不在设计在于他们没想清楚站点类型。个人网站和个人博客这两个词经常被混着用但它们的信息架构差异很大用同一套模板去套必然有一边难受。动手前把这三个问题写下来答案会直接决定你的页面结构访客是谁是招聘方、同行、潜在合作方还是搜索引擎来的陌生人他来的第一目的是什么了解你这个人还是找某篇具体内容你希望他离开时记住什么一句自我介绍、一个作品、还是一批文章如果访客主要是招聘方和合作方追求的是快速建立信任那你的站点应该更像作品集首页就要把身份、能力、成果摆出来。如果访客主要是搜索来的读者追求的是快速找到内容并读完那你的站点应该更像博客首页是内容索引身份介绍退居二线。2.2 博客型骨架三层结构就够博客的信息架构真的不需要复杂化三层足够第一层首页 / 归档页。承担索引职责列出文章条目带分类或标签入口。第二层文章列表页。某个分类或标签下的全部文章分页展示。第三层正文页。真正产生价值的地方也是唯一值得疯狂打磨的页面。很多人喜欢加关于我我的朋友收藏夹说说这类边角页面加之前先问一句这些页面三个月后还会更新吗我自己的站曾经挂过一个在读书单页面更新了两次就荒废了一年后访客点进去看到的是去年的书单反而减分。能长期维护的页面才配出现在导航里这是条硬规矩。分类体系也别贪多。我试过两级分类运营半年就乱了因为写文章的时候很难判断一篇讲排版技巧的文章该归到前端还是设计。后来全部改成扁平标签一篇文章可以挂多个标签问题解决。标签数量我控制在 15 到 25 个之间超过这个量就要合并同义词否则标签云会变成一坨。2.3 作品集型骨架结果优先的四段式作品集型站点的结构逻辑完全不同它是结论先行的。访客不关心你的过程他要在三十秒内判断这个人值不值得聊一聊。所以顺序应该是首屏身份一句话 你现在在做什么 联系方式入口。成果区三到五个最能打的作品每个配一句话说明你在其中承担什么角色、做出什么结果。能力区技能、工具、经历用简洁列表不用进度条进度条那种PS 90%的表达方式早就过时了而且没人信。联系区邮箱、社交主页写清楚你希望对方怎么联系你。这里有个细节很多人会做错作品描述要写结果不要写功能。我见过太多某某管理系统使用了某某框架实现了某某模块这种描述读完不知道你到底做成了什么。改成把某系统的平均响应时间从 2.4 秒压到 400 毫秒支撑日均十万次调用信息量立刻不一样。招人的人看的是判断力不是技术名词表。2.4 混合型站点的取舍如果你的站点既要放作品又要写博客也不用怕但要明确主次。我的做法是在导航里排优先级主导航只放 4 到 5 个入口把次要的那个降级为首页上的一个模块。比如博客为主、作品为辅的站导航是文章 / 分类 / 关于 / 联系然后在首页列表上方加一条窄栏放三个精选作品的缩略入口。反过来也成立。关键是不能让访客在导航栏前犹豫——导航栏条目越多点击率越低这是我调过好几个站之后的稳定观察。五个以内的条目每条都能有明确点击意图超过七个访客会退回去看首页内容导航形同虚设。3. 首屏和导航3秒内让人判断这里有没有我要的东西3.1 四种首屏范式的适用边界我见过的高质量个人站首屏基本逃不出这四种范式每一种都有明确的适用条件范式结构适合谁不适合谁一句话型大标题 一行简介 滚动提示身份清晰、有代表作的人内容型博客、新人图文对开型左文字右头像/主视觉求职者、自由职业者移动端体验容易翻车内容直给型首屏直接是文章列表垂直博客、专栏作者需要展示形象的人大图型全屏主视觉 底部导航设计、摄影类文字为主的内容站我自己的博客用的是内容直给型的变体——首屏压缩到很矮大概只占 35% 屏高放一句站点定位加一行简介然后立刻进文章列表。理由是来我站的人 80% 是搜索来的他们的目标很明确任何一块占满屏幕的视觉区域对他们都是阻碍。这个判断不一定适合你但思路可以借先搞清楚访客的来源比例再决定首屏要不要表演。如果你没有后台数据可以凭常识估——做过推广的个人站直接访问比例高可以用展示型首屏纯靠搜索和分享的个人站用索引型首屏更稳妥。3.2 导航条目数量的实测结论我拿自己的站做过一次很粗糙但有用的测试把导航从 8 个条目砍到 4 个观察点击分布。结果是次导航的总点击下降了但主要内容入口的点击上升了约四成跳出率也降了一点。原因不难理解——8 个条目意味着每个条目的含金量被稀释了访客需要判断成本。关于移动端导航我的建议是别做汉堡菜单里的多级折叠。手机上访客的耐心极有限一次点开再点开的选择路径流失率很高。更实际的做法是底部固定一个三到四格的标签栏把最核心的入口平铺出来。做起来不复杂CSS 的position: fixed加env(safe-area-inset-bottom)就能处理但体验差别很大.tabbar { position: fixed; left: 0; right: 0; bottom: 0; padding-bottom: env(safe-area-inset-bottom); display: grid; grid-template-columns: repeat(4, 1fr); height: 52px; background: var(--bg); border-top: 1px solid var(--line); z-index: 20; }注意加了固定底栏之后正文底部要补上对应的padding-bottom否则最后一段会被挡住。这个坑我踩过一次还是读者留言提醒的。3.3 视觉层级靠间距而不是靠颜色新手做视觉层级第一反应是用颜色——把重要的字改成主色把次要的字改成灰色。结果页面上一堆彩色字像贴满了便利贴。成熟的做法是用间距和字重建立层级重要内容四周多留白附以较大字号或较粗字重次要内容缩小字号、降低对比度但不要随意上色。我给自己定过一条规则一屏之内主色出现不超过三处且只用在交互元素上链接、按钮、当前状态。文字层级全部通过字号和颜色深浅来做。这条规则执行下来页面干净很多。具体到什么程度:root { --fs-title: 1.5rem; /* 章节标题 */ --fs-body: 1.0625rem; /* 正文 17px */ --fs-meta: 0.8125rem; /* 时间、标签 13px */ --mt-title: 2.5em; /* 标题上边距 */ --gap-para: 1.6em; /* 段间距 */ }数字本身不重要重要的是层级之间要有明显的倍数差。1rem 和 1.0625rem 放在一起是看不出来的1rem 和 1.5rem 就一眼能分。层级不明显等于没有层级。3.4 关于动效的克制原则动效这块我态度很明确个人站不需要花哨的滚动动画。我做站这些年唯一保留的动效是三种——链接悬停的颜色过渡150ms、图片加载完成后的淡入200ms、返回顶部的平滑滚动。除此之外全部砍掉。原因是动效有三个隐性成本一是拖慢首屏渲染时间尤其是那些靠滚动触发的库二是移动端掉帧安卓中低端机上表现很难看三是容易过时前几年的视差滚动现在看已经很土了。相比之下一个干干净净、点击立刻响应的站点五年后看依然舒服。如果你实在想加动效就加在用户操作之后的位置比如按钮点击的即时反馈而不是用户什么都没干的自播放动画。4. 正文页的阅读体验留存几乎全押在这一页4.1 宽度、字号、行高一张可以直接抄的参数表前面几块都是第一印象正文页才是真正决定访客会不会读完、会不会记住你的地方。我把这些年试出来的参数整理成一张表你可以直接拿去用再按自己的内容微调参数桌面端建议值移动端建议值说明正文宽度680-760px100% - 32px 边距超过 800px 眼睛回扫容易串行正文字号17-18px16-17px16px 是底线低于此偏累行高1.75-1.91.8-1.95中文比英文需要更大行高段间距1.5-1.7em1.5em不要用空行撑用 margin首行缩进不用不用中文网页段间距足够缩进反而乱标题上边距2.2-2.8em2em上大下小形成视觉分组图片最大宽度与正文同宽100%除非是要突出的大图关于正文宽度这个数值得多说一句。我早期用过全宽排版1280px 屏幕上一行能塞三十多个字读两段就找不到下一行的开头了。人的眼睛在行尾做回扫运动时如果跨度太大就容易错行。680 到 760px 这个区间大概对应一行 30 到 38 个汉字是兼顾少换行和不串行的平衡点。我自己用 720px这个数字纯粹是试出来的你也可以在 680 到 780 之间找个顺眼的。4.2 中英混排和标点这些看不见的功夫中文站点有个特殊性技术文章里必然会出现英文单词、代码、数字。这时候如果不处理就会出现中英文粘连和标点挤压的问题。三件事必须做第一给正文设置合理的字距和词距。中文字体在浏览器里默认的英文间距往往偏紧可以给正文加一点点letter-spacing: 0.01em注意不要超过 0.02em否则中文会松散。第二中英文之间加空格。这个手动加很累可以用text-autospace这类新特性但目前兼容性不理想。我的做法是在写作时就手动打空格编辑阶段用一个脚本批量检查。看起来是小事但整篇文章的中英文间距一致之后专业感提升非常明显。第三标点符号。中文正文一律用全角标点代码块内部用半角两者不要混。我见过一篇文章里逗号一会儿全角一会儿半角读起来像衣服扣错了扣子。写完后搜一遍半角逗号和句号基本能清干净。.article { max-width: 720px; margin: 0 auto; font-size: 17px; line-height: 1.85; letter-spacing: 0.01em; text-align: justify; text-justify: inter-ideograph; word-break: break-word; overflow-wrap: anywhere; } .article p { margin: 0 0 1.6em; } .article h2 { margin: 2.5em 0 1em; font-size: 1.5rem; }text-justify: inter-ideograph这行在部分浏览器上能改善中文两端对齐时的字距分配效果因浏览器而异可以加上试试不合适就去掉。4.3 代码块、图片、引用的处理技术博客的代码块最容易出问题。几个实际教训一是横向溢出长行会把页面撑宽触发整个页面的横向滚动条必须在代码容器上加overflow-x: auto并且限制max-width二是深色模式下代码块配色失配浅色主题的语法高亮放到深色背景上会刺眼所以要准备两套高亮配色三是代码字号别跟正文一样大通常比正文小 1 到 2px 更协调行高保持 1.6 左右。图片这块我踩过最大的坑是没有设置宽高比导致图片加载完成后页面跳动读到一半的内容被推走。解决办法是给图片容器固定aspect-ratio或者在 img 标签上写死 width 和 height 属性让浏览器提前预留位置。另外正文图片不要用超过 300KB 的原图压缩到 150KB 以内视觉上几乎看不出差别。引用块我建议弱化处理不要做成很大的彩色边框。一条 3px 的左边框配色线加一个浅一点的背景文字保持和正文一致的字号就够了。重点是让读者知道这段不是作者的原话或者这段是强调而不是让它变成页面上最抢眼的东西。4.4 目录、进度条和回到顶部该不该加这三个东西经常被一起讨论但它们的适用条件完全不同目录TOC文章超过 1500 字就加低于这个长度没必要。位置建议在正文开头之前或者做成侧边固定仅桌面端。移动端不要做成浮层抽屉折叠在顶部就够了。阅读进度条锦上添花的东西对体验影响很小。如果要加就用最细的那种1 到 2px不要做成彩色粗条。回到顶部长文章必备但不要在页面刚打开时就出现。滚动超过一屏再显示这样不会干扰开头阅读。我自己的站是长文自动出目录 滚动一屏后出回到顶部按钮进度条没做因为要在滚动事件上挂逻辑移动端有性能开销收益又很小。这个取舍是个人选择没有标准答案关键是想清楚每个元素解决的是什么问题而不是因为别的站都有。5. 配色与字体翻车率最高的两块5.1 三套安全配色 一套进阶配色配色这件事我给普通站长的建议是先用安全牌。所谓安全牌就是已经经过大量站点验证、不容易出错的组合第一套是白底黑字加一个低饱和主色主色用于链接和按钮明度控制在 45% 到 55%饱和度 60% 左右比如偏蓝的深靛色、偏绿的墨绿、偏橙的焦糖色。这套最稳几乎不会翻车。第二套是米白底加深灰字背景用略带暖调的灰白比如#faf9f7文字用#2c2c2c整体观感柔和适合阅读时间长的内容站。第三套是纯黑底加浅灰字的深色方案注意不要用纯黑#000用#111到#161616之间文字用#d8d8d8而不是纯白这样长时间阅读不会太刺激。至于进阶配色通常是引入一个对比色做点缀比如主色是靛蓝点缀色用暖橙用在标签、当前状态、重点提示上。这种配色更容易出彩但也更容易失控——点缀色的面积一旦超过 5%整体就乱了。我给自己的规矩是点缀色只能用在小图标、边框、标签底这几种极小面积的位置。配色定下来之后把色值写成 CSS 变量后面改主色只需要动一行:root { --bg: #faf9f7; --fg: #2c2c2c; --fg-weak: #767676; --line: #e6e3de; --primary: #34568b; --accent: #c1663f; }5.2 深色模式不是把颜色反过来深色模式最大的误区是白底黑字反过来就是黑底白字。实际做起来纯白文字在黑底上的对比度太高长时间看会晃眼而且纯黑背景会让文字边缘产生光晕感。我的做法是三层调整背景不用纯黑用#141414到#1a1a1a。文字不用纯白用#d6d6d6到#e0e0e0。主色要提亮因为同一个色值在深色背景上会显得更暗、更闷通常需要把明度提高 10% 到 15%。还有一个细节图片在深色模式下如果带大面积白底会非常刺眼可以在深色模式下给正文图片加一点轻微的背景融合或者干脆给图片加一个很细的边框让它的边界不那么突兀。深色模式的切换逻辑我建议默认跟随系统设置同时给一个手动切换的按钮并记住用户选择。不要做定时自动切换——你没那么聪明用户的作息你猜不准。5.3 中文字体的现实约束中文字体这块现实比理想骨感得多。一套完整的中文字体动辄几 MB 到十几 MB不可能让访客为了看你一个博客下载这么大的字体文件。所以实际做法只有几种用系统字体栈不加载外部字体。这是绝大多数中文站的最优解缺点是不同系统下字体不同视觉不统一但换来的是零加载成本。只加载字重需要的子集通过字体子集化工具把常用字裁出来通常能压到几百 KB。适合对视觉有明确要求的站点。标题用自定义字体正文用系统字体。这是一种性价比很高的折中因为标题字数少可以只加载很轻的子集。我的站用的是第二种加第三种结合正文系统字体标题用了一套开源中文字体的精简子集。实际体验下来标题的辨识度提升明显而整体字体加载量控制在 200KB 以内。至于绝对统一这种追求我早就放弃了不同设备上呈现略有差异是常态把可读性做到位比追求一致更重要。6. 从设计稿到长期维护那些没人提前告诉你的成本6.1 技术选型先看你要写多少字、多久更新一次选技术方案的时候很多人先看哪个火我建议先看两个问题你打算写多少字多久更新一次如果你预计写一百篇以内的文章更新频率是每周一篇以下那静态站点生成器完全够用构建时间短、部署简单、几乎没有运维成本。如果你内容量很大几千篇或者需要在站内做复杂的交互那可以考虑带服务端渲染的方案。下面这张表是我给朋友推荐时常用的对照方案类型适合内容量上手难度长期维护成本典型场景静态生成器 1000 篇低极低个人博客、笔记站带数据层的框架1000 篇以上中中有搜索、有评论的站内容管理服务不限低中有费用不想碰代码的人手写静态页 30 篇极低高改版痛苦单页简历站手写静态页那一档我要特别提醒我第一版个人站就是手写的 HTML八个月后我想统一改一次页脚得改二十多个文件。那之后我彻底投降全部换成模板生成。只要超过十五个页面就不要再手写重复结构了这是真金白银换来的经验。另一个选型维度是部署方式。静态站点可以选择对象存储、静态托管服务部署时只要把构建产物推上去就行。选择的时候重点考虑两个事你的读者主要在哪个网络环境下访问以及是否需要自定义域名和自动化的构建流程。这两个因素基本能帮你筛掉大部分选项。6.2 移动端和性能的必查清单上线前我一定会走一遍这张清单每次都能查出点问题320px 宽度下有没有横向滚动条有的话通常是某个固定宽度元素或代码块导致的。正文字号在手机上是否小于 16px小于就要调。点击区域是否都大于 40 乘 40 像素太小的按钮手指点不准。有没有被固定底栏遮住的内容首屏加载的资源总量是多少超过 1MB 就要砍。图片是否都用了现代格式和懒加载有没有设置 viewport meta 标签性能方面最大的两个坑永远是字体和图片。字体前面说过了图片的话我现在的标准是列表缩略图不超过 40KB正文配图不超过 150KB首屏主视觉如果非要用控制在 200KB 以内并做好尺寸裁切。做到这几点首屏加载基本能压在两秒以内。6.3 维护成本真正劝退人的地方做站最难的部分从来不是上线是第二年、第三年还在维护。我见过太多个人博客停在某一年的十二月之后再没更新页面上的版权年份永远停在那里。降低维护成本有几件事值得提前做内容用纯文本格式存本地并定期备份不要只放在某个服务上外链定期检查失效链接多了会明显影响观感把更新节奏定得低一点一个月一篇听起来少但能持续三年就是三十六篇比一天三篇然后三个月弃坑强得多。还有一件事是我最近才想明白的别在站点上放你维护不了的东西。评论系统、访问统计、友链、书单、周报、Now 页面这些东西刚上线时新鲜三个月后就变成负担。我现在的原则是任何一个新功能上线前先问自己这东西半年后还有人管吗答案是否定的就不做。站点越简单活得越久。7. 关于个人网站能带来什么的务实讨论7.1 三种相对现实的回报路径很多介绍个人网站的文章会直接跳到收益话题写得让人热血沸腾。我把这些年看到的情况说实在一点个人网站能带来的回报大致是三类。第一类是机会型回报也是最常见的一种。有人通过你的文章找到你邀请你合作、约稿、面试、咨询。这类回报不稳定但出现概率不低尤其是内容有明确定位的站点。我自己被约过几次分享都是因为某篇文章被人读到。第二类是能力沉淀带来的间接回报。长期写作会强迫你把模糊的经验整理成清晰的表达这个过程本身对职业发展的帮助往往比站点本身带来的流量更实在。这个回报没法量化但它是真实存在的。第三类是直接收益比如内容付费、赞助、广告。这类路径门槛高需要稳定的流量和明确的读者画像。我在站点上挂过一小块赞助入口一年的收入大概够付域名和托管费用仅此而已。把这件事当成副业的想法需要非常谨慎它更适合作为一个顺便发生的副产品。7.2 顺序不能反先有信任再谈其他这是我这些年最确定的一条判断任何回报都建立在信任之上而信任只能靠持续产出有价值的内容积累。站点设计、SEO 技巧、推广手段这些都是放大器但放大器放大的是已有的东西。内容空洞的站设计再精致也留不住人反过来一个排版朴素但内容扎实的站靠读者口口相传也能慢慢起来。所以我现在的优先级排序是内容本身 阅读体验 站点视觉 推广手段。前面三项做到位第四项其实不太需要操心。我认识几个更新很稳的站长从来没做过任何推广靠搜索和分享慢慢累积两三年下来稳定的日访问量也很可观。7.3 什么情况下不值得投入最后说点反面的。下面这几种情况我个人觉得不太值得在个人站上投入太多时间你对写作本身没有兴趣只是听说做个人站有好处。没有持续产出的动力站点做出来就是一次性的。你追求快速见效。个人站是典型的慢变量前半年几乎看不到反馈。你有明确的短期目标但站点帮不上忙比如求职需要的是简历和作品集那做一个个位数页面的作品站就够了不必搞成博客。你没有稳定的时间预算。做站和维护都需要时间如果每周连两个小时都挤不出来不如先把这个时间用在打磨内容上。我自己这几年的体会是个人网站最大的价值不是它能带来什么而是它逼着你把想说的话说清楚。每次打开编辑器面对一个空白的正文页把脑子里那些零散的想法整理成别人能读懂的东西这个过程的价值已经足够支撑我继续做下去。至于设计案例看看就好挑一两个真正解决你当前问题的点带走剩下的时间去写点东西吧。