微信WeUI设计规范文件下载及使用方法

Nairo
2 评论 136283 浏览 105 收藏 3 分钟
大厂导师团亲自授课,超过200小时的精品课程,从0到1为你构建“产品+业务”的复合型知识体系,让你在职场竞争中脱颖而出。

WeUI是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信 Web 开发量身设计,可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

预览及说明

预览地址:http://weui.github.io/weui/

详细说明:从微信WeUI设计规范,解读移动界面设计

视觉标准

WeUI-Sketch

下载及使用

1、微信关注“起点学院”服务号(扫描二维码立即关注);

起点学院服务号二维码

2、回复关键词“微信设计规范”至【起点学院】服务号后台即可获取下载地址。

下载后,只需要在页面中引入dist/style/weui.css或者dist/style/weui.min.css其中之一即可。 例如:

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<meta name=”viewport” content=”width=device-width,initial-scale=1,user-scalable=0″>

<title>WeUI</title>

<link rel=”stylesheet” href=”path/to/weui/dist/style/weui.min.css”/>

</head>

<body>

</body>

</html>

开发

git clone https://github.com/weui/weui.git

cd weui

npm install -g gulp

npm install

npm start

运行npm start命令,会监听src目录下所有文件的变更,并且默认会在8080端口启动服务器,然后在浏览器打开http://localhost:8080/example。

第三方扩展

文档

WeUI 说明文档参考 Wiki

License

The MIT License(http://opensource.org/licenses/MIT) 请自由地享受和参与开源

 

原文地址:https://github.com/weui/weui

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 加了微信也回的微云的地址已经过期无法下载。可不可以发下邮箱呢: ios@txidea.com

    来自中国 回复
  2. 下载不了。

    来自中国 回复
专题
12749人已学习14篇文章
近年来,盲盒大量出现在公众视野,引起了一波又一波消费热潮。本专题的文章分享了解读盲盒营销。
专题
18490人已学习13篇文章
电商平台为了促销或者扩大知名度,经常会设计或大或小的活动,用户完成任务即可获得奖励,以此来提高用户的活跃度和增加销量。本专题的文章分享了电商平台营销活动设计。
专题
11876人已学习12篇文章
任何理论都有它的局限性和前提条件,没有一种方法论是永远有效的。品牌方法论一直处在变化阶段,它随着时代发展的变化而变化。本专题的文章分享了品牌方法论。
专题
13069人已学习13篇文章
产品经理在日常工作中,除了要跟进和把控产品的整体流程以外,也要对产品后续的销售策略进行规划;销售策略的规划可以让产品经理对于用户的场景以及体验等更加熟悉。本专题的文章分享了产品的销售策略。
专题
12912人已学习12篇文章
随着互联网在大众生活中的不断普及与深入发展,互联网医疗这一全新的医疗健康服务业态发展趋势向好。本专题的文章分享了互联网医疗行业分析和竞品分析报告。
专题
19087人已学习12篇文章
如何设计出一个抓住他人眼球的feed流 ?feed流的组成元素以及常见的feed流样式?本专题的文章提供了对于feed流设计的思考。