正文

揭秘3款高颜值UI登录界面设计图，带你领略设计之美

/0 浏览量
0325

在数字化时代，用户界面（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登录界面设计图，分别展现了极简主义、扁平化和层次感三种不同的设计风格。在实际应用中，我们可以根据自身需求和用户喜好，选择合适的设计风格，打造出美观且实用的登录界面。

-- 展开阅读全文 --