WeUI是一套與微信原生視覺體驗一致的基本樣式庫。微信官方設(shè)計團(tuán)隊為微信網(wǎng)頁和微信小程序量身定制設(shè)計，使用戶感知更加統(tǒng)一，包括button、cell、dialog、progress、toast、article、actionsheet、微信weui開發(fā)團(tuán)隊可以直接使用icon等各種元素。下面資源社區(qū)中WeUI微信小程序組件庫的WeUI設(shè)計規(guī)范和技巧，幫助設(shè)計師快速啟動WeUI的產(chǎn)品設(shè)計。

微信小程序組件設(shè)計規(guī)范

weui的所有頁面，包括嵌入式網(wǎng)頁和插件的小程序，都將在其右上角放置官方的小程序菜單。開發(fā)人員不能定制內(nèi)容，但可以自由選擇顏色匹配的深度來適應(yīng)weui頁面的設(shè)計風(fēng)格。在即時設(shè)計中，可以直接免費使用兩種顏色的weui微信小程序組件庫。

https://js.design/community?category=detail&type=resource&id=61d6e355289f79895479a4f0&source=bz&plan=ysbz2383

1、輕視覺

在設(shè)計WeUI微信小程序時，我們需要盡可能簡化界面。當(dāng)用戶第一次點擊微信小程序時，繁瑣的頁面會影響用戶的第一次體驗。當(dāng)文章、積分等內(nèi)容出現(xiàn)在頁面上時，搜索應(yīng)弱化顯示。因此，搜索可以逐漸從原來的搜索框轉(zhuǎn)變?yōu)橛疑辖堑膱D標(biāo)。當(dāng)有搜索需求時，可以找到，不會給用戶的普通預(yù)覽帶來麻煩。

2、導(dǎo)航欄

微信對導(dǎo)航的官方要求是導(dǎo)航清晰，來去自如。導(dǎo)航是為了確保用戶在微信應(yīng)用程序中瀏覽他們感興趣的內(nèi)容。導(dǎo)航需要告訴用戶目前在哪里，你可以去哪里，以及如何回到初始頁面。微信在小程序中不提供統(tǒng)一的導(dǎo)航欄樣式，開發(fā)人員可以根據(jù)需要設(shè)計微信應(yīng)用程序主頁和二級頁面界面導(dǎo)航。建議所有二級頁面的左上角提供返回上一級頁面的操作。此外，許多具有全屏手勢的操作系統(tǒng)也可以通過界面邊緣向右滑動，返回上一級小程序或微信頁面。

3、彈窗設(shè)置

WeUI頁面整體操作結(jié)果-圖標(biāo)彈出提示圖標(biāo)彈出提示適用于輕量級成功提示，1.5秒后自動消失，不中斷過程，對用戶影響小，適用于不需要強(qiáng)調(diào)的操作提示，如成功提示。特別注意，該形式不適用于錯誤提示，因為錯誤提示需要清楚地告知用戶，因此不適用于閃光彈出提示。

4、按鈕

微信小程序的官方文檔提供了各種按鈕的默認(rèn)風(fēng)格，設(shè)計師可以作為參考。至于實際項目中按鈕的風(fēng)格、顏色和狀態(tài)，可以根據(jù)實際項目進(jìn)行定制。對于熟悉網(wǎng)絡(luò)應(yīng)用設(shè)計規(guī)范的設(shè)計師，特別是iOS平臺軟件設(shè)計，網(wǎng)絡(luò)用戶界面微信小程序設(shè)計容易掌握，只是微信小程序的平臺特點，需要遵循官方設(shè)計規(guī)范，加上網(wǎng)絡(luò)用戶界面微信小程序和許多不完善的功能組件，功能和性能需要進(jìn)一步提高。

5、顏色設(shè)計

搭配時需要先選擇主色，再確定副色。配色目標(biāo)可以根據(jù)產(chǎn)品的特點來確定。副色不能與主色相得益彰。一般選擇主色后，WeUI微信小程序的整體基調(diào)就會確定。但是，副色的使用會影響整體色調(diào)。我們應(yīng)該盡量簡化顏色的層次。過多的層次也會影響用戶的視覺效果。如果一開始不知道如何搭配顏色層次，可以點擊進(jìn)入即時設(shè)計，看看資源社區(qū)其他設(shè)計師是如何設(shè)計WeUI微信小程序模板的，不僅可以作為靈感材料的參考，還可以一鍵直接使用。

6、狀態(tài)欄

根據(jù)微信小程序的官方文檔，不需要設(shè)計狀態(tài)欄，因為狀態(tài)欄遵循每個手機(jī)操作系統(tǒng)。例如，內(nèi)容區(qū)域，小程序膠囊，狀態(tài)欄不需要設(shè)計。設(shè)計師只需要根據(jù)需要使用安卓和iOS兩個狀態(tài)欄組件。