高保真Axure組件:一套原汁原味的layui風格(附下載地址)
layui是一套經典的模塊化前端框架,由職業前端傾情打造,面向所有層次的前后端程序猿,業界最容易使用的前端UI解決方案。
你可能不知道layui,但是layer你應該是知道的。目前,layer已成為國內最多人使用的web彈層組件,GitHub自然Stars3000+,官網累計下載量達30w+,大概有20萬Web平臺正在使用layer。
感興趣的小伙伴可以去官網看看:http://www.layui.com/
關于這套組件
這套組件是由我制作完成,再交由layui的作者校對其中的細節部分,盡可能原滋原味地還原layui。
官方下載地址:http://res.layui.com/download/axure/layui_web_1.0.9.rplib
1、配色
在原型制作過程中,配色是不能避開的問題,但是為了不影響設計師的設計所以我更推薦灰色系,也就是從#fbfbfb到#c2c2c2之間選取。為了滿足更自由的配色,所以也提供了豐富的提示色和場景色。
2、按鈕
按鈕分為了場景按鈕、尺寸按鈕、帶圖標的按鈕和按鈕組。豐富的提示色和表現形式供你選擇。不過注意:白色的按鈕,為了還原真實的交互效果,所以我把按鈕透明度調低,將圖標放在了按鈕下。使用的時候請按需修改。
3、其他表單原件
其他的輸入框,文本域,單選,復選,下拉菜單我統一稱呼為表單原件。
值得說一說的是下拉菜單:
為了還原layui的交互效果所以我在這里加了略顯復雜又有點雞肋的效果。
甚至我想到,產品人在使用的時候可能會拖動改變了選項的寬度,所以又增加了很多的判斷,姑且叫做“偽自適應”吧:
當然我的目的只是為了使用這套組件的人可以更好的應用。
4、導航
包括水平導航欄和垂直側邊導航(你也可以理解為手風琴效果):
水平導航條
垂直側邊導航欄
5、彈窗
當然說道layui就不能不說說layer了,我最初接觸layui也是從彈窗開始,在layer花樣繁多的彈窗里,我費勁了周折也只能還原它的十分之一:
基本彈窗
圖標彈窗
詢問彈窗
操作提示
消息提示
通知提示
標簽提示
confirm提示
為了方便使用我還增加了一頁演示實例,當然更多的演示你可以在layui的官網找到。
6、手風琴和折疊面板
手風琴和折疊面板很相似,里面也有基本的交互效果和實現方法,需要的小伙伴可以自行閱讀,再做一些自定義的修改。
演示效果:
7、多種選項卡
一共三種選項卡樣式供選擇,包括默認風格tab,簡介tab風格,卡片風格tab:
8、表格樣式
表格樣式包括了layui提供的所有表格,在默認表格中也內置了全選和反選功能:
結語:
在使用過程中有遇到什么問題可以在下面留言。因為時間有限,所以只是盡力還原了layui的效果,有不足之處還請見諒。
這套組件是layui官方授權我制作的,不會以任何形式售賣,官網有下載地址,可以直接下載使用。
#專欄作家#
浩程君,人人都是產品經理專欄作家,簡書:七光年。專注電商領域,擅長交互設計、需求挖掘。
本文原創發布于人人都是產品經理。未經許可,禁止轉載
萬分感謝,在線等
求樓主分享,鏈接失效了
求分享組件庫,320673989@163.com,萬分感謝 ??
樓主,急求,麻煩分享一下,1061243264qq.com感謝????
鏈接失效了,報錯了,求分享,17612911412@163.com,感謝感謝
鏈接失效了,樓主能不能再分享一次 跪謝2205856782@qq.com
這個怎么用的呢,一拖會拖出好幾個元件
鏈接失效了,報錯了,求分享,baungham@163.com,感謝感謝
鏈接失效了,求分享,1543792683@qq.com,感謝感謝
樓主,急求,麻煩分享一下,2296795368@qq.com感謝????
下載鏈接: http://fly.layui.com/download/res/layui_web_1.0.9.rplib
815596380@q q.com謝謝!
好棒,本來還想自己做一套,謝謝分享,2601966278@qq.com
好東西 非常感謝
鏈接失效了,求分享,554275298@qq.com,好人一生平安
鏈接403了,麻煩發我一下好嗎?977661716@qq.com,萬分感謝
厲害
真的很棒,謝謝分享~!
只想說賢心的東西還是很nice的,最近把laytm也開源了,絕對頂他。
折疊面板的綠顏色是什么中繼器?
俺用過這套框架,是做后臺,基于彈窗效果,我想說,堪稱:Nice~
謝謝分享
在原型里面能用?
很實用,感謝~~
謝謝分享,很有用
學習了,謝謝分享
做得很用心,贊
雖然我看下來通篇無感,但還是要贊賞,因為我渴望接下來我要上場可以有求必應!??
允許鼠標觸發交互 即可
ok,3q。晚上替換一下。
另外水平導航欄底部的色塊,是向左滑動顯示,有點奇怪,我改向右后感覺好一點,一點建議
組件很棒!666
還是有很多不足,謝謝你的建議了 ??
地址失效了,能分享一下嗎?happyzj1989@126.com,多謝
你好,鏈接已經失效,能分享一下嗎?1286490242@qq.com,謝謝了,學習學習
按鈕有點小問題,矩形有交互事件,但是按鈕上的圖標沒有,所以鼠標移入的時候指針必須剛好在矩形區域,不然就沒有移入效果