这一页不用你读代码。每一块都能把鼠标移上去(或者点一下),直接看它动起来是什么样。
五个颜色各代表一种含义:绿=已验证粉=社群金=里程碑紫=拍卖青=数据
上面这一排,鼠标移上去会看到:一圈亮线沿着六边形的边「从下往上画满」。这就是我们把原来的做法换掉之后的效果(为什么换,看第 4 部分)。
形状决定了别人第一眼觉得它"像什么"。下面五种都能做,你要选一个。
我的建议:选 B。理由只有一句:它比 A 好看,又不像 C 那样跟人撞脸。
鼠标移上去看效果。撞脸风险低=别人很少这么用,不会说你抄;中=不少产品在用,算行业通用;高=几乎就是某个产品的招牌动作。
我的建议:主效果选 ②(描边画满),因为它在小尺寸(手机列表里那种很小的徽章)也看得清,而且"画满"这个动作本身就有含义 —— 表示"这件事完成了"。④ 呼吸光晕可以留在旁边当辅助(表示"这条数据是活的、被证明过的")。
一圈彩色光绕着边转圈。好看,但这是它的招牌动作,而且我们原来连"转多快、光的宽窄"都跟它一模一样。
亮线沿着边走一圈把边画满。方向、速度、亮度曲线都不一样,含义也不同("补齐"而不是"转圈")。
简单说:"用彩色边框转圈"这件事本身是行业通用的,谁都能用,不算抄;我们之前的问题是连参数都抄得一模一样,在同一个赛道里就很容易被人拿来做对比图。所以现在的做法是:手法大家都能用,但细节必须是我们自己的。
| 你要决定什么 | 选项 | 我的建议 |
|---|---|---|
| ① 形状 | A 尖角六边形(原样) B 圆角尖顶六边形 C flat-top(跟竞品一样) D 盾形 E 方圆形 |
选 B。好看,又不撞脸。C 千万别选(跟竞品一模一样)。 |
| ② 鼠标移上去动什么 | 上面 12 种里挑 1 个主要的(+ 可以再配 1 个辅助的) | 主要用 ②(描边画满),辅助用 ④(呼吸光晕)。这两个在小尺寸也看得清。 |
| ③ 稀有度怎么表现 ("这个成就比较难拿") |
用更多颜色? 用更亮的颜色? 用更复杂的描边? |
不要加新颜色。用"单线描边 → 双线描边 → 双线+扫光"来表达稀有(Steam、GitHub 都是这么干的)。 |
徽章用 圆角尖顶六边形;鼠标移上去时亮线沿着边从下往上画满(0.48 秒),平时背后有一层很淡的呼吸光表示"这条数据是被证明过的";拿到成就的瞬间闪一圈(只闪一次,不循环);越稀有就描边越多层,不新增颜色。
你只要回一句"就这样"或者"形状换 X、动效换 Y",我就照这个改。