百度智能小程序 易用性

易用性

用戶在日常使用移動設備時，由于實際場景的多樣性，注意力容易分散或暫時中斷。因此為用戶設計小程序的使用流程時，需要做到：用戶架構清晰，流程明確簡單，并為用戶的每一步操作提供及時的反饋。

導航架構清晰

架構連續(xù)的用戶任務流程，通常使用統一縱向導航

百度小程序框架通過頂部導航欄，為小程序配備統一的頁面縱深導航能力。開發(fā)者只需要標記定義“首頁”即可，無需額外開發(fā)成本，頁面默認返回時逐層級返回。

從小程序首頁開始瀏覽小程序頁面的經典用戶路徑示意（紅線前進路徑，藍線逐級返回路徑，灰線關閉路徑）。

頂部導航欄位置始終固定，可以幫助用戶定位“當前位置”，以防用戶迷失在小程序流程頁面中，頂部導航欄名稱應體現小程序頁面的核心內容。

正確

標題清晰的體現了查詢航班的起點和終點。

錯誤

標題表達模糊，必須通過瀏覽內容進行思考判斷。

除標題文字外，每個頁面的頂部導航欄樣式均可進行自定義，自定義時需注意信息的可讀性。（了解更多）

正確

保證可讀性的前提下，可通過適當的顏色搭配輔助品牌定位。

錯誤

背景色和前置元素的顏色對比度較低，會導致可讀性變差。

架構橫向的同級信息通常使用底部標簽欄

• 當用戶在頁面標簽欄切換時，可在當前視圖內瀏覽更多同層級的內容，頁面標簽欄本身并不隨頁面滑動。
• 底部標簽導航欄通常在首頁使用，常駐屏幕底部，提供小程序 2-5 個頂層視圖的快速切換。
• 下圖為小程序首頁的底部標簽欄切換示意。

標簽欄個數、標簽欄背景色、選項的圖標和文字外均可進行自定義，自定義時請注意信息可讀性。（了解更多）

正確

保證可讀性的前提下，可通過適當的顏色搭配輔助品牌定位。

錯誤

背景色和前置元素的顏色對比度較低，會導致可讀性變差。

操作流程流暢

考慮使用場景的復雜性和移動設備屏幕大小的適配問題，建議一次只引導用戶做一件事情，并且避免出現任務路徑外的內容打斷用戶流程，從而幫助用戶聚焦當前任務，快速順利完成操作。

請勿在用戶瀏覽目標已經明確的情況下（藍線），強行引導用戶中斷原目標流程（紅線）。

移動設備屏幕雖然有變大的趨勢，屏幕精度也在提升，但輸入操作的準確性并不算高——尤其手機鍵盤布鍵密集，輸入困難還易引起輸入錯誤。因此開發(fā)者在設計小程序時，應該充分考慮手機特性，盡量減少用戶輸入，利用現有接口或其他易操作的選擇控件來改善用戶輸入的體驗。

例：查違章小程序，在選擇汽車類型時，使用選擇的方式取代了讓用戶直接手動輸入，預期明確，操作也更加便利。

例：智能小程序，在搜索時會記錄用戶近期搜索小程序的歷史。

例：百度火車票小程序，在搜索城市時，跟隨用戶輸入提供關鍵詞進行聯想。