缺什么补什么:别把原型画成死图

很多转岗产品或交互的同学,Axure 的水平停留在“画线框图”。拖几个矩形、拼一拼表单,就以为掌握了原型工具。可一到评审会上,页面没法切换、弹窗不会控制、列表不能滚动,原型成了一张死图,开发听不懂,业务看不懂。这门课解决的就是“交互逻辑缺失”这个能力缺口。它不纠结于按钮画得多好看,而是逼着你把动态面板、中继器、母版这些核心部件用对,让你做出的原型能点、能滑、能切换,真正模拟出网站和 APP 的真实操作手感。别假装什么都会,如果滑动解锁、视图切换、列表交替背景这些你还得卡半天查文档,那就老老实实跟着补一遍。

先补哪几块:按缺口对号入座

这门课适合已经摸过 Axuse RP8 界面、能画出基础线框,但一碰到交互面板就发懵的同学。建议先看动态面板和中继器这两块。动态面板是原型的灵魂,课程里用轮播广告和 iOS 标签栏视图切换做演示,这正是 APP 原型里最常见、最容易做砸的需求。看完你要明白状态切换的逻辑,而不是照抄步骤。中继器这块,重点看如何给列表项设置交替背景色,这能帮你理解数据驱动的思路,以后做长列表就不会一条条手画。母版和自定义部件样式也要优先看,如果你每次改个按钮颜色还要全选页面逐个修改,说明你根本没用过母版,这块必须补。钢笔和变形工具画图标的内容,适合基础薄弱的同学练手,时间紧的可以略过。

看完能做什么:把资料当脚手架练

学完这门课,你应当能独立搭出一套带完整交互的 APP 高保真原型。比如做一个注册流程,能实现“勾选协议才能点注册”的逻辑控制;做一个内容页,能实现列表上下滑动、底部标签栏切换视图;做一个登录页,能实现第三方登录部件的显示与隐藏。这些不是画在纸上的静态图,而是可以发给同事直接点击体验的交互模型。资料配合练习上,不要光看视频跟着拖拽,一定要脱离教程自己复刻一遍。比如看到滑动解锁那一节,先暂停视频,自己试着用动态面板和边界条件做一次,做卡住了再看视频里的思路。内联框架加载地图和网络视频的技巧,看完后马上找个实际项目里的弹窗或者嵌入页练手,用完才算自己的。原型工具的熟练度是拿鼠标喂出来的,缺哪块补哪块,别让交互逻辑成为你转岗路上的短板。

课程目录

1 部件的交互样式 (15:34)
2 图像选项组的交互应用 (12:39)
3 添加一个自定义部件样式 (04:25)
4 使用动态面板部件制作轮播广告 (19:41)
5 使用VALUE设计动态面板 (06:19)
6 使用内联框架部件加载网络视频 (02:36)
7 使用内联框架加载可交互的百度地图 (09:33)
8 给中继器中的项设置交替背景色 (16:00)
9 同意协议,方可注册会员 (03:29)
10 使用钢笔工具和变形工具绘制小图标 (19:35)
11 iOS APP标签栏视图切换 (09:25)
12 iOS APP标签栏视图切换(补充) (10:59)
13 知乎APP微博登录部件显示与隐藏 (14:37)
14 母版在原型中的应用 (07:59)
15 简单的滑动解锁 (08:49)
16 完整的滑动解锁 (08:30)
17 APP可滚动内容的三种实现方法 (09:50)
18 回到顶部的交互效果 (06:20)
19 手风琴菜单交互 (20:23)
20 制作可交互Switch Button部件 (14:01)
21 会员登录条件判断 (04:54)
22 会员注册多条件判断 (14:20)
23 使用下拉列表项控制动态面板状态 (04:43)
24 全局变量的简单应用 (11:49)
25 账单计算器 (07:13)
26 模拟手机按键输入 (14:17)
27 制作自适应着陆页 (06:09)
28 制作天猫商城商品列表页-1 (18:19)
29 制作天猫商城商品列表页-2 (18:55)
30 制作天猫商城商品列表页-3 (22:13)
31 制作天猫商城商品列表页-4 (01:06)