Neumorphism UI:一款白板风格的Bootstap主题

Neumorphism UI给人的第一印象非常深刻,类似亚克力或雾化拟物风格的UI,总是很吸睛。Neumorphism实现了基于bootstrap的白板风格,并融入了有机形态organic-radius,使之更具现代感和艺术感。

0. 最终效果展示

演示地址: https://demo.themesberg.com/neumorphism-ui/index.html
开源地址: https://github.com/themesberg/neumorphism-ui-bootstrap

1. 截图演示

2. 使用教程

当前作者并没有发布打包的文件,需要自行打包输出。如果集成VUE或其他的,或许可以直接调用scss文件,如果需要打包输出单独的文件,需要下载项目并进行本地打包。

本地打包教程:
准备环境:Node环境
首先下载项目并解压,然后安装glup工具

npm install gulp-cli -g

完成后安装项目依赖包

npm install

打包命令:

gulp build:dist

然后就可以直接在其他地方适用最小化的css文件。

3. 想自定义怎么办?

尽管这个世界上有很多现成的UI样式,然而设计美学一直在变化,不仅大众口味难调,其实每个人都有自己的审美,而且随时间推演品味又不一样。因此,基本上没有绝对完美的,我们只能相互比较和借鉴,至于究竟用谁,还是要看顺手程度了。如有耐心,可以慢慢调校,否则UI设计绝对是永无止境的无底洞。

当前的UI设计,除了以为熟悉的各种组件外,诞生了很多新场景下的组件,比如瀑布流、弹幕、时间线等,当我们关注一些新UI项目时,不难发现,都在朝着完整组件化和完全自定义主题化发展,比如vuetify,很多你熟悉的UI都可以套入进去,这点估计是全网自定义最广泛的一个;再比如京东开源的新UINutUI,全部以组件化的形式设计,意味着往后我们只需要专注原型设计即可快速完成终稿,再也不需要反复调整CSS和HTML标签。

4. 更多免费又好看的UI

  • https://themesberg.com/
  • https://dribbble.com/
  • https://www.behance.net/
  • https://www.pinterest.com/

来源:https://baiyue.one/archives/1744.html

© 版权声明
THE END
点赞0赞赏
分享
评论 抢沙发