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

访客3年前黑客工具820

编辑导语: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靠山产物的编辑详情页

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

相关文章

软键盘 (Soft Keyboard) 有哪些需要考量的细节?

软键盘 (Soft Keyboard) 有哪些需要考量的细节?

编辑导语:软键盘(Soft Keyboard),又称虚拟键盘,它并不是真实的物理键盘,而是在屏幕内拥有键盘样式和成果的控件。所以软键盘要比真正的键盘小,并且没有手感很难盲操纵。软键盘与物理键盘有很大的...

获3000万粉丝和760家门店流量扶持的优衣库『亲儿子』,究竟是何方神圣?

获3000万粉丝和760家门店流量扶持的优衣库『亲儿子』,究竟是何方神圣?

编辑导读:3000万粉丝的微信公家号和760家线下门店都是优衣库的小措施的流量来历,优衣库为什么如此重视小措施的建树?本文作者从线上线下的导流配置出发,对优衣库小措施的成果举办了拆解,供各人一同参考进...

做好电商,必须掌握的五个公式

做好电商,必须掌握的五个公式

编辑导语:电商行业在这几年成长迅速,电商行业的各环节运作也逐渐走向正轨,所以学好电商类的常识也是很有须要的;本文作者分享了一些电商人的常用常识,以及电商行业要把握的五个公式,我们一起来看一下。 跟着...

运营面试技巧之系列五:关于裂变,你有什么经验?

运营面试技巧之系列五:关于裂变,你有什么经验?

编辑导语:干货!在运营岗亭口试时,总逃不开这一个问题,裂变!运营人在执行某个勾那时,裂变是个很重要的一点,所以在口试运营这个岗亭的时候,裂变的履历也是十分重要的;本文是作者分享的关于运营口试的几个能力...

拼多多没有价格战

拼多多没有价格战

拼多多的乐成并不是因为价值自制,而是它掘客了那些被人忽视的消费市场,并形成了商品制造-畅通-消费的闭环。消费者想要的永远是更自制的商品,电商平台想要得到持久成长,必需摒弃价值战思维。 “所有的直播带...

产品经理懂点技术(2):产品经理真的要懂微服务么

产品经理懂点技术(2):产品经理真的要懂微服务么

微处事是由业务驱动的,这就意味着业务筹划的优劣会直接影响系统架构的优劣,糟糕的系统架构还将拖业务的后腿,甚至进入恶性轮回。 康威定律 在上文讲微处事架构的由来时,我们引用了马尔文·康威(Melvin...