保姆级教程 ！设计师个人网站全流程指南 ：设计篇
一 、教计师计篇前言
大家好呀 ，程设程我是个人 Rico ，在之前的网站文章里 ，我大概讲了关于个人网站和建站的全流想法思路 ，以及推荐了一些我认为非常棒的南设网站模板 。但作为实践派 ，保姆我发现之前的教计师计篇内容缺少从设计到上线的完整闭环。
搜索“如何搭建个人网站”，程设程结果大多是个人域名购买 、服务器配置、网站代码教程，全流要不就是南设建站平台的广告 ，或者给你推荐一些陈旧的保姆模板，很少有人讲设计该怎么做。
因此 ，最近我利用业余时间完整设计与开发了一套个人网站模板（中英文双版本） ，走了一遍流程，将之前的想法落地为可复用的开源方案，那么遵循尽善尽美的原则，就以这个网站为案例，聊聊从设计到开发 、以及部署上线的全流程 。
为什么设计师需要个人网站 ？
在小红书 、站酷 、Dribbble 等上发作品不够吗 ？
够 ，但不完整也不够自由。
- 平台规则会变 ，完全掌控的内容永远属于自己
- 作品集只展示结果 ，个人网站可以讲过程 、思考和交流
- 简历是静态的，网站可以实时更新你的技术栈和动态
对设计师而言 ，网站本身就是作品 ，视觉风格直接定义了我的个人标签 ，更重要的是 ，我喜欢完全由自己掌控的内容 ，并且在互联网上搭建一个完全属于自己的漫想世界 。
英文版网站预览
中文版本
开源个人网站模板
- 中文版：ricoui-portfolio.pages.dev
- 英文版 ：portfolio.ricoui.com
- Figma 设计文件 ： https://www.figma.com/community/file/1570102065468722827
- 开源仓库 ： https://github.com/ricocc/ricoui-portfolio
- 中文版 ： https://github.com/ricocc/ricoui-portfolio-zh
技术栈：Figma + Astro + Tailwind CSS
这个系列《个人网站全流程指南》目前初定是分为 4 篇，设计篇 、开发篇 、部署篇和扩展篇 。后续看实际的问题反馈再补充一些需要的内容知识点 。
本篇文章则聚焦设计维度 。
二 、设计篇
1. 设计思路
个人网站是个人品牌化的声明 ，它融合了作品集、博客 、个人简介 、社交等功能 ，适合倾向于想塑造明确个人品牌定位的从业者 。它的核心是塑造立体的 、有特色的个人品牌形象并提供一个互联网窗口 ，在视觉上不同于传统的企业网站有太多的规范和约束 ，可以说是完全自由的 。
尤其对于设计师群体来说，并不缺乏独特的创意和天马行空的设计想法 ，所以不必拘泥传统的网站设计结构 ，包括本篇文章的设计思路 ，只是个人的喜好 ，供以参考 。
关于 rico-portfolio 的页面设计，非常简单 ，我基本遵循了以下的设计 ：
首页（Home）├─ 作品展示（Works / Projects）│ └─ 详细页（Detail）├─ 文章写作（Writing / Blog）│ └─ 文章页（post）├─ 关于我（About）└─ 简历（Resume）
这个结构是我自己对于个人网站的结构规划 ，在根据设计想法和功能上的偏好 ，做一些设计上的加减法 。摄影师可能需要 Gallery ，开发者可能需要 GitHub 统计 。可以看下图
从左到右分别是 ：rico-portfolio ，tigranz.com ，gauthammukesh.com ，hyning.com
这几个网站在设计风格上和侧重表现的重点都有差异，但是设计逻辑也还在上面的框架描述中 ，只是根据侧重展示的方向，去进行设计表现上的调整 。
2. 如何进行设计 ？
我在网上去搜索“如何设计个人网站”，不出意料的都是如何去开发和上线，直接跳过了如何设计这个阶段 ，好像设计是每个人都默认会的能力 ？ 这次的网站设计我使用了 Figma ，并且把设计文件开源到了社区 ，所以你可以直接一键复制到个人空间 ，一边对照参考 ，一边看文章，文件地址如下 ：
Figma 设计文件： https://www.figma.com/community/file/1570102065468722827
① 视觉风格和理念
一般的网站设计流程是先确定原型 ，然后再根据原型来做设计 。但是设计师的个人网站 ，内容呈现的方式更加自由 ，视觉会优先于功能和内容框架。
对设计师而言 ，视觉表达是核心优势 ，视觉风格和视觉理念对于最终呈现的作品形态至关重要 ，不同的视觉风格（模拟真实 、插画手绘、赛博朋克 、3D 沉浸式等） ，直接决定了网站的内容框架和用户感知 。
sarayoussry.com
以 Sara Youssry 的个人网站为例 ，她用绘画的风格绘制了一个房间，再结合物品寓意和生动的交互把网站的信息关联起来 。窗外的场景与时间和季节景色真实对照 ，画架（绘画作品） 、报纸（文章） 、桌面的纸稿（项目） 、相框（关于） 、老式电话（联系），墙上的挂框（简历和证书） 。视觉与功能完全融合 。
a-chen.webflow.io
alex./chen 的个人网站则使用了 3D 结合的方式来做设计呈现 ，那么所有的视觉和内容安排都会围绕主视觉来做排布。
因此个人网站的视觉呈现方式可以是不拘一格的 。**设计师的个人网站本身就是作品 ，访客第一眼看到的是视觉风格 ，而非功能列表 。就像 Sara Youssry 用手绘房间场景传达设计的温度 ，alex./chen 用 3D 场景展现技术感 ，视觉即信息 ，风格即定位 。**不同的设计理念和风格技法 ，直接决定了网站最终的效果 ，视觉风格要服务于你的个人标签 。
而 rico-portfolio 的设计目标包含几重考量 ：
一是作为新手指南的开源模板 ，希望保持易理解和通用性 ，并且预留二次开发的余地 ，方便在原主题上进行调整和增加 CMS 。
二是避免过于个性化设计 ，越独特的设计 ，太具个人风格 ，不利于他人复用 。
因此，我希望是简单的设计结构 ，但又有视觉上的亮点 。最终视觉风格上 ，我敲定为极简风格+复古设计，另外增加交互动效凸显设计感 ，并且最大程度的保持组件化。
② 设计过程
不需要花费太多时间做原型。虽然每个人的设计流程不同 ，但是对于个人项目 ，不必纠结流程规范 ，方便自己记忆就行，下面是我从历史记录里面翻出来的最初原型 ，只画了三个主要的页面结构 。
然后开始动手设计 ，唯手熟而 ，实际设计时不用纠结完整原型 ，我通常先画简单灰图确定结构 ，再边开发边补细节 ，这样能快速试错 ，有些效果在代码中实现更简单 。
我的复古风格设计思路：复古设计 ？ 我会联想到复古的物件，打字机 、老电视、游戏机…如何把这些设备和设计中的元素结合起来呢 ？我第一时间的想法是利用 Bento 的风格 ，把不同的元素用规整的网格收纳起来 ，避免画面过于杂乱 ，分散注意力 ，再为每个盒子添加不同的交互动效，凸显设计感 。
最终的设计 ，会更加动态一些 ：
右侧是表达我当前的技术栈 ，我用了 Matter.js 的经典物理碰撞模拟效果 ，增加交互的趣味 。
这里使用的绝大部分元素都在 Figma 社区的素材库中 ，耗时很短 。如果你觉得素材风格很喜欢 ，但是又缺乏你需要的元素怎么办 ？
善用 AI ，把素材图传上 AI 作为风格参考 ，然后添加提示词 ，生成相同风格的素材 。
特别想聊聊 Faves 模块 ，复古让我不由得联想到童年的游戏时光 ，最终在复古游戏机相关的元素中选择了游戏卡带 ，承载的元素则是我目前在体验的 AI 产品（探索 AI 的过程真的有种闯关游戏的快乐） ，我把收集的卡带 PNG 图片也放到了素材库中，你可以选择自己喜欢的卡带样式 ，承载自己喜欢的内容 。
所以对于个人网站 ，完全可以结合自己的喜好 ，放上自己喜欢的元素，埋一些个人彩蛋，让访客感受到你的设计心思 ，这才有趣 。
③ 颜色规范和字体的技巧
颜色 Color
明确”极简+复古+动效“的风格 ，加上最近迷上复古未来风，因此配色方案顺其自然定下来了 ：
但如果你不知道怎么快速定义颜色的话 ，推荐我常用的方法 ：
使用配色生成工具
- shadcnstudio.com/theme-generator（可视化调整 ，直接生成 Tailwind 配置）Tailwind 配置）
- gradientshub.com/tools/color-palette-css（输入基础色 ，生成整套调色板）
- kigen.design/color（支持导出 CSS 变量 ，方便组件化）
- arco.design/palette（色彩理论指导）
- uicolors.app/generate/（实时预览颜色在按钮 、卡片上的效果）
比如 shadcnstudio 开源的配色方案生成器，可以非常直观和便利的配置配色方案和导出 。
我自己开发的色卡生成工具，可以输入颜色生成配色方案 ，或者使用其他颜色工具。
利用配色方案生成平台 ，可以很直观、便捷的选择自己喜欢的配色方案，并且我技术栈使用了 Tailwind ，这代表着你可以在配色平台中直接生成一套新的 Tailwind 配色，输出为代码直接替换掉我的配色 ，快速修改主题配色 。
字体选择
字体选择，我习惯双字体搭配 ，标题使用复古质感的衬线字体 Instrument Serif ，正文则保持阅读流畅性 ，用了最热门的 Inter 。
但这并不是随意选择的 ，英文字体建议直接从 Google Fonts 中进行选择 ，然后直接把链接粘贴到主题代码中即可 ，字体平台已经帮你优化了字体加载速度。
而中文字体的加载其实是一个小难题 。中文字体由于象形文字的独特性 ，加载慢且易出现字符缺失，体积非常的大，因此能够选择的范围非常小 。我推荐可以从下列的几个平台寻找中文字体 ，并且替换到主题样式中 ：
- 文风字体（windfonts.com）（提供轻量中文字体 ，支持按需加载）
- 有字库（webfont.com）（商业字体授权清晰，适合需合规使用的场景）
- Google Fonts （优先选 Noto Sans SC ，体积小 、兼容性强）
中文的网站版本，我对中文字体和阅读体验都做了一些优化，相比于英文，会少一点点趣味性 。
如果你担心字体库没有对应字符的话，那么要不优先选择最通用的字体 ，不然把文字转换为 SVG 插入网页 ，避开字体库中找不到对应文字的问题 。
④ 组件化和自定义
在 Figma 设计文件中 ，我把主要的模块都做了组件化设计，尤其是颜色做了变量处理 ，可以方便在设计稿中进行修改 ，然后通过 ‘Variables to CSS’ 插件（Figma 社区搜索即可安装） ，一键导出 CSS 变量到主题代码中 。即使你不懂代码，只需复制粘贴即可完成配色替换 。自定义的具体实操 ，我放到了开发篇中去讲解过程 。
顺便聊聊 ，Figma 一直以来都在靠近和模拟真实的开发状态，从而打通设计到开发的链路 。事实上 ，Figma 的布局约束和变体逻辑与现代前端框架（如 React 、Vue）的实现方式高度对应 ，当你熟悉 Figma 的组件实例 、变体 、属性 、嵌套和自动布局时 ，你自然而然地就学会了在开发中组件化设计的心智模型 。
举个例子：
- Figma 的”变体”（Variant）= React 的 Props
- Figma 的”自动布局”（Auto Layout）= Flexbox/Grid
- Figma 的”组件实例”（Instance）= 组件复用
另外不妨从下面两个方向去深入学习一下 ：
- 学会如何将复杂 UI 拆解为可管理 、可复用的小块（原子设计原则） ，这是编写清晰 、模块化代码的基础 。
- 可以使用“实例”（Instance） 、“属性”（Prop） 、“状态”（Variant/State）这些词汇与开发人员或 AI 交流 ，确保双方对组件的结构和行为有共同的理解 。
AI（尤其是大型语言模型）在处理结构化、逻辑清晰的输入时表现最佳 。Figma 的训练可以让我们知道如何系统性地描述一个组件 ，以及更复杂的需求。设计师对于 Vibe Coding 的学习也是有优势的 。
最后
至此 ，我们大致梳理了在设计过程中的一些要点，确立了「视觉优先」的设计理念 ，选择了复古极简的风格表达 ，规划了 Bento 的布局 ，定义了颜色与字体 ，提供了一些辅助工具 ，并且为开发做好了准备 。一个出色的设计师个人网站不在于技术多么前沿 ，而在于它能否真实传递你的设计态度与价值观。 但是 ，设计图终究只是静态的图片 。在下一篇 《个人网站全流程指南（开发篇）》 中 ，聊聊开发过程中的实现和交互 。
更详细的更新记录与使用指南 ，有兴趣的可以关注一下我的微信公众号 Rico 的设计漫想 。或者有其他的问题 ，可以添加一下我的微信号 rico-ui 交流反馈 。
界面预览
作者 ：Ricoui