layui是一套經(jīng)典的模塊化前端框架，由職業(yè)前端傾情打造，面向所有層次的前后端程序猿，業(yè)界最容易使用的前端UI解決方案。

你可能不知道layui，但是layer你應(yīng)該是知道的。目前，layer已成為國(guó)內(nèi)最多人使用的web彈層組件，GitHub自然Stars3000+，官網(wǎng)累計(jì)下載量達(dá)30w+，大概有20萬(wàn)Web平臺(tái)正在使用layer。

感興趣的小伙伴可以去官網(wǎng)看看：http://www.layui.com/

關(guān)于這套組件

這套組件是由我制作完成，再交由layui的作者校對(duì)其中的細(xì)節(jié)部分，盡可能原滋原味地還原layui。

官方下載地址：http://res.layui.com/download/axure/layui_web_1.0.9.rplib

1、配色

在原型制作過(guò)程中，配色是不能避開(kāi)的問(wèn)題，但是為了不影響設(shè)計(jì)師的設(shè)計(jì)所以我更推薦灰色系，也就是從#fbfbfb到#c2c2c2之間選取。為了滿足更自由的配色，所以也提供了豐富的提示色和場(chǎng)景色。

2、按鈕

按鈕分為了場(chǎng)景按鈕、尺寸按鈕、帶圖標(biāo)的按鈕和按鈕組。豐富的提示色和表現(xiàn)形式供你選擇。不過(guò)注意：白色的按鈕，為了還原真實(shí)的交互效果，所以我把按鈕透明度調(diào)低，將圖標(biāo)放在了按鈕下。使用的時(shí)候請(qǐng)按需修改。

3、其他表單原件

其他的輸入框，文本域，單選，復(fù)選，下拉菜單我統(tǒng)一稱呼為表單原件。

值得說(shuō)一說(shuō)的是下拉菜單：

為了還原layui的交互效果所以我在這里加了略顯復(fù)雜又有點(diǎn)雞肋的效果。

甚至我想到，產(chǎn)品人在使用的時(shí)候可能會(huì)拖動(dòng)改變了選項(xiàng)的寬度，所以又增加了很多的判斷，姑且叫做“偽自適應(yīng)”吧：

當(dāng)然我的目的只是為了使用這套組件的人可以更好的應(yīng)用。

4、導(dǎo)航

包括水平導(dǎo)航欄和垂直側(cè)邊導(dǎo)航（你也可以理解為手風(fēng)琴效果）：

水平導(dǎo)航條

垂直側(cè)邊導(dǎo)航欄

5、彈窗

當(dāng)然說(shuō)道layui就不能不說(shuō)說(shuō)layer了，我最初接觸layui也是從彈窗開(kāi)始，在layer花樣繁多的彈窗里，我費(fèi)勁了周折也只能還原它的十分之一：

基本彈窗

圖標(biāo)彈窗

詢問(wèn)彈窗

操作提示

消息提示

通知提示

標(biāo)簽提示

confirm提示

為了方便使用我還增加了一頁(yè)演示實(shí)例，當(dāng)然更多的演示你可以在layui的官網(wǎng)找到。

6、手風(fēng)琴和折疊面板

手風(fēng)琴和折疊面板很相似，里面也有基本的交互效果和實(shí)現(xiàn)方法，需要的小伙伴可以自行閱讀，再做一些自定義的修改。

演示效果：

7、多種選項(xiàng)卡

一共三種選項(xiàng)卡樣式供選擇，包括默認(rèn)風(fēng)格tab，簡(jiǎn)介tab風(fēng)格，卡片風(fēng)格tab：

8、表格樣式

表格樣式包括了layui提供的所有表格，在默認(rèn)表格中也內(nèi)置了全選和反選功能：

結(jié)語(yǔ)：

在使用過(guò)程中有遇到什么問(wèn)題可以在下面留言。因?yàn)闀r(shí)間有限，所以只是盡力還原了layui的效果，有不足之處還請(qǐng)見(jiàn)諒。

這套組件是layui官方授權(quán)我制作的，不會(huì)以任何形式售賣，官網(wǎng)有下載地址，可以直接下載使用。

#專欄作家#

浩程君，人人都是產(chǎn)品經(jīng)理專欄作家，簡(jiǎn)書(shū)：七光年。專注電商領(lǐng)域，擅長(zhǎng)交互設(shè)計(jì)、需求挖掘。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載