在此页面上
公司网站通常以第一个屏幕来评判。这是一个有用的清晰度测试，但不足以作为设计测试。我们希望 zortex.me 能够支持读者从标题进入长篇解释，比较几篇文章，跟踪来源，并在稍后在较小的屏幕上返回。
当前网站是一个服务器渲染的发布应用程序。白色阅读界面、深色文本、柔和的元数据和克制的交互为文章的论点留下了空间，而不是将每个部分都变成视觉效果。它有一个独立的认证工作室用于编辑和发布。公共设计和编辑系统是相关的，但它们没有相同的要求。
空白是层次结构的一部分
该网站10月7日的历史记录显示，选择将主页恢复到网站其他部分使用的浅色设计。一个全页的深色视觉区域曾与主要邀请竞争。修订后的页面将标题、解释和注册保留在白色背景上，而概念预览则占据其独立的区域。
这种选择建立了一个实用的层次结构。页面首先用文字提出主张。动态是支持材料，而不是导航界面或理解产品的唯一途径。
我们的类型系统使用 Inter 和一组角色，而不是将每个文本大小视为一个孤立的决策。已发布的验证说明描述了一个 64 像素的标题，正文文本约为 17 像素，行高为 28 像素，以及在视觉上与文章标题分离的较小元数据。这些测量描述了该修订版本中已提交的网站，而不是 Zortex 的每个产品都必须采用的规则。
一行解释性文本需要足够的宽度才能舒适阅读，但不需要整个视口。图表或比较需要更多空间。因此，文章布局具有用于阅读文本、标题材料、导航和更宽的组合部分的独立跨度。
一个内容源，多个阅读上下文
文章以带有 YAML 前言的 Markdown 文件开头：标题、日期、类别、摘录、图像、作者和正文。发布系统验证这些字段，将公共版本与草稿分开存储，并在服务器上渲染文章。
然后，读者会看到一篇包含标题、摘要、日期和类别、署名、计算出的阅读时间估算、可选封面以及当正文有标题时包含目录的文章。该期刊具有搜索、筛选、排序选择和备用呈现模式。这些是进入相同源材料的不同方式。
基本流程是：
Versioned Markdown article
|
v
Schema and publication state
|
v
Semantic server-rendered page
|
v
Search, reading and sharing controls
一个文章来源通过发布状态流入读者的页面和发现控件。
此图是网站的描述，而不是桌面世界模型引擎的描述。出版数据库和 AI 上下文库解决不同的问题，并具有不同的安全边界。
响应式意味着允许内容更改
固定的截图可能会掩盖薄弱的规则。长标题会改变换行；表格需要比段落更宽；用户可以增加他们的默认字体大小；期刊类别可能比设计时使用的示例长得多。
站点测试记录保留了长文本首次导致溢出的情况。响应不是将整个文档隐藏在视口之外。它是让固有布局容器正确收缩，在必要时包装元数据，并使表格和代码块在其自己的区域内可滚动。
这就是我们所说的设计语言。规则不仅仅是32像素间距这样的测量值。规则是元素、其内容和其容器之间的关系，包括当内容不再适合时必须发生什么。
同样的理念也适用于图像描述。封面应该有一个替代文本描述，说明视觉中出现的内容。装饰性动态剪辑不应是理解文章的必要条件。没有可用静止帧的视频不是完整的阅读体验。
运动、约束和读者控制
发布用户界面支持动态封面和媒体部分。JavaScript 媒体管理器控制哪些剪辑被附加并允许播放；该网站还为需要或喜欢它们的读者提供减速运动行为和静态海报。
验证记录报告了媒体管理器在一台机器上的浏览器测量结果，并对同时播放进行了预算。它并未将这些实验室值作为每台设备帧率的承诺。我们的设计承诺更简单：避免不必要的解码，绝不让动态内容成为意义的唯一承载者。
站点偏好设置包括浅色/深色主题和日记隐藏图片设置。浅色演示是这些帖子的主要视觉参考，但尊重读者的偏好比保留一个屏幕截图更重要。
我们出于类似原因在图表中使用细规则、克制的颜色和宽敞的空白。图表旨在隔离一种关系。它不应与它旨在解释的主张争夺注意力。
发布边界是设计的一部分
工作室可以在不悄悄更改实时页面的情况下进行修订。工作草稿可以保存和审查，而公共版本保持稳定。发布是明确的，并且通过种子过程协调存储库内容。
这会产生明显的影响。文章必须具有稳定的 URL、适当的元数据和加载的图像。搜索和导航不应显示私人草稿。收藏了已发布解释的人不应意外地看到编辑未完成的笔记。
这些是信息设计属性，尽管它们的实现存在于服务器代码和持久性测试中。设计负责系统传达的内容，包括未发布内容的缺失。
编辑状态属于界面
该网站的浏览器检查练习了文章渲染、编辑边界、长文本、较窄的视口和媒体行为。可访问性审查还必须考虑辅助技术和实际设备设置；屏幕截图无法测试这些交互。
文章渲染器现在接受嵌套本地资产目录中的 SVG 图表。封面和内联图表使用经过验证的 /static/assets/ 路径，发布测试会检查渲染图像是否具有替代描述并成功解析。
重点是一个发布界面，它保留了草稿和发布之间的区别，为证据发展提供了空间，并随着主题和内容的变化保持可读性。
来源依据： ZortexHQ/zortex-site app/static/interface.css、tokens.css、app/markdown.py、app/schemas.py、app/templates/article.html、README 和 docs/TESTING.md；10 月 7 日主页设计提交。早期测量结果被引用为历史验证记录，而不是新执行的结果。
