商店重新设计：深度与精致感打造的高端视觉

新

游戏内商店已完成全面的视觉升级。每一个元素——从商品卡片到购物车侧边栏，从频道标签到结账按钮——都经过重新设计，融入了层次感、精致度与流畅的动画效果。

改动内容

商品卡片

商店的核心部分获得了最大的升级：

• 玻璃质感，搭配分层渐变与深邃阴影
• 平滑悬停效果——卡片上浮，图片缩放至 1.08 倍，并出现光晕
• 更大的图片（高度 170px，原先为 150px）
• 懒加载——图片仅在滚动进入视图时加载，节省带宽
• 分隔线，将商品信息与价格/按钮区域分隔开
• 更大的价格（16px），CC 和 KC 货币带有更强的光晕效果

全新商店头部

商品网格上方新增了一条身份栏，显示：

• 商店类型图标，置于彩色圆角容器中
• 商店名称，采用大号粗体文字
• 类型徽章（例如”硬件”、“食品”、“服务”），带有该类型的颜色
• 商品数量与货币

这让每个商店在滚动到商品之前就拥有清晰的视觉身份。

频道标签

用于在不同商店之间切换的标签采用了更简洁的外观：

• 胶囊式设计，带有圆角
• 悬停时背景会发生微妙变化
• 当前标签以蓝青色渐变和内阴影呈现发光效果
• 移除了复杂的边框遮罩效果，以提升性能

筛选栏

搜索与筛选控件现在更加精致：

• 圆角输入框（10px 圆角），带有聚焦光环
• 胶囊式下拉选择框，悬停时高亮显示
• 筛选数量以带背景的徽章形式显示
• 清除按钮，带有红色强调色和悬停上浮效果

购物车侧边栏

右侧的购物车与订单面板：

• 固定定位——在滚动浏览商品时始终保持可见
• 自定义滚动条——细长的蓝色滚动条，取代浏览器默认样式
• 渐变背景，带有微妙的阴影
• 更大的按钮，带有悬停上浮效果
• 结账按钮，带有渐变填充和悬停发光效果

评论

每个商店底部的评论区：

• 更清晰的视觉层级，在摘要下方添加了分隔线
• 单条评论卡片的悬停效果（左边框点亮）
• 更大的星标和更好的间距
• 提交按钮，悬停时带有渐变和阴影

附近搜索与商店搜索

两项搜索功能都采用了高端卡片设计：

• 层次感，搭配分层阴影
• 悬停时的滑动动画（附近卡片向右滑动）
• 商店搜索卡片的上浮效果，带有紫色光晕
• 更大的图标（40px），带有各自的阴影

空状态

当没有商品可展示时，不再显示纯文本消息，而是显示：

• 一个大图标（📦）
• 一条清晰的消息（“没有符合筛选条件的商品”或”暂无商品”）
• 一条有用的提示（“尝试调整搜索条件或稍后再来查看”）

动画

商品卡片现在以错落入场动画呈现——每张卡片淡入并轻微放大，卡片之间有短暂的延迟。动画使用了平滑的 cubic-bezier 缓动曲线，营造高端质感。

地图标记关闭选项

本次发布还包含一项面向商店所有者的全新隐私功能：

不希望暴露实体位置的服务提供商，现在可以在商店设置中取消勾选”在世界地图上显示我的商店”。商店仍然完全可用——只是不会在地图上显示为标记。

这对于顾问、数字服务提供商以及任何没有公开门店的商家尤其有用。

性能

尽管视觉效果更加丰富，商店实际上更快了，这得益于：

• 商品图片上的 loading="lazy"——浏览器仅加载可见的图片
• 简化的 CSS（移除了频道标签上复杂的 ::before 遮罩）
• 悬停动画使用 GPU 加速的变换

下一步计划

商店重新设计为即将推出的功能奠定了视觉基础：

• 商品详情浮层，带有全尺寸图片和规格
• 心愿单 / 收藏夹——稍后保存商品
• 商店合集——精选商品分组
• 折扣码——促销定价
• 面向所有者的商店分析——浏览量、点击量、转化率

---

ENLIGHTENMENT 是一款基于区块链的个人成长游戏，融合原型探索与集体共鸣。欢迎加入我们：getplasma.org。