轻简约潮流社交风
由 管理员 投稿，1 次浏览。
UI/UX 设计系统说明文档：轻简约潮流社交风
1. 设计核心理念 (Core Philosophy)
奶白基底 (Creamy Base)：放弃纯白，使用柔和的奶白色作为主色调，降低视觉疲劳，提升高级感。
潮流撞色 (Trendy Accents)：以电竞蓝（Electric Blue）为核心识别色，辅以高饱和度的状态色（如玫瑰红、琥珀橙）。
圆润极简 (Rounded Minimalism)：大圆角设计，去除繁琐边框，利用阴影和层级区分空间。
微交互 (Micro-interactions)：全站覆盖触压反馈（Scale Down），增强操作的“手感”。
2. 视觉规范 (Visual Specs)
颜色系统 (Palette)
主背景 (Light): #FDFBF7 (Creamy White)
主背景 (Dark): slate-950
核心品牌色: #3b82f6 (Electric Blue)
文本色: slate-900 (标题), slate-500 (描述), slate-400 (辅助)
装饰色:
成功/通过: emerald-500
警告/待定: amber-500
错误/驳回: rose-500
形状与投影 (Shapes & Shadows)
大容器 (Cards): rounded-2xl (16px), 投影 shadow-sm 或极轻的蓝色投影。
按钮/输入框: rounded-xl (12px)。
玻璃拟态: backdrop-blur-md 结合 bg-white/80，用于顶栏和浮动卡片。
3. 关键 CSS 组件代码 (Tailwind CSS)
您可以将以下类名定义在您的全局 CSS 中：
/* 基础卡片 */
.h5-card {
@apply rounded-2xl border border-white/60 bg-white/80 shadow-[0_8px_24px_rgba(59,130,246,0.03)] backdrop-blur-md transition-all duration-300 active:scale-[0.98];
}
/* 主按钮 */
.h5-btn-primary {
@apply inline-flex min-h-[48px] items-center justify-center rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 px-6 py-3 text-[14px] font-bold text-white shadow-[0_8px_20px_rgba(59,130,246,0.25)] transition-all active:scale-[0.95];
}
/* 潮流输入框 */
.h5-input {
@apply block h-12 w-full rounded-xl border border-slate-100 bg-white px-4 text-[14px] text-slate-900 shadow-[inset_0_1px_2px_rgba(0,0,0,0.01)] transition-all focus:border-blue-400/50 focus:ring-[6px] focus:ring-blue-500/5;
}
/* 呼吸感背景 */
.h5-app-bg {
@apply fixed inset-0 -z-20 bg-[#FDFBF7];
background-image: radial-gradient(#3b82f6 1.2px, transparent 1px);
background-size: 32px 32px;
opacity: 0.04;
}
4. 典型页面布局结构 (Blade/HTML)
首页快捷入口 (3列布局)
<nav class="grid grid-cols-3 gap-3 mb-5">
<a href="#" class="flex flex-col items-center gap-2 rounded-2xl bg-white/80 p-4 shadow-sm active:scale-95">
<div class="h-12 w-12 rounded-xl bg-blue-50 text-blue-500 flex items-center justify-center">
<!-- SVG Icon -->
</div>
<span class="text-xs font-bold text-slate-700">功能名称</span>
</a>
</nav>
最新公告卡片 (强调型)
<section class="rounded-2xl border border-blue-100 bg-blue-50/30 p-4">
<div class="flex items-center gap-2 mb-1">
<span class="text-[10px] font-bold text-blue-500 uppercase tracking-widest">LATEST</span>
</div>
<h3 class="text-sm font-bold text-slate-800 truncate">这里是公告标题</h3>
</section>
5. 开发提示词 (Prompt for AI)
如果您想让 AI 按照这个风格生成新页面，可以使用以下提示词：
Prompt: 请按照“轻简约潮流社交风”设计一个[页面名称]页面。 视觉要求：
基底色使用奶白色 (
#FDFBF7)，卡片使用白色半透明 (
#FFFFFFCC) 并带有 12px 的毛玻璃模糊。
圆角统一：大卡片 16px (2xl)，按钮和输入框 12px (xl)。
核心色使用电竞蓝 (
#3b82f6)，用于主按钮、图标背景和强调文字。
字体使用 Inter 结合 Noto Sans SC，标题加粗，字间距略微拉开。
交互：所有可点击元素在 active 状态下都要有 scale(0.95-0.98) 的缩放效果。
布局：保持空间紧凑，利用 10px 的小字号（加粗、全大写、Tracking-widest）作为 Section Kicker。
背景：添加一个极淡的蓝色径向渐变网格装饰。