Visual Enhancement Lab

从"太素"到"有质感"

你说最近做的页面太素、分类不明显、看着累——问题不在"克制",在于缺少视觉信号:区块之间没有层次、眼睛找不到落点。

下面每一格都是真实可交互的(把鼠标放上去),选你喜欢的编号即可。最后一格是"组合示例"——把推荐项拼在一起的完整效果。

回复格式:E1-4 ✓ E2-2 ✓ E3-3 ✓ E4-2 ✓ E5-2 ✓ …也可以说"轻一点/重一点"
E1 · Background

背景层 —— 页面"空气感"的来源

纯色底 = 没有空气;网格给秩序,光斑给温度。

E1-1 · 纯色
E1-1 纯色底 —— 现在的做法,干净但"没空气"
E1-2 · 网格
E1-2 极淡网格 —— 给画面秩序感,像工程图纸
E1-3 · 光斑
E1-3 弥散光斑 —— 给冷暗底一点温度,科技感主要来自这层
E1-4 · 网格+光斑
E1-4 网格 + 光斑组合 —— 秩序与温度并存(我推荐)
E2 · Cards

卡片增强 —— 让"块"能被看见

你之前选了"无边框+柔和阴影",结果区块太弱。这里给几种加强方式(后两个要 hover)。

E2-1 · 现状
城市漫游无边框,只有柔和阴影。区块边界很弱。
E2-1 平面卡片 —— 现状,干净但"分不清块"
E2-2 · 边框微光
城市漫游1px 琥珀色描边 + 外发光,区块立刻跳出来。
E2-2 边框微光 —— 只加一层发光边,不破坏克制
E2-3 · hover 上浮
城市漫游鼠标放上去:上浮 + 阴影加深 + 描边亮起。
E2-3 hover 上浮 —— 交互反馈,让人知道"这是可点的"
E2-4 · 3D 倾斜
城市漫游鼠标在卡片上移动时,卡片跟随倾斜(3D)。
E2-4 3D 倾斜 —— 科技感最强,但用多了会晕
E3 · Glass

毛玻璃 —— 你说喜欢玻璃,这里有四档浓度

关键不是"有没有玻璃",而是"玻璃后面透出什么"。

E3-1 · 无玻璃
玻璃卡片实心背景,完全挡住后面的色彩。
E3-1 无玻璃 —— 实心,最稳但没透感
E3-2 · 轻度
玻璃卡片blur 8px,背景色彩隐约透出,克制。
E3-2 轻度玻璃 —— blur 8px,透一点颜色
E3-3 · 重度+高光边
玻璃卡片blur 20px + 顶部高光线,像真玻璃。
E3-3 重度玻璃 + 高光边 —— 质感最强(我推荐)
E3-4 · 深色玻璃
玻璃卡片深色半透明 + 饱和提升,压得住彩色背景。
E3-4 深色玻璃 —— 适合彩色光斑很重的背景
E4 · Interaction

交互特效 —— 页面"活着"的细节

全部要 hover 才能看到(这就是重点)。

E4-1 · 无
卡片没有任何交互反馈。
E4-1 无交互 —— 现状,静态
E4-2 · Spotlight
卡片鼠标位置有一团柔光跟随(spotlight)。
E4-2 鼠标跟随光斑 —— 最有"科技感"且不花哨(我推荐)
E4-3 · 磁吸按钮
E4-3 磁吸按钮 —— 鼠标靠近时按钮轻微跟随,手感很"苹果"
E4-4 · 数字滚动
0km 已走过
E4-4 数字滚动 —— hover 时数字滚上去,数据页很好用
E5 · Sectioning

分区强化 —— 解决"分类不明显"

你说看着累,很大程度是"每个区块长得一样"。给标题加信号就能分开。

E5-1 · 纯文字

行程概览

只有一行标题,和下面的内容没有分界。
E5-1 纯文字标题 —— 现状,区块之间容易糊在一起
E5-2 · 编号+渐隐线
01行程概览
编号 + 一条向右渐隐的琥珀色线,区块立刻分开。
E5-2 编号 + 渐隐分隔线 —— 编辑风,最轻(我推荐)
E5-3 · 图标+标题
◈行程概览
小图标承载语义,比纯文字更容易扫读。
E5-3 图标 + 标题 —— 扫读快,但要控制图标风格统一
E5-4 · 背景色差分区
今日安排
上午浅草 · 晨市
下午晴空塔
傍晚涩谷夜色
夜间屋形船
E5-4 背景色差分区 —— 用底色深浅把子区块分开,信息密度高的页面必备
E6 · Combined

组合示例 —— 推荐项拼在一起的样子

E1-4 网格+光斑 + E2-3 hover 上浮 + E3-3 玻璃+高光边 + E4-2 Spotlight + E5-2 编号分隔线。这就是"有科技感但不花哨"的完整效果。

01 — OVERVIEW

城市漫游 · 数据总览

鼠标移到卡片上:卡片上浮、边框亮起、光斑跟随。这就是"科技感"的实际手感。
ROAMED走过街区本月新增 12 条路线
128
DISTANCE累计里程相当于绕城一圈
42.6 km
NOTES记录笔记平均每公里 1.4 条
60