数链确权 PC Web Demo 项目复盘笔记
这段时间主要在推进“数链确权”PC Web 端 HTML-Demo 的产品设计与交互完善。这个 Demo 的目标不是做一个完整生产系统，而是帮助客户快速理解产品能力、验证业务流程，并能通过可点击、可跳转、可操作的页面体验核心功能。
项目背景上，小程序端已经有了相对完整的原型，PC Web 端需要在小程序基础能力上做迁移和扩展。其中 Web 端额外增加了一个重点功能：批量发布作品。因此，本阶段的核心工作可以概括为：基于既有原型和资料，重新梳理 Web 端的信息架构、页面数量、演示路径和关键交互，并把它们落实到静态 HTML Demo 中。
一、Demo 的定位
这个项目不是后台管理系统，也不是正式生产前端，而是面向普通用户的 PC Web 演示系统。
因此设计时需要把握几个原则：
- 页面要足够完整，能覆盖客户演示时的主要路径。
- 交互要顺畅，不能只是静态截图。
- 数据可以使用 Mock Data，但要看起来真实可信。
- 界面要美观、简洁，避免半成品感。
- 不追求复杂工程化，优先保证客户能打开、能操作、能理解。
这一点很重要。HTML-Demo 的价值不在于技术复杂度，而在于它能否快速帮助客户看懂产品、发现问题、确认方向。
二、本阶段重点推进内容
本阶段主要围绕以下几个模块进行了梳理和优化：
- 首页展示
- 单个作品发布
- 批量发布作品
- 作品详情页
- 确权信息查看
- 页面间跳转和演示流程
- Mock Data 补充
- UI 视觉细节优化
其中，批量发布作品和作品详情页是调整最多的两个部分。
三、批量发布作品流程梳理
批量发布是 Web 端区别于小程序端的重要能力。最初设计时，流程里存在一个问题：在用户刚上传文件时，页面就表现得像已经知道哪些数据成功、哪些数据异常。
这个逻辑是不合理的。
更合理的流程应该是：
- 用户下载批量导入模板。
- 用户按照模板填写 Excel。
- 用户准备作品相关素材 ZIP 包。
- 用户上传 Excel 和 ZIP。
- 系统进行本地解析和格式校验。
- 系统列出成功项和失败项。
- 用户选择成功项并确认提交。
- 系统将选中的成功项提交到节点。
- 节点返回提交结果。
- 如果有失败项，用户可以导出错误 Excel，修改后重新上传，作为一次新的批量发布流程。
这个流程里需要特别注意两个阶段：
- 本地解析阶段：判断文件格式、必填字段、素材匹配关系等问题。
- 节点提交阶段：处理网络异常、服务不稳定、节点返回失败等问题。
本地校验通过，不代表节点提交一定成功。因为节点提交失败可能不是用户数据问题，而是网络波动、服务异常或节点返回了不可预期的错误。
因此最终决定：节点报错不做复杂分类，直接把节点返回的错误信息展示给用户，并提供“联系客服”入口。这样既真实，也避免前端过度解释技术问题。
四、批量发布页面的产品判断
批量发布页面一开始信息比较杂乱，容易让用户在上传阶段就看到过多内容。后来调整为更简洁的流程式页面。
核心判断是：
上传阶段只做上传，不提前展示解析结果。
解析完成后再展示：
- 成功项
- 失败项
- 导出失败 Excel
- 确认批量提交
用户可以先提交成功项，再下载失败项 Excel 修改后重新上传。失败项不需要在当前流程里做“修正模式”，否则交互会变复杂，也不符合 Demo 快速验证的目标。
这个设计更贴近真实业务，也更容易给客户讲清楚。
五、作品详情页优化
作品详情页最初的问题是信息堆得太满，很多功能入口重复，用户一进入页面就会被大量内容包围。
例如：
- “查看完整凭证”和“查看确权凭证”功能重复。
- “第三方查验”不应该作为多个入口反复出现。
- “查看全部 10 章”没有必要，因为章节本来就可以直接展示。
- “查看全部素材”也没有必要，如果素材数量不多，直接展示缩略图更直观。
后来重新梳理后，作品详情页采用了更清晰的结构：
左侧展示作品媒体：
- 作品主图
- 下方横向展示全部作品素材缩略图
- 点击缩略图切换主图
- 点击主图可查看大图
右侧展示作品摘要：
- 作品名称
- 分类
- 简介
- 作者
- 权利人
- 确权状态
- 确权时间
- 区块链网络
- 一个主要操作：查看确权信息
下方展示作品内容：
- 作品介绍
- 10 个章节全部展开
- 当前章节说明
- 当前章节主图
- 当前章节的 3 张素材图
- 上一章 / 下一章切换
确权详情不直接铺在页面上，而是放在右侧抽屉中展示。这样既保留了信息完整性，又不会干扰用户浏览作品本身。
六、UI 和视觉细节优化
在界面优化上，重点处理了几个问题：
- 首页原本的文案和图片重叠，视觉上比较突兀，因此改成了轮播图形式。
- 页面里的“← 返回”“⌕ 搜索”等符号比较粗糙，后来改用图标库增强视觉统一性。
- 批量上传区域重新设计，减少不必要说明，让用户更快理解当前步骤。
- 作品详情页减少重复按钮，保留真正必要的操作。
- Mock Data 进一步丰富，让页面看起来不像空壳 Demo。
这些调整的本质不是“装饰”，而是让客户在体验时更容易相信这个产品方案是成立的。
七、当前阶段的收获
这次推进过程中，最大的收获是进一步明确了 HTML-Demo 的产品边界。
Demo 不应该为了“像系统”而做得很复杂，也不应该为了“快”而只做静态页面。它应该介于两者之间：
既要足够完整，能演示真实业务流程；
又要足够轻量，方便快速调整和验证想法。
另外一个重要收获是，产品逻辑必须经得起推敲。比如批量发布里“上传文件后立刻知道异常”这个细节，如果不仔细想，很容易做成看起来顺手但实际不合理的交互。只有把用户真实操作路径拆开，才能设计出更可信的 Demo。
八、后续可继续优化方向
后续可以继续关注以下几点：
- 统一各页面的视觉风格，包括按钮、卡片、间距、图标和状态提示。
- 补充更多真实感 Mock Data，让演示更贴近纺织图案和数字作品场景。
- 优化页面跳转路径，确保客户演示时不会迷路。
- 检查每个核心页面是否都有明确主操作，避免功能入口过多。
- 对批量发布、作品详情、确权信息这些重点页面做进一步视觉打磨。
九、总结
本阶段的工作重点不是单纯“做页面”，而是把“数链确权”这个产品在 PC Web 端应该如何被用户理解、如何被客户演示、如何体现业务价值梳理清楚。
目前 Demo 已经逐步从半成品材料，变成一个更完整、更清晰、更可演示的产品原型。尤其是批量发布和作品详情两个模块，已经形成了比较明确的交互逻辑和页面结构。
后续只要继续围绕“完整、简洁、可信、好演示”这几个关键词推进，就能让这个 HTML-Demo 更好地支撑客户沟通和方案验证。
评论 (0)