24 / 02 / 02
几天前，我完成了新版的 Gridea Landing Page 的重新设计和开发。在这篇帖子中记录一下这次新版 Landing Page 背后的故事。
有两个主要原因：
我最近开发了一款新的 Gridea 网站主题——Bento ，（现在还没有一个专门的网页链接为这个词，希望后面能有一个），我想在 Landing Page 能够显示这个主题，以能够告知用户，并吸引用户使用。
Gridea 的 Landing Page 记录的功能以及 UI 距离上次更新有了很多变化，所以也做一下更新。
我最开始纠结的是如何重新设计首屏图，来承担新增的 Bento 主题，甚至将这个疑问发到了社区里面，不过并没有得到太惊喜的答案。
纠结点在于，该横向排布还是竖向排布。因为我认为 Gridea 是一个“从工具 -> 到网站”的完整描述。所以，最后还是保留了左右布局的方式，另外，我也真的喜欢原有的左右布局的方式。
只不过这一次有几个不同点：
所有元素均为代码制作。 应用的“截图”、网站的“截图”，都是用代码画出来的。这样的好处是，不会因图片压缩而带来视觉损失。另外，”截图“的部分都使用的text-xs的字体大小，在组成“图片”的同时，依然有较好的文案可读性。
添加切换主题的 Tabs。 这次改版的核心目的之一是，将 Bento 主题加进来，于是做了一个 Tab 切换，并且切换时添加了主题显示部分的层级动画。一是更流畅，而是表达出这里有多个的状态。
这个部分原有就是采用 Bento 风格来介绍了各模块的功能，不过这次，也是使用代码实现了每个功能说明的插图部分。
在描述可在移动端使用这一主题时，放了两个半截的手机截图画面，一来说明移动端适配的效果，二来说明借助 PWA 技术，可以以独立应用方式在移动端使用 Gridea。
在描述定制能力这里，本来想的是提供一个可交互可预览的模块，让用户可以在这里就可以把玩 Gridea 对于网站的定制能力。但是鉴于实现成本和可操作、可预览空间。换成了更轻量化一点的表达。但同时添加了一点点 hover 动效，可可交互性。
另外其他部分，也分别进行了重新实现和一定程度的 hover 交互。这也是使用代码实现插图的一大好处吧。可以更自由的使用 CSS 进行交互与情感表达。
思考想和阅读这两个部分的实现与表达相对更简单一些，除了保持了纯代码实现的特征之外，一个我个人比较喜欢的设计是：“One more thing...”
主要想表达的是除了最基础的功能之外，还有一些可能是你实际需要，但不一定第一时间想到的功能设计。
一个是思考箱的思考卡片可以发布到网站，一个是阅读可以通过快捷指令来快速操作保存链接。
哈哈，本次新版 Landing Page 除了视觉和内容上的更新之外，我还给首屏的 Slogan 添加了 A/B 测试的机制。因为之前在社区提问首屏的布局时，另外还有更早之前也有社区的朋友反馈过，Slogan 过长、描述不够清晰和简单等反馈。于是我写了一个函数，随机出现三种不同的 Slogan，然后看点击 CTA 按钮的比例，看哪一个效果更好，用数据来驱动，看是什么样的 Slogan 能够提高转化率。
目前收集了近 200 份数据，原来的“Build your digital garden, make writing the best way to talk.” 更高一些。不过比例差距不是特别明显，还可以再拉长一点周期和更多数据再来决定。（让子弹飞一会儿）
这就是本次更新的全部内容啦，篇幅原因，没有一五一十的进行阐述，文字描述起来还是有些复杂了，可能录制一个视频的形式会更好一些。
2024 年 2 月 7 日更新：
已经录制视频啦：https://www.bilibili.com/video/BV1cZ421U7v7/
虽然录制一般，也没有打草稿，但至少发出去了，希望下次有所进步吧。
如果你想看看最新的效果，可以下面访问链接 ⬇️，也欢迎各种交流。