起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識APP工具欄如何用Axure畫出來
工具欄用來展示和方便用戶完成當前頁面的主要操作，俗稱操作欄。
典型應用場景
原型畫法（無交互）
工具欄通常包含多個操作按鈕。位于屏幕底部。
①先畫工具欄背景，從默認元件庫拖動“矩形2”到工作區(qū)位置（0,617），修改尺寸為（375,50）。
②再畫操作，從默認元件庫拖動“鏈接按鈕”到工具欄，雙擊輸入文字“操作”，移動到合適位置。
③再畫2個操作按鈕。
④生成原型HTML并在瀏覽器中查看效果。
原型畫法（有交互）
工具欄的常見交互效果：
- 固定位置不隨著頁面內容而移動。方法同狀態(tài)欄。
- 每個操作按鈕有不同的交互，需要單獨設置。
高保真原型畫法
接下來以“淘寶APP-商品詳情-工具欄”為案例，講解高保真原型的詳細畫法。
⑤先畫工具欄背景。從默認元件庫拖動“矩形2”到工作區(qū)位置（0,617），修改尺寸為（375,50）。
⑥再畫店鋪文字。從默認元件庫拖動“文本標簽”到工具欄，雙擊輸入文字“店鋪”，修改字體尺寸為12。然后從默認元件庫拖動“圖片”到工具欄，縮放到20*20，移動它們到合適位置。
然后從阿里巴巴矢量圖標庫網(wǎng)站http://www.iconfont.cn/collections/index搜索“店鋪”，找到合適的圖標，下載svg格式。再雙擊店鋪圖片，導入該svg圖標。并盡量縮放到當時設置的尺寸20*20。
如：需修改圖標的顏色，請選中并右鍵“轉換SVG圖片為形狀”，然后設置它的填充色為紅色#ff0000。
⑦再畫客服和收藏。方法同上。
⑧再畫加入購物車。從默認元件庫拖動“矩形3”到工具欄的合適位置，修改尺寸到合適大小，雙擊輸入文字“加入購物車”。修改文字顏色為#ffffff，修改填充色為橙色#ffa501，設置圓角半徑100并取消選中“應用到右邊兩個邊框”。
⑨再畫立即購買。修改文字顏色為#ffffff，修改填充色為紅色#fc4537。設置圓角半徑100并取消選中“應用到左邊兩個邊框”。
⑩生成原型HTML并在瀏覽器中查看效果。
添加到APP元件庫
不同場景下的工具欄功能，操作不一樣，位置是一樣，樣式相對固定。
作者根據(jù)多年PM經(jīng)驗，總結出2種常用的“工具欄”，添加到APP元件庫。
工具欄（文字）
工具欄（圖標）
注意事項
- 工具欄很少和標簽欄共存于一個頁面中。
- 工具欄最好有單獨的填充色，方便和頁面其他內容區(qū)分。
- 有時候很容易把工具欄誤認為標簽欄，兩者的區(qū)別是標簽欄是承載APP整體的功能模塊，而工具欄只是用來承載某一頁面的常見操作。
提供源文件下載學習https://pan.baidu.com/s/1lOysRY59IOQN7Hhl7jrI3g
相關閱讀
#專欄作家#
浪子，公眾號：浪子畫原型。擅長于APP原型設計和產(chǎn)品架構。
本文由 @浪子 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉載。
題圖來自 Pexels ，基于 CC0 協(xié)議
您好！請問那個原型頂部怎么來的（中聯(lián)聯(lián)通 時間 電量）？
使用Axure自帶的元件即可，你可以關注我的公眾號langzipm或者微信nuanai88，我都寫過教程的。