《axure做商品详情页操作实例》是一篇关于Axure的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Axure技巧;你可以通过此加强操作实例,交互产品,菜单栏组件等多维度案例或实操来进行更多的学习;此教程是由zilin在2021-06-01发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Axure技巧;请给他一个赞吧。
教大家用axure做商品详情页,进行修改可以编辑,一个好的详情页,可以让客户更好的更详细的了解产品宝贝详情页,可以更好的介绍这些产品,为用户提供更大的便利。如何用axure制作详情页,详情往下看:
实例演示:http://www.cainiaoxueyuan.com/wp-content/themes/begin/inc/go.php?url=https://xdvu25.axshare.com/#g=1
需要注意必须使用文本元件来表示字段名和字段值,如果使用表格来展示则很难表示编辑状态,详细的步骤可参考文章:Web后台产品的详情页规范。
从默认元件库中拖动文本标签到画布中合适位置,修改高度为30px并且中部对齐。
从默认元件库中拖动文本标签到字段名后面的合适位置,修改高度为30px并且中部对齐。
从默认元件库中拖动文本标签到字段名后面的合适位置,根据需求画出所有的字段名和字段值,并且保持字段名左侧对齐和字段值左侧对齐。
需要将所有字段值转换为动态面板,并把编辑状态作为第2个状态。
字段“合同编号”的类型是文本,选择对应字段值右键转换为动态面板,然后双击进入添加第2个状态,从默认元件库拖动文本框到画布中,修改成合适尺寸然后辅以提示文字。
字段“约定期限”的类型是日期,选择对应字段值右键转换为动态面板,然后双击进入添加第2个状态。
从默认元件库拖动2个文本框到画布中,修改成合适尺寸然后修改类型为日期,然后中间用文本“~”进行连接。
字段“签订时间”的类型是日期,选择对应字段值右键转换为动态面板,然后双击进入添加第2个状态,从默认元件库拖动文本框到画布中,修改成合适尺寸然后修改类型为日期。
字段“合同状态”的类型是单选项,选择对应字段值右键转换为动态面板,然后双击进入添加第2个状态,从默认元件库拖动下拉列表框到画布中,修改成合适尺寸然后双击添加相应的选项值。
字段“备注”的类型是文本,选择对应字段值右键转换为动态面板,然后双击进入添加第2个状态,从默认元件库拖动多行文本框到画布中,修改成合适尺寸然后辅以提示文字。
按钮“修改”的类型是操作,右键转换为动态面板,然后双击进入添加第2个状态,从默认元件库拖动主要按钮和按钮到画布中,分别作为保存和取消。
最后的效果如下图,此时所有的字段值都存在2种状态:查看和编辑。
双击修改所在的动态面板进入第1个状态,点击“修改”按钮,右侧边栏切换到“交互”,点击“新建交互”按钮,选择“单击时”,添加动作“设置面板状态”;将刚刚的这些字段值设为第2个状态,将修改按钮也设为第2个状态。
另外考虑到备注的多行文本框会挡住修改按钮,所以需要移动该动态面板向下100px左右。
双击修改所在的动态面板进入第2个状态,点击“保存”按钮;右侧边栏切换到“交互”,点击“新建交互”按钮;选择“单击时”,添加动作“打开链接”,选择重新载入页面。
点击“取消”按钮,右侧边栏切换到“交互”,点击“新建交互”按钮,选择“单击时”,添加动作“设置面板状态”。将刚刚的这些字段值设为第1个状态,将修改按钮也设为第1个状态。
另外考虑到备注的多行文本框会挡住修改按钮,所以需要移动该动态面板向上恢复100px左右。
以上就是用axure做产品详情页全部内容介绍了,关于更多axure9教程信息,欢迎关注北极熊素材库,给你带来最丰富的素材图片和最有用的教程,更多最新资讯。
赠人玫瑰,手有余香
< 上一篇 Axure制作APP折叠面板 axure手风琴制作教程操作实例
> 下一篇 axure中继器制作产品列表页面操作实例
2022-06-29 09:46
2022-06-16 09:55
首席设计师
高级视觉设计师
高级插画设计师
输入的验证码不正确
评论区
暂无评论