微信導(dǎo)航欄
微信導(dǎo)航欄 ， 直接繼承于客戶端 ， 除導(dǎo)航欄顏色之外 ， 開發(fā)者無需亦不可對(duì)其中的內(nèi)容進(jìn)行自定義 。但開發(fā)者需要規(guī)定小程序各個(gè)頁面的跳轉(zhuǎn)關(guān)系 ， 讓導(dǎo)航系統(tǒng)能夠以合理的方式工作 。
微信導(dǎo)航欄分為導(dǎo)航區(qū)域、標(biāo)題區(qū)域以及操作區(qū)域 。其中導(dǎo)航區(qū)控制程序頁面進(jìn)程 。目前導(dǎo)航欄分深淺兩種基本配色 。
導(dǎo)航區(qū)（iOS）
導(dǎo)航區(qū)通常只有一個(gè)操作 ， 即返回上一級(jí)界面 。
導(dǎo)航區(qū)（Android）
同iOS一樣 ， 導(dǎo)航區(qū)也只有一個(gè)返回上一級(jí)頁面的操作 ， 而點(diǎn)擊安卓手機(jī)自帶的硬件返回鍵也起到相同作用 。
微信
微信導(dǎo)航欄自定義顏色規(guī)則（iOS和Android）
小程序?qū)Ш綑谥С只镜谋尘邦伾远x功能 ， 選擇的顏色需要在滿足可用性前提下 ， 和諧搭配微信提供的兩套主導(dǎo)航欄圖標(biāo) 。建議參考以下選色效果：
選色方案示例
微信
頁面內(nèi)導(dǎo)航
開發(fā)者可根據(jù)自身功能設(shè)計(jì)需要在頁面內(nèi)添加自有導(dǎo)航 。并保持不同頁面間導(dǎo)航一致 。但是受限于手機(jī)屏幕尺寸的限制 ， 小程序頁面的導(dǎo)航應(yīng)盡量簡(jiǎn)單 ， 若僅為一般線性瀏覽的頁面建議僅使用微信導(dǎo)航欄即可 。
開發(fā)者可選擇小程序頁面添加標(biāo)簽分頁（Tab）導(dǎo)航 。標(biāo)簽分頁欄可固定在頁面頂部或者底部 ， 便于用戶在不同的分頁間做切換 。標(biāo)簽數(shù)量不得少于2個(gè) ， 最多不得超過5個(gè) ， 為確保點(diǎn)擊區(qū)域 ， 建議標(biāo)簽數(shù)量不超過4項(xiàng) 。一個(gè)頁面也不應(yīng)出現(xiàn)一組以上的標(biāo)簽分頁欄 。
其中小程序首頁可選擇微信提供的原生底部標(biāo)簽分頁樣式 ， 該樣式僅供小程序首頁使用 。開發(fā)時(shí)可自定義圖標(biāo)樣式、標(biāo)簽文案以及文案顏色等 ， 具體設(shè)置項(xiàng)可參考開發(fā)文檔 。
微信
頂部標(biāo)簽分頁欄顏色可自定義 。在自定義顏色選擇中 ， 務(wù)必注意保持分頁欄標(biāo)簽的可用性、可視性和可操作性 。
微信
微信
頁面內(nèi)加載反饋
開發(fā)者可在小程序里自定義頁面內(nèi)容的加載樣式 。建議不管是使用在局部還是全體 ， 自定義加載樣式都應(yīng)該盡可能簡(jiǎn)潔 ， 并使用簡(jiǎn)單動(dòng)畫告知用戶加載過程 。開發(fā)者也可以使用微信提供的 ， 統(tǒng)一的頁面加載樣式 ， 如圖中例所示 。
微信
模態(tài)加載
模態(tài)的加載樣式將覆蓋整個(gè)頁面的 ， 由于無法明確告知具體加載的位置或內(nèi)容將可能引起用戶的焦慮感 ， 因此應(yīng)謹(jǐn)慎使用 。除了在某些全局性操作下不要使用模態(tài)的加載 。
微信
【微信小程序怎么設(shè)計(jì)圖文步驟】局部加載反饋
即只在觸發(fā)加載的頁面局部進(jìn)行反饋 ， 這樣的反饋機(jī)制更加有針對(duì)性 ， 頁面改動(dòng)小 ， 是微信推薦的反饋方式 。例如：
微信
加載反饋?zhàn)⒁馐马?xiàng)
若載入時(shí)間較長(zhǎng) ， 應(yīng)提供取消操作 ， 并使用進(jìn)度條顯示載入的進(jìn)度 。
載入過程中 ， 應(yīng)保持動(dòng)畫效果 ; 無動(dòng)畫效果的加載很容易讓人產(chǎn)生該界面已經(jīng)卡死的錯(cuò)覺 。
推薦閱讀
- 你的小8為什么沒有信號(hào)
- 微信群怎么拍一拍好友
- 家道小康打一生肖
- 小狗狗可以吃貓糧嗎
- 小狗幾個(gè)月訓(xùn)練大小便
- 小米9se怎么錄屏? 小米9se錄屏方法介紹
- 大同小異打一數(shù)學(xué)術(shù)語
- 小班群老師自我介紹
- 微信系統(tǒng)處于通話狀態(tài)怎么關(guān)閉
- 手機(jī)微信密碼忘記了怎么解決