百度智能小程序設(shè)計(jì)原則-易用性
易用性
用戶在日常使用移動(dòng)設(shè)備時(shí)，由于實(shí)際場(chǎng)景的多樣性，注意力容易分散或暫時(shí)中斷。因此為用戶設(shè)計(jì)小程序的使用流程時(shí)，需要做到：用戶架構(gòu)清晰，流程明確簡(jiǎn)單，并為用戶的每一步操作提供及時(shí)的反饋。
導(dǎo)航架構(gòu)清晰
架構(gòu)連續(xù)的用戶任務(wù)流程，通常使用統(tǒng)一縱向?qū)Ш?/p>
百度小程序框架通過(guò)頂部導(dǎo)航欄，為小程序配備統(tǒng)一的頁(yè)面縱深導(dǎo)航能力。開發(fā)者只需要標(biāo)記定義“首頁(yè)”即可，無(wú)需額外開發(fā)成本，頁(yè)面默認(rèn)返回時(shí)逐層級(jí)返回。
從小程序首頁(yè)開始瀏覽小程序頁(yè)面的經(jīng)典用戶路徑示意（紅線前進(jìn)路徑，藍(lán)線逐級(jí)返回路徑，灰線關(guān)閉路徑）。
頂部導(dǎo)航欄位置始終固定，可以幫助用戶定位“當(dāng)前位置”，以防用戶迷失在小程序流程頁(yè)面中，頂部導(dǎo)航欄名稱應(yīng)體現(xiàn)小程序頁(yè)面的核心內(nèi)容。
正確
標(biāo)題清晰的體現(xiàn)了查詢航班的起點(diǎn)和終點(diǎn)。
錯(cuò)誤
標(biāo)題表達(dá)模糊，必須通過(guò)瀏覽內(nèi)容進(jìn)行思考判斷。
除標(biāo)題文字外，每個(gè)頁(yè)面的頂部導(dǎo)航欄樣式均可進(jìn)行自定義，自定義時(shí)需注意信息的可讀性。（了解更多）
正確
保證可讀性的前提下，可通過(guò)適當(dāng)?shù)念伾钆漭o助品牌定位。
錯(cuò)誤
背景色和前置元素的顏色對(duì)比度較低，會(huì)導(dǎo)致可讀性變差。
架構(gòu)橫向的同級(jí)信息通常使用底部標(biāo)簽欄
當(dāng)用戶在頁(yè)面標(biāo)簽欄切換時(shí)，可在當(dāng)前視圖內(nèi)瀏覽更多同層級(jí)的內(nèi)容，頁(yè)面標(biāo)簽欄本身并不隨頁(yè)面滑動(dòng)。
底部標(biāo)簽導(dǎo)航欄通常在首頁(yè)使用，常駐屏幕底部，提供小程序 2-5 個(gè)頂層視圖的快速切換。
下圖為小程序首頁(yè)的底部標(biāo)簽欄切換示意。
標(biāo)簽欄個(gè)數(shù)、標(biāo)簽欄背景色、選項(xiàng)的圖標(biāo)和文字外均可進(jìn)行自定義，自定義時(shí)請(qǐng)注意信息可讀性。（了解更多）
正確
保證可讀性的前提下，可通過(guò)適當(dāng)?shù)念伾钆漭o助品牌定位。
錯(cuò)誤
背景色和前置元素的顏色對(duì)比度較低，會(huì)導(dǎo)致可讀性變差。
操作流程流暢
考慮使用場(chǎng)景的復(fù)雜性和移動(dòng)設(shè)備屏幕大小的適配問(wèn)題，建議一次只引導(dǎo)用戶做一件事情，并且避免出現(xiàn)任務(wù)路徑外的內(nèi)容打斷用戶流程，從而幫助用戶聚焦當(dāng)前任務(wù)，快速順利完成操作。
請(qǐng)勿在用戶瀏覽目標(biāo)已經(jīng)明確的情況下（藍(lán)線），強(qiáng)行引導(dǎo)用戶中斷原目標(biāo)流程（紅線）。
移動(dòng)設(shè)備屏幕雖然有變大的趨勢(shì)，屏幕精度也在提升，但輸入操作的準(zhǔn)確性并不算高——尤其手機(jī)鍵盤布鍵密集，輸入困難還易引起輸入錯(cuò)誤。因此開發(fā)者在設(shè)計(jì)小程序時(shí)，應(yīng)該充分考慮手機(jī)特性，盡量減少用戶輸入，利用現(xiàn)有接口或其他易操作的選擇控件來(lái)改善用戶輸入的體驗(yàn)。
例：查違章小程序，在選擇汽車類型時(shí)，使用選擇的方式取代了讓用戶直接手動(dòng)輸入，預(yù)期明確，操作也更加便利。
例：智能小程序，在搜索時(shí)會(huì)記錄用戶近期搜索小程序的歷史。
例：百度火車票小程序，在搜索城市時(shí)，跟隨用戶輸入提供關(guān)鍵詞進(jìn)行聯(lián)想。
來(lái)源：百度智能小程序
