上周末花了一个下午，做了个NFT交易平台Demo——ArtVerse。
本来以为只是"把图片摆出来加个购买按钮"的事，结果发现NFT平台的展示逻辑和电商平台是两套完全不同的体系。电商的逻辑是：降价促销 → 激发购买欲 → 下单。NFT平台的逻辑是：艺术作品感 → 建立收藏欲 → 钱包连接 → 出价/购买。出发点的不同，决定了从配色到信息架构到交互细节，全都要推翻重来。1 配色选择：暗黑背景 + 暖金，不跟OpenSea浅色风▲ ArtVerse首页：深黑底色(#0A0A0F) + 暖金主色(#F0B90B) + 紫色辅助(#8B5CF6)这是第一个关键决策。大部分交易平台走的是浅色路线——白色或浅灰背景，把艺术品「亮堂堂地」展示出来。但艺术品不是日用品。想一想：你去画廊看展，灯光是亮白的还是聚光的？你去拍卖行，环境是敞亮的还是昏暗的？艺术品的价值感来自「聚焦」，而不是「敞亮」。ArtVerse的配色方案是：深黑底色(#0A0A0F)——让任何艺术品放在上面都像「被打了聚光灯」暖金色(#F0B90B)作为主色——暗示稀有和价值，和电子货币的主流金色形成品牌关联紫色(#8B5CF6)作为辅助色——增加神秘感和Web3调性首页上，我们放了4个核心模块：Hero区引导"探索数字艺术"、三个实时数据指标（艺术品总数、总交易量、活跃收藏家）、热门艺术品展示、以及按类型分类的入口（像素艺术、生成艺术、3D艺术、摄影、音乐）。配色方案如果不刻意去想，用户感知不到。但放在一起对比，深色背景上的艺术品就是比白色背景上的「贵」。2 画廊的信息架构：分类筛选比"无限滚动"更重要▲ ArtVerse画廊页：分类筛选 + 搜索 + 网格展示，8个分类一键切换第二个关键决策在画廊页。电商平台的做法是「无限滚动 + 算法推荐」，但NFT的交易逻辑不同。NFT收藏家的行为模式是：目标明确地寻找特定类型。一个像素艺术收藏家不会对3D渲染艺术感兴趣，反之亦然。所以画廊的设计核心不是「推更多」，而是「帮用户过滤掉不相关的内容」：8个分类筛选按钮：全部、像素艺术、生成艺术、3D艺术、摄影、音乐、虚拟世界、会员卡搜索框：支持按名称或创作者搜索排序：最新上架、价格高到低、最受欢迎结果用4列网格展示，每张卡片含：作品图、名称、创作者、价格、收藏数一个容易被忽视的细节：分类筛选按钮用outline样式（镂空边框），选中态才填充金色。视觉上告诉用户「这是可操作的过滤器」而不是静态标签。3 NFT详情页：双栏sticky布局，左边固定右边滚动▲ NFT详情页：左边大图sticky固定 + 右边信息区滚动，模仿拍卖行图录大多数电商的商品详情页是「上图下文」——图片轮播在上面，规格参数在下面。这个布局在手机上还行，但到了桌面端就很浪费空间。ArtVerse的详情页用了双栏sticky布局：左栏（sticky，固定在视口顶部）：NFT主图大尺寸展示4张缩略图切换（hover/选中态金色描边）右栏（可滚动）：作品名 + 创作者信息 + 认证徽章三格数据卡片：地板价、总交易量、收藏人数NFT属性栏：背景、皮肤、服饰、眼睛、嘴巴、配件（带稀有度标签）价格历史：时间-事件-价格表格出价时间线：John出价2.3 ETH → Sarah出价2.5 ETH → Mike出价2.8 ETH出价输入框 + 立即购买按钮这个布局的灵感来自拍卖行图录——图片永远在你视线中，信息在旁边流动。用户向下滚动看属性和历史记录时，作品图一直在左边陪着。4 个人中心：收藏展示 + 活动记录联动▲ 个人中心页：头像 + 链上地址 + 收藏统计 + 创建物 + 活动时间线最后一个模块看上去简单，但其实角色的完整性决定了用户粘性。个人中心的结构设计：顶部身份区——头像（金色边框）、用户名、链上地址（可复制）、三方统计（收藏数、创建数、总交易量）NFT收藏区——按购买时间排列的收藏卡片活动记录——购买/售出/上架/出价的时间线创建物——用户自己mint的NFT一个小细节：收藏统计用了渐变文字效果（金色到紫色），这个视觉处理让数字本身变成了身份象征——「我的收藏不只是数据，是资产」。总结做完ArtVerse后回头看，NFT交易平台的本质不是「卖东西」，而是「展示资产」。这个定位差异决定了4个设计取舍：配色不是越亮越好——暗黑 + 暖金比浅色风更能突出数字艺术品的价值感画廊不是推得越多越好——分类筛选 > 无限滚动，帮收藏家精准定位详情页不是上图文下参数——双栏sticky模仿拍卖行图录，图不离眼个人中心不是数据表格——收藏展示 + 活动时间线，让链上行为可视化如果你在规划自己的NFT项目，建议先把这4个问题想清楚再动手画UI——方向对了，代码反而是最快的一步。