高保真Axure組件:一套原汁原味的layui風格(附下載地址)

54 評論 61147 瀏覽 239 收藏 8 分鐘

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官方授權我制作的,不會以任何形式售賣,官網有下載地址,可以直接下載使用。

#專欄作家#

浩程君,人人都是產品經理專欄作家,簡書:七光年。專注電商領域,擅長交互設計、需求挖掘。

本文原創發布于人人都是產品經理。未經許可,禁止轉載

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 萬分感謝,在線等

    來自廣東 回復
  2. 求樓主分享,鏈接失效了

    來自廣東 回復
  3. 求分享組件庫,320673989@163.com,萬分感謝 ??

    來自廣東 回復
  4. 樓主,急求,麻煩分享一下,1061243264qq.com感謝????

    來自湖北 回復
  5. 鏈接失效了,報錯了,求分享,17612911412@163.com,感謝感謝

    來自浙江 回復
  6. 鏈接失效了,樓主能不能再分享一次 跪謝2205856782@qq.com

    來自北京 回復
  7. 這個怎么用的呢,一拖會拖出好幾個元件

    來自四川 回復
  8. 鏈接失效了,報錯了,求分享,baungham@163.com,感謝感謝

    來自四川 回復
  9. 鏈接失效了,求分享,1543792683@qq.com,感謝感謝

    來自云南 回復
  10. 樓主,急求,麻煩分享一下,2296795368@qq.com感謝????

    回復
  11. 來自福建 回復
  12. 815596380@q q.com謝謝!

    來自北京 回復
  13. 好棒,本來還想自己做一套,謝謝分享,2601966278@qq.com

    來自廣東 回復
  14. 好東西 非常感謝

    來自北京 回復
  15. 鏈接失效了,求分享,554275298@qq.com,好人一生平安

    來自上海 回復
  16. 鏈接403了,麻煩發我一下好嗎?977661716@qq.com,萬分感謝

    來自河北 回復
  17. 厲害

    來自浙江 回復
  18. 真的很棒,謝謝分享~!

    來自福建 回復
  19. 只想說賢心的東西還是很nice的,最近把laytm也開源了,絕對頂他。

    來自江蘇 回復
  20. 折疊面板的綠顏色是什么中繼器?

    來自北京 回復
  21. 俺用過這套框架,是做后臺,基于彈窗效果,我想說,堪稱:Nice~

    來自廣東 回復
  22. 謝謝分享

    來自上海 回復
  23. 在原型里面能用?

    回復
  24. 很實用,感謝~~

    來自上海 回復
  25. 謝謝分享,很有用

    來自廣東 回復
  26. 學習了,謝謝分享

    來自廣東 回復
  27. 做得很用心,贊

    來自北京 回復
  28. 雖然我看下來通篇無感,但還是要贊賞,因為我渴望接下來我要上場可以有求必應!??

    回復
  29. 允許鼠標觸發交互 即可

    來自安徽 回復
    1. ok,3q。晚上替換一下。

      來自上海 回復
    2. 另外水平導航欄底部的色塊,是向左滑動顯示,有點奇怪,我改向右后感覺好一點,一點建議

      來自安徽 回復
    3. 組件很棒!666

      來自安徽 回復
    4. 還是有很多不足,謝謝你的建議了 ??

      來自上海 回復
    5. 地址失效了,能分享一下嗎?happyzj1989@126.com,多謝

      來自浙江 回復
    6. 你好,鏈接已經失效,能分享一下嗎?1286490242@qq.com,謝謝了,學習學習

      來自浙江 回復
  30. 按鈕有點小問題,矩形有交互事件,但是按鈕上的圖標沒有,所以鼠標移入的時候指針必須剛好在矩形區域,不然就沒有移入效果

    來自安徽 回復