个人 IP 主页 AkiDAY. v3.0 设计浅聊

我一直很想做一个个人主页。

自从拥有属于自己的域名后，这个想法便挥之不去，一张在互联网上留下的名片，为自己的网络形象提供一个门户与入口。如今，距离自己的第一个网站建立已过去 7 年，在经历了一次由内而外的彻底重构后，个人 IP 主页 AkiDAY. 的第三个大版本，终于正式上线了。

在 v3.0 这样具有里程碑意义的时刻，我想先分享一点碎碎念式的回顾，再聊聊这次的设计思路与想法。

v1.0 - 模板时代

做初代个人主页时，我还是个只会用 CMS 建站工具套现成主题的小白，建站思路自然也是最简单的「套模板」。彼时其实已有 Linktree、BentoMe（已被前者收购并于上月关停）、Bio.Link 这类便捷工具，轻松生成美观的个人社交链接汇总页。但初创时却有了一直传承至今的执念：网站要由自己亲手构建，而非依托于第三方的包装服务商。

于是，技术尚浅的我选择了 HTML5 UP 的单页模板，挑选了一个喜欢的版式，配合一些开源图片，便有了下图所示的初版本：

从首行的自我介绍就能看出，那时的我尚在上大学。这个初代网站简陋得像是一张单页 PPT，但它确实作为我在互联网上的门户存在了相当长的时间，也确定了另一个传承至今的元素：坚持提供双语版本。

v2.0 - 魔改时代

废话不多说，先上 2.0 中期小版本的截图：

同样开头一眼便知，此时已经是研究生阶段，积攒了一些堪堪够用的 HTML 和 CSS 基础。在 Nekotora 网站的启发（及其本人许可）下，我进行了一点魔改，形成了 2.0 中后期的界面。

若有缘人曾见过 2.0 的早期版本，会发现当时网页背景沿用了原设计的 Canvas 星轨动画，本站友链中也有友邻保留了 Nekotora 更早期版本的样式。而我的魔改思路更多是出于阅读体验的考量：用 CSS 实现了一个简单的飘雪动画取代色彩绚烂的星轨，并将背景色改为灰白色，极大提升了文字的可读性。并在这一版中实现了 CSS purist，完全移除了 JS 代码。此外，在大按钮控件的动效上，我参考了微软的 Fluent Design，利用简单的阴影效果来构建层级。

可以说，这是在展示内容几乎没变的情况下，一次单纯的美化。终于，它看起来至少不再像是一张 PPT 了。

v3.0 - L²FR

这就是 AkiDAY. v3.0 的首屏。请原谅我仅放上这一张截图，因为更多的动效与设计细节，我更希望屏幕前的你能通过点击链接亲自体验。而这个小标题看起来有些费解，且听我从头道来。

是什么？做什么？定义什么？

这是项目重构前，我思考了很久的三个核心问题。

在算力与存储成本飞涨的 AI 时代，互联网的交互方式早已发生巨变。而于我而言，AI 是落地想法的绝佳工具，让我能尝试那些曾经灵光乍现却缺乏能力实现的点子。因此，我决定将所有的点子集合汇总，把作为个人的「我」隐去，将「AkiDAY.」IP 化，使其从一张「认识我的名片」，进化为我在互联网上的化身、数字宇宙的核心。在 3.0 的介绍里，具体的「我」已不再重要，取而代之的是高度抽象化的网络形象 Aki，以及所有已实现或正在进行中（新建文件夹ing…）的企划门户。

Aki 一直钟爱平面艺术，因此在 AkiDAY. IP 品牌下，首先开启的是名为 Lucentia 的「美学实验室」企划。主页的设计与完成便是该实验室的第二个作品，至于第一个作品嘛，目前仍在完善中，希望能在下一篇文章里尽快分享。

如果说初版本是快速上手的「毛坯房」，二代版本是依托他人的「简装修」，那么这一次，要让 3.0 彻底拥有属于自己的灵魂。为此，确立了一套专属的设计语言：

L²FR - Ligne Flux × Lumen Riot

如标题所示，L²FR 只是一个方便书写的简称。这并非单一的设计语言，而是由两种设计理念构成的小体系：分别是被 Aki 称为 「Ligne Flux」 的骨架，和称为 「Lumen Riot」 的筋肉。

Ligne Flux 线之流动

关于 UI 设计的启蒙要追溯到 2012 年微软发布的 Windows Phone 8。没有复杂的边框，仅靠巨大字号、不同字重和空间排版，它就完成了视觉主体与交互入口的构建。这种 「内容即设计」 的思路深深震撼了当时对繁琐元素感到审美疲劳的我。在我眼中，甚至连后来的 Windows 10 (Mobile) 都是充满妥协的产物，我大概是这世界上最希望 WP8 复活的那一批人之一。

了解平面设计后，也认识到除了广为人知的扁平化，近年来占据平面设计界另一重要逻辑的是微软 Metro UI 所代表的「粗野主义」（Brutalism）。大号粗重的字体、强烈的视觉冲击，在如今无数模板网页中都能看到这种思路的影子。

另一方面，熟悉我以及这个博客站的都知道，在二次元插画领域中，我深受已故画师焦茶老师的影响。不同于主流的华丽给光影审美，他的作品有着清晰的描线，带有版画质感，通过色块进行明暗划分，而非细致的阴影修饰。这种画风被称为 「Ligne Claire（清晰线条）」，源自比利时漫画家埃尔热（Hergé，《丁丁历险记》作者），后经法国科幻插画家墨比斯（Moebius）发扬光大，日本也有铃木英人等代表人物¹(#bd7f62f1-a0ee-4be7-ae7b-155590b1119c)。

受此启发，在 3.0 的设计中，我强调了线条的使用。除了作为分割线，我还想利用内容排版来引导「视线流」。我完全摒弃了目前流行的、源自日式便当的 Bento 设计，在我看来，Bento 虽利于展示信息，却容易产生过多的视觉噪音，缺乏明晰的单一视觉焦点。我希望将网页的骨架化繁为简，追求线性的物理排版，将更多空间交给纯粹的留白，利用高反差色块和硬朗的线条进行分割，引导视线进行线性的流动。

Lumen Riot - 光之跃动

但我并不想要一个只有冷峻黑白的平面。焦茶老师作品的另一特征是奇妙的色彩运用，既有波普艺术的风格，又带有偏离现实的氛围感。这种哲学也引导了我的博客，它始终保持着从其画作中提取的两种主题色。而这一次，我决定打破限制，在黑白骨架中填入大胆的色彩点缀。

在这个时代没有足够的阅历是无法发展自己的东西的，因为总有前人早已产出了类似的成果。而这种在粗糙框架下塞入跳脱色彩的设计哲学，其实也早已诞生，被称为「Neo-Brutalism」新粗野主义。那么，Lumen Riot 又有何不同？

我融入的是 Lumen（流明），这是一个关于光的物理概念，也对应我在现实中打交道的领域，我希望在平面中抽象化地构建光影体验，拒绝 Neo-Brutalism 生硬的阴影，而是在一定范围内强调空间和景深，让光影与跳脱的色彩产生一种实感交互，让页面不再是一个平面。这在一定程度上接近了 Liquid Glass 的部分哲学，只是通过简化去除了其过度设计带来的视觉噪声。

在琢磨这两个词组时，面对两个开头的 L， L²FR 这个简写便应运而生了。

落地

设计的骨架是清晰的：以文字排版为主，用字重带来冲击，简化装饰。但留白的页面如何引导用户滑动？

这亦是苹果在设计 iOS 初期的锁屏曾思考的一个问题，带来的解决方案就是曾经熟悉的解锁滑块。

而我想到的答案是：撞色与倾角。确定了黑白撞色的底色，并为每个区块加上了 3 度的倾角互相重叠，在其底部形成「折页」效果。同时，设计本身对动效的使用也都是为了交互服务，在静止无交互时完全不做吸引眼球的动效。那么通过这种折角设计，传统网页横平竖直的呆板也被打破，在静态下以不稳定感增添了页面的动感。

在首屏，我构建了一个「玻璃箱」概念：使用镂空线条字与厚重实体字的阴影叠加，形成蚀刻与沉积并存的物理感。再通过倾斜 Slogan 和模糊效果，配合磨砂玻璃样式的胶囊标签，使得首页变成了一个具有景深的容器。而这些胶囊标签，利用与鼠标交互的实时光影反馈，又赋予了其独特的体积感。

在后续区域中，我大量使用了荧光色点缀。在 Ligne Flux 的框架下，只有交互时才会迸发出大面积的跳脱色彩宣告存在感。而不同企划拥有专属的荧光主题色，配合光标的光学效果，使鼠标像是一把指示激光笔或手电筒，这正是我将物理光影概念引入设计的初衷。

---

在这个 Vibe Coding 的时代，强大的 AI 工具只需几句 Prompt，便能在几分钟内利用各种先进的前端组件库，堆砌出视觉远超本设计的方案，但我仍希望自己的产品能承载一些独属于创作者的灵魂。在构思了大致的设计方向后，回归了最熟悉的 HTML+CSS+JS 三件套去实现。事实上，若非为了实现那些不可或缺的动效，甚至 JS 也想一并舍弃。正如 Motherfucking Website 所传达的理念：HTML 本身已足够强大，过度依赖 CSS 与 JS 往往只是在制造无谓的复杂性。最终，我将全站资源体积控制在了 50 KB 以内。虽难以自诩这是最优雅的解决方案，但确实在足够精简的自我约束下，完成了属于自己的表达与追求。

以上就是关于 AkiDAY. v3.0 的设计浅聊。期待它在繁星下的比特之海，与你相遇。

Footnotes

1. 【焦茶的画风是什么】——走进ligne Claire画风（上篇）https://www.bilibili.com/read/cv11178646/ ↩