微信WeUI設(shè)計(jì)規(guī)范文件下載及使用方法

2 評(píng)論 136110 瀏覽 105 收藏 3 分鐘

WeUI是一套同微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫，由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信 Web 開發(fā)量身設(shè)計(jì)，可以令用戶的使用感知更加統(tǒng)一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

預(yù)覽及說明

預(yù)覽地址：http://weui.github.io/weui/

詳細(xì)說明：從微信WeUI設(shè)計(jì)規(guī)范，解讀移動(dòng)界面設(shè)計(jì)

視覺標(biāo)準(zhǔn)

WeUI-Sketch

下載及使用

1、微信關(guān)注“起點(diǎn)學(xué)院”服務(wù)號(hào)（掃描二維碼立即關(guān)注）；

起點(diǎn)學(xué)院服務(wù)號(hào)二維碼

2、回復(fù)關(guān)鍵詞“微信設(shè)計(jì)規(guī)范”至【起點(diǎn)學(xué)院】服務(wù)號(hào)后臺(tái)即可獲取下載地址。

下載后，只需要在頁面中引入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>

開發(fā)

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

cd weui

npm install -g gulp

npm install

npm start

運(yùn)行npm start命令，會(huì)監(jiān)聽src目錄下所有文件的變更，并且默認(rèn)會(huì)在8080端口啟動(dòng)服務(wù)器，然后在瀏覽器打開http://localhost:8080/example。

第三方擴(kuò)展

文檔

WeUI 說明文檔參考 Wiki

License

The MIT License(http://opensource.org/licenses/MIT) 請(qǐng)自由地享受和參與開源

 

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

更多精彩內(nèi)容，請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
Nairo
人人都是產(chǎn)品經(jīng)理內(nèi)容運(yùn)營團(tuán)隊(duì)
1408篇作品 38852182總閱讀量
09-262082 瀏覽
離線數(shù)據(jù)單表集成設(shè)計(jì)詳解
05-174625 瀏覽
探索手機(jī)銀行的適老化設(shè)計(jì)
08-311577 瀏覽
東方甄選淘寶首秀，有什么不一樣？
08-252732 瀏覽
一定會(huì)問到，但不好回答的產(chǎn)品經(jīng)理面試題（二）（附答案）
01-317057 瀏覽
TikTok的“垃圾化”與平臺(tái)的消亡
評(píng)論
評(píng)論請(qǐng)登錄

  1. 加了微信也回的微云的地址已經(jīng)過期無法下載。可不可以發(fā)下郵箱呢: ios@txidea.com

    來自中國 回復(fù)

  2. 下載不了。

    來自中國 回復(fù)