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

原网页：https://www.jvds.cn/share/ui-design/ai-tool-scenarios-and-demo-u131
语言：zh-CN
发布：2026-10-21
作者：界达设计工作室（JVDS）

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

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

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

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

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

![Xpander.ai黑紫首屏与任务接口卡片](https://www.jvds.cn/upload/2026/1008/d187-tp/u131-i1.webp)

首屏左主张、右任务卡｜技术表达要继续说明输入与结果

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

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

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

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

![应用名称与使用场景分组菜单](https://www.jvds.cn/upload/2026/1008/d187-tp/u131-i2.webp)

展开菜单右侧｜场景标题下的浅灰解释承担区别任务

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

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

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

FAQ中露出的系统接入问题，适合接住看完演示后的实际疑问。Xpander的启发是让视觉识别、[任务目录](https://www.jvds.cn/share/website-design/website-taxonomy-categories-tags)和解释材料各司其职，最后用明确的开始与预约动作连接，而非让抽象科技图承担全部说明。

![手机演示主题、Watch now与FAQ展示](https://www.jvds.cn/upload/2026/1008/d187-tp/u131-i3.webp)

中央手机内容｜演示主题、时长和文字摘要共同帮助判断

## 为技术产品安排不同理解起点

AI工具、开发者平台和企业软件网站，可以同时规划工具目录与任务场景，再让演示、文档和咨询回答不同深度的问题。

界达设计工作室（JVDS）提供UI/UX设计与网站设计、开发服务，可协助整理技术产品导航、说明页面与演示入口。

[联系界达设计，聊聊你的项目](https://www.jvds.cn/contact)