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

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

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

關于這套組件

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

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

1、配色

在原型制作過程中，配色是不能避開的問題，但是為了不影響設計師的設計所以我更推薦灰色系，也就是從#fbfbfb到#c2c2c2之間選取。為了滿足更自由的配色，所以也提供了豐富的提示色和場景色。

2、按鈕

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

3、其他表單原件

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

值得說一說的是下拉菜單：

為了還原layui的交互效果所以我在這里加了略顯復雜又有點雞肋的效果。

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

當然我的目的只是為了使用這套組件的人可以更好的應用。

4、導航

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

水平導航條

垂直側(cè)邊導航欄

5、彈窗

當然說道layui就不能不說說layer了，我最初接觸layui也是從彈窗開始，在layer花樣繁多的彈窗里，我費勁了周折也只能還原它的十分之一：

基本彈窗

圖標彈窗

詢問彈窗

操作提示

消息提示

通知提示

標簽提示

confirm提示

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

6、手風琴和折疊面板

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

演示效果：

7、多種選項卡

一共三種選項卡樣式供選擇，包括默認風格tab，簡介tab風格，卡片風格tab：

8、表格樣式

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

結(jié)語：

在使用過程中有遇到什么問題可以在下面留言。因為時間有限，所以只是盡力還原了layui的效果，有不足之處還請見諒。

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

#專欄作家#

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

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