这是一个非商业项目，是设计师学习 Next.js 和 Sanity 的一个实例。在很大程度上也受制于技术，因为我的技术有限，只能做自己能实现的设计，好在不必受制于人，也因此做得很开心。这样说并不是否定人类文明进程中许多伟大的成果不是分工合作所创造的，我当然相信商业本身就是互助合作和正和游戏，不过是我们还在榨取式社会丛林中艰难的前行，想要坚守「平凡但不平庸」实际上是极高的要求。

以我对 Next.js 粗浅的了解，就平日的观察中来看，当今世界上那些顶尖的网站中十有八九都是用 Next.js 开发的，比如 Raycast、Resend、OpenAI、Figma，比比皆是。也是后来才发现，这种 React 框架的网站使用 JS 跳转页面而不是浏览器本身的跳转行为，使得网站页面之间切换的速度快如闪电，就像运行在本地一样快，现在许多新锐的、大牌的网站都采用这种方式。Sanity 则是我最喜欢的无头内容管理系统（Headless CMS），仅凭它的 UI 设计都做得出类拔萃。它可以做到百分百的定制化，不会有一个字段是多余的，因为每一个字段都是开发者自己写，它没有预设。Sanity 的网站又是用 Next.js 开发的，这样一来，两者的集成就成了非常可靠的技术栈，Figma 官网也就是这样的技术栈。

我的初衷是做一个小而美的作品集网站，作品集网站你可以去用 Cargo、Squarespace、Read.cv Sites 或是 Framer 等等，自己做的意义在哪里呢？要回答这个问题就像是我每天自己做饭一样，自己做更便宜、优雅、健康，是长期主义的选择。Next.js 可以分包字体（将字体文件按照实际使用内容拆分为更小的资源，减少加载时的字体资源占用，提升页面加载速度与用户体验），解决长期以来中文字体太大对网页使用不友好的问题。在 Next.js 项目中，你可以使用任何想使用的中文字体，只要具有合法版权，不需要担心性能。上述中例举的 Framer 也能分包字体，但是它的 CMS 太弱了，没有办法做到灵活的内容管理与构架。

本项目以兄弟公司青苔设计为原型，在设计中，我先为网站构思了文案，青苔设计这个名字是什么意思？如果人们无法解读就会缺少共情。我想到杉本博司的书《直到长出青苔》便去挖掘其中的意义，于是有了「真正有生命力的事物，需要时间去沉淀、去生长、去被理解」、「青苔不语，生机盎然」、「沉淀、静谧、坚韧、永恒」这些标语，与该公司做品牌设计相契合。有了文案，我们才有了排版的元素，甚至有了做设计的感觉，它不仅仅是信息本身，也是一种视觉元素，更有可能成为点睛之笔。就像一首歌，如果光是好听，那也只是好听而已，如果它的歌词触动了你，它就超越了好听。文案是自然语言，设计是视觉语言，普通人更能够理解自然语言，不一定理解视觉语言，它们相互相成，文案也为普通人去理解设计做了铺垫。

这是一种极简主义的设计，但不同于以富媒体为主视觉的网页设计，比如苹果的官网；也不同于以文字为主视觉的网页设计，比如 Typewolf 收录的网站。青苔的网页设计倾向于以作品本身为视觉主语，结合网页特性的轻体验，塑造一个简约而不简单的作品集网站。就像无印良品的风格，我称它为——没有设计的设计——自然、本味。我喜欢《不服从的艺术》里面译者的一句介绍：「虽然身为译者，但最大的梦想却是让读者感觉不到译者的存在。期待自己的译文能如原文般自然流畅、饶富趣味。」

网站的主要特性和实现

1. (sanity): 创建了自定义数据模式类型，用于后台管理和前端渲染
2. (sanity): 适配了浏览器默认语言，支持自动切换管理面板中英文界面
3. (sanity): 支持按需新增图片、视频或文本块的页面搭建
4. (sanity): 仅在开发环境中自动启用了 vision 工具可用于查看数据结构，而不干扰最终用户
5. (sanity, next.js): 支持预加载低像素模糊占位图
6. (next.js): 页面首图使用了预加载、其余图片使用懒加载
7. (tailwindcss): 适配了系统色彩模式，支持 light 和 dark 方案
8. (tailwindcss): 适配了从手机到 5K 屏幕的自动布局

关于 Next.js 和 Sanity 的自带特性就不做赘述了，比如：

1. 自动转换图片格式为 AVIF 和回退 WebP 等

---

演示

next.mossdesign.cn

后台

next.mossdesign.cn/studio

用户名

demo@cooooolt.com

密码

y6{O65*7Zr

P.S.: 你也可以去看 Sanity 官方的 demo，管理后台的搭建完全取决于开发者自己。