HTML & CSS ? 讓微信小程序和頁(yè)面界面 UI 統一:WeUI 前端樣式庫(含 Sketch 源文件)

讓微信小程序和頁(yè)面界面 UI 統一:WeUI 前端樣式庫(含 Sketch 源文件)

發(fā)表于: HTML & CSS, 前端開(kāi)發(fā). 評論
Sponsor

微信里使用的 H5 頁(yè)面是相當多,特別是最近開(kāi)發(fā)內測的小程序更是火爆,為了能讓頁(yè)面以及微信小程的界面能與微信統一,讓用戶(hù)看起來(lái)就像是微信內置的功能或頁(yè)面,那么建議大家使用設計達網(wǎng)小編推薦的 WeUI 前端框架!

WeUI?由微信官方設計團隊制作,從界面、配色、圖標等樣式接近與微信一樣,所以推薦你使用這套界面來(lái)設計你的小程員、網(wǎng)頁(yè)商城、 WordPress主題,讓界面更加統一。

框架名稱(chēng):WeUI 樣式庫
在線(xiàn)演示:https://weui.io
下載地址:https://github.com/weui/weui

Sketch 源文件

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


文件格式:.Sketch
素材版權:免費
下載地址(7MB):百度網(wǎng)盤(pán) | Github
WeUI_sketch組件庫:https://developers.weixin.qq.com/miniprogram/design/#%E8%B5%84%E6%BA%90%E4%B8%8B%E8%BD%BD

官方簡(jiǎn)述:WeUI 是一套同微信原生視覺(jué)體驗一致的基礎樣式庫,由微信官方設計團隊為微信 Web 開(kāi)發(fā)量身設計,可以令用戶(hù)的使用感知更加統一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素

下面來(lái)看看 WeUI 樣式庫的介紹:

圖標

圖標的顏色、樣式和微信原生的樣式幾乎一致,看不到有什么區別哦!

Flex 布局

使用 CSS Flex 屬性定制的布局系統,輕松實(shí)現多欄自適應排版。

Panel 面板

可以用它來(lái)做文章列表、文章圖文列表。

Footer 頁(yè)尾樣式

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

提示樣式

?

菜單

底部Tabbar

Navbar

WeUI頁(yè)面層級

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

需要制作一個(gè)和微信一樣網(wǎng)頁(yè)設計界面么?推薦使用 WeUI 這個(gè)框架,同時(shí)如果不懂如何制作的公司企業(yè),可聯(lián)系設計達人網(wǎng)為你定制!

需要更漂亮的前端框架?推薦查看下面的文章:
一款美麗的Admin后臺界面HTML模板源碼 Light Bootstrap Dashboard
9個(gè)目前流行的Material Design前端框架
維護方便的輕量級UIKIT前端框架

推薦:查看最受歡迎的 301 個(gè)設計網(wǎng)站 → http://hao.shejidaren.com
交流:為設計新人提供的設計交流群,請加入UI設計交流群,分享經(jīng)驗、接單、求職、聊設計。
贊助商鏈接
贊助商鏈接
設計達人微信交流社區:shejidaren888
喜歡這篇文章嗎?歡迎分享到你的微博、QQ群,并關(guān)注我們的微博,謝謝支持。
版權:除非注明,本站文章均為原創(chuàng )文章,轉載請聯(lián)系我們授權,否則禁止轉載。

{ 發(fā)表評論 }