佛山网页设计:Web设计师必备的视觉反馈工具

2019.08.12 mf_web

115

创作过程需要花费大量时间,网页设计师也会知道。当您考虑来自客户的反馈时,流程需要更长的时间:大量的电子邮件,修订说明,聊天和会议 - 通常需要准确了解客户想要的内容。佛山网页设计

幸运的是,今天的网络提供了各种解决方案来优化通信过程。几年前,第一批允许用户报告网页上的错误的网络服务出现了。从那时起,出现了一些工具和技术,使这个过程更加方便和用户友好。今天的市场提供了几种有用的视觉错误跟踪产品,每种产品都有其优缺点。

我们选择了前五大工具,并对其功能,价格和价格进行了比较。我们希望此审核可以简化您的工作流程并加快您的团队与客户之间的沟通。

InVision LiveCapture

Invision是一种原型设计工具,使设计人员能够轻松地在设计项目上进行协作并展示他们的工作。最近,该公司宣布推出一款新工具InVision LiveCapture。它抓取实时网站的完整快照,并帮助用户在设计过程中提供反馈。

InVision使设计师能够进行协作并展示他们的作品。
InVision使设计师能够进行协作并展示他们的作品。(查看大图)

用户体验

InVision入门很容易。只需添加您的第一个项目并安装Google Chrome扩展程序即可。要开始在网页上发表评论,请单击扩展图标并选择项目。

InVision LiveCapture扩展
InVision LiveCapture扩展。

当有人添加评论时,InVision中的正常屏幕上会显示反馈,这对设计人员来说已经很熟悉了。

InVision LiveCapture扩展
InVision LiveCapture扩展。

该服务面向网页设计师,他们正在寻找一种简单的方法来获得有关他们正在进行的工作的反馈。遗憾的是,它不能用于评论实时网页或集成在大型团队的工作流程中,也不能用作错误跟踪工具。另一方面,它是免费的!

优点

  • 易于使用

  • 非常适合收集鼓舞人心的想法

  • 非常适合希望从Invision中获得更多收益的现有客户

缺点

  • 仅适用于Google Chrome

  • 需要浏览器扩展

  • 报告错误很困难

第三方整合

  • 的InVision

  • 不支持第三方项目管理或错误跟踪系统

支持的浏览器

价钱

免费计划可供个人使用。拥有最多五名成员和无限制项目的团队的订阅计划每月费用为100美元。

TrackDuck

TrackDuck是一种视觉反馈工具,非常适合网页设计人员和开发人员。用户可以突出显示页面上的问题,评论并实时接收反馈。错误报告将直接发送到仪表板,您可以在其中与他人聊天,分配任务和跟踪进度。

TrackDuck视觉反馈
使用TrackDuck,用户可以突出显示页面上的问题,评论并实时接收反馈。

用户体验

注册后,大约需要一分钟,一个简单的向导可以帮助您通过三个简单的步骤开始您的第一个项目:输入网站地址,安装扩展以捕获高质量的屏幕截图,并邀请同事进行协作项目。然后,您添加的网站将在新选项卡中打开,您可以通过选择并拖动鼠标在您发现错误的任何位置开始在网页上发表评论。您可以指定一位同事来解决问题并为该任务分配优先级。

TrackDuck视觉反馈
TrackDuck视觉反馈
它甚至适用于响应式网站,您可以随时查看智能手机上的错误
它甚至适用于响应式网站,您可以随时查看智能手机上的错误。(查看大图)
仪表板中提供了所有任务和错误报告。 问题也可以作为网页本身的引脚显示
仪表板中提供了所有任务和错误报告。问题也可以作为网页本身的引脚显示。

TrackDuck目前仅与几个系统集成:JIRA和Basecamp。集成可以双向工作 - 任务在两个系统中自动发送和更新,无需双重输入。

优点

  • 无限数量的团队成员

  • 跨浏览器

  • 技术细节自动收集

  • 使用WebSockets实时

  • 无需扩展

  • 允许匿名反馈

缺点

  • 需要扩展才能捕获高质量的屏幕截图

  • 很少有系统可以集成

第三方整合

  • Basecamp(双向)

  • JIRA(两种方式)

  • WordPress插件

  • Modx插件

支持的浏览器

  • IE浏览器

  • 苹果浏览器

  • 火狐

  • bookmarklet(适用于其他浏览器)

价钱

您可以获得全功能版本的14天免费试用版。免费版允许一个项目和无限贡献者。付费订阅计划起价为每月19美元。还提供定制企业计划。

BugMuncher

Bugmuncher是一个方便的Web应用程序,允许您突出显示网站上的问题。用户可以在他们发现问题的网站的特定区域做笔记。BugMuncher将自动截取突出显示区域的屏幕截图并将其发送给您。

BugMuncher
BugMuncher允许您突出显示网站上的问题。

用户体验

安装BugMuncher并开始使用并不复杂。您所要做的就是将代码嵌入您的网站。任何曾经设置Google Analytics的人都可以处理它。没有入职旅游,这可能是没有经验的用户的问题。此外,当您在网站上嵌入代码时,会为页面的所有访问者显示一个小快捷方式,允许他们突出显示或(如果他们需要隐藏个人数据)使页面的某些部分变黑。但是,您无法向网页添加单独的文本注释。

仪表板中提供了所有任务和错误报告
仪表板中提供了所有任务和错误报告。问题也可以作为网页本身的引脚显示。

在测试这个工具时,我无法向下滚动页面并被限制在可见区域内工作,这有点奇怪。

突出显示页面区域后,系统将提示您输入电子邮件地址,描述您找到的错误并提交。您可以访问所有报告,配置电子邮件警报并在仪表板中设置集成。

优点

  • 跨浏览器

  • 自动附加技术细节

  • 无需延期

  • 允许匿名反馈

  • 支持Internet Explorer至版本7

缺点

  • 不是实时的

  • 无法选择页面的特定区域

  • 无法评论页面上的动态元素

第三方整合

  • GitHub上

  • activeCollab

  • 到位桶

  • Trello

  • 的Zendesk

支持的浏览器

  • 火狐

  • 苹果浏览器

价钱

提供30天免费试用。之后,对于一个帐户的个人订阅,每月定价为19美元。有多少团队成员可以使用BugMuncher,没有限制; 配置文件限制是指反馈报告的单独“桶”和不同的通知选项 - 每月99美元。

BugHerd

BugHerd是一个简单的错误跟踪和协作工具,适用于网页设计师及其客户。它允许用户使用简单的点击界面标记网页上的问题,并提交问题报告。

BugHerd主页
BugHerd允许用户使用简单的点击界面标记问题并提交问题报告。(查看大图)

用户体验

您不需要信用卡即可注册。注册非常简单:您可以通过安装浏览器扩展程序或向您的网站添加JavaScript代码来尝试该工具。完成这两件事之一后,您就可以添加要使用的网站了。不要忘记包含http://或https://,否则它将无法正常工作。

完成短暂的入职流程后,您将全部设置好,并可以直接将问题和错误固定到网页上。您无法突出显示页面的随机区域; 该工具与DOM元素绑定 - 一个有用但有问题的解决方案。我们在选择页面的大部分区域时特别困难。

虽然不是主要问题,但指标在浅色和灰色背景上很难注意到,因此您可能不得不参考任务列表来查找它。

另一个缺点是侧面板的尺寸和位置占据了页面的大部分,隐藏了您的针脚和大部分页面。

侧板有点太大了
侧板有点太大了。

BugHerd提供了大量的集成(我们尝试过Basecamp和JIRA)。不幸的是,集成似乎现在只有一种方式 - 在Bugherd中创建的任务被发送到Basecamp,但如果你直接在Basecamp中更新它们,你将不会收到Bugherd中的更改通知。

Bugherd工具栏
Bugherd的工具栏。(查看大图)

总的来说,产品非常好。用户体验在某些方面值得怀疑 - 如上所述,侧面板太大了。价格也有点陡峭; 准备为五人团队支付近100美元。

优点

  • 直接在网页上突出显示错误

  • 允许匿名评论

  • 每个错误报告都会自动发送截图

  • 很多第三方集成

缺点

  • 边栏太大了

  • 与第三方系统集成是一种方式

  • 相当昂贵

  • 捕获屏幕截图所需的扩展

  • 团队昂贵

第三方整合

  • JIRA

  • 大本营

  • GitHub上

  • 管理平台

  • 的Zendesk

  • Pivotal Tracker

支持的浏览器

  • 火狐

  • 苹果浏览器

  • IE浏览器

价钱

定价从每月19美元起。可以进行简短的免费试用,之后您将需要为该帐户上的每个用户付费。

显着

值得注意的是一个基于Web的应用程序,用于共享有关图像,模型和实时网站设计的反馈。用户截取任何界面的屏幕截图,在他们想要评论的区域周围绘制一个框,然后输入他们的反馈。

值得注意的主页
值得注意的是一个基于Web的应用程序,用于共享有关图像,模型和实时网站设计的反馈。

用户体验

即使您选择了试用帐户,也可以通过输入付款详细信息开始注册过程。如果您想跳过此步骤,则只需在YouTube上观看该服务的演示视频,然后安装所需的扩展程序即可。然后,当您单击扩展程序的图标时,应用程序会自动截取屏幕截图并将其上传到服务器。上传后,您将被重定向到保存的屏幕截图,您可以在其中突出显示任何区域并添加注释。

值得注意的是行动
值得注意的是行动。(查看大图)

它还以文本格式保存页面中的HTML和CSS,包括元标记。一些代码,样式和图像的分离似乎没有BugHerd和TrackDuck的方法那么有用,但它可能会吸引一些用户。

优点

  • 导出自定义PDF

  • 无限的团队成员

  • 能够评论源代码

缺点

  • 信用卡是必需的

  • 浏览器扩展是必需的

  • 无法标记网页的动态元素

第三方整合

  • 没有找到信息

支持的浏览器

  • IE浏览器

  • 苹果浏览器

  • 火狐

  • bookmarklet(适用于其他浏览器)

价钱

定价从每月19美元起,并提供30天的试用期。所有计划都需要信用卡。

我们的选择

在视觉反馈工具之前,如果没有设计师和开发人员之间无休止的电子邮件和聊天,很难想象项目经理的日常工作流程。电子邮件是主要的沟通方式,感觉浪费时间。

我们的一位同事向我们介绍了BugHerd,这是一个很棒的Web工程协作工具,我们开始使用它。后来,我们切换到TrackDuck有几个原因。首先,该服务相对较新,并利用现代网络技术。它还提供相同的功能,但对于大中型团队而言,它们的价格要便宜得多。此外,我们使用Basecamp来管理项目,这两个应用程序很好地集成。作为奖励,TrackDuck提供双向集成,更新将自动发送到两个系统。

摘要

视觉反馈和错误跟踪服务正变得越来越流行,将其中一个集成到其工作流程中将简化任何Web开发人员的通信过程。考虑到我们已经确定并且我们认为最有用的五个,我们已经在下表中列出了每个优点,以帮助您确定哪个适合您。

ServiceAdvantagesPricing

InVision LiveCapture
  • 易于使用

  • 非常适合收集鼓舞人心的想法

  • 非常适合希望从Invision中获得更多收益的现有客户

  • InVision用户免费

TrackDuck
  • 无限数量的团队成员

  • 跨浏览器

  • 技术细节自动收集

  • 使用WebSockets实时

  • 无需延期

  • 允许匿名反馈

  • 0美元 - 49美元

  • 为期14天的试用期

  • 免费计划永远

BugMuncher
  • 导出自定义PDF

  • 无限的团队成员

  • 能够评论源代码

  • 19美元 - 199美元

  • 30天试用期

BugHerd
  • 直接在网页上突出显示问题

  • 允许匿名评论

  • 每个错误报告都会自动发送屏幕截图

  • 很多第三方集成

  • 29美元 - 180美元

  • 为期14天的试用期

显着
  • 导出自定义PDF

  • 无限的团队成员

  • 能够评论源代码

  • 19美元 - 99美元

  • 30天试用期

  • 需要信用卡

如果您有使用视觉反馈服务的经验,请在下面的评论中告诉我们。

佛山网页设计

最新案例

寒枫总监

来电咨询

400-6065-301

微信咨询

寒枫总监

TOP