写给设计师的个人网站全流程指南（设计篇）

大家好呀，我是 Rico，在之前的文章里，我大概讲了关于个人网站和建站的想法思路，以及推荐了一些我认为非常棒的网站模板。

我尝试去搜索'如何搭建个人网站'之类的关键词，结果大多是域名购买、服务器配置、代码教程，要不就是建站平台的广告，或者给你推荐一些陈旧的模板，很少有人讲设计该怎么做。

因此，最近我利用业余时间设计与开发了一套个人网站模板（中英文双版本），走了一遍完整的流程，将之前的想法落地为可复用的开源方案，那么遵循尽善尽美的原则，就以这个网站为案例，聊聊从设计到开发、以及部署上线的全流程。

：Figma + Astro + Tailwind CSS

这个系列《个人网站全流程指南》目前初定是分为 4 篇，

。后续看实际的问题反馈再补充一些需要的内容知识点。

个人网站是个人品牌化的声明，它融合了作品集、博客、个人简介、社交等功能，适合倾向于想塑造明确个人品牌定位的从业者。它的核心是塑造立体的、有特色的个人品牌形象并提供一个互联网窗口，在视觉上不同于传统的企业网站有太多的规范和约束，可以说是完全自由的。

尤其对于设计师群体来说，并不缺乏独特的创意和天马行空的设计想法，所以不必拘泥传统的网站设计结构，包括本篇文章的设计思路，只是个人的喜好，供以参考。

关于 rico-portfolio 的页面设计，非常简单，我基本遵循了以下的设计：

这个结构是我自己对于个人网站的结构规划，在根据设计想法和功能上的偏好，做一些设计上的加减法。摄影师可能需要Gallery，开发者可能需要GitHub统计。可以看下图

这几个网站在设计风格上和侧重表现的重点都有差异，但是设计逻辑也还在上面的框架描述中，只是根据侧重展示的方向，去进行设计表现上的调整。

我在网上去搜索“如何设计个人网站”，不出意料的都是如何去开发和上线，直接跳过了如何设计这个阶段，好像设计是每个人都默认会的能力？ 这次的网站设计我使用了 Figma，并且把设计文件开源到了社区，所以你可以直接一键复制到个人空间，一边对照参考，一边看文章，文件地址如下：

✨ Figma设计文件：https://www.figma.com/community/file/1570102065468722827

一般的网站设计流程是先确定原型，然后再根据原型来做设计。但是设计师的个人网站，内容呈现的方式更加自由，

。

对设计师而言，视觉表达是核心优势，视觉风格和视觉理念对于最终呈现的作品形态至关重要，不同的视觉风格（模拟真实、插画手绘、赛博朋克、3D 沉浸式等），直接决定了网站的内容框架和用户感知。

以 Sara Youssry 的个人网站为例，她用绘画的风格绘制了一个房间，再结合物品寓意和生动的交互把网站的信息关联起来。窗外的场景与时间和季节景色真实对照，画架（绘画作品）、报纸（文章）、桌面的纸稿（项目）、相框（关于）、老式电话（联系），墙上的挂框（简历和证书）。视觉与功能完全融合。

alex./chen 的个人网站则使用了 3D 结合的方式来做设计呈现，那么所有的视觉和内容安排都会围绕主视觉来做排布。

因此个人网站的视觉呈现方式可以是不拘一格的。

。不同的设计理念和风格技法，直接决定了网站最终的效果，视觉风格要服务于你的个人标签。

而 rico-portfolio 的设计目标包含几重考量：

一是作为新手指南的开源模板，保持易理解和通用性，并且预留二次开发的余地，方便在原主题上进行自定义的调整和增加 CMS。

二是避免过于个性化设计，越独特的设计，太具个人风格，不利于他人复用。

因此，我希望是简单的设计结构，但又有视觉上的亮点。最终视觉风格上，我敲定为极简风格+复古设计，另外增加交互动效凸显设计感，并且最大程度的保持组件化。

不需要花费太多时间做原型。虽然每个人的设计流程不同，但是对于个人项目，不必纠结流程规范，方便自己记忆就行，下面是我从历史记录里面翻出来的最初原型，只画了三个主要的页面结构。

然后开始动手设计，唯手熟而，实际设计时不用纠结完整原型，我通常先画简单灰图确定结构，再边开发边补细节，这样能快速试错，有些效果在代码中实现更简单。

我的复古风格设计思路：复古设计？ 我会联想到复古的物件，打字机、老电视、游戏机…如何把这些设备和设计中的元素结合起来呢？我第一时间的想法是利用 Bento 的风格，把不同的元素用规整的网格收纳起来，避免画面过于杂乱，分散注意力，再为每个盒子添加不同的交互动效，凸显设计感。

最终的设计，建议看网页，会更加动态一些：

右侧是表达我当前的技术栈，我用了 Matter.js 的经典物理碰撞模拟效果，增加交互的趣味。

这里使用的绝大部分元素都在 Figma 社区的素材库中，耗时很短。如果你觉得素材风格很喜欢，但是又缺乏你需要的元素怎么办？

，把素材图传上 AI 作为风格参考，然后添加提示词，生成相同风格的素材。

特别想聊聊 Faves 模块，复古让我不由得联想到童年的游戏时光，最终在复古游戏机相关的元素中选择了游戏卡带，承载的元素则是我目前在体验的 AI 产品（探索 AI 的过程真的有种闯关游戏的快乐），我把收集的卡带 PNG 图片也放到了素材库中，你可以选择自己喜欢的卡带样式，承载自己喜欢的内容。

所以对于个人网站，完全可以结合自己的喜好，放上自己喜欢的元素，埋一些个人彩蛋，让访客感受到你的设计心思，这才有趣。

明确”极简+复古+动效“的风格，加上最近迷上复古未来风，因此配色方案顺其自然定下来了：

但如果你不知道怎么快速定义颜色的话，推荐我常用的方法：

比如 shadcnstudio 开源的配色方案生成器，可以非常直观和便利的配置配色方案和导出。

或者用我自己开发的色卡生成工具，可以输入颜色生成配色方案，或者使用其他颜色工具。

利用配色方案生成平台，可以很直观、便捷的选择自己喜欢的配色方案，并且我技术栈使用了 Tailwind，这代表着你可以在配色平台中直接生成一套新的Tailwind配色，输出为代码直接替换掉我的配色，快速修改主题配色。

字体选择，我习惯双字体搭配，标题使用复古质感的衬线字体 Instrument Serif，正文则保持阅读流畅性，用了最热门的 Inter。

但这并不是随意选择的，英文字体建议直接从 Google Fonts 中进行选择，然后直接把链接粘贴到主题代码中即可，字体平台已经帮你优化了字体加载速度。

而中文字体的加载其实是一个小难题。中文字体由于象形文字的独特性，加载慢且易出现字符缺失，体积非常的大，因此能够选择的范围非常小。我推荐可以从下列的几个平台寻找中文字体，并且替换到主题样式中：

中文的网站版本，我对中文字体和阅读体验都做了一些优化，相比于英文，会少一点点趣味性。

如果你担心字体库没有对应字符的话，那么要不优先选择最通用的字体，不然把文字转换为 SVG 插入网页，避开字体库中找不到对应文字的问题。

在 Figma 设计文件中，我把主要的模块都做了组件化设计，尤其是颜色做了变量处理，可以方便在设计稿中进行修改，然后通过 

（Figma 社区搜索即可安装），一键导出 CSS 变量到主题代码中。即使你不懂代码，只需复制粘贴即可完成配色替换。

顺便聊聊，Figma 一直以来都在靠近和模拟真实的开发状态，从而打通设计到开发的链路。事实上，Figma 的布局约束和变体逻辑与现代前端框架（如 React、Vue）的实现方式高度对应，当你熟悉 Figma 的组件实例、变体、属性、嵌套和自动布局时，你自然而然地就学会了在开发中组件化设计的心智模型。

另外不妨从下面两个方向去深入学习一下：

AI（尤其是大型语言模型）在处理结构化、逻辑清晰的输入时表现最佳。Figma 的训练可以让我们知道如何系统性地描述一个组件，以及更复杂的需求。设计师对于 Vibe Coding 的学习也是有优势的。

至此，我们大致梳理了在设计过程中的一些要点，确立了'视觉优先'的设计理念，选择了复古极简的风格表达，规划了 Bento 的布局，定义了颜色与字体，提供了一些辅助工具，并且为开发做好了准备。

但是，设计图终究只是静态的图片。在下一篇

中，再来探索开发过程中的实现和交互。

为什么设计师需要个人网站？ 对设计师而言，网站本身就是作品，视觉风格直接定义了我的个人标签，