元件拖放
矩形、文本、按钮从元件库拖进画布,位置靠吸附定
从空白页面拖出第一版可点原型,交互挂在元件上,改结构不必重做动作
矩形、文本、按钮从元件库拖进画布,位置靠吸附定
选中元件新建交互,事件与动作在同一面板里配
一组内容叠成多个状态,切换时不留痕迹
按预览在浏览器里点,改完再回画布
把三个矩形拖成一张卡片,给按钮加一条单击跳转,按预览就能点。第一版原型十几分钟能出来,剩下的是往里填细节。
四个域名分别从起步、结构、协作与输出四个方向介绍同一个工具。
先搭结构再挂交互,页面改起来才不牵扯。
新建工程先设页面宽高,后面所有元件的坐标都以此为基准;尺寸改晚一次,越界的部分就要重新对齐一遍。
矩形分区块、文本占标题位,颜色与圆角一概先不调,把信息层级摆对之后再填样式,讨论时看的也是结构。
先把最常用的那条路径接通:按钮单击跳到下一页,或在面板状态之间切换,其余分支等主线跑通再补。
元件默认名是编号,交互面板与规格文档里显示的也是它;拖进来就改成登录按钮这种用途名,后面查动作不必逐个点开确认。
标签页与弹层先用动态面板的多个状态表达,一个页面里就能演示两层内容,页码不必跟着翻倍。
按预览在浏览器里点一遍,路径通不通、状态切不切得动,当场看得出来,比在画布上反复自查快。
六组能力分别管骨架、交互、条件、状态、复用与输出。
| 起步动作 | 在哪做 | 做完得到什么 |
|---|---|---|
| 设页面尺寸 | 页面样式面板 | 画布基准 |
| 拖元件摆区块 | 左侧元件库 | 页面骨架 |
| 给元件起名 | 名称输入栏 | 可读的交互对象 |
| 挂第一条交互 | 交互面板 | 能点的按钮 |
| 叠面板状态 | 动态面板 | 两层内容切换 |
| 按预览 | 工具栏预览 | 可点的临时页面 |
版本的改动集中在这几处,与画布上的操作直接相关。
页面宽高与自适应断点在同一处设定,改完即时生效。
放大到两倍摆元件,吸附与对齐的判断不跟着漂。
元件同名时在交互目标里标出来,避免动作指错对象。
改一条交互不必等整个工程重新生成。
画布、元件库、交互面板与页面面板共用同一份工程视图,切换面板不重新加载文件。取包与安装的顺序建议不要颠倒:先把文件取全,再谈组件勾选与文件关联,中途出问题也容易定位。
第一版原型、页面梳理、快速验证与交付演示是最常见的四种用法。
矩形当容器、文本当标题,先摆出区块位置,尺寸与对齐靠网格和吸附定下来,后面往里填内容不必重排。
选中按钮新建交互,选事件、选动作、选目标三步就能让页面跳起来;一个事件下可以挂多个动作并按顺序执行。
把几组内容叠成动态面板的两个状态,用按钮切换,一个页面里就能演示列表与详情两种样子。
按预览在浏览器里点一遍,确认路径通、状态切换正常,再回画布继续加细节。
以上场景按常见使用需求整理,同一套界面在不同团队里的用法会有差别。
Windows 与 macOS 两个桌面平台,功能范围一致。
从空白画布到能点的第一版
打开后先设页面宽高,选一个贴近目标设备的尺寸,宁可小一点也别超出常见屏幕宽度。
用矩形分区、文本占位,先只放五六块,能看出信息层级就够,样式留到结构确认之后。
选按钮新建交互,事件选单击,动作选跳转或切换状态,目标按名字选而不是按编号选。
浏览器里点一遍确认路径通,再回画布调颜色与间距,同时把这一版的改动写进页面注释。
首次打开若提示需要授权或登录,按界面提示走完一次即可,后续启动不会再重复。
问得最多的几件事集中在这一节。
灰块加文字把区块摆出来,主路径能点通,就够拿去讨论了。样式放到结构确认之后再做,否则改一次结构要连带重画很多细节,返工量比先做骨架大得多。
当下没影响,后面有。交互面板里选目标、规格文档里列元件,显示的都是名字;默认编号一多就分不清谁是谁。做完一轮统一改一遍也来得及。
能。页面尺寸是工程设置,改完元件坐标不变,需要重排的只是超出边界的部分,已配好的交互不受影响。
预览是临时在浏览器里打开当前工程,改完再按一次就更新;生成是把工程输出成一整套网页文件,可以拷给别人或放上服务器,对方不必装 Axure。