跳到主要内容

网页设计中的色彩:你所需要知道的一切

+$The success of any piece of visual communication depends on colour. Research into the impact of colour in marketing tells us that it takes the average person just 90 seconds to make a subconscious decision about a product, and that+$62-90 Per Cent+$of those decisions are based on colour alone.

+$Consequently, sharpening up your knowledge of色彩理论+$and psychology can go a long way to helping increase conversions, and can in many instances improve the usability of your interfaces.

+$Here are some factors you need to bear in mind when making colour decisions in your designs.

+$Understand what colour means to your audience

Mailchimp branding

+$Mailchimp's bright yellow has a very different meaning in China

+$When it comes to colour, one thing you’re sure to come across is controversy. There have been multiple attempts to map human feelings and emotions in reference to colour. Broadly, different colours portray the following:

红色

  • +$Positive Connotations:+$Energy, passion, strength, warmth, excitement
  • +$Negative Connotations:+$Anger, aggression, fear,   rebellion, evil
  • +$Used To:+$Create urgency, stimulate appetite, signal stop

黄色

  • +$Positive Connotations:+$Happiness, optimism, warmth, playfulness, fun
  • +$Negative Connotations:+$Critical, cowardly, impatient, pessimistic, impulsive
  • +$Used To:+$Brighten spirit, demonstrate playfulness, show warmth

绿色

  • +$Positive Connotations:+$Growth, vitality, natural, earthly, balanced
  • +$Negative Connotations:+$Greedy, materialistic, envy, devious, indifferent
  • +$Used To:+$Demonstrate growth, show eco credentials, signal go

蓝色

  • +$Positive Connotations:+$Trust, stability, calmness, integrity, loyalty
  • +$Negative Connotations:+$Sadness, coldness, predictability, conservative, rigidity
  • +$Used To:+$Promote calm, gain trust, show cleanliness

黑色

  • +$Positive Connotations:+$Authority, control, strength, sophistication, seductiveness
  • +$Negative Connotations:+$Secretive, negative, dark, depressing, aloof
  • +$Used To:+$Create mystery, assert confidence, demonstrate sophistication

+$While these are great reference points,+$research Tells Us+$that our perception of colour is hugely influenced by our personal background, culture, experiences and preferences.

+$In China, for example, yellow has become+$synonymous with pornographic publications+$, so while Mailchimp’s Cavendish Yellow homepage (above) beautifully signifies happiness, optimism and warmth to some, those cheeky monkeys may be interpreted a little unexpectedly in the world’s most populous country.

+$Once you know who you’re designing for, take into account the impact of your use of colour to ensure you don’t send users the wrong message by assuming that everyone will react in the same way.

+$The 60-30-10 rule

+$Traditionally used for interior design, adopting this three-colour formula will give balance and consistency to your interfaces. If you allow your primary colour 60 per cent, your secondary colour 30 per cent and your accent colour 10 per cent, users will be able to move comfortably between the focal points of your interface without being overwhelmed by an excessive palette.

+$Make colour work for you

the button colour test

+$Which would you click: red or green?

+$Understanding that some sections of your audience will respond differently to your chosen colours than others should serve as a reminder that colour has the ability to work both for and against you. Red and green in the context of a physical traffic light system mean two very different things; stop and go. However, this logic doesn’t always translate to the digital world of interface design.

+$In an experiment titled+$The Button Color A/B Test: Red Beats Green+$, Joshua Porter trialed a green button and a red button against one another on a landing page to see which converted more people to sign up to his Performable platform. Given the mentioned connotations for each colour, one might predict that the green would be the better performer, but 21 per cent more people clicked on the red button. We can assume that this was due to the attention-grabbing nature of red, or perhaps because red contrasted more with the pre-existing green highlights in the interface.

+$However you look at it, we should bear in mind that, although colours signify meaning, it’s always worth testing with users in the context of your page layout. This will ensure that colour is working to your advantage, rather than to the detriment of your conversion rate.

+$Reinforce your message with colour

monzo homescreen

+$Monzo's dark blue background signifies stability

+$To avoid undermining your brand’s message, choose colours for your interface that reinforce its values or proposition. It’s easy to fall into the trap of choosing eye-catching colours and fashionable gradients, but functional choices could be better in the long term.

虽然+$Monzo’s+$physical bank cards are an eye-catching and very practical coral, the colour scheme of the website tells a story of stability and trustworthiness, using a dark blue backdrop combined with light blue highlights that are bright enough to draw your attention but muted enough to maintain an air of integrity.

+$By playing with the CSS values of the homepage, we can make coral the primary background colour, creating a youthful and energetic-looking homepage. It’s undeniably attention-grabbing, but would potential customers be more likely to trust a financial organisation based on these qualities? You’d have to test it with users to be sure, but colour psychology would suggest a big no.

Monzo with altered homepage

+$Would you trust Monzo if its homepage was this colour?

+$Colour And Accessibility

+$Approximately+$one in 12 men and one in 200 women+$are affected by colour blindness. This, paired with the fact that screen readers do not communicate colour to visually impaired users, means we should be mindful that colour alone is not always an appropriate means of conveying meaning within our interfaces.

+$If, for example, you need to communicate an error on your page, the colour red might not be enough on its own. Good copywriting combined with spacial and typographic hierarchy should be utilised to enable people with colour blindness and those using screen readers to better understand any errors you are trying to display. When designing your next interface, try viewing your file in greyscale to test whether or not your error messages, calls to action and notifications still make sense without reliance on colour.

generate nyc 2019

+$For more web design insight, don't miss generate NYC. Click the image to book your ticket

+$This article was originally published in issue 284 of网页设计者。购买问题284要么订阅这里

阅读更多:



翻译字数超限