讲师中心 微信公众号
AI工具推荐 视频效率加速

墨刀AI怎么做交互原型 页面交互设计操作方法

胖强吖_1675

胖强吖_1675

发布时间:2026-08-20 14:28:16

|

316人浏览过

|

来源于php中文网

原创

墨刀AI可一键生成含按钮跳转、表单校验与页面动效的多页交互原型;需输入含3页名及2+跳转动作的业务描述,再手动重命名排序、配置跳转规则与表单反馈,最后发布为免登录演示链接。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

墨刀ai怎么做交互原型 页面交互设计操作方法 - php中文网

想用墨刀AI快速做出带按钮点击跳转、表单提交反馈、页面间动效的可交互原型,不用写代码,也不用从零拖组件堆砌流程。

用墨刀AI一键生成带交互逻辑的多页原型

打开 modao.cc 登录账号 → 点击「新建项目」→ 选择「AI生成原型」模板。

在提示框中输入含明确页面流转关系的业务描述,例如:“用户在登录页输入手机号和验证码,点击‘登录’后进入首页;首页顶部有‘我的订单’入口,点击跳转至订单列表页;订单页右上角‘+’号可新增订单并返回刷新列表”——【必须出现至少3个页面名称+2个以上具体跳转动作,否则AI仅生成单页】

点击「生成」,等待10秒左右,系统自动创建登录页、首页、订单列表页(可能还附带新增订单弹窗页),每个页面已内置基础组件与默认点击跳转线。

生成完成后,左侧页面列表会显示所有缩略图,右上角弹出「AI优化建议」浮层,点「应用建议」即可批量优化文案和布局间距,这一步操作起来很简单,直接点就行。

手动重命名与排序页面,确保演示逻辑正确

鼠标悬停左侧任一页面缩略图右侧,点击铅笔图标,将默认名称如“Page_1”改为“01_登录页”“02_首页”“03_订单列表”。

拖动缩略图上下调整顺序:墨刀演示模式严格按此排列顺序播放,【若不手动排序,AI生成的页面将按后台时间戳随机排列,客户预览时会先看到订单页再跳回登录页】

重命名只允许使用英文、数字、下划线,禁用中文标点和空格,否则嵌入H5链接时可能触发404错误。

配置页面间跳转与交互细节

方法一:画布内闪电连线(适合快速验证)
切换到「01_登录页」→ 选中「登录」按钮 → 右上角出现小闪电图标 → 按住闪电拖向「02_首页」缩略图 → 松手后弹出面板,选择「点击时→跳转页面→滑入」。

墨刀AI
墨刀AI

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

下载

方法二:全局跳转规则(适合多人协作或后期批量修改)
顶部菜单栏点击「演示」→「跳转规则」→「新建规则」→ 触发条件选「按钮点击」→ 源页面选「01_登录页」→ 目标页面选「02_首页」→ 动效选「滑入」→ 保存。

注意:订单列表页的「+」号按钮若跳转的是弹窗页,需在弹窗页内部再配一个「完成」按钮,跳回「03_订单列表」并勾选「刷新当前页」,否则列表不会更新。

设置表单提交类交互与状态反馈

第一步:在「01_登录页」中,选中手机号输入框 → 右侧属性面板开启「校验规则」→ 类型选「手机号」→ 错误提示文案填“请输入正确的11位手机号”。

第二步:选中「登录」按钮 → 右侧「交互」→「添加交互」→「点击时」→「条件跳转」→ 新建条件:当「手机号」≠空 且 「验证码」≠空 → 跳转至「02_首页」;否则→执行「显示提示框」→ 文案填“请填写完整信息”。

第三步:点击顶部「预览」→ 扫码用手机实测:故意留空验证码,看提示框是否弹出;填全后是否平滑跳转。这一步不能跳过,【AI生成的条件跳转默认不启用校验,必须手动开启并绑定字段】

发布为可分享的交互演示链接

确认所有跳转路径已测试通过,尤其检查表单页的「提交失败」分支是否连到正确提示动作。

点击右上角「发布」按钮 → 弹窗中勾选「启用演示模式」→ 选择「公开链接」或「指定人访问」→ 点击「生成链接」。

复制链接发送给客户或开发,对方无需注册墨刀账号,打开即看真实点击跳转效果。

热门AI工具

更多
WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

蛙蛙写作

一款AI论文写作工具,主要用于超级AI智能写作助手,适合需要提升相关任务效率的用户。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

相关专题

更多
墨刀AI使用教程大全
墨刀AI使用教程大全

PHP中文网墨刀AI专区提供完整使用教程,涵盖AI生成原型、智能对话、草图识别、代码导出等核心功能,从入门到进阶,助你快速掌握AI设计工具,提升产品设计与协作效率,轻松实现从灵感到高保真原型的一键落地。

91

2026.06.26

墨刀AI零基础入门指南
墨刀AI零基础入门指南

PHP中文网推出墨刀AI零基础入门指南与进阶教程合集。从账号注册、界面导览到AI生成原型、智能文档等核心功能,手把手带你从新手快速成长为设计达人,轻松掌握高效产品设计技能!

226

2026.06.26

墨刀设计原型工具使用方法合集
墨刀设计原型工具使用方法合集

PHP中文网墨刀设计原型AI工具专区,汇集从入门到精通的实战教程。涵盖AI生成原型、PPT联动及多人协作等核心技巧,助您快速掌握高效设计方法,轻松实现从灵感到高保真原型的跨越,大幅提升产品设计与团队协作效率。

195

2026.06.26

Aionclaw智能助手介绍
Aionclaw智能助手介绍

本专题汇总了AionClaw(AI龙虾助手)的功能介绍与在线使用入口。AionClaw是杭州趣猿人工智能有限公司推出的桌面级AI智能体,能直接在电脑上读写文件、运行脚本、操作浏览器,自动交付Word、PPT、Excel等成品。

20

2026.09.20

AionClaw AI智能体与电脑自动化任务执行功能使用教程
AionClaw AI智能体与电脑自动化任务执行功能使用教程

AionClaw专题整理AI智能体与电脑自动化相关功能使用教程,涵盖安装部署、AI任务执行、Skills技能、文件处理、浏览器控制、电脑操作、持久记忆、聊天工具连接以及办公、编程和内容创作等功能,帮助用户快速掌握AionClaw的实际使用方法。

0

2026.09.20

AI视频生成软件推荐
AI视频生成软件推荐

本专题汇总了当前主流的AI视频生成软件推荐与排行榜单,涵盖seko、AniShort、剧云、Lovart、LiblibAI及立刻mv等热门工具。同时整理了各软件在文生视频、图生视频、时长限制、画质表现及免费额度等方面的差异对比,助您快速选对适合创作需求的AI视频生成工具。

180

2026.09.16

ai生成视频的工具免费版合集
ai生成视频的工具免费版合集

本专题汇总了当前免费AI生成视频工具的排行榜与推荐清单,涵盖seko、讯飞智作、AniShort及剧云、Lovart等多模型集成平台。同时整理了各工具的免费额度、输出时长、水印政策及适用场景差异,助您快速选择合适工具开启AI视频创作。

100

2026.09.16

Pandas时间序列分析与可视化报表
Pandas时间序列分析与可视化报表

本专题整理Pandas日期转换、时间索引、重采样、滚动窗口、时区处理、plot绘图、Styler表格样式和报表输出方法。

80

2026.09.16

Pandas数据筛选索引与清洗处理
Pandas数据筛选索引与清洗处理

本专题整理Pandas中的loc、iloc、条件筛选、query查询、缺失值处理、重复值删除、类型转换和字符串列清洗方法。

60

2026.09.16

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
墨刀帮助中心
墨刀帮助中心

共0课时 | 0人学习

墨刀帮助中心
墨刀帮助中心

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn