一、教计师计篇前言
大家好呀，程设程我是个人 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
