让微信小程序和页面界面 UI 统一：WeUI 前端样式库（含 Sketch 源文件）
hvmtveljc
8年前
<p>微信里使用的 H5 页面是相当多，特别是最近开发内测的小程序更是火爆，为了能让页面以及微信小程的界面能与微信统一，让用户看起来就像是微信内置的功能或页面，那么建议大家使用设计达网小编推荐的 WeUI前端框架！</p> <p>WeUI由微信官方设计团队制作，从界面、配色、图标等样式接近与微信一样，所以推荐你使用这套界面来设计你的小程员、网页商城、 WordPress主题，让界面更加统一。</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/8c8f3031711cb549ae179b64241d142b.jpg"></p> <p>框架名称：WeUI 样式库</p> <p>在线演示： <a href="/misc/goto?guid=4959717316844729456" rel="nofollow,noindex">https://weui.io</a></p> <p>下载地址： <a href="/misc/goto?guid=4958969285383097799" rel="nofollow,noindex">https://github.com/weui/weui</a></p> <h3><strong>Sketch 源文件</strong></h3> <p>同时也推出了 WeUI 的 Sketch 源文件，如果你是设计师，可以下载这个设计源文件来设计新的微信小程序、H5网页等等，还有 Symbol，很好用哦！</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/4cf459bcc3567953f4674cd074bae5ee.jpg"></p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/27c7f6f63ca782cf50bff19d60860169.jpg"></p> <p>文件格式：.Sketch</p> <p>素材版权：免费</p> <p>下载地址（7MB）： <a href="/misc/goto?guid=4959717316969466254" rel="nofollow,noindex">百度网盘</a> | <a href="/misc/goto?guid=4959717317054666500" rel="nofollow,noindex">Github</a></p> <p>官方简述：WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素</p> <p>下面来看看 WeUI 样式库的介绍：</p> <h2>图标</h2> <p>图标的颜色、样式和微信原生的样式几乎一致，看不到有什么区别哦！</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/76c5af3d18e16bce38f0e32e48fa85d7.jpg"></p> <h3><strong>Flex 布局</strong></h3> <p>使用 CSS Flex 属性定制的布局系统，轻松实现多栏自适应排版。</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/b8aabb680d010de7e8ec729107965a33.jpg"></p> <h3><strong>Panel 面板</strong></h3> <p>可以用它来做文章列表、文章图文列表。</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/862f25cf22a576216685f739d2dceaed.jpg"></p> <h3><strong>Footer 页尾样式</strong></h3> <p>就是网页页脚样式~</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/accc185c2c3aa0f5766655aef665291e.jpg"></p> <h3><strong>提示样式</strong></h3> <p style="text-align: center;"><img src="https://simg.open-open.com/show/da1f591f8223a2087e62e5e6bc65cade.jpg"></p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/0164f6cd8e497f52a6062251b4501f55.jpg"></p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/8368541a8e747e4e2c148a7fe87b36b8.jpg"></p> <h3><strong>菜单</strong></h3> <p>底部Tabbar</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/54293297b8da5e428ad11177d64ec987.jpg"></p> <p>Navbar</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/718d2fc95081184694274a3d13e8a8dd.jpg"></p> <h3><strong>WeUI页面层级</strong></h3> <p>用于规范WeUI页面元素所属层级、层级顺序及组合规范。</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/dcf2453b42f34f8c320535a06b48ae79.jpg"></p> <p> </p> <p>来自：http://www.shejidaren.com/weui.html</p> <p> </p>