请输入...
下面是一套可以直接进入设计稿与前端实现阶段的「棉麻质感 UI 设计规范」。我会刻意避免空泛的审美描述，而是把它拆成设计 token + 可执行 CSS 示例，便于你和设计、产品对齐，并能被代码真正消费。
一、设计目标定义（Design Intent）
关键词
自然、低饱和、温和、有呼吸感、非工业、非科技感
反目标（明确不做什么）
- 不使用纯白 / 纯黑
- 不使用高饱和品牌色
- 不使用强投影、玻璃拟态、霓虹渐变
- 不追求极致信息密度
二、颜色系统（Color Tokens）
1. 基础色（Background）
| 语义 | 色值 | 说明 |
| bg-main | #F7F5F1 | 亚麻白，主背景 |
| bg-sub | #EFECE6 | 卡片 / 分区 |
| bg-deep | #E4DFD6 | 次级背景 |
:root {
--bg-main: #f7f5f1;
--bg-sub: #efece6;
--bg-deep: #e4dfd6;
}
2. 文字颜色（Text）
| 语义 | 色值 | 说明 |
| text-primary | #2F2E2B | 主文案 |
| text-secondary | #6B6862 | 次要信息 |
| text-muted | #9B978F | 辅助说明 |
:root {
--text-primary: #2f2e2b;
--text-secondary: #6b6862;
--text-muted: #9b978f;
}
原则：
- 不使用 #000
- 对比度够用即可，不追求极致清晰
3. 强调色（Accent）
只允许低饱和自然色
| 用途 | 色值 |
| accent-main | #A38C6D |
| accent-hover | #8F7A5E |
:root {
--accent-main: #a38c6d;
--accent-hover: #8f7a5e;
}
三、纹理系统（Texture / Grain）
设计原则
- 永远是 subtle 的
- 用户第一眼“感觉到”，但说不出“看到了什么”
- 绝不使用明显布料贴图
CSS 实现方案 1：噪点背景
body {
background-color: var(--bg-main);
background-image: url("/assets/noise.png");
background-repeat: repeat;
}
noise.png 建议：
- 200×200
- 黑白
- 不透明度 3%～5%
CSS 实现方案 2：纯 CSS 伪噪点（无需图片）
.linen-bg {
background:
linear-gradient(0deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02)),
var(--bg-main);
}
四、排版规范（Typography）
字体方向
- 中文：偏人文、偏书写
- 英文：Humanist Sans / Soft Sans
:root {
--font-main: -apple-system, BlinkMacSystemFont,
"PingFang SC", "Noto Sans SC", "Helvetica Neue", sans-serif;
}
字号与行高
body {
font-family: var(--font-main);
font-size: 15px;
line-height: 1.8;
color: var(--text-primary);
}
原则：
- 行高偏大
- 留白优先于信息密度
五、组件规范（Component Style）
1. 卡片（Card）
.card {
background-color: var(--bg-sub);
border-radius: 6px;
padding: 20px;
box-shadow:
0 1px 3px rgba(0,0,0,0.04);
}
解释：
- 圆角小而克制
- 阴影像自然光投影
2. 按钮（Button）
.button {
background-color: var(--accent-main);
color: #fff;
padding: 8px 18px;
border-radius: 4px;
border: none;
font-size: 14px;
transition: background-color 0.25s ease;
}
.button:hover {
background-color: var(--accent-hover);
}
原则：
- 没有强点击反馈
- 不使用夸张 hover 动效
3. 输入框（Input）
.input {
background-color: var(--bg-main);
border: 1px solid #d8d3c9;
border-radius: 4px;
padding: 8px 10px;
color: var(--text-primary);
}
.input:focus {
outline: none;
border-color: var(--accent-main);
}
六、间距与布局（Spacing）
:root {
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 40px;
}
布局哲学：
- “空气感” > “紧凑感”
- 空白是设计的一部分
七、动效规范（Motion）
.fade-in {
animation: fadeIn 0.4s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
原则：
- 动效慢一点
- 没有弹性、回弹
八、验收标准（用于和产品确认）
你可以直接丢给产品经理：
- 是否看起来“温和、自然、不锋利”
- 是否没有明显科技感 / 商业感
- 是否适合长时间阅读和使用
- 是否第一眼不像“标准互联网模板”
总结一句工程化定义
棉麻质感 UI = 低饱和配色 + 轻纹理背景 + 克制阴影 + 人文排版 + 缓慢动效
如果你愿意，我可以：
- 帮你做一版 Design Token → Tailwind / CSS Variables 映射
- 或针对 移动端 / ToB / 内容型产品再细化一版
- 或直接写一个 示例页面结构（HTML + CSS）
告诉我你用的是哪套技术栈即可。