编辑导语：Web后台产品的详情页如果需要支持编辑，那么PM该怎么画出原型呢？相信大部分PM可以分别画出详情页和表单页的原型，但是如果在同一个页面中需要表示表单和详情2种状态，就需要较深的交互拆解思维和Axure使用水平。我们仔细查看上图原型会发现包含这些交互，接下来作者会详细讲解每一步如何通过Axure RP 9画出来。

查看对应原型交互地址：https://xdvu25.axshare.com

1. 默认显示详情页效果，即查看状态；
2. 点击修改按钮显示表单页效果，即进入编辑状态；
3. 编辑状态下可以修改字段值，同时修改按钮变成保存和取消按钮；
4. 点击保存按钮，保存并刷新页面数据。点击取消按钮，恢复成详情页效果。

一、画出默认的查看状态

需要注意必须使用文本元件来表示字段名和字段值，如果使用表格来展示则很难表示编辑状态，详细的步骤可参考文章：Web后台产品的详情页规范。