# AI产品网站设计：Auralis的柔和解释方式

原网页：https://www.jvds.cn/share/ui-design/auralis-explain-decision-process-u043
语言：zh-CN
发布：2026-10-13
作者：界达设计工作室（JVDS）

Auralis的AI产品网站设计，用草地、天空和人物替代常见的机器图形。普通字与斜体搭配，工作卡像扇面展开，技术介绍有了一点沉静感。接下来的关键，是让这份气氛与具体能力说明配合。

## 天空给文字留了一块自然的空白

人物站在草地中央，地平线位于较低位置，标题和按钮落在天空部分。照片的上下内容不同，文字没有横跨复杂草叶，主视觉本身就为阅读安排了空间。

标题第一行用简单字形，下一行转成衬线斜体。字重与笔形变化像语气转换，分析和反思不需要另加夸张符号。白色文字与蓝灰天空也比压在深色人物上更安稳。

顶部How It Works、Features、Approach和Pricing聚在一条圆角导航里，Sign Up另放右侧。内容探索与开始使用各有位置。这适合需要先理解用途的产品网站，访客可以选择投入多少阅读时间。

![Auralis草地主视觉、导航和下方弧形工作卡](https://www.jvds.cn/upload/2026/1008/d187-tp/u043-i1.webp)

首页上部与第二屏｜自然主张承接工作方式入口，访客可继续了解机制。

## 弧形卡片像展示扇面，中心最先被看到

主视觉下面，五张工作卡围成弧形，Gather context居中较直，两侧逐渐倾斜。眼睛、手与光线等图像延续了柔和气氛，卡底白色渐变让文字不必直接压在照片暗处。

界达设计喜欢这个组合里的文字区。每张卡先给短标题，再给一两行说明，图片的视觉力度和解释文字能同时存在。技术能力介绍若只保留抽象图片，很难让访客分辨卡片用途。

不过，扇面不是天然的步骤顺序。若这些卡用于解释从资料到结果的流程，可以补上序号、箭头或[明确起点](https://www.jvds.cn/share/ui-design/cognitive-accessibility-clear-content-ux)；若只是几种能力，则用文案说清它们并列。中心卡突出，不等于用户知道该从中间开始读。

## 三列网格让内容稳定，也暴露了标题差异

功能网格把大标题居中，三张卡并排，卡底文字沿相同基线排列。边距、间隔和宽度都有清楚结构，空白让卡片之间不相互挤压。网格的作用很朴素：内容变多时仍有可以对齐的位置。

前两张卡重复AI-driven understanding，第三张强调Expert-guided decisions。作为排版示意能看出形式，正式内容还需要把三张卡的任务讲得更不同。资料输入、结果解释与人工参与，可以分别给出一个具体例子，让卡片的差异来自内容。

衬线斜体继续出现在功能标题里，正文仍是简洁字形。这种少量强调比通篇使用装饰字体更适合阅读。品牌语气留在标题，说明文字负责回答具体问题。

![Auralis三列功能卡与网格示意中的重复标题](https://www.jvds.cn/upload/2026/1008/d187-tp/u043-i2.webp)

功能区三列底部｜前两张标题和说明相近，内容职责还未充分分开。

## 移动套餐延续自然背景，选择条件要近一些

手机画面中的功能页保持白底，图片和说明纵向排列；套餐页把Standard与Pro并排，价位、列表和Get Started在各自卡里。背景自然图像留在下方，仍能认出与首屏相同的气氛。

价格的大字、[计费周期](https://www.jvds.cn/share/website-design/saas-pricing-page-design-407)的小字与列表形成层级。读者先确认类型和费用，再看包含项。若人工指导是其中一项服务，参与方式与包含范围应靠近卡片说明，方便选择之前核对。

图里套餐卡有横向延续，窄屏需要检查下一张卡是否容易发现，当前选项是否清楚。这里能看到的是布局与示例文案，真实价格及服务政策应以产品实际资料为准。

借鉴这套网站时，可以先选一份输入材料与一个输出示例，把它们放到现有卡片里。自然视觉为初次理解留出轻松入口，具体例子则帮助人知道继续阅读会得到什么。

![Auralis移动功能介绍与Standard、Pro价格卡](https://www.jvds.cn/upload/2026/1008/d187-tp/u043-i3.webp)

移动展示左右两屏｜专家介绍与套餐并置，包含范围应在行动前明确。

## 为AI产品安排更清楚的介绍网站

如果你的产品需要解释输入、结果和人工协作，可以从一个完整示例开始整理内容。界达设计工作室（JVDS）提供UI/UX设计与网站设计、开发服务，让品牌视觉与产品机制一起呈现。

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