实现新形态和Glassmorphism UI设计

DebugUsery
170 阅读8分钟

实现新形态和玻璃形态的UI设计

一个漂亮的用户界面设计可以帮助提高整体体验和满意度。开发人员有许多方法来确保他们的用户界面设计从其他地方脱颖而出。

本文探讨了如何使用neumorphism和glassmorphism来改变你即将建立的网站的外观和感觉。

你将学到的内容

  • 两种UI设计策略：新形态和玻璃形态。
  • 一个耐人寻味和吸引人的用户界面设计的重要性。
  • 你的页面的各个点要适合每种设计策略。
  • 如何使用这两种设计模式，用CSS和HTML创建一个登录页面。

一个漂亮的用户界面设计的重要性

开发人员建立网站是为了向用户传递信息。你可以使用标记语言开发一个简单的网站，并且仍然可以销售你的服务。

然而，一个好的UI/UX设计会给你的网站增加很多优势。它们包括。

  • 改善用户访问网站时的体验。这为你的访问者树立了良好的第一印象。

  • 由于网站访问者的喜好增加，提高你的网站的搜索引擎优化（SEO）排名。

  • 当你的网站还是新的时候，提升你的网站在互联网上的影响力。

  • 在你的网站上创造一致性，因为用户可以快速找到他们需要的东西。

  • 通过适当的字体和赏心悦目的颜色，使用户更容易浏览。

  • 利用网站的用户界面作为品牌宣传工具，在你和你的用户之间建立信任。

新形式主义

2020年，当neumorphism被应用于UI/UX设计时，它得到了互联网上许多开发者的关注。

尽管如此，新形态主义仍然是新的，其灵感来自于混合了极简主义的skeuomorphism。

一些开发者将新形态主义描述为软性UI，因为它使用光影来呈现其效果。新形态主义使它的UI元素看起来像是被拍在背景上。它们要么是从里面突出来的，要么是嵌在里面的。

使用案例

  • 这种设计模式对使用许多图标的网站来说是有利的，可以增加可访问性。
  • Neumorphism对于设计移动UI图标也是很好的。

设计neumorphism UI

为了创造一个好看的neumorphism效果，使用光影。然后，继续结合不同的盒状阴影和边界半径。

首先，创建一个在ID为<div> 的标签内发现的表单元素login-box 。然后，为表单的子元素创建两个带有input-fields 类的<div> 元素。

<div> 标签将有两个子元素：<label> 和<input> 标签，而登录按钮将有一个<button> 标签。

在CSS文件中，给body的显示值为grid ，并将项目放在center. 这将使登录框移到页面的中心位置。最后，添加一个你选择的背景颜色。

代码将看起来像这样。

body{
 display: grid;
 background: #dee2f1;
 text-align: center;
 place-items: center;
}

现在是时候对表单的<div> 标签进行样式设计，以产生新的变形效果。使用IDlogin-box 访问该元素。

配置width 和height 属性，然后添加一个背景色。设置border-radius 和box-shadow 属性以产生一个椭圆形的输入字段。

必须用两个阴影值来配置box-shadow属性，即浅色和深色阴影，以达到突出的效果。

你的代码应该是这样的。

#login-box{
 width: 350px;
 padding: 50px 45px;
 background: #dee2f1;
 border-radius: 11px;
 box-shadow: -3px -4px 8px #ffaaff73,
 2px 2px 5px #9b9da3;
}

登录框具有一般的新形态效果。

配置input-fields 类的样式，为表单的孩子和输入设置样式。你应该将它们的高度和宽度设置为适合外部的<div> 标签。

外层的div 标签就是有login-box ID的那个。

代码显示如下。

.input-fields{
 height: 65px;
 width: 100%;
 position: relative;
 margin-top: 60px;
}

给border-radius 的值为none ，然后在输入的样式中给box-shadow 属性添加两个inset shadows 。

注意，我删除了轮廓和边框，以防止元素上设置的新变形效果被默认样式覆盖。

最终的代码会是这样的。

.input-fields input{
 height: 100%;
 border: none;
 font-size: 16px;
 background: #dee2f1;
 padding: 0px 10px;
 color: #686869;
 outline: none;
 border-radius: 33px;
 box-shadow: inset 3px 3px 4px #9b9da3,
 inset -6px -6px 12px #ffaaff74;
 width: 100%;
}

Neumorphism UI元素看起来与背景打了补丁，出现在背景中，或者从背景中突出来。

在这种情况下，使login button 突出，因为输入元素看起来是嵌入的。然后，去掉轮廓和边框，赋予它border-radius 和box-shadow 属性。

button{
 margin-top: 80px;
 font-size: 20px;
 line-height: 45px;
 width: 100%;
 font-weight: 700;
 background: #dee2f1;
 border-radius: 30px;
 border: none;
 height: 60px;
 outline: none;
 color: #686869;
 box-shadow: 3px 3px 6px #9b9da3,
 -6px -6px 12px #ffaaff73;
 cursor: pointer;
}

用逗号来分隔box-shadow的两个值。

你可以给输入和按钮元素添加像focus 这样的伪元素，以改变它们在被点击时的行为和样式。

button:focus{
 color: #3688db;
 box-shadow: inset 3px 3px 6px #9b9da3,
 inset -6px -6px 12px #ffaaff73;
}

最后的HTML和CSS文件将包含以下代码。

<body>
 <div id="login-box">
        <form action="#">
            <div class="input-fields">
            <label><p>Email Address</p></label>
            <br>
            <input type="text"  required>
            </div>
             <div class="input-fields">
             <label><p>Password</p></label>
             <br>
             <input type="password" required>
             </div>
            <button>Login</button>
        </form>
    </div>
</body>

html,body{
 height: 100%;
}

*{
 font-family: sans-serif;
 padding: 0;
 box-sizing: border-box;
 margin: 0;
}

body{
 display: grid;
 background: #dee2f1;
 text-align: center;
 place-items: center;
}

#login-box{
 width: 350px;
 padding: 50px 45px;
 background: #dee2f1;
 border-radius: 11px;
 box-shadow: -3px -4px 8px #ffaaff73,
 2px 2px 5px #9b9da3;
}

.input-fields{
 height: 65px;
 width: 100%;
 position: relative;
 margin-top: 60px;
}

.input-fields input{
 height: 100%;
 border: none;
 font-size: 16px;
 background: #dee2f1;
 padding: 0px 10px;
 color: #686869;
 outline: none;
 border-radius: 33px;
 box-shadow: inset 3px 3px 4px #9b9da3,
 inset -6px -6px 12px #ffaaff74;
 width: 100%;
}

.input-fields input:focus{
 box-shadow: inset 2px 2px 1px #9b9da3,
 inset -2px -2px 1px #ffaaff73;
}

.input-fields label{
 position: relative;
 text-align: left;
 pointer-events: none;
 color: #666666;
}

button{
 margin-top: 80px;
 font-size: 20px;
 line-height: 45px;
 width: 100%;
 font-weight: 700;
 background: #dee2f1;
 border-radius: 30px;
 border: none;
 height: 60px;
 outline: none;
 color: #686869;
 box-shadow: 3px 3px 6px #9b9da3,
 -6px -6px 12px #ffaaff73;
 cursor: pointer;
}

button:focus{
 color: #3688db;
 box-shadow: inset 3px 3px 6px #9b9da3,
 inset -6px -6px 12px #ffaaff73;
}

网页将出现如下图所示。

Neumorphism

玻璃形态和它的使用案例

由于neumorphism缺乏适当的可访问性，它的受欢迎程度下降了，这导致了glassmorphism的崛起。

Glassmorphism是一种通用的设计模式，用于在不影响可及性的情况下构建用户界面。它非常适用于设计。

  • 网站登陆页面。
  • 移动应用程序的用户界面。
  • 仪表盘。
  • 应用程序的入职界面。

设计Glassmorphism UI

我们需要给元素设置一个半透明的背景、一个崇高的阴影和一个边框来实现玻璃形态。

另外，给背景添加一个blur 属性，这样后面的东西就会 "变形 "为该元素。

改变背景颜色，然后添加背景和模糊属性。接下来，去掉深色的背景颜色，在背景滤镜属性上添加模糊，以产生一个半透明的背景。

代码应该如下所示。

#login-box{
 width: 350px;
 padding: 50px 45px;
 background: rgba(246, 246, 246, .6);
 backdrop-filter: blur(5px);
 border-radius: 12px;
 -webkit-backdrop-filter: blur(5px);
}

对于body ，添加一个背景图像。我推荐一个具有渐变色流的图像，以产生一个优秀的混合视觉。下面是这方面的代码。

body{
 display: grid;
 background: url(https://cdn.pixabay.com/photo/2021/06/29/06/14/water-drops-6373296__340.jpg);
 background-size: cover;
 text-align: center;
 place-items: center;
}

在主元素上添加背景滤镜属性，以产生玻璃形态的效果。在登录框上使用背景过滤属性，然后删除background-color 和box-shadow 属性。这可以防止阴影阻挡变形效果。

登录框及其子元素的CSS代码将如下所示。注意，我没有包括HTML代码，因为我们将重复使用新变形设计中使用的代码。

*{
 font-family: sans-serif;
 padding: 0;
 box-sizing: border-box;
 margin: 0;
}

html,body{
 height: 100%;
}

body{
 display: grid;
 background: url(https://cdn.pixabay.com/photo/2021/06/29/06/14/water-drops-6373296__340.jpg);
 background-size: cover;
 text-align: center;
 place-items: center;
}
#login-box{
 width: 350px;
 padding: 50px 45px;
 background: rgba(246, 246, 246, .6);
 backdrop-filter: blur(5px);
 border-radius: 12px;
 -webkit-backdrop-filter: blur(5px);
}
.input-fields{
 height: 65px;
 width: 100%;
 position: relative;
 margin-top: 60px;
}
.input-fields input{
 width: 100%;
 outline: none;
 backdrop-filter: blur(5px);
 border: none;
 padding: 0px 10px;
 font-size: 16px;
 background: rgba(246, 246, 246, .6);
 -webkit-backdrop-filter: blur(5px);
 color: #686869;
 border-radius: 30px;
 height: 100%;
}
button{
 margin-top: 80px;
 height: 61px;
 font-size: 21px;
 line-height: 45px;
 font-weight: 700;
 background: rgba(246, 246, 246, .7);
 backdrop-filter: blur(5px);
 border:none;
 border-radius:30px;
 outline: none;
 cursor: pointer;
 color: #686869;
 -webkit-backdrop-filter: blur(5px);
 width: 100%;
}

请注意，我们在元素的背景中使用了一种较浅的颜色。这提高了元素的变形效果。

网页看起来将如下图所示。

glassmorphism

结论

Glassmorphism和neumorphism是UI设计的新趋势。然而，Glassmorphism是最近才被开发者社区接受的。尽管如此，新形态由于其极简的方面，仍将存在一段时间。

幸运的是，有许多glassmorphism和neumorphism UI库，你可以在项目中应用。这些库有助于节省时间，因为你不需要从头开始设计UI元素。

avatar
文章
阅读
粉丝