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

访客3年前黑客工具821

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

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

相关文章

如何远程操控别人的手机(咋远程控制别人的手机)

如何远程操控别人的手机(咋远程控制别人的手机)

本文目录一览: 1、如何手机远程控制另一部手机 2、如何用自己的手机远程控制别人的手机? 3、如何远程控制别人的智能手机进行操作? 4、手机怎样远程控制手机 5、怎么用手机远程控制别的...

黑客打蜘蛛动画(flash动画杀蜘蛛)

黑客打蜘蛛动画(flash动画杀蜘蛛)

本文目录一览: 1、有一个欧美科幻片在外星球上打很多蜘蛛似的怪物 2、血色星期一第二季最后一集的内容 3、PSP恶夜杀机2攻略 有一个欧美科幻片在外星球上打很多蜘蛛似的怪物 该电影先后拍摄了...

微信实名认证不绑定银行卡可以吗(微信第一次绑定银行卡)

  请登录微信,“我”=“钱包”=“点击右上角三点”=“支付管理”=“忘记支付密码”=“选择银行卡”=“根据提示填写银行卡卡号、姓名、预留手机号码等相关信息”=“输入短信验证码”=“重置密码”;   ...

黑客模拟器苹果版,谁认识黑客的联系,找怎么找黑客

$html.= $apikey; max-lease-time 7200;CredCrack的规划初衷,便是为了便利安全审计人员在进行安全审计活动中获取网络管理员的账户凭据。 这个程序在我进行安全审计...

黑客职责(黑客的目的)

黑客职责(黑客的目的)

本文导读目录: 1、黑客主要的工作是做什么的······ 2、黑客是什么,能做什么 3、程序员和黑客有什么区别?? 4、黑客与程序员的区别? 5、计算机黑客定义 6、黑客与普通程序...

一套完整的外贸网站SEO优化流程

很多运营优化外贸网站的朋友面临过或正在面临以下的问题:刚接手一个外贸网站,该从哪里下手呢?内容,关键词还是其他? 网站优化过程中,思路突然卡壳了,不知道下一步该怎么办?网站关键词上排名了,不知道为什么...