編輯標籤兩邊的工具欄怎麼沒了

工具欄用來展示和方便使用者完成當前頁面的主要操作，俗稱操作欄。

典型應用場景

原型畫法（無互動）

工具欄通常包含多個操作按鈕。位於螢幕底部。

①先畫工具欄背景，從預設元件庫拖動“矩形2”到工作區位置（0，617），修改尺寸為（375，50）。

②再畫操作，從預設元件庫拖動“連結按鈕”到工具欄，雙擊輸入文字“操作”，移動到合適位置。

③再畫2個操作按鈕。

④生成原型HTML並在瀏覽器中檢視效果。

原型畫法（有互動）

工具欄的常見互動效果：

固定位置不隨著頁面內容而移動。方法同狀態列。

每個操作按鈕有不同的互動，需要單獨設定。

高保真原型畫法

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

⑤先畫工具欄背景。從預設元件庫拖動“矩形2”到工作區位置（0，617），修改尺寸為（375，50）。

⑥再畫店鋪文字。從預設元件庫拖動“文字標籤”到工具欄，雙擊輸入文字“店鋪”，修改字型尺寸為12。然後從預設元件庫拖動“圖片”到工具欄，縮放到20*20，移動它們到合適位置。

然後從阿里巴巴向量圖示庫網站

http：//www。iconfont。cn/collections/index

搜尋“店鋪”，找到合適的圖示，下載svg格式。再雙擊店鋪圖片，匯入該svg圖示。並儘量縮放到當時設定的尺寸20*20。

如：需修改圖示的顏色，請選中並右鍵“轉換SVG圖片為形狀”，然後設定它的填充色為紅色#ff0000。

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

⑧再畫加入購物車。從預設元件庫拖動“矩形3”到工具欄的合適位置，修改尺寸到合適大小，雙擊輸入文字“加入購物車”。修改文字顏色為#ffffff，修改填充色為橙色#ffa501，設定圓角半徑100並取消選中“應用到右邊兩個邊框”。

⑨再畫立即購買。修改文字顏色為#ffffff，修改填充色為紅色#fc4537。設定圓角半徑100並取消選中“應用到左邊兩個邊框”。

⑩生成原型HTML並在瀏覽器中檢視效果。

新增到APP元件庫

不同場景下的工具欄功能，操作不一樣，位置是一樣，樣式相對固定。

作者根據多年PM經驗，總結出2種常用的“工具欄”，新增到APP元件庫。

工具欄（文字）

工具欄（圖示）

注意事項

工具欄很少和標籤欄共存於一個頁面中。

工具欄最好有單獨的填充色，方便和頁面其他內容區分。

有時候很容易把工具欄誤認為標籤欄，兩者的區別是標籤欄是承載APP整體的功能模組，而工具欄只是用來承載某一頁面的常見操作。