衍水集团

营销人员工资管理系统 · 视觉方向

企业级扁平 · 轻质感 · Bento 布局 · 品牌色点缀 · 微动效 · 精致文案
表面微渐变(受光) 半透明描边 分层阴影 内高光 / 内阴影 2% 噪点 等宽数字 120–180ms 轻动效

01 · 色板与材质

靛蓝
#2E4BA8 ↑#3A58BC
品牌色。按钮/链接/焦点/当前菜单,配微渐变与内高光
侧栏灰
#F2F4F8 → #ECEDF3
侧栏微渐变(自上而下微沉)
雾灰
#F4F5F8
页面底
纸白
#FFFFFF → #FCFCFE
卡片/表格:顶白底微灰的「受光」渐变
界线
rgba(28,35,51,.09)
1px 半透明描边:在不同底色上自然融合
墨色
#1C2333
主文字(冷调近黑)
次墨
#5B6577
次级文字、表头、说明
语义色
#1E9E6A · #C98A1B · #C94F4F
成功/警示/危险,浅底微渐变 + 深字

02 · 字体与数字

页面标题岗位角色18px / 600 · 字距 −0.01em
卡片标题计提参数 · 业务员个人户15px / 600
正文 / 表格回款天数 = 发货日首日起算,按自然日累计14px / 400 · 13px / 400
表头 / 标签岗位编码 公式模板 生效日期12px / 500 · 字距 +0.04em
品牌字衍水集团无衬线 600 · 大字距 · 仅品牌落款一处
回款日期回款金额(元)回款天数计提比例绩效金额(元)
2026-01-10386,200.00279.7‰14,062.31
2026-02-181,240,000.003614‰19,840.00
合计1,626,200.00——33,902.31
金额与比例一律等宽数字(tabular-nums)右对齐,合计行加粗放大半档——列对列、位对位,扫一眼就能核对。
衍水集团
A · 思源黑体 500 · 0.32em 当前应用
衍水集团
B · 思源黑体 300 细体 · 0.42em
衍水集团
C · 系统默认 600(不指定字体,展示回退效果)· 0.25em

03 · 组件基调

按钮 · 三态

静置
悬停:抬升 1px · 影加深
按下:回落 · 内阴影
微渐变 + 内高光给按钮「实体感」;次级按钮一律白底细边框,无阴影污染。

输入框 · 状态

启用 禁用 待生效
输入框带微内阴影(凹陷暗示);聚焦 = 靛蓝描边 + 3px 柔光外环。

分页

‹123› 共 28 条 · 每页 10 条
当前页与主按钮同材质:微渐变 + 内高光。

动效原则

过渡 120–180ms,只做颜色、阴影与 1px 内的位移;弹层淡入 + 4px 上移; 数字与表格不加动画;尊重 prefers-reduced-motion。 动效的目标是「顺滑可信」,不是表演。

04 · 应用界面(布局与列表页)

系统管理 / 岗位角色
管管理员退出登录

岗位角色

决定人员适用的计提公式模板与参数;新增岗位无需改代码
岗位编码岗位名称公式模板说明状态操作
salesperson营销员 业务员个人户 · 天数线性递减 回款天数线性递减(360 天=6‰,361 天起 4‰) 启用 编辑删除
sales_manager营销经理 营销经理 · 团队与全公司分成 本团队 12.5% + 全公司 5% 启用 编辑删除
info_officer信息员 信息员 · 销售额固定比例 本人销售额 × 1‰ 启用 编辑删除
senior_sales高级业务员 业务员个人户 · 天数线性递减 自定义岗位(新增岗位无需改代码) 禁用 编辑删除
‹1› 共 4 条
质感的三层材料:侧栏灰渐变(沉)→ 内容底雾灰 + 顶部受光 → 卡片纸白微渐变 + 半透明描边 + 分层阴影。 当前项白底浮起,白色被灰托住,不再扎眼。

05 · 首页仪表盘(Bento Grid)

仪表盘
管管理员退出登录

仪表盘

数据截至今日 06:00 · 12 笔回款待核算
本月绩效总额
268,430.16元
较上月 +12.4% · 已核销 86 笔
近 6 个月回款
单位:万元
待办
12 笔回款待核算
3 笔业务归属待确认
营销人员
36人
岗位角色
3个
常用操作
计提参数
16项
版本 P20260101-00
T+ 同步
正常
每周一 06:00
Bento Grid:大小不一的卡片按重要性排布——绩效总额与回款趋势占 2×2 主角位,数字型指标 1×1 紧凑排列。 卡片入场为 45ms 交错上浮(320ms),悬停抬升 2px、阴影加深——打开预览即可看到微动效。

06 · 登录页(重做)

背景三层:点阵网格(秩序)+ 顶部靛蓝天光(氛围)+ 右上涟漪同心圆(「衍水」的品牌装饰); 卡片内品牌区承担门面——品牌字、标语、水线;表单以「欢迎回来」承接。装饰与文案都来自「衍水」本身。

07 · 签名元素:水线

计提参数
页面标题下的渐隐靛蓝细线(56px,左实右虚)——「衍水」之水的提纯,全站唯一的装饰性元素, 只在每个页面标题处出现一次。它与登录页的水纹层理同源:品牌连续,而非推倒重来。

08 · 微动效与精致文案(全局规范)

微动效 · 全站统一

页面 / 卡片入场淡入 + 上浮 6px,45ms 交错320ms
按钮悬停 / 按下抬升 1px、影加深 / 回落内阴影150ms
卡片悬停抬升 2px、阴影加深180ms
输入聚焦靛蓝描边 + 3px 柔光外环150ms
弹层 / 抽屉淡入 + 上移 4px160ms
表格行底色渐显(无位移)120ms
数据刷新数字不做滚动动画(核对场景,动即干扰)—
无障碍prefers-reduced-motion 时全部关闭—
目标不是「有动画」,而是顺滑可信:每次操作都有轻微、及时、可预期的反馈。

精致文案 · 全站统一

按钮提交保存变更 · 录入回款
空态暂无数据还没有岗位角色,点「新增岗位」创建第一个
错误操作失败岗位编码已存在,请换一个
危险确认确定删除吗?删除后无法恢复,该岗位下的人员需重新归属
成功提示操作成功岗位已创建 · 参数 11-01 起生效
页面描述本页面用于管理决定人员适用的计提公式模板与参数;新增岗位无需改代码
说清楚会发生什么;动词开头、句子短;不道歉、不卖萌;空态是邀请,错误是路标。