我一直很想做一个个人主页。自从拥有属于自己的域名后，这个想法便挥之不去，一张在互联网上留下的名片，为自己的网络形象提供一个门户与入口。如今，距离自己的第一个网站建立已过去 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 实现了一个简单的飘雪动画取代色彩绚烂的星轨，并将背景色改为灰白色，极大提升了文字的可读性。此外，在大按钮控件的动效上，我参考了微软的 Fluent Design，利用简单的阴影效果来构建层级。
可以说，这是在展示内容几乎没变的情况下，一次单纯的美化。终于，它看起来至少不再像是一张 PPT 了。
v3.0 - L²FR
这就是 AkiDAY. v3.0 的首屏。请原谅我仅放上这一张截图，因为更多的动效与设计细节，我更希望屏幕前的你能通过点击链接亲自体验。我知道这个小标题看起来有些费解，且听我从头道来。
是什么？做什么？定义什么？
这是项目重构前，我思考了很久的三个核心问题。
在算力与存储成本飞涨的 AI 时代，互联网的交互方式早已发生巨变。对我而言，AI 是落地想法的绝佳工具，让我能尝试那些曾经灵光乍现却缺乏能力实现的点子。因此，我决定将所有的点子集合汇总，将作为个人的「我」隐去，把「AkiDAY.」IP 化，使其从一张「认识我的名片」，进化为我在互联网上的化身、数字宇宙的核心。在 3.0 的介绍里，具体的「我」已不再重要，取而代之的是高度抽象化的网络形象，以及所有已实现或正在进行中（新建文件夹ing...）的企划门户。
我一直钟爱平面艺术，因此在 AkiDAY. IP 品牌下，首先开启的是名为 Lucentia 的「美学实验室」企划。主页的设计与完成便是该实验室的第二个作品，至于第一个作品嘛，目前仍在完善中，希望能在下一篇文章里尽快分享。
如果说初版本是快速上手的「毛坯房」，二代版本是依托他人的「简装修」，那么这一次，我想让 3.0 彻底拥有属于我的灵魂。为此，我确立了一套专属的设计语言——
L²FR - Ligne Flux × Lumen Riot
如标题所示，L²FR 只是一个方便书写的简称。这并非单一的设计语言，而是由两种设计理念构成的小体系：分别是被我称为「Ligne Flux」的骨架，和称为「Lumen Riot」的筋肉。
Ligne Flux 线之流动
我的 UI 设计启蒙要追溯到 2012 年微软发布的 Windows Phone 8。没有复杂的边框，仅靠巨大字号、不同字重和空间排版，它就完成了视觉主体与交互入口的构建。这种「内容即设计」的思路深深震撼了当时对繁琐元素感到审美疲劳的我。在我眼中，甚至连后来的 Windows 10 (Mobile) 都是充满妥协的产物，我大概是这世界上最希望 WP8 复活的那一批人之一。
了解平面设计后，我发现除了广为人知的扁平化，近年来占据平面设计界另一重要逻辑的是微软 Metro UI 所代表的「粗野主义」（Brutalism）。大号粗重的字体、强烈的视觉冲击，在如今无数模板网页中都能看到这种思路的影子。
另一方面，接触二次元领域后，熟悉我以及这个博客站的都知道，我深受已故画师焦茶老师的影响。初见其作品，便被其中清晰的线条深深吸引。不同于主流的华丽审美，他的作品带有版画质感，通过色块进行明暗划分，而非过度的阴影修饰。这种画风被称为「Ligne Claire（清晰线条）」，源自比利时漫画家埃尔热（Hergé，《丁丁历险记》作者），后经法国科幻插画家墨比斯（Moebius）发扬光大，日本也有铃木英人等代表人物[1]。
因此，在 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 网页三件套来实现它。仅凭这样最基础的前端工具去实现总伴随着挑战，过程中也难免有 AI 辅助，但最终还是幸运地成功达成了、属于我自己的表达与追求。
以上就是关于 AkiDAY. v3.0 的设计浅聊。期待在比特之海的繁星之下，与同行者相见。
- 【焦茶的画风是什么】——走进ligne Claire画风（上篇）https://www.bilibili.com/read/cv11178646/ ↩︎
Comments NOTHING