工具欄用來(lái)展示和方便用戶完成當(dāng)前頁(yè)面的主要操作，俗稱操作欄。

典型應(yīng)用場(chǎng)景

原型畫法（無(wú)交互）

工具欄通常包含多個(gè)操作按鈕。位于屏幕底部。

①先畫工具欄背景，從默認(rèn)元件庫(kù)拖動(dòng)“矩形2”到工作區(qū)位置（0,617），修改尺寸為（375,50）。

②再畫操作，從默認(rèn)元件庫(kù)拖動(dòng)“鏈接按鈕”到工具欄，雙擊輸入文字“操作”，移動(dòng)到合適位置。

③再畫2個(gè)操作按鈕。

④生成原型HTML并在瀏覽器中查看效果。

原型畫法（有交互）

工具欄的常見(jiàn)交互效果：

• 固定位置不隨著頁(yè)面內(nèi)容而移動(dòng)。方法同狀態(tài)欄。
• 每個(gè)操作按鈕有不同的交互，需要單獨(dú)設(shè)置。

高保真原型畫法

接下來(lái)以“淘寶APP-商品詳情-工具欄”為案例，講解高保真原型的詳細(xì)畫法。

⑤先畫工具欄背景。從默認(rèn)元件庫(kù)拖動(dòng)“矩形2”到工作區(qū)位置（0,617），修改尺寸為（375,50）。

⑥再畫店鋪文字。從默認(rèn)元件庫(kù)拖動(dòng)“文本標(biāo)簽”到工具欄，雙擊輸入文字“店鋪”，修改字體尺寸為12。然后從默認(rèn)元件庫(kù)拖動(dòng)“圖片”到工具欄，縮放到20*20，移動(dòng)它們到合適位置。

然后從阿里巴巴矢量圖標(biāo)庫(kù)網(wǎng)站http://www.iconfont.cn/collections/index搜索“店鋪”，找到合適的圖標(biāo)，下載svg格式。再雙擊店鋪圖片，導(dǎo)入該svg圖標(biāo)。并盡量縮放到當(dāng)時(shí)設(shè)置的尺寸20*20。

如：需修改圖標(biāo)的顏色，請(qǐng)選中并右鍵“轉(zhuǎn)換SVG圖片為形狀”，然后設(shè)置它的填充色為紅色#ff0000。

⑦再畫客服和收藏。方法同上。

⑧再畫加入購(gòu)物車。從默認(rèn)元件庫(kù)拖動(dòng)“矩形3”到工具欄的合適位置，修改尺寸到合適大小，雙擊輸入文字“加入購(gòu)物車”。修改文字顏色為#ffffff，修改填充色為橙色#ffa501，設(shè)置圓角半徑100并取消選中“應(yīng)用到右邊兩個(gè)邊框”。

⑨再畫立即購(gòu)買。修改文字顏色為#ffffff，修改填充色為紅色#fc4537。設(shè)置圓角半徑100并取消選中“應(yīng)用到左邊兩個(gè)邊框”。

⑩生成原型HTML并在瀏覽器中查看效果。

添加到APP元件庫(kù)

不同場(chǎng)景下的工具欄功能，操作不一樣，位置是一樣，樣式相對(duì)固定。

作者根據(jù)多年P(guān)M經(jīng)驗(yàn)，總結(jié)出2種常用的“工具欄”，添加到APP元件庫(kù)。

工具欄（文字）

工具欄（圖標(biāo)）

注意事項(xiàng)

• 工具欄很少和標(biāo)簽欄共存于一個(gè)頁(yè)面中。
• 工具欄最好有單獨(dú)的填充色，方便和頁(yè)面其他內(nèi)容區(qū)分。
• 有時(shí)候很容易把工具欄誤認(rèn)為標(biāo)簽欄，兩者的區(qū)別是標(biāo)簽欄是承載APP整體的功能模塊，而工具欄只是用來(lái)承載某一頁(yè)面的常見(jiàn)操作。

提供源文件下載學(xué)習(xí)https://pan.baidu.com/s/1lOysRY59IOQN7Hhl7jrI3g

相關(guān)閱讀

APP單選功能如何用Axure畫出來(lái)

APP開(kāi)關(guān)功能怎么用Axure畫出來(lái)

APP九宮格如何用Axure畫出來(lái)

APP上導(dǎo)航如何用Axure畫出來(lái)

APP下導(dǎo)航如何通過(guò)Axure畫出來(lái)

常見(jiàn)的列表頁(yè)如何用Axure畫出來(lái)

#專欄作家#

浪子，公眾號(hào)：浪子畫原型。擅長(zhǎng)于APP原型設(shè)計(jì)和產(chǎn)品架構(gòu)。

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

題圖來(lái)自 Pexels ，基于 CC0 協(xié)議