我的第一个网站

需求

我需要一个可以在 LinkedIn 上分享的链接，让有兴趣了解我工作内容的人能够进一步认识我。个人资料提供了初步概览，而网站让我可以引导感兴趣的人查看更具体的内容。访客应该能在几秒钟内找到方向，了解有哪些浏览路径，并迅速知道该去哪里获取更多信息。

我也考虑到了未来的访客。到那时，我的项目将有值得讲述的故事。潜在合作伙伴和投资者应该能够了解我正在打造什么、追踪项目的进展，以及这些项目最终会带来什么。因此，我设计了一套能够容纳新内容的结构，无须每次添加内容时都重新设计。未来的页面可以随着项目的推进逐步建立。

这是我第一次制作网站。我采用了为客户工作时使用的方法来组织整个过程：明确需求、说明决策依据，并在发布前进行检查。Claude 负责开发网站，而我制定规则、评估方案并测试解决办法。在视觉设计方面，我直接在实际网站上操作，在不同层级启用或停用主题，并在自己的两台显示器和手机上检查效果。我只发布了自己已经预览过的内容。

约束条件

从一开始，我就设定了几个限制：免费托管、不使用数据库，也不使用 Cookie。网站必须同时满足 WCAG 2.2 AA 无障碍要求和视觉质量标准。即使禁用 JavaScript，内容也必须保持可读，网站还必须在 iPhone 和 iPad 上正常运行。我规划了八种语言，包括从右向左排版的阿拉伯语和简体中文。

关键决策与备选方案

1. 选择

   首页以一个3D卡片选择器开场。在性能较弱的电脑上，它会自动切换为简洁的信息面板，而在手机上则变成类似应用程序图标布局的网格。

   未采用的方案

   环形排列的卡片；仅使用传统菜单。

   原因

   首屏必须立即帮助访客找到方向，并清楚说明接下来可以如何浏览。界面会根据设备调整呈现方式，即使可用资源有限，也能保持快速导航。

2. 选择

   联系表单要求通过电子邮件确认。只有发送者打开收到的链接后，我才会收到消息。

   未采用的方案

   在页面上公开电子邮件地址；使用付费表单服务。

   原因

   确认步骤可以防止他人利用表单冒用我的名义向陌生人发送邮件。我将数据保存在自己能够控制的工具中。

3. 选择

   为了更新内容，我在测试网站上开发了自己的编辑器，通过电子邮件收到的代码即可访问。每次修改都会生成预览，由我检查后再发布。

   未采用的方案

   带数据库的 CMS；手动编辑文件。

   原因

   我可以更新文字，而无须修改代码。预览功能让我能够在改动公开之前检查最终效果。

4. 选择

   每段文本都作为独立于代码的数据进行管理，并为八种语言分别保存一个版本。如果缺少翻译，或者菜单项超出可用空间，网站构建就会停止。

   未采用的方案

   将文本直接写入页面；使用外部 CMS。

   原因

   我可以修改一句话或添加一种语言，而无须更改代码。自动检查会在发布前发现缺失的翻译和过长的菜单项。

5. 选择

   设计的起点是一张带有金箔的哑光黑色名片。我将这一概念转化为一张光滑的黑色中央卡片，嵌入金色图标，并让红光从边缘后方透出，仿佛一个正在开启的首饰盒。优雅、奢华与欲望是贯穿设计的关键词。我研究了获奖最多的网站，从 ciaoenergy.com 的动态与光影氛围中汲取灵感，但没有复制其设计，并将结果与使用 Lovable 制作的测试版本进行了比较。经过这番比较，我决定保留红色背景光。红色只用于营造光效或标示当前页面，而所有可点击元素都采用统一的漆面质感。

   未采用的方案

   白色图标；单一的金色效果；尝试后弃用的纹理大理石；卡片上的图片；圆点导航。

   原因

   我希望网站在访客开始阅读之前，就能呈现出鲜明且易于识别的视觉形象。我统一了表面质感、光线和色彩，并为每个元素设定了明确的用途。测试帮助我判断哪些方案能够强化这一设计方向，哪些会削弱整体的一致性。

6. 选择

   为了设计用户体验，我参考了 Nielsen Norman Group、W3C 关于菜单与无障碍设计的指南，以及有关轮播组件的建议，包括卡片下方箭头的使用指引。例如，在内部页面中，电脑端的菜单项始终保持可见，因为隐藏式菜单的使用频率要低得多。

   未采用的方案

   仅凭个人喜好作出决定。

   原因

   我希望影响导航体验的决策都有可查证的依据。我利用现有的建议来确定访客如何找到内容，以及如何与界面元素进行交互。

结果

网站现已上线，支持八种语言。自动化无障碍检查未在任何页面发现错误。优化后，带有3D效果的首页页面体积减少了57%。每次修改都会触发针对所有页面的自动化测试，包括针对 iPhone 和 iPad 屏幕尺寸的检查。

测试无法覆盖所有情况，因此有必要说明这一点。我在 iPhone 和 iPad 上手动测试了网站，也使用 Chrome 和 Firefox 对网站进行了测试。Mac 上的 Safari 尚未经过系统性测试。部分手机和平板电脑测试是在模拟环境中完成的。目前的翻译由自动化工具生成，后续阶段我会采用专业翻译服务。