如何用Axure画出Web后台产品的面包屑组件

面包屑的画法不是很复杂,但是有一些技巧可以减少大量的原型工作量;根据作者的经验提供3种面包屑的原型画法,强烈推荐第三种最省时间且便于修改。

一、面包屑第1种画法

实现原理:每个页面都显示面包屑,那就每个页面画一遍。

原型地址:https://e10t7y.axshare.com

1)从默认元件库拖动“文本标签”到工作区合适位置,双击输入页面名称。

产品经理,产品经理网站

2)从默认元件库拖动“水平线”到工作区合适位置,修改宽度为1000px。

产品经理,产品经理网站

3)重复以上步骤,为每个页面设置面包屑。

产品经理,产品经理网站

4)点击“预览”按钮,然后在浏览器中查看原型效果。

产品经理,产品经理网站

二、面包屑第2种画法

实现原理:每个页面都显示面包屑,那就使用母版然后添加到每个页面,然后根据具体页面进行修改页面名称。

原型地址:https://kjqvgg.axshare.com

1)从默认元件库拖动“文本标签”到工作区合适位置,双击输入文字“页面名称”。

产品经理,产品经理网站

2)从默认元件库拖动“水平线”到工作区合适位置,修改宽度为1000px。

产品经理,产品经理网站

3)同时选择页面名称和水平线,右键点击“切换为母版”,然后设置名称为“面包屑”,点击“继续”按钮。

产品经理,产品经理网站

4)在左侧母版区域,右键母版“面包屑”,点击“添加到页面中…”然后点击“全选”,选中“指定新的位置”并设置为(180,105),最后点击“确定”按钮。

产品经理,产品经理网站

5)进入到首页,右键母版“面包屑”,点击“脱离母版”。

产品经理,产品经理网站

双击元件“页面名称”,修改成首页。

产品经理,产品经理网站

6)进入到页面名称1,右键母版“面包屑”,点击“脱离母版”。

产品经理,产品经理网站

双击元件“页面名称”,修改成“分类名称1 > 页面名称1”。

产品经理,产品经理网站

7)重复以上步骤,为每个页面设置面包屑。

产品经理,产品经理网站

8)点击“预览”按钮,然后在浏览器中查看原型效果。

产品经理,产品经理网站

三、面包屑第3种画法

实现原理:每个页面都显示面包屑,那就使用母版然后添加到每个页面,并且根据函数自动显示相应的页面名称。

原型地址:https://geaas2.axshare.com

1)从默认元件库拖动“文本标签”到工作区合适位置,双击输入文字“页面名称”。

产品经理,产品经理网站

2)从默认元件库拖动“水平线”到工作区合适位置,修改宽度为1000px。

产品经理,产品经理网站

3)点击页面名称,右侧边栏切换到“交互”,点击“新建交互”按钮,选择触发事件“载入时”,添加动作“设置文本”,目标选择“当前元件”,点击fx进入编辑文本弹窗,点击插入变量或函数,搜索page然后找到PageName并点击它,最后点击确定按钮。

产品经理,产品经理网站

4)同时选择页面名称和水平线,右键点击“切换为母版”,然后设置名称为“面包屑”,点击“继续”按钮。

产品经理,产品经理网站

5)在左侧母版区域,右键母版“面包屑”,点击“添加到页面中…”然后点击“全选”,选中“指定新的位置”并设置为(180,105),最后点击“确定”按钮。

产品经理,产品经理网站

6)点击“预览”按钮,然后在浏览器中查看原型效果。

产品经理,产品经理网站

#相关阅读#

如何用Axure画出Web后台产品的菜单栏组件

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

#作者#

浪子,个人微信langzipm,公众号:浪子画原型(langzisay)。专注于Axure原型设计和产品规范。

本文作者 @浪子 。

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部