微信里使用的 H5 頁面是相當(dāng)多，特別是最近開發(fā)內(nèi)測的小程序更是火爆，為了能讓頁面以及微信小程的界面能與微信統(tǒng)一，讓用戶看起來就像是微信內(nèi)置的功能或頁面，建議使用者一個WeUI 前端框架！

它從界面、配色、圖標(biāo)等樣式接近與微信一樣，所以推薦你使用這套界面來設(shè)計你的小程員、網(wǎng)頁商城、 WordPress主題，讓界面更加統(tǒng)一。

0.jpg

框架名稱：WeUI 樣式庫在線演示：https://weui.io

下載地址：https://github.com/weui/weui

Sketch 源文件

同時也推出了 WeUI 的 Sketch 源文件，如果你是設(shè)計師，可以下載這個設(shè)計源文件來設(shè)計新的微信小程序、H5網(wǎng)頁等等，還有 Symbol，很好用哦！

01.jpg

02.jpg

文件格式：.Sketch

素材版權(quán)：免費

下載地址（7MB）：百度網(wǎng)盤 | Github

官方簡述：WeUI 是一套同微信原生視覺體驗一致的基礎(chǔ)樣式庫，由微信官方設(shè)計團隊為微信 Web 開發(fā)量身設(shè)計，可以令用戶的使用感知更加統(tǒng)一。

包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素

下面來看看 WeUI 樣式庫的介紹：

圖標(biāo)

圖標(biāo)的顏色、樣式和微信原生的樣式幾乎一致，看不到有什么區(qū)別哦！

04.jpg

Flex 布局

使用 CSS Flex 屬性定制的布局系統(tǒng)，輕松實現(xiàn)多欄自適應(yīng)排版。

05.jpg

Panel 面板

可以用它來做文章列表、文章圖文列表。

06.jpg

Footer 頁尾樣式

就是網(wǎng)頁頁腳樣式~

07.jpg

提示樣式

09.jpg

10.jpg

菜單

底部Tabbar

11.jpg

Navbar

12.jpg

WeUI頁面層級

用于規(guī)范WeUI頁面元素所屬層級、層級順序及組合規(guī)范。

13.jpg