“大白话 · PLAINLY
视觉设计规范 · V1.1
01 / 设计方向
设计说明
Paper & Pine：以浅纸色作为页面底色，以深墨色承载阅读内容，以松绿色强调品牌和关键操作。白色卡片用于组织信息，低饱和分类色用于辅助识别。
设计原则
- 内容优先：搜索和解释优先于装饰。
- 层级明确：通过字号、留白、底色和边线组织信息。
- 简洁可信：避免夸张宣传、强发光和大面积渐变。
使用边界
- 深色卡片仅用于少量精选内容。
- 分类色不直接替代主操作色。
- 状态不能只依赖颜色传达。
02 / 色彩系统
设计说明
主色用于品牌、主要按钮和关键链接；浅色主要作为背景，不以浅色文字承载关键说明。
分类色与状态色
| 用途 | 背景／边框 | 文字或图标 | 说明 |
|---|
| 分类辅助色 | #EAF0E4、#F3EEDF、#E8EDF6、#E9ECEE、#F5EADD、#F5E6E8、#EDE9F6、#E6EFEB | 对应低饱和深色 | 优先复用既有色组，不要求每类独立配色。 |
| 一般提示 | #F0F5EB／#DFE8D8 | #4D6340 | 服务正常或轻量说明。 |
| 错误提示 | #FCF2ED／#EED9CC | #864B37 | 同时提供文字原因和后续动作。 |
| 已投票 | #EDF3EB／#CFDFCA | #285B45 | 与禁用态保持区分。 |
03 / 字体与排版
控件示例
Type hierarchy
行业黑话，说成大白话。
首页主标题 / 桌面 36–52px · 字重 600 · 行高 1.16
常见术语，清楚解释
先用一句话说明含义，再通过例句补充语境。正文保持自然换行，不以省略号隐藏关键含义。
卡片解释 / 13px · 行高 1.75 详情正文 / 14px · 行高 2
设计说明
字体配置
Segoe UI → PingFang SC → Microsoft YaHei → sans-serif
英文和数字优先使用 Segoe UI；中文使用系统中文字体。品牌引号使用 Georgia，其余界面不混用装饰字体。
核心字号
首页标题：桌面 36–52px，手机 38px，字重 600，行高 1.16。
词条标题：25px，字重 600；卡片解释：13px，行高 1.75；详情正文：14px，行高 2。
04 / 布局、间距与形状
控件示例
大白话 · PLAINLY
行业黑话，说成大白话。
输入关键词 翻译一下
居中容器 · 分类栅格 · 词条栅格
设计说明
| 项目 | 桌面 | 中小屏 | 手机 |
|---|
| 主内容容器 | 最大 1160px，水平居中 | 两侧各 20px | 两侧各 20px |
| 分类网格 | 8 列，间距 12px | 4 列 | 4 列，间距 8px |
| 词条网格 | 3 列，间距 18px | 2 列，间距 14px | 1 列，间距 13px |
| 关键圆角 | 搜索框 17px；卡片 18px；分类 14px | 手机搜索框 13px；卡片 16px；分类 11px |
间距规则
以 4px 为基础单位，常用间距为 8、12、16、20、24、32px。组件可使用 10、14、18px 等补充值，以保证文字基线和视觉平衡。
05 / 按钮与交互控件
控件示例
设计说明
| 类型 | 基础规格 | 使用场景 |
|---|
| 通用主按钮 | #285C43 底、白字、圆角 9px、最小高 43px、内边距 11px 18px | 提交、登录等主要操作 |
| 搜索按钮 | 高 42px、桌面水平内边距 22px；手机内边距 13px | 搜索框内提交 |
| 卡片投票 | #285B45 底、白字、圆角 10px、最小高 44px | “遇到过 · 投一票” |
| 图标按钮 | 40×40px、圆角 9px；必须具备可访问名称 | 复制、分享等紧凑操作 |
状态要求
悬停、按下、聚焦、加载、禁用和已投票状态分别设计。按下状态下移 1px 并缩放至 0.985；默认焦点采用 3px 描边、外偏移 5px。加载时改变动作说明并阻止重复提交，保持按钮位置稳定。
06 / 搜索与内容组件
设计说明
搜索框
白底，边框 #E0E5DC，高度 60px；桌面圆角 17px，手机圆角 13px。
桌面内边距为 9px 10px 9px 23px，手机为 7px 7px 7px 14px。输入区优先占据剩余宽度。
聚焦边框为 #8DA589，并显示 4px 低透明度外扩光圈。搜索建议面板位于下方 8px，最多展示 4 条。
控件示例
职场沟通
对齐
把目标、理解或做法确认一致。
职场沟通
对齐
把目标、理解或做法确认一致。
设计说明
普通词条与精选卡片
按分类、词名、白话解释和底部操作排列。普通卡片使用白底、#E2E7DE 边框；精选卡片使用 #28543D 深绿底。
桌面圆角 18px，内边距 18px 20px 12px；手机圆角 16px，内边距 17px 18px 10px。
悬停上移 3px，边框转为 #C9D5C1。深色卡片采用白色标题、#D0DBC8 说明文字及浅底投票按钮。
词名允许换行；同一行卡片的底部操作区保持对齐。
控件示例
使用清晰、完整的词条名称。
一般提示：已收到，感谢分享。
错误提示：暂不可用，请稍后重试。
设计说明
表单与状态提示
标签字号 14px、字重 500；输入控件采用 #FAFBF8 背景、#D9DFD8 边框、10px 圆角及 12px 内边距。
一般提示采用浅绿底，错误提示采用浅杏底。错误同时提供文字原因和后续操作，不仅依靠颜色区分。
字段错误边框为 #B66C5B，说明文字为 #A04738，字号 12px，放置于对应字段附近。
07 / 动效、响应式与可访问性
控件示例
键盘焦点始终可见
将指针移入按钮，查看颜色变化。
设计说明
动效
- 按钮和链接约 200ms。
- 卡片位移与阴影约 300ms。
- 搜索聚焦约 250ms。
- 通用缓动：cubic-bezier(.22,1,.36,1)。
- 响应 reduced-motion 时关闭非必要位移与进入动画。
响应式与可访问性
- 手机保留品牌操作行和独立导航行。
- 词名、说明和投稿内容允许换行，不产生横向溢出。
- 错误、选中、成功和禁用不能仅用颜色区分。
- 主要导航使用真实链接，操作使用按钮。
- 字段、图标按钮和状态提示需有明确名称。
08 / 视觉参考板
设计说明
色彩与字体参考板
汇总核心色值、系统字体和文字层级，用于设计评审时核对基础风格。
参考图用于说明视觉关系，具体尺寸以本页规范文字为准。
设计说明
按钮与内容组件参考板
汇总按钮状态、搜索框、普通与精选卡片及提示样式，用于核对组件之间的一致性。
参考图用于说明视觉关系，具体尺寸以本页规范文字为准。
