项目概述
Auralis 是一个声音设计初创公司，需要一个专注的单页网站，在几秒钟内解释它的功能。目标是创建一个感觉平静、现代且自信的落地页，同时引导访客试用产品。
角色与范围
- UI/UX设计
- 视觉方向
- 交互设计
- 交付与文档
目标
- 在首屏传达价值
- 无杂乱展示产品视觉效果
- 创建简单的注册或请求演示路径
- 保持性能、可访问性和可读性
受众
- 关心音频质量和节省时间的制作人和内容团队
- 他们快速浏览、比较工具
- 期望干净、可信赖的体验
设计方法
页面结构像一个短故事：清晰的英雄区、三个价值点、产品预览、社会证明和直接的行动号召。排版承载声音，图像承载感觉，动效突出重要内容。
设计亮点
英雄区
大标题配一个支持性句子和一个主要操作。次要链接指向功能详情。
价值网格
三个简洁的点，配小图标。每个卡片在悬停时展开，显示一句话的细节。
产品预览
静态帧和显示核心流程的短循环。没有自动播放音频。
社会证明
选定的标志和一个特色引言，快速建立信任。
CTA区域
短句，一个主要操作，一个指向定价或演示的链接。
视觉语言
字体
标题使用几何无衬线字体，正文配中性粗体。紧密的行距，宽松的间距。
颜色
深色基底，克制绿色强调用于操作和亮点。
图像
清晰的UI裁剪，柔和的阴影，充足的负空间。
交互设计
动效用于解释，而非装饰。按钮悬停时轻微抬起，卡片显示微细节，部分在进入视口时柔和淡入。页面感觉生动而不引人注目。
可访问性和性能
最小16px正文字体大小，强颜色对比，清晰的焦点状态，键盘友好导航。图像优化和延迟加载。动画尊重减少动效偏好。
成果
落地页提高了首屏理解度并减少了注册路径的摩擦。
+28%
英雄区主要CTA点击率
+19%
广告访客页面停留时间
-24%
移动端跳出率
"干净、快速，正是我们想要的语调。新页面终于解释了Auralis，而不碍事。"
交付服务
网站设计、UI/UX设计、视觉方向、交互设计、设计系统设置、交付文档。
使用工具
Figma用于设计和原型制作，Webflow用于构建，轻量级动效用于微交互。