微信小程序官方設(shè)計(jì)指南和建議(最新規(guī)范搶先看)-wenkub.com
2025-04-04 23:08 本頁面
【正文】 視覺規(guī)范為方便設(shè)計(jì)師進(jìn)行設(shè)計(jì)，微信提供一套可供Web設(shè)計(jì)和小程序使用的基礎(chǔ)控件庫；同時(shí)提供方便開發(fā)者調(diào)用的資源。利用接口提升性能微信設(shè)計(jì)中心已推出了一套網(wǎng)頁標(biāo)準(zhǔn)控件庫，包括sketch設(shè)計(jì)控件庫和Photoshop設(shè)計(jì)控件庫，后續(xù)還將完善小程序組件，這些控件都已充分考慮了移動端頁面的特點(diǎn)，能夠保證其在移動端頁面上的可用性和操作性能；同時(shí)微信開發(fā)團(tuán)隊(duì)也在不斷完善和擴(kuò)充微信小程序接口，并提供微信公共庫，利用這些資源不但能夠?yàn)橛脩籼峁└涌旖莸姆?wù)，而且對頁面性能的提高有極大作用，無形之中提升了用戶體驗(yàn)。避免誤操作因?yàn)樵谑謾C(jī)上我們通過手指觸摸屏幕來操控界面，手指的點(diǎn)擊精確度遠(yuǎn)不如鼠標(biāo)，因此在設(shè)計(jì)頁面上需點(diǎn)擊的控件時(shí)，需要充分考慮到其熱區(qū)面積，避免由于可點(diǎn)擊區(qū)域過小或過于密集而造成誤操作。除此之外微信團(tuán)隊(duì)還對外開放例如地理位置接口等多種微信小程序接口 ，充分利用這些接口將大大提高用戶輸入的效率和準(zhǔn)確性，進(jìn)而優(yōu)化體驗(yàn)。異常狀態(tài)——表單出錯(cuò)表單報(bào)錯(cuò)，在表單頂部告知錯(cuò)誤原因，并標(biāo)識出錯(cuò)誤字段提示用戶修改三、便捷優(yōu)雅從PC時(shí)代的物理鍵盤鼠標(biāo)到移動端時(shí)代手指，雖然輸入設(shè)備極大精簡，但是手指操作的準(zhǔn)確性卻大大不如鍵盤鼠標(biāo)精確。這種方式最為強(qiáng)烈和明確的告知用戶操作已經(jīng)完成，并可根據(jù)實(shí)際情況給出下一步操作的指引。頁面全局操作結(jié)果——彈出式提示（Toast）彈出式提示（Toast）適用于輕量級的成功提示，并不打斷流程，對用戶影響較小，適用于不需要強(qiáng)調(diào)成功狀態(tài)的操作提醒。根據(jù)實(shí)際情況，可選擇不同的結(jié)果反饋樣式。 無動畫效果的加載很容易讓人產(chǎn)生該界面已經(jīng)卡死的錯(cuò)覺。例如：加載反饋?zhàn)⒁馐马?xiàng) 開發(fā)者也可以使用微信提供的，統(tǒng)一的頁面加載樣式，如圖中例所示。iOS和Android配色方案相同如下展示。當(dāng)用戶在該類頁面做出下拉交互時(shí)，出現(xiàn)微信小程序頁面標(biāo)準(zhǔn)加載動畫。啟動頁除品牌標(biāo)志（Logo）展示外，頁面上的其他所有元素如加載進(jìn)度指示，均由微信統(tǒng)一提供且不能更改，無需開發(fā)者開發(fā)。減少等待，反饋及時(shí)頁面的過長時(shí)間的等待會引起用戶的不良情緒，使用微信小程序項(xiàng)目提供的技術(shù)已能很大程度縮短等待時(shí)間。為確保點(diǎn)擊區(qū)域，標(biāo)簽不得超過4項(xiàng)。并保持不同頁面間導(dǎo)航一致。目前導(dǎo)航欄分深淺兩種基本配色，在iOS和Android展示有所不同，如下圖所示：導(dǎo)航區(qū)（iOS）：導(dǎo)
公司管理相關(guān)推薦
鄂ICP備17016276號-1