<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>色彩心理学在UI设计中的应用 - 3S教室</title>
    <meta name="description" content="色彩的情感暗示 红色 - 激情与行动 红色能激发能量，常用于： 促销活动 重要按钮 警告提示 蓝色 - 信任与专业 蓝色是科技公司最爱，传递： 专业感 可信赖 冷静稳重 绿色 - 自然与成功 绿色代表： 环保、健康 成功...">
    <meta name="keywords" content="3S教室, Tangman, UI设计, 设计基础">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://3scd.com/article.php?id=11111119">
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    <meta property="og:type" content="article">
    <meta property="og:title" content="色彩心理学在UI设计中的应用">
    <meta property="og:description" content="色彩的情感暗示 红色 - 激情与行动 红色能激发能量，常用于： 促销活动 重要按钮 警告提示 蓝色 - 信任与专业 蓝色是科技公司最爱，传递： 专业感 可信赖 冷静稳重 绿色 - 自然与成功 绿色代表： 环保、健康 成功...">
    <meta property="og:url" content="https://3scd.com/article.php?id=11111119">
    <meta property="og:site_name" content="3S教室">
    <meta property="article:published_time" content="2026-05-13">
    <meta property="article:author" content="3S教室">
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Article",
        "headline": "色彩心理学在UI设计中的应用",
        "description": "色彩的情感暗示 红色 - 激情与行动 红色能激发能量，常用于： 促销活动 重要按钮 警告提示 蓝色 - 信任与专业 蓝色是科技公司最爱，传递： 专业感 可信赖 冷静稳重 绿色 - 自然与成功 绿色代表： 环保、健康 成功...",
        "datePublished": "2026-05-13",
        "author": {"@type": "Person", "name": "3S教室"},
        "publisher": {"@type": "Organization", "name": "3S教室", "url": "https://3scd.com"},
        "mainEntityOfPage": "https://3scd.com/article.php?id=11111119"
    }
    </script>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            color: #2c3e50; background: #f8f9fa; line-height: 1.8;
        }
        a { text-decoration: none; color: inherit; }
        .nav {
            background: #fff; border-bottom: 1px solid #eee; padding: 0 24px;
            display: flex; align-items: center; justify-content: space-between;
            position: sticky; top: 0; z-index: 100;
        }
        .nav .logo { font-size: 20px; font-weight: 700; padding: 14px 0; }
        .nav .logo span { color: #f60; }
        .nav .links { display: flex; flex-wrap: wrap; gap: 4px; }
        .nav .links a { padding: 8px 14px; border-radius: 6px; font-size: 14px; color: #555; }
        .nav .links a:hover, .nav .links a.active { background: #fff3e8; color: #f60; }
        .wrap { max-width: 1100px; margin: 0 auto; padding: 32px 20px; display: flex; gap: 28px; align-items: flex-start; }
        .main { flex: 1; min-width: 0; background: #fff; border-radius: 14px; padding: 36px 40px; box-shadow: 0 2px 12px rgba(0,0,0,.05); }
        h1.article-title { font-size: 26px; line-height: 1.5; margin-bottom: 12px; }
        .article-meta { font-size: 13px; color: #999; margin-bottom: 28px; display: flex; flex-wrap: wrap; gap: 18px; }
        .article-meta .cat { color: #f60; background: #fff3e8; padding: 1px 10px; border-radius: 20px; }
        .article-body { font-size: 16px; word-break: break-word; }
        .article-body h1, .article-body h2, .article-body h3, .article-body h4 { margin: 28px 0 14px; line-height: 1.5; }
        .article-body h2 { font-size: 21px; } .article-body h3 { font-size: 18px; }
        .article-body p { margin: 0 0 16px; }
        .article-body ul, .article-body ol { margin: 0 0 16px 26px; }
        .article-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 12px 0; }
        .article-body blockquote { border-left: 4px solid #f60; background: #fffaf5; padding: 12px 18px; margin: 0 0 16px; color: #666; border-radius: 0 8px 8px 0; }
        .article-body pre { background: #2d2d2d; color: #f8f8f2; padding: 16px; border-radius: 8px; overflow-x: auto; margin: 0 0 16px; font-size: 14px; }
        .article-body code { background: #f1f3f5; padding: 2px 6px; border-radius: 4px; font-size: 14px; }
        .article-body pre code { background: none; padding: 0; }
        .article-body a { color: #f60; border-bottom: 1px solid #f60; }
        .back-link { display: inline-block; margin-top: 36px; padding: 9px 22px; background: #fff3e8; color: #f60; border-radius: 24px; font-size: 14px; }
        .back-link:hover { background: #f60; color: #fff; }
        .side { width: 280px; flex-shrink: 0; }
        .side-card { background: #fff; border-radius: 14px; padding: 22px; margin-bottom: 20px; box-shadow: 0 2px 12px rgba(0,0,0,.05); }
        .side-card h3 { font-size: 16px; margin-bottom: 14px; }
        .side-card .recent-item { display: block; padding: 9px 0; border-bottom: 1px dashed #f0f0f0; font-size: 14px; color: #555; line-height: 1.5; }
        .side-card .recent-item:last-child { border-bottom: none; }
        .side-card .recent-item:hover { color: #f60; }
        .author-card { text-align: center; }
        .author-card .name { font-size: 17px; font-weight: 700; margin: 6px 0 2px; }
        .author-card .desc { font-size: 13px; color: #999; }
        .avatar {
            width: 64px; height: 64px; border-radius: 50%; background: #4f46e5; color: #fff;
            display: inline-flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700;
        }
        .footer { text-align: center; padding: 28px; color: #bbb; font-size: 13px; }
        @media (max-width: 860px) {
            .wrap { flex-direction: column; }
            .side { width: 100%; }
            .main { padding: 24px 20px; }
            .nav { flex-direction: column; padding: 10px 16px; }
        }
    </style>
</head>
<body>
    <nav class="nav">
        <a class="logo" href="/">Design<span>·3S</span></a>
        <div class="links">
            <a href="/">主页</a>
            <a href="/classroom.html">3S教室</a>
            <a href="/studio.html">3S工作室</a>
            <a href="/weskill.html">WeSkill</a>
            <a href="/resources.html">设计资源</a>
            <a href="/words.html" class="active">既见青山</a>
            <a href="/road.html">关于</a>
            <a href="/talent.html">艺术生花</a>
        </div>
    </nav>

    <div class="wrap">
        <main class="main">
            <h1 class="article-title">色彩心理学在UI设计中的应用</h1>
            <div class="article-meta">
                <span>3S教室</span>
                <span>2026-05-13</span>
                <span class="cat">设计基础</span>
            </div>
            <div class="article-body">
                <h2>色彩的情感暗示</h2>
<h3>红色 - 激情与行动</h3>
<p>红色能激发能量，常用于：</p>
<ul>
<li>促销活动</li>
<li>重要按钮</li>
<li>警告提示</li>
</ul>
<h3>蓝色 - 信任与专业</h3>
<p>蓝色是科技公司最爱，传递：</p>
<ul>
<li>专业感</li>
<li>可信赖</li>
<li>冷静稳重</li>
</ul>
<h3>绿色 - 自然与成功</h3>
<p>绿色代表：</p>
<ul>
<li>环保、健康</li>
<li>成功、完成</li>
<li>金钱、金融</li>
</ul>
<h3>配色技巧</h3>
<p>使用60-30-10原则：60%主色、30%辅助色、10%强调色，打造和谐配色方案。</p>            </div>
            <a class="back-link" href="/words.html">← 返回文章列表</a>
        </main>

        <aside class="side">
            <div class="side-card author-card">
                <div class="avatar">3S</div>
                <div class="name">3S教室</div>
                <div class="desc">热爱设计，专注于UI设计教学与分享</div>
            </div>
                        <div class="side-card">
                <h3>其他文章</h3>
                                <a class="recent-item" href="/article.php?id=11111153">3S教室：专注于UI设计学习与成长</a>
                                <a class="recent-item" href="/article.php?id=11111145">UI设计师的工作流：我是怎么设计一个需求的</a>
                                <a class="recent-item" href="/article.php?id=11111152">UI设计配色完全指南：从理论到实践的干货手册</a>
                                <a class="recent-item" href="/article.php?id=11111129">UI面试常见问题及答案，帮你少走弯路</a>
                                <a class="recent-item" href="/article.php?id=11111142">UI设计里的按钮设计，这些细节你注意到了吗</a>
                                <a class="recent-item" href="/article.php?id=11111132">从设计稿到开发：UI设计师的切图标注指南</a>
                                <a class="recent-item" href="/article.php?id=11111135">UI设计作品集怎么准备？这些坑别踩</a>
                                <a class="recent-item" href="/article.php?id=11111136">UI设计师想涨薪？先看看这几点你做到了没</a>
                                <a class="recent-item" href="/article.php?id=11111143">UI设计师怎么让设计稿更有说服力？这几点很重要</a>
                                <a class="recent-item" href="/article.php?id=11111118">设计师如何建立个人作品集</a>
                            </div>
                    </aside>
    </div>

    <div class="footer">© 3S教室 · 3scd.com</div>
</body>
</html>
