百度智能小程序設(shè)計(jì)原則-層次感
移動(dòng)設(shè)備屏幕尺寸相對(duì)小,一屏展現(xiàn)的信息非常有限。設(shè)計(jì)小程序時(shí),請(qǐng)注意在頁(yè)面展現(xiàn)時(shí)突出一個(gè)重點(diǎn),幫助用戶快速理解,避免頁(yè)面上出現(xiàn)其它與用戶的決策和操作無(wú)關(guān)的干擾因素,降低篩選信息的難度。
信息設(shè)計(jì)重點(diǎn)明確
設(shè)計(jì)界面信息時(shí),請(qǐng)注意根據(jù)內(nèi)容的重要程度設(shè)計(jì)其層級(jí)主次,以幫助用戶更簡(jiǎn)單地獲取所需要的信息和作出判斷??梢酝ㄟ^(guò)更大的字體、更重的文字體量、更明顯的顏色等為內(nèi)容賦予更強(qiáng)的展現(xiàn)。(了解更多)
正確
標(biāo)題文字使用較大字號(hào)、加粗,正文文字使用較小字體,有利于信息的閱讀。
錯(cuò)誤
所有文字都使用較大字號(hào)且加粗,閱讀時(shí)容易分散注意力,影響信息傳遞。
提煉內(nèi)容,精簡(jiǎn)表達(dá),通過(guò)合理的排版突出主次。
正確
通過(guò)不同的字體大小和排版,使重點(diǎn)信息更突出。
錯(cuò)誤
主次信息的混排、冗余的文案穿插,讓找關(guān)鍵信息變得困難。
功能操作主次分明
當(dāng)希望對(duì)用戶的下一步功能操作進(jìn)行引導(dǎo)時(shí),應(yīng)為推薦的主操作按鈕設(shè)計(jì)更明顯的樣式。(了解更多)
正確
對(duì)用戶可能需要進(jìn)行的下一步操作的功能進(jìn)行強(qiáng)化展現(xiàn)。
錯(cuò)誤
按鈕沒(méi)有主次之分,增加用戶選擇判斷成本。
反饋力度強(qiáng)弱適度
在用戶使用小程序時(shí),會(huì)出現(xiàn)需要等待的場(chǎng)景。用戶的耐心有限,為避免讓用戶面對(duì)一個(gè)靜止的屏幕等待未知的結(jié)果,需要對(duì)當(dāng)前狀態(tài)及時(shí)反饋,告知用戶當(dāng)前小程序仍在正常運(yùn)作,以此降低用戶使用過(guò)程中等待的焦慮感。
1. 框架啟動(dòng)加載
啟動(dòng)小程序框架時(shí),加載反饋動(dòng)畫與百度 App 通用加載動(dòng)畫不同,更突出小程序的品牌和特性。
此為百度小程序框架通用能力,除 LOGO 和名稱調(diào)用開(kāi)發(fā)者的小程序信息外,其他視覺(jué)動(dòng)效及交互均由百度小程序框架統(tǒng)一提供,開(kāi)發(fā)者無(wú)需進(jìn)行額外開(kāi)發(fā)。
2. 全局加載反饋
百度小程序提供通用加載的組件,也可以由開(kāi)發(fā)者自己根據(jù)品牌定義加載樣式。但此時(shí)無(wú)法明確告知具體加載位置和進(jìn)度,自行設(shè)計(jì)時(shí)請(qǐng)注意設(shè)計(jì)加載動(dòng)畫,避免頁(yè)面靜止從而引起用戶焦慮。
1.加載浮層
2.頂部導(dǎo)航欄加載
3.開(kāi)發(fā)者自定義加載樣式(示例)
你可直接使用智能小程序相關(guān)體驗(yàn)資產(chǎn)。(下載設(shè)計(jì)資源 | 查看開(kāi)發(fā)文檔)
3. 下拉刷新反饋
百度小程序提供通用的下拉刷新組件,使用此組件后,當(dāng)用戶下拉頁(yè)面至一定高度時(shí),可以觸發(fā)當(dāng)前頁(yè)面的整體刷新。
你可直接使用智能小程序相關(guān)體驗(yàn)資產(chǎn)。(查看開(kāi)發(fā)文檔)
4. 用戶選項(xiàng)反饋
用于反饋用戶操作頁(yè)面內(nèi)選項(xiàng)的狀態(tài)。(了解更多)
多選 Checkbox
單選 Radio
開(kāi)關(guān) Switch
滑動(dòng)選擇條 Slider
當(dāng)選擇項(xiàng)較多時(shí),可以使用浮層選擇器承載內(nèi)容。
1.單列選擇器
2.時(shí)間選擇器
3.日期選擇器
操作結(jié)果反饋
同一時(shí)間只顯示一個(gè)反饋提示,并且應(yīng)該根據(jù)不同的場(chǎng)景和反饋需要的強(qiáng)弱程度選擇不同樣式。
1. 消息提示框
不打斷用戶流程,會(huì)自動(dòng)消失,適用于輕量級(jí)的提示。(了解更多)
1.圖文Toast 適用于操作成功反饋。
2.純文Toast 適用于情況說(shuō)明和提醒。
2. 模態(tài)對(duì)話框
作為模態(tài)組件,會(huì)打斷用戶路徑并分散用戶的注意,請(qǐng)謹(jǐn)慎使用。(了解更多)
1.單按鈕提示框 用于重要信息周知。
2.雙按鈕提示框 周知并詢問(wèn)下一步操作。
3. 全屏結(jié)果頁(yè)
在任務(wù)流程的最后一環(huán),且結(jié)果反饋比較重要時(shí),可使用全屏結(jié)果頁(yè)向用戶明確操作結(jié)果,并引導(dǎo)下一步操作。
開(kāi)發(fā)者可以根據(jù)場(chǎng)景需求自行開(kāi)發(fā),視覺(jué)資源下載也放置了基礎(chǔ)視覺(jué)源文件,供快速開(kāi)發(fā)使用。
1.操作結(jié)果反饋(示例) 2.出錯(cuò)或內(nèi)容為空(示例)
來(lái)源:百度智能小程序