律书设计 | AI 一人公司

← 返回首页

实战教程 · 免费公开

别再做"模板脸"个人网站了:数字名片风,打开就是一张立体名片

数字名片风设计语言拆解:色彩、字体、结构、节奏,以及一次实战改造复盘。

打开 10 个个人网站,9 个长一个样:白底、居中大标题、一排导航、几张卡片。访客 3 秒划走,记住的为零。

最近看到一个开源项目 identity-skill,还附了个示例站。点进去第一眼我就停住了:纯黑底、巨型左对齐白字标题、一抹醒目的点缀色,一路往下铺陈——Hero、关于、愿景、项目、进展、文章,像在翻一张立体的数字名片,翻完你就记住了这个人。

这种"数字名片风"为什么出圈?我把它的设计语言拆了一遍,顺手还拿自己的站做了次实战改造。下面一次讲透。

一、案例拆解:数字名片风的设计语言

色彩:黑底 + 一个点缀色,别的都闭嘴

纯黑背景不是为了"酷",是为了让内容成为唯一主角。整个页面只用一个高饱和点缀色(示例站用的是偏橙红的暖色),出现在关键词、分隔线、按钮上。记住:点缀色一旦超过两种,名片就变传单了。

字体:大,大到不讲道理

标题字号往极限推,左对齐顶满半屏。数字名片的第一职责是"被记住",小字精致是第二位的。正文则收敛到舒适的阅读字号,形成"吼—细语"的节奏对比。

结构:分区叙事,一页讲完一个故事

Hero(我是谁)→ 关于(我是干什么的)→ 愿景(我要去哪)→ 项目(我做过什么)→ 进展(进行到哪了)→ 文章(我平时想什么)。访客从上往下滚,等于听完一次 60 秒电梯演讲。每个分区只讲一件事,绝不堆砌。

节奏:留白即呼吸

黑底最怕闷。分区之间用大段留白隔开,信息密度忽高忽低——标题区极简,项目区上卡片,文章区回列表。像名片有正反面,翻面时要有停顿。

二、实战复盘:从极简风到纯黑硬核风

光看不练假把式。我把自己网站首页按这个思路重做了一遍,过程里还走了一段弯路。

一开始试的是 juergengenser.com 那种极简风:纯白(或纯黑)窄栏、一个大标题,别的什么都没有。干净是真干净,但问题也明显:太"正确"了,正确到没有记忆点。访客看完只记得"这是个挺讲究的网站",记不住我是谁、我是干什么的。

于是掉头,改成纯黑一页式硬核风:

改完第一感受:冲击力完全不是一个量级。以前访客平均停留十几秒,现在愿意往下滚完一整页。黑底 + 大标题 + 点缀色这套组合,对"被记住"这件事是降维打击。

取舍也很明确:极简风适合"已经有名的人"——人家点进来就是找你的,越素越好;数字名片风适合"正在建立名气的人"——你得在 60 秒里让人记住你是谁、你能干什么。

三、经验总结:参考不照抄三原则

这次改造我给自己定了三条铁律,分享出来:

  1. 抄结构,不抄文案:分区逻辑、视觉节奏可以学,但每一句文案都自己写。示例站的文字一个字没动过——别人的故事讲得再好,也不是你的故事。
  2. 抄气质,不抄细节:点缀色换成自己的品牌色,卡片样式按自己内容重排。参考是"翻译",不是"复印"。
  3. 不编造数据:粉丝数、阅读量、合作品牌,没有就不写,写"进行中"也比编数字强。名片的第一功能是建立信任,数字造假一次,信任清零。

结尾

个人网站的终极 KPI 不是好看,是"被记住"。模板站做得再精致,访客记住的也是模板,不是你。

数字名片风这套打法,成本不高(一页、黑底、大字、一个点缀色),但把"我是谁"这件事做到了极致。如果你也正在做个人站,不妨问自己一句:访客关掉页面 10 秒后,还记得你吗?


项目:https://github.com/Sac-Y/identity-skill 示例站:https://sac-ai.com/

被记住这件事,值得认真设计。

文章看完了?加个微信一起玩 AI

实操中遇到问题,或想交流 AI 一人公司的玩法,直接加我微信。