Giter Site home page Giter Site logo

shadecraft's Introduction


目录

  • 什么是Neumorphism?
  • 什么是ShadeCraft?
  • 作品示例
  • 组件展示
  • 组件列表
  • 感谢Neumorphism UI设计师

什么是Neumorphism?

Neumorphism是一种虚拟设计趋势,也叫“新拟态”或“新拟物”。它是一种将平面设计和现实世界元素结合起来的设计风格,带有立体感和柔和的灰影,并且使用明暗高光效果来模拟表面的质感。
 
Neumorphism风格的结构如下:



主要有三个样式组成,1 个背景+ 2 个投影。在这个基础上,通过改变颜色和大小参数来达到不同效果。

什么是ShadeCraft?

ShadeCraft是一个Neumorphism风格的Compose组件库。便于开发者快速编写Neumorphism风格的APP。
每个设计元素都呈现出柔软而立体的质感,仿佛随时可以触摸到舒适的触感。阴影渐变和柔和的边缘效果勾勒出元素的深度和层次感,仿佛将它们从平面世界中解放出来。同时,这些元素还保持着手工制作的细腻质感,像是由精细的工匠用心打磨而成。

作品示例

组件展示

组件都可以调整亮光、阴影的偏移量、颜色以及模糊程度,以达到想要的效果。

image1 image2 image3

image1 image2 image3

image1 image2 image3

image1 image2 image2

image1 image2 image3

image1 image2 image3

image1 image2 image3

image1 image1

组件列表

  • ShadeButton
  • ShadeCalorVerticalProgress
  • ShadeCard
  • ShadeCircleProgressConcave
  • ShadeCircleProgressConvex
  • ShadeCircleProgressMixed
  • ShadeIconButton
  • ShadeImageButton
  • ShadeLight
  • ShadeLinearProgressIndicator
  • ShadeRadioButton
  • ShadeScaleOption
  • ShadeSearchBar
  • ShadeSlider
  • ShadeTabElevated
  • ShadeTabPathBar
  • ShadeTabRow
  • ShadeTimepiece
  • ShadeToggle
  • ShadeToggleConcave
  • ShadeValueIndicator
  • ShadeWaterRipple
  • ShadeWaveProgress

感谢Neumorphism UI设计师

本项目中的界面示例参考了很多优秀设计师的设计作品,他们都非常优秀和专业,非常感谢他们的设计。

shadecraft's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.