Pngtree 重设计

为设计师重塑工具平台的使用体验

项目背景

Pngtree 是一个提供图片与设计资源的素材网站，虽具备为免费用户和付费用户带来价值的潜力，但其原有体验却显得杂乱、繁琐且不清晰。 我们发现，视觉干扰严重、导航结构不一致、会员升级流程混乱等问题，让用户很难找到所需资源，或理解如何解锁更多功能。

Pngtree 是一个提供图片与设计资源的素材网站，虽具备为免费用户和付费用户带来价值的潜力，但其原有体验却显得杂乱、繁琐且不清晰。 我们发现，视觉干扰严重、导航结构不一致、会员升级流程混乱等问题，让用户很难找到所需资源，或理解如何解锁更多功能。

客户

Pngtree

服务范围

启发式评估（Heuristic Evaluation） 可用性测试（Usability Testing） 交互原型设计（Interactive Prototype）

启发式评估（Heuristic Evaluation） 可用性测试（Usability Testing） 交互原型设计（Interactive Prototype）

所属行业

图片素材与数字设计行业

项目时间

2024年1月

Dashboard Sidebar Close Up
Dashboard Sidebar Close Up
Dashboard Sidebar Close Up

项目成果


我们对关键用户流程进行了重设计，目标是：明确平台价值、简化导航路径、降低使用阻力。

最终原型聚焦于：




✅ 更简洁的图片搜索与下载体验

✅ 更直观的信息化会员升级流程

✅ CTA按钮、导航标签、价格层级的视觉语言统一

✅ 减少干扰元素，增强信任感，引导用户顺畅浏览


结果是：一个更清爽、透明、可信的使用体验，不论是单次下载资源，还是探索订阅方案，用户都能更加轻松地完成任务。

1. 下载一张“全国小狗日”海报素材


  • 标签式导航，快速浏览各类素材

  • 简洁的详情页展示核心参数

  • 下载按钮改为下拉式，选项清晰不干扰

  • 下载后弹窗简洁，便于用户反馈

2. 申请团队版付费会员服务


  • “订阅”按钮明显易找

  • 会员方案标签解释清晰

  • 搜索/筛选功能便于发现适合方案

  • 列表对比视图，方便方案横向对照

设计过程回顾


启发式评估


我们首先运用 Nielsen 的10条可用性原则及关键反应分析（Critical Response）展开审查，发现以下主要问题：

  • 过度的 CTA 导致用户决策疲劳

  • 图标与标签使用不统一，导航迷失

  • 授权信息模糊，用户不确定素材使用范围

用户测试


我们随后通过线上与线下方式，邀请了7位用户进行测试。任务包含下载图片、购买会员等常见流程。


测试结果提供了关键洞察：

  • 用户对“授权说明”与“下载限制”存在误解

  • 很多重要视觉提示被忽略

  • 升级页面过于拥挤，导致用户中途放弃

  • 个人与团队方案混淆，缺乏清晰引导

设计改进


根据测试反馈，我们设计了低保真与中保真原型，聚焦解决最紧迫的问题：

  • 新首页结构强化信息层级

  • 将会员方案整合至更清晰的标签式结构中

  • 下载按钮改为下拉形式，减少视觉干扰

  • 下载后弹窗简化，并将授权信息提前展示

  • 移除重复CTA，引导路径更明确


前后对比

新版体验更加清晰、统一、可控，与原先碎片化、信息过载的界面形成鲜明对照。

项目总结 这个项目让我再次认识到—— 优秀的产品体验，并不在于堆砌功能，而在于让现有的功能“更自然、更可信、更顺手”。 通过一系列小而精准的优化，我们成功将一个混乱的界面，转变为流畅、友好、值得信赖的用户体验。

项目总结 这个项目让我再次认识到—— 优秀的产品体验，并不在于堆砌功能，而在于让现有的功能“更自然、更可信、更顺手”。 通过一系列小而精准的优化，我们成功将一个混乱的界面，转变为流畅、友好、值得信赖的用户体验。