百度智能小程序 易用性

易用性

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

導(dǎo)航架構(gòu)清晰

架構(gòu)連續(xù)的用戶任務(wù)流程，通常使用統(tǒng)一縱向?qū)Ш?/h4>

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

從小程序首頁開始瀏覽小程序頁面的經(jīng)典用戶路徑示意（紅線前進(jìn)路徑，藍(lán)線逐級返回路徑，灰線關(guān)閉路徑）。

頂部導(dǎo)航欄位置始終固定，可以幫助用戶定位“當(dāng)前位置”，以防用戶迷失在小程序流程頁面中，頂部導(dǎo)航欄名稱應(yīng)體現(xiàn)小程序頁面的核心內(nèi)容。

正確

標(biāo)題清晰的體現(xiàn)了查詢航班的起點(diǎn)和終點(diǎn)。

錯誤

標(biāo)題表達(dá)模糊，必須通過瀏覽內(nèi)容進(jìn)行思考判斷。

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

正確

保證可讀性的前提下，可通過適當(dāng)?shù)念伾钆漭o助品牌定位。

錯誤

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

架構(gòu)橫向的同級信息通常使用底部標(biāo)簽欄

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

標(biāo)簽欄個數(shù)、標(biāo)簽欄背景色、選項(xiàng)的圖標(biāo)和文字外均可進(jìn)行自定義，自定義時請注意信息可讀性。（了解更多）

正確

保證可讀性的前提下，可通過適當(dāng)?shù)念伾钆漭o助品牌定位。

錯誤

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

操作流程流暢

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

請勿在用戶瀏覽目標(biāo)已經(jīng)明確的情況下（藍(lán)線），強(qiáng)行引導(dǎo)用戶中斷原目標(biāo)流程（紅線）。

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

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

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

例：百度火車票小程序，在搜索城市時，跟隨用戶輸入提供關(guān)鍵詞進(jìn)行聯(lián)想。