編輯導(dǎo)語：Web后臺(tái)的面包屑組件用來告訴用戶當(dāng)前頁面所處的層級結(jié)構(gòu)，PM一定要了解并學(xué)會(huì)它的原型畫法；本篇文章作者詳細(xì)介紹了如何用Axure畫出Web后臺(tái)產(chǎn)品的面包屑組件。

面包屑的畫法不是很復(fù)雜，但是有一些技巧可以減少大量的原型工作量；根據(jù)作者的經(jīng)驗(yàn)提供3種面包屑的原型畫法，強(qiáng)烈推薦第三種最省時(shí)間且便于修改。

一、面包屑第1種畫法

實(shí)現(xiàn)原理：每個(gè)頁面都顯示面包屑，那就每個(gè)頁面畫一遍。

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

1）從默認(rèn)元件庫拖動(dòng)“文本標(biāo)簽”到工作區(qū)合適位置，雙擊輸入頁面名稱。

2）從默認(rèn)元件庫拖動(dòng)“水平線”到工作區(qū)合適位置，修改寬度為1000px。

3）重復(fù)以上步驟，為每個(gè)頁面設(shè)置面包屑。

4）點(diǎn)擊“預(yù)覽”按鈕，然后在瀏覽器中查看原型效果。

二、面包屑第2種畫法

實(shí)現(xiàn)原理：每個(gè)頁面都顯示面包屑，那就使用母版然后添加到每個(gè)頁面，然后根據(jù)具體頁面進(jìn)行修改頁面名稱。

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

1）從默認(rèn)元件庫拖動(dòng)“文本標(biāo)簽”到工作區(qū)合適位置，雙擊輸入文字“頁面名稱”。

2）從默認(rèn)元件庫拖動(dòng)“水平線”到工作區(qū)合適位置，修改寬度為1000px。

3）同時(shí)選擇頁面名稱和水平線，右鍵點(diǎn)擊“切換為母版”，然后設(shè)置名稱為“面包屑”，點(diǎn)擊“繼續(xù)”按鈕。

4）在左側(cè)母版區(qū)域，右鍵母版“面包屑”，點(diǎn)擊“添加到頁面中…”然后點(diǎn)擊“全選”，選中“指定新的位置”并設(shè)置為(180,105)，最后點(diǎn)擊“確定”按鈕。

5）進(jìn)入到首頁，右鍵母版“面包屑”，點(diǎn)擊“脫離母版”。

雙擊元件“頁面名稱”，修改成首頁。

6）進(jìn)入到頁面名稱1，右鍵母版“面包屑”，點(diǎn)擊“脫離母版”。

雙擊元件“頁面名稱”，修改成“分類名稱1 > 頁面名稱1”。

7）重復(fù)以上步驟，為每個(gè)頁面設(shè)置面包屑。

8）點(diǎn)擊“預(yù)覽”按鈕，然后在瀏覽器中查看原型效果。

三、面包屑第3種畫法

實(shí)現(xiàn)原理：每個(gè)頁面都顯示面包屑，那就使用母版然后添加到每個(gè)頁面，并且根據(jù)函數(shù)自動(dòng)顯示相應(yīng)的頁面名稱。

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

1）從默認(rèn)元件庫拖動(dòng)“文本標(biāo)簽”到工作區(qū)合適位置，雙擊輸入文字“頁面名稱”。

2）從默認(rèn)元件庫拖動(dòng)“水平線”到工作區(qū)合適位置，修改寬度為1000px。

3）點(diǎn)擊頁面名稱，右側(cè)邊欄切換到“交互”，點(diǎn)擊“新建交互”按鈕，選擇觸發(fā)事件“載入時(shí)”，添加動(dòng)作“設(shè)置文本”，目標(biāo)選擇“當(dāng)前元件”，點(diǎn)擊fx進(jìn)入編輯文本彈窗，點(diǎn)擊插入變量或函數(shù)，搜索page然后找到PageName并點(diǎn)擊它，最后點(diǎn)擊確定按鈕。

4）同時(shí)選擇頁面名稱和水平線，右鍵點(diǎn)擊“切換為母版”，然后設(shè)置名稱為“面包屑”，點(diǎn)擊“繼續(xù)”按鈕。

5）在左側(cè)母版區(qū)域，右鍵母版“面包屑”，點(diǎn)擊“添加到頁面中…”然后點(diǎn)擊“全選”，選中“指定新的位置”并設(shè)置為(180,105)，最后點(diǎn)擊“確定”按鈕。

6）點(diǎn)擊“預(yù)覽”按鈕，然后在瀏覽器中查看原型效果。

#相關(guān)閱讀#

如何用Axure畫出Web后臺(tái)產(chǎn)品的菜單欄組件

如何用Axure畫出Web后臺(tái)產(chǎn)品的編輯詳情頁

#專欄作家#

浪子，個(gè)人微信langzipm，公眾號：浪子畫原型(langzisay)。專注于Axure原型設(shè)計(jì)和產(chǎn)品規(guī)范。

本文由 @浪子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議。