高保真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官方授權我制作的,不會以任何形式售賣,官網有下載地址,可以直接下載使用。
#專欄作家#
浩程君,人人都是產品經理專欄作家,簡書:七光年。專注電商領域,擅長交互設計、需求挖掘。
本文原創發布于人人都是產品經理。未經許可,禁止轉載
大佬可以發一下嗎分享一下layui的元件庫嗎,現在layui已經關閉了,謝謝!2756897814@qq.com
大佬可以發一下嗎分享一下layui的元件庫嗎,現在layui已經關閉了,謝謝!2668432188@qq.com
小哥哥,layui關閉了,,求分享組件庫,71103244@qq.com,希望可以看到,謝謝謝謝
layui官網下架啦,樓主可以分享一下資源嘛,mrs_dongying@163.com
鏈接失效了,求個組件,感謝大佬zhangwenyingkkk@163.com
大佬可以分享一下給我嗎 zhanjixun@qq.com
樓主能麻煩重新分享一下嗎?連接失效了 非常感謝?。?181955851@qq.com
https://fly.layui.com/download/res/layui_web_2.rplib 鏈接 或者點擊:https://www.layui.com/ 導航欄目——周邊有元件下載。
樓主能麻煩重新分享一下嗎?連接失效了 非常感謝??!1093825464@qq.com
樓主能麻煩重新分享一下嗎?連接失效了 非常感謝?。?02751916@163.com
鏈接失效了,求分享個新鏈接,萬分感謝。
為何表單部分還有一些部分不能使用,出現錯誤
求分享:!1220382991@qq.com 感謝!
感謝!??!
https://fly.layui.com/jie/24209/
感謝
https://fly.layui.com/download/res/layui_web_2.rplib
鏈接失效了,跪求發郵箱4939612005@qq.com