在数字化时代,用户界面(UI)设计已经成为产品成功的关键因素之一。一个美观且功能性的登录界面不仅能提升用户体验,还能给用户留下深刻的第一印象。以下,我们将揭秘三款高颜值的UI登录界面设计图,并分析其设计理念,带你领略设计之美。
设计一:极简主义风格
1. 设计特点
- 颜色:以黑白灰为主色调,营造简洁、大气的感觉。
- 布局:界面布局简洁,突出登录按钮和用户输入框。
- 图标:使用扁平化图标,减少视觉负担。
2. 代码实现
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>极简主义登录界面</title>
<style>
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}
.login-container {
width: 300px;
margin: 100px auto;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.login-container input[type="text"],
.login-container input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}
.login-container button {
width: 100%;
padding: 10px;
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="login-container">
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">
<button>登录</button>
</div>
</body>
</html>
设计二:扁平化风格
1. 设计特点
- 颜色:采用鲜明的色彩对比,突出视觉焦点。
- 布局:界面布局紧凑,利用图标和文字引导用户操作。
- 图标:使用扁平化图标,强调功能性和美观性。
2. 代码实现
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>扁平化登录界面</title>
<style>
body {
background-color: #e6e6e6;
font-family: Arial, sans-serif;
}
.login-container {
width: 300px;
margin: 100px auto;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.login-container input[type="text"],
.login-container input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}
.login-container button {
width: 100%;
padding: 10px;
background-color: #0084ff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="login-container">
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">
<button>登录</button>
</div>
</body>
</html>
设计三:层次感风格
1. 设计特点
- 颜色:运用渐变色,营造立体感。
- 布局:界面布局层次分明,突出重点功能。
- 图标:使用立体图标,增强视觉冲击力。
2. 代码实现
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>层次感登录界面</title>
<style>
body {
background-color: #1a1a1a;
font-family: Arial, sans-serif;
}
.login-container {
width: 300px;
margin: 100px auto;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.login-container input[type="text"],
.login-container input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 5px;
}
.login-container button {
width: 100%;
padding: 10px;
background-color: #ff5252;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="login-container">
<input type="text" placeholder="用户名">
<input type="password" placeholder="密码">
<button>登录</button>
</div>
</body>
</html>
以上三款高颜值的UI登录界面设计图,分别展现了极简主义、扁平化和层次感三种不同的设计风格。在实际应用中,我们可以根据自身需求和用户喜好,选择合适的设计风格,打造出美观且实用的登录界面。
