I was recently involved in a debate around why some wireframes (which were definitely not UI screens) were not 100% greyscale. This got me thinking — when is it ok to use colour in wireframes, and when is it going to cause you problems further down the (design process) line?

我最近参与了一个辩论，讨论为什么某些线框(绝对不是UI屏幕)不是100％灰度。 这让我开始思考–什么时候可以在线框中使用颜色，什么时候会在(设计过程)生产线进一步引发问题？

Ok, we know the answer is “it depends”, so let’s work this through…

好的，我们知道答案是“取决于” ，所以让我们通过...

什么是有色线框？ (What is a coloured-in wireframe?)

Wireframes are traditionally greyscale mock-ups. They are rough representations of interface screens, used early in the design process to communicate initial website or product architecture, journeys, interactions. They are also used in user testing in the form of clickable or interactive prototypes.

线框传统上是灰度模型。 它们是界面屏幕的粗略表示，在设计过程的早期用于沟通初始网站或产品架构，旅程，交互。 它们也以可单击或交互式原型的形式用于用户测试中。

The purpose and destiny of a wireframe is to be thrown away (iterated), once it has communicated your intent.

线框的目的和命运一旦传达了您的意图就将被丢弃(重复)。

UI design, on the other hand, is the final screen design that goes live — full colour, brand logo, colours, fonts, and live final copy. The purpose of UI design is to be delivered across a live product.

另一方面，UI设计是可以上线的最终屏幕设计-全彩，品牌徽标，颜色，字体和现场最终版。 UI设计的目的是在整个实时产品中交付。

Coloured-in wireframes are wireframes, but containing one or two key brand colours.

着色线框是线框，但包含一种或两种主要的品牌颜色。

So, what is the purpose of a coloured-in wireframe?

那么，彩色线框的目的是什么？

您为什么要在线框中添加颜色？ (Why would you want to put colour in your wireframes?)

For some reading this, the idea of using any colour in wireframes is insane. Whereas some teams have mature design systems and never use greyscale — they go straight to UI. See, I told you; it depends.

对于一些读者来说，在线框中使用任何颜色的想法都是疯狂的。 有些团队拥有成熟的设计系统，从不使用灰度级，而是直接使用UI。 看，我告诉过你； 这要看情况 。

But if it’s a new project, and you can do whatever you want — why would you not just go greyscale? Well, it’s almost always about stakeholder engagement. Here are a few key scenarios where adding one key colour to a wireframe can help your project:

但是，如果这是一个新项目，并且您可以做任何您想做的事-为什么不只是灰度级？ 好吧，这几乎总是与利益相关者的参与有关 。 以下是一些关键场景，在其中向线框添加一种关键颜色可以为您的项目提供帮助：

• Your client doesn’t understand wireframes — I know it sounds patronising, but that’s not my intent. I know it’s our job to make people understand all the things we do. But. Some stakeholders are not web, digital, tech or engineering people and have neither the time nor the inclination to get their heads around A Grey Thing. If you don’t win them over you’re not going to get very far with your design project.

  您的客户不了解线框 -我知道这听起来很光顾，但这不是我的意图。 我知道让人们了解我们所做的一切是我们的工作 。 但。 一些利益相关者不是网络，数字，技术或工程人员，既没有时间也没有意愿去了解“灰色事物”。 如果您没有赢得他们的支持，那么您的设计项目就不会走得太远。

• You are a long way from UI design — Related to the above, if you’ve been iterating Grey Things for many months, and senior clients are not no longer excited by this, it can sometimes be worth iterating into a higher fidelity prototype. However for reasons you’ll see below, it’s also worth ensuring that you’ve nailed key contentious areas of design and interaction first.

  与UI设计相比，您还有很长的路要走 -与上述内容相关，如果您已经迭代了Gray Things数月，并且高级客户不再对此感到兴奋，那么有时值得将其迭代为更高保真度的原型。 但是，出于以下原因，您还需要确保首先确定了设计和交互的关键争议领域。

• You need to make a point about colour contrast — If the proposed brand colours are woefully inaccessible, you might want to start showing how they don’t work for your future design — either using tools or via user testing.

  您需要就 颜色对比 提出一个要点 -如果很难获得建议的品牌颜色，则可能要使用工具或通过用户测试开始展示它们对您将来的设计不起作用。

• You need colour palette buy-in — There are lots of ways to bring together creative graphic design, UI and UX design deliverables, but sometimes (again depending on stakeholders) it can be beneficial to start demo’ing new colour palettes through high fidelity wireframes to get buy-in and prevent future pain.

  您需要购买调色板 -有很多方法可以将创意图形设计，UI和UX设计交付物组合在一起，但是有时(再次取决于利益相关者)，通过高保真线框开始演示新调色板可能会有所帮助获得支持并防止未来的痛苦。

• If you are working on multi-brand variant products — If you are working for a brand where two products or services have different brand colours, but similar product experiences — colour can communicate which type of product prototype the stakeholder is looking at. Example: booking flow for product A, booking flow for product B, when both products have a different colour palette AND different interaction variants/details within the flow.

  如果您正在开发多品牌变体产品 -如果您正在一个品牌中，两个产品或服务的品牌颜色不同，但产品体验相似，则颜色可以传达利益相关者正在看哪种类型的产品原型。 示例：当两个产品具有不同的调色板以及流程中不同的交互变体/细节时，产品A的预订流程，产品B的预订流程。

为什么这是个坏主意？ (Why might it be a bad idea?)

All of the scenarios above come with problems and challenges. There are a lot more reasons why it might be a bad idea to start colouring in your wireframes.

以上所有方案都存在问题和挑战。 有很多原因使您开始为线框着色可能是个坏主意 。

• Grey means ‘not finished’ — Greyscale wireframes give you the freedom to iterate, get it wrong, and throw things away without stakeholders and design teams getting attached to a single design. Once you start adding colour to them, you’re communicating a level of ‘done’; a commitment, that you can’t go back on as easily. If your wireframes look like UI it means you are confident in the solution. If you then start changing it you may look less confident as a designer.

  灰色表示“未完成” -灰度线框使您可以自由进行迭代，弄错，扔掉东西，而利益相关者和设计团队不会陷入单一设计。 一旦开始为它们添加颜色，就意味着达到了“完成”水平。 一项承诺，让您再也回不去了。 如果您的线框看起来像UI，则意味着您对解决方案充满信心。 如果您随后开始进行更改，那么作为设计师，您可能会信心不足。

• Colour is emotional — Putting your client’s brand palette on a wireframe gives them a sense of ownership. As above, this can be beneficial. But not if you’re at an early stage of iterations — if your client gets attached to something, it’s going to be harder to get permission to throw it away.

  颜色是令人激动的 -将客户的品牌调色板放在线框上会给他们带来主人翁感。 如上所述，这可能是有益的。 但是，如果您处在迭代的早期阶段，则不是这样-如果您的客户对某事依恋不清，那么将很难获得将其扔掉的许可。

• It’s easier to explain the difference between two distinct things — For most projects, you need to have a clear artefact taxonomy. Everyone from design team to dev to stakeholders needs to understand what you are calling things. It is not beneficial to blur the lines. It really helps your sign off processes when everyone knows <this> is a wireframe and <this> is my final UI design. Start blurring the lines, and you’re going to spend a lot of time clarifying things instead of getting things signed off.

  解释两个不同的事物之间的区别更容易 -对于大多数项目，您需要有一个清晰的人工制品分类法。 从设计团队到开发人员再到利益相关者，每个人都需要了解您所说的东西。 模糊线条是没有好处的。 当每个人都知道<this>是线框并且<this>是我的最终UI设计时，它确实有助于您的注销过程。 开始使线条变得模糊，您将花费大量时间来澄清问题而不是让事情签字。

• Your UI has to go even further — Once a client sees a coloured in wireframe, your final UI is going to have to go a lot further in order to make it clear that this is now the final design. And for some clients, you need that final “ta-da” of seeing A Pretty for the first time. That’s ok if your final design is hugely creative, however you’re going to lose some, if not all of that if your wireframe and your UI are similar.

  您的用户界面必须走得更远 -一旦客户看到线框中的颜色，最终的用户界面就必须走得更远，以明确表明这是最终的设计。 对于某些客户，您需要最后一次“见识”，第一次见到A Pretty。 如果您的最终设计很有创意，那没关系，但是如果您的线框和UI相似，您将失去一些(如果不是全部)。

• Your final UI is basically coloured in wireframes — I’ve seen a lot of “final UI” that looks suspiciously like a coloured in wireframe. This is usually for one of two reasons:

  您的最终用户界面基本上是用线框着色的 -我看过很多“最终用户界面”，看起来像是用线框着色的。 这通常是由于以下两个原因之一：

1. because the UX/UI designer did both parts themselves- i.e. they shifted their own wireframes into UI and didn’t think very hard between the two stages. Wherever possible I recommend keeping the two tasks across two people (of any UX/UI-proclaimed skillset) in order to retain that design friction needed to come up with a thought-through response.
   因为UX / UI设计师自己完成了这两个部分，即他们将自己的线框移到了UI中，所以在这两个阶段之间并不觉得困难。 我建议尽可能将两个任务同时放在两个人(使用UX / UI的任何技能)中，以保持设计思考所需的思考力。
2. because the team began using colour in high fidelity wireframes, probably too early, and it just because “truth” (i.e. the chosen design solution)
   因为团队开始在高保真线框中使用颜色，可能为时过早，并且仅仅是因为“真实”(即所选的设计解决方案)

Or both.

或两者。

• It prevents you doing proper design exploration — This is related to the point above. You’re spending too much time making one thing pretty rather than exploring a hundred alternatives. If one person is ploughing a straight furrow through wireframes and into UI, and blurring the line between the two, then confirmation bias will prevent them from properly exploring design and interaction solutions.

  它阻止您进行适当的设计探索 —与上面的观点有关。 您花费太多的时间使一件事情变得漂亮，而不是探索一百种选择。 如果一个人在线框上耕作一条直线犁沟并进入UI，并且模糊了两者之间的界限，那么确认偏差将阻止他们正确探索设计和交互解决方案。

In our team, even if we’re at the point of high fidelity wireframes with brand colours, we’ve been twin-tracking creative exploration with IA and UX design so that we don’t end up designing the first thing we thought of. Our aim is to come up with the best possible expression of brand on top of a solid interaction foundation.

在我们的团队中，即使我们处在具有品牌色彩的高保真线框的关键点上，我们也一直在通过IA和UX设计进行双轨创意探索，因此我们最终不会设计出我们想到的第一件事。 我们的目标是在扎实的互动基础之上，提出最佳的品牌表达方式。

• You won’t be able to make basic greyscale when you need to — If team members and stakeholders get used to high fidelity quasi-branded wireframes then you can never go back.

  您将无法在需要时设置基本的灰度级 -如果团队成员和涉众习惯了高保真度的准品牌线框，那么您将永远无法回头。

This is ok if you work on the same massive product and have a UX design pattern library to draw from (or even are prototyping in UI — bless you), but if you work on multiple projects, then sometimes you need to knock out something quick (grey) and dirty. But now you won’t be able to, because you’ve set the bar too high. Everything is going to take twice as long and people are going to expect to be “wowed” by your wireframes. Again, not the point of wireframes.

如果您使用相同的大型产品并且可以从中提取UX设计模式库(或者甚至是在UI中进行原型设计-保佑您)，这是可以的，但是如果您从事多个项目，那么有时您需要快速完成工作(灰色)和肮脏。 但是现在您将无法执行此操作，因为您将标准设置得太高。 一切将花费两倍的时间，人们将期望您被线框“惊呆”。 同样，不是线框的重点。

• You’re baking-in colour-based affordances —We know there are more ways than one to communicate page hierarchy, even in a greyscale wireframe. If you rely on colour early, not only are you limiting your own design by not thinking through at an interaction level, but you risk breaking W3C accessibility guidelines.

  您正在使用基于颜色的功能 -我们知道， 即使在灰度线框中 ， 也有不止一种方法来传达页面层次结构。 如果您过早地使用颜色，那么不仅不考虑交互级别就限制了自己的设计，而且有违反W3C可访问性准则的风险 。

• It can screw up your user testing results — Some can argue that colour, like content, increases user understanding in testing. However if colour is essential to user understanding you’re probably doing something wrong. It’s always worth doing a first stage test of your product at an interaction level (test the IA) before adding even the main content.

  它可能会使您的用户测试结果更糟 -有些人可能会认为颜色(如内容)会增加用户对测试的理解。 但是，如果颜色对于用户理解至关重要 ，那么您可能做错了什么。 在添加主要内容之前，总是值得在交互级别对产品进行第一阶段测试(测试IA)。

If you add in even a primary brand colour, you risk the users getting distracted by the implication of which brand this is for — and any associated halo effect. Naturally this doesn’t apply if you’re an in-house team and the user has come to your physical offices. You’ve already embraced this bias.

如果您添加甚至主要的品牌颜色，也可能使用户分心这是哪个品牌的含义以及任何相关的光环效果，使用户分心。 当然，如果您是内部团队并且用户来了您的实体办公室，那么这将不适用。 您已经接受了这种偏见。

• You’re doing it because you want to design something pretty — So many UX designers I’ve worked with find IA boring (boo) or wireframing boring, because it’s not “pretty”. If you’re colouring in wireframes to give your brain stimulus, then go get a side hustle gig colouring in. Or become a full time UI Designer.

  之所以这样做，是因为您想设计一些漂亮的东西 —我与之合作的许多UX设计师都发现IA钻Kong( boo )或线框图钻Kong是无聊的，因为它不是“漂亮”的。 如果您要在线框中着色以刺激大脑，那么就请忙忙碌碌地进行着色。或者成为全职UI设计师。

如果我需要使用彩色线框怎么办？ (What if I need to use coloured-in wireframes?)

Scanning back over the above, I’e listed 5 scenarios where it might be useful (if still challenging) to add colour to wireframes. And I’ve listed 10 ways in which it might derail your project or generally be ill-advised.

回顾以上内容，我列出了5种可能在线框中添加颜色的方法(如果仍然很困难的话)。 而且，我列出了10种可能使您的项目脱轨或不明智的方法。

Take from this what you will. I for one am glad to have written it out so that I can reduce the number of conversations I have to have about this from now on 😉.

从中得到您想要的。 我很高兴能将其写出来，以便从现在起减少与我必须进行的对话的次数。

I’m not saying that you should NEVER add colour to wireframes. I’m saying that you should be aware of the implications, and be doing it for a good reason.

我并不是说您永远不要为线框添加颜色。 我是说您应该了解其中的含义，并且有充分的理由这样做。

If you’re going ahead and are confident that it’s going to do your project more good than harm, then here are my top 3 recommendations to prevent it going wrong:

如果您继续前进，并且有信心这样做对您的项目有好处，而不是伤害，那么以下是我防止出现错误的三大建议：

1. Have a clear artefact taxonomy for your project — deliverables are important. If you’re lucky enough to start a UX project with a new set of stakeholders, make it really clear up front what you are calling a document or artefact, and what that means. Don’t get hung up on the difference between a user flow, a task flow, a user journey or some other thing. The industry hasn’t a clue — just pick names and use them consistently.

   对您的项目有清晰的人工制品分类法 -可交付成果很重要 。 如果您很幸运地与一组新的涉众一起启动了UX项目，请使其真正地预先弄清您所说的文档或人工制品，以及这意味着什么。 不要被用户流，任务流，用户旅程或其他事物之间的差异所困扰。 这个行业没有线索-只选择名称并始终使用它们。

2. Make it clear what is/is not wireframe — If you have to, call them lo-fidelity wireframe (100% greyscale), high-fidelity wireframe (+1 colour) and UI design (full colour). But don’t create new mutant hybrids between them as your project evolves.

   弄清楚什么是线框，或不是线框 —如有必要，可将其称为低保真线框(100％灰度)，高保真线框(+1色)和UI设计(全色)。 但是，随着项目的发展，不要在它们之间创建新的突变体杂种。

3. Set expectations on usage — Be clear why this type of wireframe/prototype is being used, what is the use case and benefit, how long it will be used for, and whether (if at all) it will be used in future. Or not.

   设定使用期望 —明确为什么使用这种线框/原型，用例和好处是什么，将使用多长时间以及将来是否使用(如果有的话)。 或不。

Whatever you do, don’t commit to a permanently higher fidelity of deliverable at the expense of your own time, your design process, your thinking-and-solving time, your project budget and ultimately, your users.

无论您做什么，都不要以牺牲自己的时间，设计过程，思考和解决时间，项目预算以及最终用户的利益为代价，实现永久性更高的保真度。