Web应用与占卜

L'Archiste

以精确的天文计算服务于一种象征性的实践——两者绝不混淆。

年份
2026
制作周期
5 周
技术栈
React · Vite · Tailwind · Vercel
  • 产品设计
  • 设计
  • 开发
  • 内容 SEO

Kayzen Web自主开发的产品,在启用正式域名之前,暂以Vercel预览地址提供服务。

https://archiste.vercel.app/
L'Archiste网站首页——Web应用与占卜,由Kayzen Web制作
种占卜术
12
条被传输的出生数据
0
注册要求
0
出发点

需要解决的问题。

背景

L'Archiste 提供数字命理、出生星盘、星历表以及十二种占卜术,免费且无需注册,并附有一本保存在用户设备上的个人日志。

限制

两项相互矛盾的要求。一方面是精确:出生星盘依赖星历表和时区换算;一分钟的误差就会让上升星座发生偏移。另一方面是克制:这个市场充斥着花哨刺眼的界面,以及伪装成免费的付费套路。

对策

计算被当作一个工程问题来处理——权威星历表、历史时区、出生地当地时间——而界面则被当作一个阅读工具。没有账号,没有诱导消费,没有推送通知。日志始终保存在用户自己的浏览器中。

实测,而非自称

交付时测得的评分。

以下为线上网站的Lighthouse评分。我们如实公布:若某项分数偏低,其原因与改进计划会在下文写明,而不是避而不谈。

PageSpeed
78
性能:78分(满分100分)
95
无障碍:95分(满分100分)
96
最佳做法:96分(满分100分)
100
搜索引擎优化:100分(满分100分)
设计与艺术指导

每一个设计取舍,及其理由。

  1. 刻意的克制

    考究的字体、沉静的背景,没有闪烁的星星,也没有紫色渐变。在这里,视觉上的严肃本身就是商业上的差异化:它承诺计算本身也同样严谨。

  2. 先给结果,再给解读

    星盘图显示在顶部;篇幅较长的解读按章节折叠。会看星盘的用户,不必先翻过三屏文字。

  3. 私密日志,白纸黑字写明

    日志存储在本地,界面上明确说明这一点,导出和删除一键可达。对于如此私密的内容,在存储方式上含糊其辞就是设计缺陷。

项目配色

  • 深夜蓝

    #131024

    背景

  • 淡金

    #D9C27E

    象征性点缀

  • 象牙白

    #F2EDE4

    正文

  • 梅紫

    #5B3A63

    区块

字体系统

标题字体

Cormorant Garamond

正文字体

Inter 400

标题用衬线字体,长篇阅读用无衬线字体:保留象征意味,又不牺牲解读文字的易读性。

工程

幕后的技术实现。

  • React
  • Vite
  • Tailwind
  • Vercel
  1. 在浏览器中计算

    星历和行星位置都在客户端计算。任何出生日期都不会被传输——这项服务中最敏感的数据从不离开用户的设备。

  2. 历史时区

    1978 年在阿尔及尔出生的时间,不能按今天的时差来换算。历史时区数据库被内置其中:正是这个细节,把一款精确的工具与一个小玩意儿区分开来。

  3. 仅使用本地存储

    日志和已保存的星盘都存放在浏览器存储中,并支持 JSON 导出。没有数据库,因此也没有需要申报的数据处理。

搜索引擎优化

网站如何被搜索到。

  1. 解释性内容,而不是承诺

    深度内容页面解释每种占卜方法实际上计算的是什么。这些内容承接出于好奇的搜索,也让网站在一个只承诺、不解释的市场中脱颖而出。

无障碍

人人都能使用。

自2025年6月起,《欧洲无障碍法案》(European Accessibility Act)要求大量在线服务实现数字无障碍。我们在设计阶段就着手处理,而非事后补救。

  1. 以文字描述星盘

    圆形星盘图配有一张行星位置表:没有它,整个结果对屏幕阅读器来说都是不可见的。

网站结构

交付了哪些内容。

  • 首页
  • 出生星盘
  • 数字命理
  • 星历表
  • 十二种占卜术
  • 日志
方法

项目的推进过程。

  1. 计算

    星历表、历史时区、以已知案例进行验证。

  2. 界面

    星盘图、行星位置表、折叠式解读。

  3. 日志

    本地存储、导出、删除。

问答

客户常问的问题。

不会。所有计算都在您的浏览器中完成,不会传输任何数据。日志保存在您的设备上,可以随时导出或删除。

同样严格的标准,用于您的网站。

免费审核您现有的网站,24小时内报价,并附上书面分析——就像您刚刚读到的这篇。可分三期免息付款;可申请的地方补贴在签约前核实。

分享