axure制作面包屑导航 3种最省时省力面包屑的原型画法

在知道axure如何设置面包屑导航之前，我们来了解一下面包屑在Web起到什么作用，面包屑主要用于为用户提供导航一个网站的次要方法,通过为一个大型多级网站的所有页面提供面包屑路径，用户可以更容易的定位到上一次目录,引导用户通行;axure实现面包屑导航交互，详情往下看：

一、面包屑第1种画法

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

实例演示：https://e10t7y.axshare.com/#id=0b451q&p=%E9%A1%B5%E9%9D%A2%E5%90%8D%E7%A7%B09

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

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

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

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

二、面包屑第2种画法

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

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

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

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

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

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

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

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

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

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

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

三、面包屑第3种画法

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

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

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

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

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

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

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

以上就是axure制作面包屑导航全部内容介绍了，关于更多axure9教程信息，欢迎关注北极熊素材库，给你带来最丰富的素材图片和最有用的教程，更多最新资讯。