界面研究与练习 · 服务网站与客户工作台研究
CUT.STUDIO 视频剪辑工作室
独立研究 Nas.com 界面，重建 31 个原站公开页面，并接入真实客户与管理员流程，涵盖需求、私有文件、反馈和版本审阅。
这是自主制作、概念设计或界面练习，展示可查看的设计与实现；并非客户委托成果，未提供客户营收或转化成效证明。
项目拆解
从页面结构，到实际画面。
ZequnWeb 自主作品，非客户委托；Demo 中的品牌、评价与数据属于展示内容，不代表已核实的客户成果。
完整网站与手机画面
英文 Demo 的桌面与手机长图会自动从顶部展示到底部。可暂停后手动滚动、从头重播，或打开原图。
01 / 页面架构
访客的信息浏览路径
- 01服务页面
- 02价格与常见问题
- 03账号
- 04项目需求
- 05文件与反馈
- 06交付审阅
02 / 视觉设计
黄色 Start 按钮与大幅媒体延续已注明来源的 Nas.com 参考；公开页面介绍服务，自主实现的工作台以状态、文件与版本组织协作。
03 / 响应式取舍
服务展示与工作台采用不同信息密度，响应式布局将导航、需求字段和交付操作组织到窄屏内容区。
依据现有实现整理的设计分析，不将其表述为客户调研或用户测试记录。
具体实现
技术栈
- HTML
- CSS
- JavaScript
- Cloudflare Pages Functions
- D1
- R2
- Cloudflare Pages
仅列出现有项目记录或公开脚本可支持的技术；内容架构与 UX 在上方单独说明。
界面研究与练习
交付内容与项目结果
概念重点
这个概念展示什么
概念背景
这是 ZequnWeb 为虚构品牌 CUT.STUDIO 制作的独立研究。公开页面视觉与已注明来源的参考素材依据 Nas.com 重建，客户工作台和后端由本站独立实现；并非客户委托，与 Nas.com 无关联。
改变了什么
首页延续 v5 的参考视觉与封面；完整公开网站接入本站注册、客户项目管理和管理员交付流程。
设计与实现重点
- 31 个核心公开页面保留原站布局、媒体和交互，并提供规范路径别名
- 客户与管理员角色使用真实会话及项目所有权校验
- 私有 R2 文件通过登录鉴权上传与下载，每文件限制 25 MiB
- 项目需求、进度、评论和活动记录持久保存于 D1
- 交付支持多版本审阅、修改请求和最新版本批准
- 一次性恢复码可恢复账号访问，无模拟邮件发送流程
项目问题
忠实复刻服务网站，还需要把账号、项目需求、私有素材和交付审阅连接成独立可用的业务流程。
解决方案
依据原站布局、CSS、媒体和交互重建 31 个核心公开页面及规范路径别名；另外以 Cloudflare Pages Functions、D1 和私有 R2 存储实现本站客户工作台与管理员后台。
交付内容
- 31 个原站公开页面、规范路径别名与响应式导航
- 参考站字体、媒体、平滑 FAQ 与素材来源说明
- 注册、安全会话登录、修改密码与一次性恢复码
- 客户需求、每文件最多 25 MiB 的私有上传与项目反馈
- 管理员分配、进度更新与项目活动记录
- 多版本交付、修改请求与最新版本批准
技术栈
- HTML
- CSS
- JavaScript
- Cloudflare Pages Functions
- D1
- R2
业务价值
这个项目说明什么
将忠实的公开界面连接到真实服务流程，通过项目所有权校验、私有文件权限和反馈交付记录支持客户与工作室协作。
从这里开始
想把这个方向做成真实网站？
发我你的公司类型、现有网站或参考网站、目标客户和预算范围。我会先帮你收窄合适范围。