如何用Axure画出Web后台产品的编辑详情页

访客4年前黑客工具877

编辑导语:Web靠山产物的详情页假如需要支持编辑,那么PM该怎么画出原型呢?相信大部门PM可以别离画出详情页和表单页的原型,可是假如在同一个页面中需要暗示表单和详情2种状态,就需要较深的交互拆解思维和Axure利用程度。我们仔细查察上图原型会发明包括这些交互,接下来作者会具体讲授每一步如何通过Axure RP 9画出来。

如何用Axure画出Web靠山产物的编辑详情页

查察对应原型交互地点:

默认显示详情页结果,即查察状态;

点击修改按钮显示表单页结果,即进入编辑状态;

编辑状态下可以修改字段值,同时修改按钮酿成生存和打消按钮;

点击生存按钮,生存并刷新页面数据。点击打消按钮,规复成详情页结果。

如何用Axure画出Web靠山产物的编辑详情页

一、画出默认的查察状态

需要留意必需利用文本元件来暗示字段名和字段值,假如利用表格来展示则很难暗示编辑状态,具体的步调可参考文章:Web靠山产物的详情页类型。

1. 先画字段名

从默认元件库中拖动文本标签到画布中符合位置,修改高度为30px而且中部对齐。

2. 再画字段值

从默认元件库中拖动文本标签到字段名后头的符合位置,修改高度为30px而且中部对齐。

3. 再画修改按钮

从默认元件库中拖动文本标签到字段名后头的符合位置,按照需求画出所有的字段名和字段值,而且保持字段名左侧对齐和字段值左侧对齐。

如何用Axure画出Web靠山产物的编辑详情页

二、画出对应的编辑状态

需要将所有字段值转换为动态面板,并把编辑状态作为第2个状态。

字段“条约编号”的范例是文本,选择对应字段值右键转换为动态面板,然后双击进入添加第2个状态,从默认元件库拖动文本框到画布中,修改成符合尺寸然后辅以提示文字。

如何用Axure画出Web靠山产物的编辑详情页

字段“约按期限”的范例是日期,选择对应字段值右键转换为动态面板,然后双击进入添加第2个状态。

从默认元件库拖动2个文本框到画布中,修改成符合尺寸然后修改范例为日期,然后中间用文本“~”举办毗连。

如何用Axure画出Web靠山产物的编辑详情页

字段“签订时间”的范例是日期,选择对应字段值右键转换为动态面板,然后双击进入添加第2个状态,从默认元件库拖动文本框到画布中,修改成符合尺寸然后修改范例为日期。

如何用Axure画出Web靠山产物的编辑详情页

字段“条约状态”的范例是单选项,选择对应字段值右键转换为动态面板,然后双击进入添加第2个状态,从默认元件库拖动下拉列表框到画布中,修改成符合尺寸然后双击添加相应的选项值。

如何用Axure画出Web靠山产物的编辑详情页

字段“备注”的范例是文本,选择对应字段值右键转换为动态面板,然后双击进入添加第2个状态,从默认元件库拖动多行文本框到画布中,修改成符合尺寸然后辅以提示文字。

如何用Axure画出Web靠山产物的编辑详情页

按钮“修改”的范例是操纵,右键转换为动态面板,然后双击进入添加第2个状态,从默认元件库拖动主要按钮和按钮到画布中,别离作为生存和打消。

如何用Axure画出Web靠山产物的编辑详情页

最后的结果如下图,此时所有的字段值都存在2种状态:查察和编辑。

如何用Axure画出Web靠山产物的编辑详情页

三、点击修改造入编辑状态

双击修改地址的动态面板进入第1个状态,点击“修改”按钮,右侧边栏切换到“交互”,点击“新建交互”按钮,选择“单击时”,添加行动“配置面板状态”;将方才的这些字段值设为第2个状态,将修改按钮也设为第2个状态。

别的思量到备注的多行文本框会盖住修改按钮,所以需要移动该动态面板向下100px阁下。

如何用Axure画出Web靠山产物的编辑详情页

四、点击生存可能打消规复查察状态

相关文章

Web后台产品的列表页规范

Web后台产品的列表页规范

编辑导读:列表页是APP中常见的页面范例之一,它是承接导航页与详情页的中间页。网页端PM需要相识常见列表页的相关类型,本文作者按照多年的履历对通用逻辑和文档类型举办了总结,与各人分享,但愿对你有所开导...