百度智能小程序 層次感

層次感

移動設(shè)備屏幕尺寸相對小，一屏展現(xiàn)的信息非常有限。設(shè)計小程序時，請注意在頁面展現(xiàn)時突出一個重點，幫助用戶快速理解，避免頁面上出現(xiàn)其它與用戶的決策和操作無關(guān)的干擾因素，降低篩選信息的難度。

信息設(shè)計重點明確

設(shè)計界面信息時，請注意根據(jù)內(nèi)容的重要程度設(shè)計其層級主次，以幫助用戶更簡單地獲取所需要的信息和做出判斷?？梢酝ㄟ^更大的字體、更重的文字體量、更明顯的顏色等為內(nèi)容賦予更強的展現(xiàn)。（了解更多）

正確

通過不同的字體大小和排版，使重點信息更突出。

錯誤

主次信息的混排、冗余的文案穿插，讓找關(guān)鍵信息變得困難。

功能操作主次分明

當(dāng)希望對用戶的下一步功能操作進行引導(dǎo)時，應(yīng)為推薦的主操作按鈕設(shè)計更明顯的樣式。（了解更多）

反饋力度強弱適度

在用戶使用小程序時，會出現(xiàn)需要等待的場景。用戶的耐心有限，為避免讓用戶面對一個靜止的屏幕等待未知的結(jié)果，需要對當(dāng)前狀態(tài)及時反饋，告知用戶當(dāng)前小程序仍在正常運作，以此降低用戶使用過程中等待的焦慮感。

1. 框架啟動加載

啟動小程序框架時，加載反饋動畫與百度APP 通用加載動畫不同，更突出小程序的品牌和特性。
此為百度小程序框架通用能力，除 LOGO 和名稱調(diào)用開發(fā)者的小程序信息外，其他視覺動效及交互均由百度小程序框架統(tǒng)一提供，開發(fā)者無需進行額外開發(fā)。

2. 全局加載反饋

百度小程序提供通用加載的組件，也可以由開發(fā)者自己根據(jù)品牌定義加載樣式。但此時無法明確告知具體加載位置和進度，自行設(shè)計時請注意設(shè)計加載動畫，避免頁面靜止從而引起用戶焦慮。

1.加載浮層2.頂部導(dǎo)航欄加載3.開發(fā)者自定義加載樣式（示例）

你可直接使用智能小程序相關(guān)體驗資產(chǎn)。（下載設(shè)計資源 | 查看開發(fā)文檔）

3. 下拉刷新反饋

百度小程序提供通用的下拉刷新組件，使用此組件后，當(dāng)用戶下拉頁面至一定高度時，可以觸發(fā)當(dāng)前頁面的整體刷新。

你可直接使用智能小程序相關(guān)體驗資產(chǎn)。（查看開發(fā)文檔）

4. 用戶選項反饋

用于反饋用戶操作頁面內(nèi)選項的狀態(tài)。（了解更多） 

當(dāng)選擇項較多時，可以使用浮層選擇器承載內(nèi)容。

1.單列選擇器2.時間選擇器3.日期選擇器

操作結(jié)果反饋

同一時間只顯示一個反饋提示，并且應(yīng)該根據(jù)不同的場景和反饋需要的強弱程度選擇不同樣式。

1. 消息提示框

不打斷用戶流程，會自動消失，適用于輕量級的提示。（了解更多）

1.圖文Toast 適用于操作成功反饋。2.純文Toast 適用于情況說明和提醒。

2. 模態(tài)對話框

作為模態(tài)組件，會打斷用戶路徑并分散用戶的注意，請謹慎使用。（了解更多）

1.單按鈕提示框 用于重要信息周知。2.雙按鈕提示框 周知并詢問下一步操作。

3. 全屏結(jié)果頁

在任務(wù)流程的最后一環(huán)，且結(jié)果反饋比較重要時，可使用全屏結(jié)果頁向用戶明確操作結(jié)果，并引導(dǎo)下一步操作。開發(fā)者可以根據(jù)場景需求自行開發(fā)，視覺資源下載也放置了基礎(chǔ)視覺源文件，供快速開發(fā)使用。

1.操作結(jié)果反饋（示例） 2.出錯或內(nèi)容為空（示例）

你可直接使用智能小程序相關(guān)體驗資產(chǎn)。（下載設(shè)計資源 | 查看開發(fā)文檔）