AI工具官网设计：Xpander的两类目录

Xpander.ai的首屏用黑紫配色提出简短主张，展开菜单却换成安静的白底。它将技术工具名称与使用场景分开，再用演示补充说明。AI工具官网设计可以从这套安排中借鉴一种解释顺序：先辨认主题，再找到与自己相关的目录，最后决定如何继续。

首屏的动作和任务样例各有位置

紫色导航横贯顶部，黑色主体里是Build Better AI Agents大字。Get started用实紫，Book a demo用暗色描边，两个同名入口也出现在导航中。不同位置使用相同称呼，帮助访客持续辨认开始使用与预约了解两条路径。

右侧把检查当前套餐、检查可更改套餐等任务放进接口样式卡片，GET和POST使用小色标，连线提示任务关系。相比只放一张抽象科技图，这些具体动词开始解释产品面对的工作对象。

卡片本身较暗，主要信息在缩小后不容易读清。如果它承担关键解释，任务名称和输入输出关系应该有更清楚的短说明；如果只承担气氛，则不能让它替代正文中的能力边界。首屏的速度宣传和工具标志也应作为图示表达看待，不能直接证明性能或兼容范围。

按工具与按用途，各有自己的目录

Solutions展开后，Applications列出OpenAI SDK、LangChain等名称，Use Cases列出AI Tooling Hubs、AI Assistants和AI Agents，并配简短说明。左右区域先标类别，再排列入口，不同层次的词没有被混成一列。

技术读者可以从熟悉工具进入，尚不清楚接入方式的人可以先看用途。这种双目录适合存在多种理解起点的产品，前提是相应落地页继续回答具体任务与条件，不只重复技术名称。

界达设计工作室（JVDS）认为，使用场景的区别主要落在标题下面的解释中，当前浅灰说明值得增强。标题让人知道有几个入口，描述让人知道应选哪一个；两者的可读性应按各自作用分配，而不是把所有次级文字都压到同样淡。

演示用时长帮助判断，也需要文字摘要

手机展示将两分钟视频提示、问题主题、Watch now和软件画面纵向排列，下方紧接FAQ。主题、观看动作与内容预览靠在一起，使演示比一个孤立播放图标更有上下文。外部折射图形仍保留品牌气质，手机内信息则保持黑底与细线结构。

时长帮助人判断投入，短摘要可以继续说明两分钟具体讲哪些问题。暂时不能播放的人也应能通过文字了解重点，再选择查看文档或预约。图外的播放、音量与全屏控制属于作品展示层，不能直接据此确认官网播放器行为。

FAQ中露出的系统接入问题，适合接住看完演示后的实际疑问。Xpander的启发是让视觉识别、任务目录和解释材料各司其职，最后用明确的开始与预约动作连接，而非让抽象科技图承担全部说明。