让微信小程序和页面界面 UI 统一:WeUI 前端样式库(含 Sketch 源文件)
<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>
本文由用户 hvmtveljc 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
转载本站原创文章,请注明出处,并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台,欢迎各类分享!