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.

無論您做什么，都不要以犧牲自己的時間，設計過程，思考和解決時間，項目預算以及最終用戶的利益為代價，實現永久性更高的保真度。