SitePoint播客＃170：与HotGloo的Wolf Becvar进行交互式线框图

Episode 170 of The SitePoint Podcast is now available! This week our regular interview host Louis Simoneau (@rssaddict) interviews Wolf Becvar (@wdbecvar) the COO of HotGloo to talk about Interactive Wireframes and how HotGloo was developed for this job, and where it will go next.

SitePoint Podcast的第170集现已发布！ 这一周我们的定期访谈主持人路易斯西莫努( @rssaddict )采访狼Becvar( @wdbecvar )的COO HotGloo谈互动线框以及如何HotGloo是为这项工作的发展，并在那里将去旁边。

下载此剧集 (Download this Episode)

You can download this episode as a standalone MP3 file. Here’s the link:

您可以将本集下载为独立的MP3文件。 这是链接：

• SitePoint Podcast #170: Interactive Wireframing with Wolf Becvar of HotGloo (MP3, 24:40, 23.7MB)

  SitePoint播客＃170：与HotGloo的Wolf Becvar进行交互式线框图 (MP3，24:40，23.7MB)

剧集摘要 (Episode Summary)

Louis and Wolf discuss the reasons and benefits in terms of aspects like copy and micro-copy of Interactive Wireframing over jumping into design first, or starting in HTML5 prototyping.

Louis和Wolf从交互式线框图的复制和微观复制等方面讨论了原因和好处，而不是首先进入设计阶段，还是从HTML5原型开始。

Browse the full list of links referenced in the show at http://delicious.com/sitepointpodcast/170.

浏览http://delicious.com/sitepointpodcast/170上显示的参考链接的完整列表。

面试成绩单 (Interview Transcript)

Louis: Hello, and welcome to another episode of the SitePoint podcast. With me on the show today, I have Wolf Becvar. Hi, Wolf.

路易斯：您好，欢迎收看SitePoint播客的另一集。 今天和我一起表演的是沃尔夫·贝克瓦尔。 嗨，狼。

Wolf: Hi.

狼：嗨。

Louis: Wolf is the COO of a company called HotGloo, which is sort of this online tool for interactive prototyping. For anyone who builds websites or software, just to sort of sketch out the types of interactions that’ll go into each page before actually launching into full on design.

路易斯：沃尔夫是一家名为HotGloo的公司的首席运营官，这是一种用于交互式原型制作的在线工具。 对于构建网站或软件的任何人，只是在实际开始全面设计之前，先勾勒出进入每个页面的交互类型。

I thought it’d be great to have you on to talk a little bit about just the role of UX design and wireframes and prototyping in web design, because it’s not something we cover a lot on the show. I just recently started using HotGloo, and I really like the tool, so I figured who better to have on to talk about this stuff?

我认为，很高兴能与您聊聊UX设计和线框以及原型在Web设计中的作用，因为这不是我们在展会上讨论的很多内容。 我最近才刚开始使用HotGloo，而且我真的很喜欢该工具，所以我想知道谁最想讨论这个东西？

Wolf: Well, thanks a lot for inviting me. When we started, now three years ago, in 2009, we saw a need in a tool like we built back then. Hannes and myself, Hannes is the CEO and the CTO, we were working at an interactive media agency. He was a developer there, and I was doing project management, I was doing concept stuff.

沃尔夫：恩，非常感谢您邀请我。 当我们三年前(2009年)开始工作时，我们看到了对当时所构建工具的需求。 Hannes和我本人，Hannes是CEO和CTO，我们在一家互动媒体代理机构工作。 他是那里的一名开发人员，我当时在做项目管理，我当时在做概念工作。

We were realizing that a lot of our workflow was based on – we were getting into a client meeting. We were writing down specifications. We had our layouts basically of what the client’s idea was of his future website.

我们意识到很多工作流程都基于–我们正在参加客户会议。 我们正在写下规格。 我们的布局基本上是关于客户对未来网站的想法。

What was happening back then was that actually the designers would jump straight in, fire up Photoshop, and would start to design right away. Back then, there was this kind of idea flowing over that we were then jumping on to say, “Well, that’s not the right way to do it. We actually should think about whole site structure, information architecture first. Then after all these processes have been laid out and are being discussed with the client, then we actually should jump in and do the design.”

当时发生的事情是，设计师实际上会直接跳进来，启动Photoshop，然后立即开始设计。 当时，这种想法泛滥成灾，然后我们跳着说：“嗯，这不是正确的方法。 我们实际上应该首先考虑整个站点的结构，信息结构。 然后，在所有这些流程都已布局并与客户讨论之后，我们实际上应该介入并进行设计。”

That was the basic idea for HotGloo back then. What also was very important for us when we started out was that this whole process is actually a really collaborative process. It’s not that in your whole team of 45 people in an agency, everybody’s working independently and one is doing only the design, the other’s doing only the development.

那是HotGloo当时的基本想法。 对于我们来说，起步时最重要的是整个过程实际上是一个真正的协作过程。 并不是说在一个机构中由45人组成的整个团队中，每个人都是独立工作，一个人只做设计，另一个人只做开发。

Of course there are these specialized roles within a team, but for us it was really important that everybody on the team was on the same page. Then, when we started out, that actually someone who started doing wireframes would have the designer, the developer, you know, surely every second day looking on the project and bringing in his thoughts and sharing the ideas.

当然，团队中有这些专门的角色，但是对我们来说，团队中的每个人都在同一页面上真的很重要。 然后，当我们开始工作时，实际上是一个开始进行线框设计的人肯定会隔天第二天让设计师，开发人员来看项目，并提出他的想法并分享想法。

At an earlier point of the project, everybody in the team would know where the project would head to. You’d have the client come in again. You would show them, first rough sketches, the first wireframes. He can click himself through. He can experience his site before even anything is being designed or developed.

在项目的较早阶段，团队中的每个人都将知道项目的去向。 您会让客户再次进来。 您将显示它们，第一个粗略草图，第一个线框。 他可以点击自己。 他甚至可以在设计或开发任何东西之前就可以体验他的站点。

So, we realized that this whole process is, first of all, an iterative process for us. The outcome is getting better and better. For the client, it’s easier because he’s been on board from day one, and you actually can show him his work in progress in small bites and small steps along the way. Before it was he would come in, have this briefing and two, three weeks later he’d come back in and we would present him design files. Then, there would be big arguments about color and stuff.

因此，我们意识到整个过程首先对我们来说是一个迭代过程。 结果越来越好。 对于客户而言，这很容易，因为他从第一天起就一直在公司工作，实际上，您可以一口咬一口，一步一步地向他展示他正在进行的工作。 在他来之前，先做个简介，然后两三个星期后他再来，我们将向他介绍设计文件。 然后，会有关于颜色和材料的大争论。

Louis: Right.

路易斯：对。

Wolf: First of all, getting projects done faster, everyone is on the same page. This whole iterative process has really helped us making better stuff.

沃尔夫：首先，要更快地完成项目，每个人都在同一页面上。 整个迭代过程确实帮助我们制作了更好的东西。

Louis: Yeah, absolutely. We’ve just sort of tried to move our development. I work on flippa.com, and we’ve sort of moved our development a little bit more into that model, where sort of everybody can contribute. That’s one of the reasons why I’ve started using HotGloo to work on prototypes, is simply because my role traditionally in the team, I’m a back-end developer. I do Ruby on Rails.

路易斯：是的，绝对。 我们只是试图转移我们的发展。 我在flippa.com上工作，我们已经将开发工作移到了该模型中，每个人都可以做出贡献。 这就是为什么我开始使用HotGloo进行原型开发的原因之一，这仅仅是因为我在团队中的传统工作是后端开发人员。 我做Ruby on Rails。

But being able to start working on products and have an idea of what they’re going to look like and be able to get input from everybody… You talk about clients obviously. We’re dealing with an application where we don’t deal with our clients. But we even have, for example, support people who can look at the prototypes and they know our customers better than anybody else, and be able to give feedback early on.

但是能够开始开发产品并了解它们的外观，并能够从每个人那里得到建议……您显然是在谈论客户。 我们正在处理不与客户打交道的应用程序。 但是，例如，我们甚至可以帮助可以查看原型的人员，他们比其他人更了解我们的客户，并且能够尽早提供反馈。

So, the interesting thing about these tools, I guess, is there’s an ongoing discussion between people who tend to value really fully specked out design comps that give you a very good idea of what the visual design of a website is going to be. Some people prefer to do sort of wireframes or sketches that give an idea of the layout and content of each page.

因此，我猜想，关于这些工具的有趣的事情是，人们之间正在不断进行讨论，这些人们往往非常看重真正精挑细选的设计要素，从而使您对网站的视觉设计有一个很好的了解。 有些人喜欢做一些线框或草图，以便对每个页面的布局和内容有所了解。

Then, there are tools like this that really are more aimed, if I understand correctly, at outlining sort of the interaction, because they’re interactive prototypes that you can click through and see how the pages link together.

然后，如果我正确理解的话，有这样的工具实际上更着重于概述交互，因为它们是交互式原型，您可以单击并查看页面如何链接在一起。

Wolf: Exactly, yes.

沃尔夫：是的，是的。

Louis: In your work, was interactive prototyping something you were doing before you built this and you just saw that the tools out there didn’t suit your needs? Or was it something you came to as a result of building HotGloo?

路易斯：在您的工作中，在构建此模型之前是否正在进行交互式原型制作，您只是发现那里的工具不适合您的需求？ 还是由于构建HotGloo而产生的东西？

Wolf: I think it was something that came with the result of building it. When we started in the first place, we were using other tools, which were out there back then. We were using Axure and we were using Balsamiq.

沃尔夫：我认为这是建立它的结果。 当我们刚开始时，我们使用的是那时的其他工具。 我们正在使用Axure，并且正在使用Balsamiq。

For us, these tools, when we showed them to our designers they were like, “Well that’s something I can do in Illustrator. That’s something that I can do in Photoshop.” A project management account came up and said, “Well, that’s something I can do in PowerPoint or Keynote.”

对我们来说，这些工具向我们的设计师展示时就像：“这是我可以在Illustrator中完成的。 那是我可以在Photoshop中完成的工作。” 一个项目管理帐户出现，说：“好吧，这是我可以在PowerPoint或Keynote中完成的。”

When we started with our own tool, we thought, “Well, what’s the distinguishing factor that you cannot do with these tools, and that’s vital to the whole process?” That’s building interactive prototypes and not so much focusing on the high fidelity visual hierarchy, because that’s a completely different story, to build a pixel perfect kind of prototype, fully designed and interactive.

当我们开始使用自己的工具时，我们认为：“嗯，您无法使用这些工具的区别因素是什么，这对整个过程至关重要吗？” 这是在构建交互式原型，而不是将重点放在高保真视觉层次上，因为这是一个完全不同的故事，它是构建像素完美的原型，经过全面设计和交互的原型。

We just wanted to make sure that the process building wireframe is as easy as possible, but you have the whole flexibility of doing a really smart interactive linkaging within your prototypes. For us, it wasn’t so much the visual hierarchy, to be really visual, on the point and really high fidelity, but something that goes from really rough wireframes to adding more and more interactions. Essentially build really interactive wireframe, smart interactions with a few stacks and kind of state changes out of your project.

我们只是想确保过程构建线框尽可能简单，但是您具有在原型内进行真正智能的交互式链接的全部灵活性。 对我们而言，并不是真正意义上的视觉层次结构，而是真正的高度逼真度，而是真正粗糙的线框到添加越来越多的交互。 从本质上来说，可以构建真正的交互式线框，具有少量堆栈的智能交互以及项目外的某种状态变化。

Louis: Yeah, that’s one of the things sort of drew me to this tool, among other things. I’ve played around with a few different wireframing tools, and a lot of them will have links from one page to another. But sometimes, when you’re working on something that’s a forum or a multi-step process that involves changes in the state, like you mentioned, just linking between pages is difficult. Or you have to create a page for every possible state of the application.

路易斯：是的，这是吸引我使用此工具的原因之一。 我玩过几种不同的线框图工具，其中许多将具有从一页到另一页的链接。 但是有时，当您正在处理涉及状态变化的论坛或多步骤过程时，就像您提到的那样，仅在页面之间链接是很困难的。 或者，您必须为应用程序的每种可能状态创建一个页面。

Whereas, in your tool you’ve kind of built in a few little primitive programming concepts that give you the ability to have a little more interaction, like changing a state for example. If you select an option from the drop-down, then that can have an impact on a state, then clicking the next button does something different depending on that state. So, you can really create a prototype that is a pretty accurate representation of the final flow of what a real application would feel like.

而在您的工具中，您已经内置了一些小的原始编程概念，这些概念使您能够进行更多交互，例如更改状态。 如果从下拉菜单中选择一个选项，则可能会对状态产生影响，然后单击“下一步”按钮会因状态而异。 因此，您可以真正创建一个原型，该原型可以非常精确地表示真实应用程序的最终流程。

Wolf: Yeah.

狼：是的。

Louis: At least I don’t think I’ve come up with a situation where there was an interaction that I needed that I couldn’t hack together with combinations of stacks and variables in HotGloo.

路易斯：至少我不认为我遇到过这样的情况，即我需要一种无法与HotGloo中的堆栈和变量组合一起破解的交互。

Wolf: Yeah. There are a couple out there, which we’re kind of looking at right now. Like some timed interactions or stuff like that. Overall, that was basically our idea. When you’re building interactive wireframes, it could be very time consuming. I get that from the whole discussion that’s going on right now on the web. Now, people say, “Well, the whole process of wireframing is very time consuming. Why not skip that and jump right into HTML prototype?’

狼：是的。 有一对夫妇，我们现在正在研究。 像一些定时的交互之类的东西。 总体而言，这基本上是我们的想法。 当您构建交互式线框时，可能会非常耗时。 我从网上正在进行的整个讨论中得到了这一点。 现在，人们说：“嗯，线框图的整个过程非常耗时。 为什么不跳过它而直接进入HTML原型呢？

Yeah. For those who are familiar with coding, fine. For us it was in order to build the really sophisticated interactive wireframe, we needed to make this process as easy as possible. A lot of other tools, they’re just linking basically pictures they’re making out of the interactions.

是的 对于那些熟悉编码的人，很好。 对我们来说，为了构建真正复杂的交互式线框，我们需要使此过程尽可能容易。 许多其他工具，它们只是将基本上是通过交互作用制作的图片链接在一起。

But for us, it was important that when you use the navigation and you’re bringing the whole site map into this navigation that once you change, for example, a page name in the site map. Then the page name in the navigation changes as well, because that’s the whole idea of an interactive wireframe as well.

但是对于我们来说，重要的是，当您使用导航并将整个站点地图带入此导航时，一旦更改，例如站点地图中的页面名称。 然后，导航中的页面名称也会更改，因为这也是交互式线框的整体思想。

That it’s a smart little thing that updates itself once you change a master, in the master’s view. The master is changed on each page you kind of put him. Interactive wireframes shouldn’t be a process that is so time consuming overall that in the end you kind of think, “Well, wow, I could have saved this time and jumped right into HTML prototyping.”

这是一件聪明的小事情，一旦您更改了母版，它在母版的视图中就会自动更新。 母版在您放入他的每一页上都会更改。 交互式线框不应该是一个总耗时的过程，以至于您最终会想：“好吧，哇，我本可以节省时间，直接进入HTML原型制作。”

Louis: Right. You touched briefly on the idea of people wanting to do prototypes directly in HTML rather than using this kind of tool. I guess the argument there is that when you’re done, you have the first steps of the finished product. Do you feel like that for some teams is a valid strategy? Or do you really strongly believe in the idea of creating a prototype outside of HTML and then only diving into code once the interactions are really nailed down?

路易斯：对。 您简短地谈到了人们希望直接用HTML而不是使用这种工具来制作原型的想法。 我猜想这里有一个争论，那就是当您完成后，您便拥有了完成产品的第一步。 您觉得对于某些团队来说这是一个有效的策略吗？ 还是您真的坚信在HTML之外创建原型然后仅在真正确定交互作用后才跳入代码的想法？

Wolf: To be honest, I deeply believe everyone has his tool or his toolkit. There are people out there who are jumping into HTML prototyping, and for them they would never go back and do wireframing again in a third-party tool.

沃尔夫：说实话，我深信每个人都有自己的工具或工具包。 有些人正在进入HTML原型制作，对于他们来说，他们再也不会回过头来使用第三方工具进行线框图了。

I just see that there are a lot of people coming to wireframing that haven’t thought of this process before. When we started out from the first kind of update, we had, we kind of saw that there is also a strong need of kind of talk about it and this kind of educational thing. That we’re also trying to kind of roughly visualize with our Posterous blog and Wireframe Wednesday, where we’re just scanning the web and trying to put together articles we found on the topic of wireframing and prototyping and these experienced topics.

我只是看到有很多人在进行线框图制作之前从未考虑过此过程。 当我们从第一种更新开始时，我们发现，也非常需要对此进行讨论以及这种教育性的事情。 我们还试图通过Posterous博客和Wireframe Tuesday进行粗略的可视化，在这里我们只是扫描网络，并试图将我们发现的有关线框图和原型设计以及这些经验丰富的主题的文章放在一起。

Because I strongly believe that there are so many people out there and so many teams that haven’t even thought about the process of trying to lay out something before they actually go in to build it. So, I’d say for those people it’s really wise to have a tool, because in most cases they’re not developers. They don’t know any programming languages.

因为我坚信那里有这么多的人，而且有那么多的团队甚至没有考虑过在实际建造东西之前尝试布置东西的过程。 因此，对于那些人来说，拥有一个工具确实是明智的，因为在大多数情况下，他们不是开发人员。 他们不懂任何编程语言。

Sometimes they’re project managers, designers. We’re also seeing graphic designers jumping into web design who have to do web design projects, who kind of came to us and said, “Well, that’s a really cool tool, because for the first time I can very easily put something together that’s interactive, that’s clickable, that I can show our clients.”

有时他们是项目经理，设计师。 我们还看到图形设计师跳入Web设计，他们必须执行Web设计项目，他们来找我们说：“嗯，这是一个非常酷的工具，因为第一次我可以很容易地将某些东西放在一起互动，这是可点击的，这样我可以向我们的客户展示。”

That’s something that’s really important for us. Although we see ourselves as a professional tool, but to actually have people on board that are trying out these processes for the first time, and also get along with the tool as easy as someone who has tried a bunch of tools and is really experienced.

那对我们来说真的很重要。 尽管我们将自己视为一种专业工具，但是实际上让人们第一次尝试这些过程，并且像尝试了很多工具并且经验丰富的人一样轻松地使用该工具。

Louis: Yeah, absolutely. One of the things I found is that if you’re either trying to do Wireframes or prototypes in a sophisticated design tool like Photoshop, or trying to do them in code, is that it’s very easy to sort of accidentally be sucked into doing detail work. It’s hard to keep yourself in the mind frame of, “All I’m trying to do here is nail down the interaction.”

路易斯：是的，绝对。 我发现的一件事是，如果您尝试使用诸如Photoshop之类的复杂设计工具来制作线框或原型，或者尝试以代码形式进行处理，那么很容易被偶然地吸引到进行详细工作中。 很难让自己陷入“我在这里要做的就是确定互动”的思想框架。

I start worrying about the radius of the corner and the shade of the gradient instead of what words are on the page and what links to what.

我开始担心转角的半径和渐变的阴影，而不是页面上有哪些单词以及指向哪些内容的链接。

Wolf: Yeah. Sometimes I feel this whole idea of HTML prototyping is not as far away from the process we had before, jumping right into design in Photoshop. As you mentioned, you’re getting sucked into detail work. That what was happening before as well. It wasn’t so much on the interactive side, but it was on the design side.

狼：是的。 有时，我觉得HTML原型的整个构想与我们之前的过程相距甚远，而是直接进入Photoshop中的设计。 正如您所提到的，您将被吸引到细节工作中。 那也是之前发生的事情。 在交互方面并没有那么多，但是在设计方面。

But it was also with designing or jumping straight into design in Photoshop, it was from first click on, you’re into detail work. You’re into thinking about gradient radius and thinking about color, the whole color sphere of the project you’re building.

但是它也可以在Photoshop中进行设计或直接进入设计，这是从第一次单击开始，您就可以进行详细的工作。 您正在考虑渐变半径和颜色，即正在构建的项目的整个颜色范围。

We all agreed back then that it’s not a good to idea to really start with the design. Now it’s this discussion about starting with HTML prototyping. Sometimes I see really similarities of these two processes. Not in general, but in this sort of being sucked into details that with wireframing, you kind of leave out or you cut out.

当时我们都同意，真正开始设计并不是一个好主意。 现在是关于从HTML原型开始的讨论。 有时我看到这两个过程的真正相似之处。 一般而言，不是这样，而是通过线框图将其吸引到细节中时，您会省去或删掉。

We have people who come to us and kind of ask for features, or trying to get feedback. A lot of this feedback is, when you analyze it, it goes more and more into details. People would like to have bigger color palettes. They would like to have more fonts. They would like to have all symbols rotating and that kind of stuff.

我们有一些人来找我们，要求提供功能或试图获得反馈。 当您分析它时，很多反馈都越来越多地涉及细节。 人们希望拥有更大的调色板。 他们想要更多的字体。 他们希望所有符号都旋转，并且有类似的东西。

I always remind them that our vision of the tool is it’s not a visual design tool. It’s a wireframe tool. Everything that goes into too much detail for me personally is like then going into prototyping. That’s something that you can do in the browser. That’s something you do or you can actually do that afterwards when you design the page, which isn’t something you necessarily have to do when you wireframe.

我总是提醒他们，我们对工具的愿景不是视觉设计工具。 这是一个线框工具。 对于我个人而言，进入太多细节的一切就像进入原型。 您可以在浏览器中执行此操作。 那是您要做的事情，或者您实际上可以在设计页面之后再做，而不必在进行线框设计时要做。

Louis: Yeah. One of the things our team has found with regards to doing this kind of interactive prototyping is it forces a greater focus on the words that are on each page. Not just the content, but sort of the copy that accompanies any of the functionality of an application. Whereas if you start in design you’re thinking about pixels and gradients, and you put some lorem ipsum in there. If you start with an HTML prototype you might be doing the same thing.

路易斯：是的。 我们的团队发现与进行这种交互式原型制作有关的一件事是，它迫使人们更加关注每一页上的单词。 不仅是内容，还包括应用程序任何功能随附的副本。 而如果您从设计开始，便会考虑像素和渐变，然后在其中放入一些lorem ipsum。 如果从HTML原型开始，那么您可能会做同样的事情。

But when you’re working with a wireframe or an interactive prototype, the only thing that someone sees when they get to this page is some words on a button. Then you think about what those words are and what are the best words and how to explain the process, especially when you’re working with a complicated process.

但是，当您使用线框或交互式原型时，当人们进入此页面时，唯一看到的就是按钮上的一些文字。 然后，您需要考虑这些词是什么，什么是最好的词，以及如何解释过程，尤其是在处理复杂过程时。

The first job I did for this was sort of working on redesigning our whole listing sale process. That’s a massive – it ends up being sort of a seven step wizard with a lot of moving parts. Really forcing us to pay attention to the words on the page was sort of a revelation I guess from a team that had always been sort of “come up with an idea for something and then start building it straight away” to moving into thinking about things a bit more head of time.

为此，我要做的第一项工作是重新设计整个上市销售流程。 这是一个巨大的任务–最终是一个包含许多活动部件的七步向导。 我猜想，强迫我们注意页面上的文字确实是一个启示，这个团队一直都是“想出一些主意，然后立即开始构想”，然后才开始思考问题。需要更多时间。

Wolf: That’s something myself, I can get very lost in words. Micro-copy and copy for alert messages and stuff like that. Sometimes I can get very hooked on it.

沃尔夫：那是我自己，我可能会在语言上迷失方向。 微型复制并复制警报消息之类的东西。 有时我会非常着迷。

Yeah, as you said, it’s this visual down tempo when you look at a wireframe and you only see gray shades and boxes and buttons. The only thing that sticks out is the copy, and copy is one of the most important things on a website. Especially on a sales websites, especially on a website like our website, the marketing website where you describe your tool and trying to get people to test it and hopefully sign up and become customers.

是的，正如您所说，当您观察线框时，这只是视觉上的下降速度，而您只能看到灰色阴影以及框和按钮。 唯一突出的是副本，副本是网站上最重要的内容之一。 特别是在销售网站上，尤其是在我们网站这样的网站上，即营销网站，您在其中描述您的工具，并试图让人们对其进行测试并希望注册并成为客户。

So, yeah, I’d say anything that nails down and keeps the focus where you want the focus to really be at. That’s something when we’re showing stuff to clients is, you don’t have to explain that much what wireframess are. We only do it briefly in one or two sentences what they are looking at and what they can expect from this.

所以，是的，我要说的是明确的内容，并将焦点保持在您真正希望焦点所在的位置。 当我们向客户展示东西时，就是这样，您不必解释什么是线框。 我们只用一两句话简短地介绍他们在看什么，以及他们对此有何期待。

But, they get the idea very fast. Then almost all of them are trying to like the idea that they can now really focus on the architecture of the website, see which information goes where, and also the copy. Which before no one really thought about in the first place, but it was something that has been added on and on, mostly after the development was done.

但是，他们很快就知道了。 然后几乎所有的人都在试图喜欢这样的想法，即他们现在可以真正专注于网站的体系结构，查看哪些信息可以到达何处，以及副本。 首先没有人真正想到过，但这是不断添加的，主要是在开发完成之后。

Louis: Right. If a client sees a mock-up, they’re not even going to notice what the words are. If they don’t like the shade of green, that’s the first thing that comes to their mind. They’re going to be like, “Can you make that a little bit darker?”

路易斯：对。 如果客户看到样机，他们甚至不会注意到这些字眼。 如果他们不喜欢绿色，那是他们想到的第一件事。 他们会说：“您能把它调暗一点吗？”

Wolf: Yeah, absolutely. Yeah.

狼：是的，绝对。 是的

Louis: Then you don’t have the conversation about which page links to where or what the word is. Is it my account or is it your account? How do those words fit together? Which is a lot more important than the shade of green, but it’s hard to communicate that unless you have a very stripped down wireframe or prototype.

路易斯：那么您就不用讨论哪个页面链接到何处或单词是什么。 是我的帐户还是您的帐户？ 这些词如何组合在一起？ 这比绿色阴影重要得多，但是除非您的线框或原型非常精简，否则很难传达这一点。

How does user testing fit into your development workflow? If you have to do user testing, do you do it with a prototype, or do you actually build out the feature first from a prototype and then look at users?

用户测试如何适合您的开发工作流程？ 如果您必须进行用户测试，那么您是否要使用原型进行测试，或者实际上是先从原型构建功能，然后再查看用户？

Wolf: We’ve tried a couple of things. We’ve tried to do user testing with prototype, which requires a bit of work up front. Because you have to explain to the testers what they’re looking at, which actions they should perform, that they’re actually not looking at a done website, but just at a prototype.

沃尔夫：我们尝试了几件事。 我们尝试使用原型进行用户测试，这需要一些前期工作。 因为您必须向测试人员解释他们在看什么，他们应该执行哪些操作，所以他们实际上不是在看完成的网站，而只是在看原型。

The other thing we then try to accomplish is we build something very roughly, like a first take, and put it out, then just recorded mouse flow actions. That was something we did as well.

然后，我们尝试完成的另一件事是，我们非常粗略地构建一些东西，例如先将其放出来，然后再记录下来的鼠标流动作。 那也是我们所做的。

Other things we did with user testing, we tried to get information up front. We tried to bring people in and to kind of interviews before we built the second revision of HotGloo. We kind of went out and showed people the first website, and then asked them a couple of questions, what they were expecting from a tool like this. Trying to get as much information up front before we even started to think about what we’re going to change for version two.

我们在用户测试中所做的其他事情，我们试图预先获取信息。 在构建HotGloo的第二个修订版之前，我们试图吸引人们并接受各种采访。 我们有点外出，向人们展示了第一个网站，然后问了他们几个问题，他们对这种工具的期望是什么。 在我们甚至开始思考第二版将要更改的内容之前，尝试先获取尽可能多的信息。

Sometimes I’d say it’s a whole ongoing process, that you have user testing that starts with doing interviews and getting ideas up front, then doing usability testing with a prototype, going into iterations and testing again. Sometimes you’re just getting your information up front and trying to build something very fast, very quickly. Get it out, test it and iterate on the way. It really depends on the project.

有时我会说这是整个过程，您要进行用户测试，首先要进行访谈和提出想法，然后使用原型进行可用性测试，然后进行迭代并再次进行测试。 有时，您只是在获取信息，然后试图快速，快速地构建某些内容。 拿出来，测试它并在途中进行迭代。 这确实取决于项目。

I’d say a lot depends on the complexity of a project. A large project, big e-commerce projects, tend to be much more time consuming and needs a lot more testing than just a small marketing website with two or two, or three, or four pages.

我会说很多取决于项目的复杂性。 大型项目，大型电子商务项目往往比仅包含两，两页，三页或四页的小型营销网站耗时得多，并且需要进行更多的测试。

Louis: Right. There’s a question that I absolutely wanted to ask you. Because now that you’ve built HotGloo as a tool and you’re still continuing development on it, when you want to prototype a new feature for HotGloo, do you do it in HotGloo now?

路易斯：对。 我绝对想问你一个问题。 因为现在您已经将HotGloo构建为工具，并且仍在继续开发它，所以当您想为HotGloo制作新功能的原型时，现在是否要在HotGloo中使用它？

Wolf: Yeah.

狼：是的。

Louis: It’s an inception of HotGloo?

路易斯：这是HotGloo的诞生？

Wolf: Yeah. It was also when we did the, I think it was now almost a year ago, when we came out with the new website. Now, we’re doing an update on the whole interactions, and it should be easier to apply interactions, especially if you’re applying the same interactions to a couple of elements.

狼：是的。 也是在我们进行此操作的时候，我想现在已经快一年了，那时我们才推出新网站。 现在，我们正在对整个交互进行更新，应用交互应该更容易，尤其是当您将相同的交互应用于几个元素时。

We also have a few new interactions coming soon. That was also something we, “How is this new property panel going to look like? Do we have to kind of change the whole appearance of the property panel?” That’s something we actually build in HotGloo. It’s sometimes kind of funny when you see the new features that you’re laying out and concepting in the tool that afterwards is being updated with these new features.

我们很快还会有一些新的交互。 这也是我们的事情，“这个新的属性面板看起来如何？ 我们是否需要改变属性面板的整体外观？” 我们实际上是在HotGloo中构建的。 当您在工具中看到要布置的新功能并进行概念化后，有时会觉得很有趣，然后使用这些新功能对其进行更新。

Louis: Right. So, you hinted at this a little bit. What kind of stuff are you working on on HotGloo for the future?

路易斯：对。 所以，您暗示了这一点。 您将来在HotGloo上从事什么样的工作？

Wolf: As I just said, the interactions is the next big thing. Because I think in April this year, I think it was April, we kind of thought about that we wanted to add mobile UI widgets, because we’ve got a couple of people walk in our doors, saying, “Why are you not offering any mobile stencils? I want to wireframe an iPhone app, an iPad app.”

沃尔夫：正如我刚才所说，互动是下一件大事。 因为我认为是今年4月，所以我认为是4月，我们想添加移动UI窗口小部件，因为我们有几个人走进我们的大门，说：“为什么不提供任何移动模具？ 我想对iPhone应用程序和iPad应用程序进行线框设计。”

We have all the elements ready. But before we updated all the elements, we kind of found out that with the set of interactions we have right now, it doesn’t really make sense. There are a couple of other interactions that actually in a mobile prototype would really work, so we started to work on the interactions as well.

我们已经准备好所有要素。 但是，在更新所有元素之前，我们有点发现，对于现在拥有的一组交互，这实际上没有任何意义。 在移动原型中，实际上还有一些其他交互可以真正起作用，因此我们也开始着手进行交互。

That’s basically the road plan for this year, is new interactions. It’s the iPhone, iPad UI widgets. We want to improve the feedback nodes, because the whole collaboration process in HotGloo is where we see the most potential besides the whole interactive features, is the feedback nodes.

这基本上是今年的发展计划，是新的互动。 这是iPhone，iPad UI小部件。 我们希望改善反馈节点，因为在HotGloo中，整个协作过程是反馈节点，除了整个交互功能之外，我们最有潜力的地方。

The communication that goes over these nodes, we want to make this process easier. We want to kind of build something like, some sort of requirement steps that you can actually approve nodes, and so a team sees when something’s done and when an element or a web page needs some work.

通过这些节点的通信，我们希望使此过程更容易。 我们想要构建类似这样的东西，即实际上可以批准节点的某种需求步骤，因此团队可以看到何时完成某件事以及何时元素或网页需要进行一些工作。

Some kind of notification system, that can help teams to actually wireframe their projects faster, and to keep an overview of the project and the process of the project, the development process. That’s the three major things that we’re looking at this year.

某种通知系统，可以帮助团队更快地对项目进行实际的线框设计，并保持对项目以及项目过程，开发过程的概览。 这就是我们今年要考虑的三件事。

Louis: All right, that all sounds really good. I’m looking forward to seeing all of that.

路易斯：好的，听起来很不错。 我期待看到所有这些。

Let me just say, thanks very much for taking the time to talk to me about this stuff. I really appreciate it.

我要说的是，非常感谢您抽出宝贵时间与我讨论这些内容。 我真的很感激。

Wolf: Thank you for inviting me.

沃尔夫：谢谢你邀请我。

Louis: For listeners who are interested in HotGloo, the URL is hotgloo.com, that’s H-O-T-G-L-O-O.com. You also mentioned you have a Posterous blog sort of of various notes and articles clipped from the web relating to wireframes and UX design in general. What’s the URL for that?

路易斯：对于对HotGloo感兴趣的听众，URL为hotgloo.com ，即HOTGLOO.com。 您还提到过您有一个Posterous博客，其中包含从网上剪辑下来的与线框和UX设计有关的各种注释和文章。 该网址是什么？

Wolf: That’s www.wireframewednesday.com.

沃尔夫：那是www.wireframewednesday.com 。

Louis: Wireframewednesday.com. If listeners want to keep up with you, do you have a blog or a Twitter?

路易斯： Wireframewednesday.com。 如果听众希望与您保持联系，那么您有博客还是Twitter？

Wolf: My Twitter handle is @wdbecvar.

狼：我的Twitter句柄是@wdbecvar 。

Louis: All right. Again, thanks very much. I really look forward to seeing what HotGloo has up its sleeve in the coming years.

路易斯：好的。 再次，非常感谢。 我非常期待看到HotGloo在未来几年内能有所作为。

Wolf: Yeah. Thanks for having me on the show, and take care.

狼：是的。 感谢您让我参加演出，请多多关照。

Louis: Take care.

路易斯：保重。

And thanks for listening to this week’s episode of the SitePoint Podcast. I’d love to hear what you thought about today’s show, so if you have any thoughts or suggestions just go to sitepoint.com/podcast and you can leave a comment on today’s episode, you can also get any of our previous episodes to download or subscribe to get the show automatically. You can follow SitePoint on Twitter @sitepointdotcom, that’s sitepoint d-o-t-c-o-m, and you can follow me on Twitter @rssaddict. The show this week was produced by Karn Broad, and I’m Louis Simoneau, thanks for listening and bye for now.

感谢您收听本周的SitePoint播客。 我很想听听您对今天节目的看法，因此，如果您有任何想法或建议，请访问sitepoint.com/podcast ，您可以对今天的节目发表评论，也可以下载我们以前的任何节目或订阅自动显示节目。 您可以在Twitter @sitepointdotcom (即站点点dotcom)上关注SitePoint ，也可以在Twitter @rssaddict上关注我。 本周的节目是由Karn Broad制作的，我是Louis Simoneau，感谢您的收听和再见。

Audio Transcription by SpeechPad.

通过SpeechPad进行音频转录 。

Theme music by Mike Mella.

Mike Mella的主题音乐。

Thanks for listening! Feel free to let us know how we’re doing, or to continue the discussion, using the comments field below.

谢谢收听！ 欢迎使用下面的评论字段让我们知道我们的状况，或者继续讨论。

翻译自: https://www.sitepoint.com/podcast-170-interactive-wireframing-with-wolf-becvar-of-hotgloo/