it-swarm-eu.dev

Jakou barvu zvolit jako „nebezpečí“, pokud je hlavní barva mé aplikace červená

Tuto otázku mám obtočenou kolem hlavy už nějakou dobu. Jde o to, že moje hlavní aplikace má téma červené barvy. A jen na tlačítka pro zrušení jsem použil jen šedé barvy, ale teď, když potřebuji barvu „nebezpečí“ ... Co bych měl použít? Nachový? Oranžový? Opětovné použití červené je nepříjemné, možná tmavší červené?

PD: Nemůžu použít modrou, protože je to barva našich konkurentů.

enter image description here

56
caravana_942

Myslím, že si musíte hrát. Pokud jsou vaše obrazovky červené a chystáte se použít varování nebo nebezpečí. Mám následující návrhy:

1 - Stále můžete používat červenou, ale v různé míře , abyste rozlišili barvu aplikace a vaši nebezpečnou akci.

2 - Můžete použít čistě bílé vyskakovací okno a použít červené ikony , vykřičník nebo značky v tomto vyskakovacím okně.

3 - Dalším návrhem je použít černou barvu a použít černé znaky nad černým oknem . To může být změna.

Pokud nám můžete poskytnout obrazovku vašeho červeného systému, mohu vám poskytnout přímé řešení.

enter image description here

101
Khalil Hanna

Spíše než soustředit se pouze na barvu tlačítka, je lepší soustředit se na zážitek jako celek pro daný konkrétní úkol. Pro tlačítko Odstranit nepotřebujete nutně samostatnou barvu nebezpečí. Můžete použít standardní červené tlačítko, ale podpořte ho pomocí jiných zpráv o nebezpečí. Takhle:

enter image description here

Pokud má váš uživatel v úmyslu udělat něco nebezpečného, ​​je lepší upozornit na nebezpečí pomocí výstrahy a zpráv, než se spoléhat pouze na barvu tlačítka.

Rovněž stojí za to říci, že na červené aplikaci není nic nebezpečného nebo děsivého. Chvíli jsem navrhl pro Coca-Colu a jejich hlavní barva značky je červená. Jsou velmi dobrým příkladem toho, jak použít červené značky na weby a aplikace, pokud ji hledáte. Jako akcentní barvy používají hlavně černou, šedou a bílou.

52
Michael

Jedna absolutně klíčová věc, kterou si zde poznamenejte:

Nespoléhejte se pouze na barvu, abyste vyjádřili význam.

Barvy jsou užitečné pro předávání vizuální zprávy, ale při rozhodování o těchto druzích UX je třeba zvážit dostupnost. Pokud má váš uživatel nějakou podobu barevné slepoty nebo jiného poškození zraku, potřebujete k vyjádření významu nějaký jiný indikátor (ikony nebo formulace). Skutečnost, že tlačítko je označeno jako Delete, je skvělá, ale pokud máte obavy, že se jedná o „systémově kritické“ informace, pak je třeba to sdělit tak, aby nepřesahovalo pouhé použití barvy jako indikátoru.

Tento článek pokrývá použití barev s ohledem na přístupnost a obsahuje odstavec konkrétně o tomto:

„... zajistěte dostupnost tím, že se při přenosu důležitých systémových informací nebudete spoléhat na barvu. Takže u věcí, jako jsou chybové stavy, stavy úspěchu nebo systémová varování, nezapomeňte použít zasílání zpráv nebo ikonografii, která jasně říká, co se děje na."

Zvažte také, že červená je klíčová barva vaší aplikace: ujistěte se, že používáte kontrast alespoň 4.5:1 dodržovat minimálně WCAG 2 úroveň AA minimálně. Toto je opravdu užitečný nástroj pro kontrolu, zda: https://webaim.org/resources/contrastchecker/

35
indextwo

Se zvyšujícím se počtem životaschopných možností může být obtížnější učinit konečné rozhodnutí. Poté, co jste jej zúžili na několik, můžete zvážit možnost umožnit uživatelům vybrat schéma, které dávají přednost .

Některá barevná schémata, která je třeba zvážit:

  • Červená = nebezpečí = vaše aplikace je nebezpečná. Změna hlavní barvy aplikace

  • Modrá = barva konkurenta. Konkurent = nebezpečný. Použijte modrou barvu pro nebezpečí. Zatímco světlejší modrá může být zaměněna za pozitivní varování (například úspěch), tmavě modrá nemusí.

  • Použijte černou a bílou. Příklady v odpověď Khalila Hanny jsou nápadné. Problém je černobílý, může být zaměňován s běžným textem. Černá + oranžová/žlutá nemusí mít stejný problém.

  • Použijte standardní barvy bez ohledu na hlavní barvu motivu. Zelená = úspěch. Žlutá/Oranžová = Pozor. Červená = nebezpečí/varování. Atd.

    Nicméně, jak Aline upozorňuje , Použití materiálu Google Design Design Color radí: „Protože červená je barva značky, také použijte k vyjádření chybového stavu . Vyberte alternativní barvy upozornění, které nepoužívají zbarvení značky. “ Jejich příklad používá oranžovou barvu. Ale fialová se jeví jako životaschopná varianta.

    Material Design Example

10
習約塔

„Nebezpečná barva“ by měla vyčnívat z barevného schématu vaší aplikace. Je také dobré zvážit smysl. Červená/oranžová/žlutá ve většině kultur označuje nebezpečí, varování, pozornost. Obvykle, pokud vidím modrou nebo zelenou zprávu, automaticky si myslím, že je to úspěšná zpětná vazba. Myslím, že byste měli používat oranžovou nebo žlutou, abyste vynikli z hlavních barev.

V Google Material Design používají oranžovou barvu s červenými motivy: https://material.io/design/color/color-usage.html#meaning

5
Aline

První barevné schéma, které přichází na vědomí, že označuje nebezpečí, je kombinace žluté a černé, zejména pokud je černá v diagonálních proužcích. Mám podezření, že spojení s nebezpečím pochází od včel v přírodě.

Jednoduše zadejte yellow black sign do Googlu povede k mnoha známkám, které naznačují nějaké nebezpečí. Zpívá o jedu, o nebezpečí pádu, pásku kolem scén zločinu atd.

Osobně jsem viděl schránky zpráv se silným, žlutým a černým diagonálně pruhovaným okrajem a vždy mě nutí myslet si, že existuje něco potenciálně nebezpečného, ​​pravděpodobně možná nebezpečného rozhodnutí. Když vidím tlačítko se zaobleným trojúhelníkem se stejným vzorem, řeklo by mi, že bych měl být velmi opatrný, když stisknu toto tlačítko.

Pro mě není obyčejná červená ve skutečnosti tak silná, že by potřebovala bílou a černou, aby se úplně dostala přes stejnou úroveň nebezpečí.

5
trlkly

Pokud již používáte červenou barvu, použijte žlutou a černou. Je to přirozený varovný signál přírody a bude určitě upoutat pozornost. Používá se také na mnoha výstražných značkách pro staveniště.

enter image description here

V západních zemích není kulturně nebezpečnější než černá na červené:

enter image description here

2
Danielillo

ZÍSKEJTE POZOR

ZMĚNY BARVY ZMĚNY

Samotná barva neznamená význam a jako taková by se neměla spoléhat na jakékoli vyjádření „nebezpečí“ nebo „varování“. Dále, zrakové postižení, jako je Deuteranomaly (6% postižených mužů), způsobuje, že určité barevné kontrasty jsou neviditelné, nemluvě o kulturních odlišnostech, jak již bylo zmíněno několik.

KONTRAST, SYMBOLY a TEXT

Barvy, jako je červená, žlutá, oranžová, nebyly vybrány proto, že barva má specifický význam, ale proto, že barva poskytuje určitý barevný kontrast, kontrast jasu a „poutko“, a tak vyniká na pozadí.

Je důležitější mít dostatečný kontrast jasu a používat symboly orientované na pozornost/přitažlivost, které jsou v jejich záměru jasné.

Jasový kontrast se nespoléhá na barevný kontrast, který může být špatně vnímán v důsledku poškození nebo kulturních rozdílů, a pomáhá symbolu vyniknout. Použití vyššího jasu než okolní podněty (text, tlačítka atd.) Je to, co pomůže získat pozornost a zaměření na uživatele.

Barevný kontrast může pomoci zvýšit povědomí o kognitivním rozpoznání výstrahy, ale musí to být druhotný návrh. Například, pokud je na trhu Severní Amerika, zelená je možná špatná volba pro varování - ale zelená v kombinaci s jeho oponentskou barvou červenou (včetně fialových ) vytváří velmi silnou detekci hran při běžném lidském vizuálním vnímání.

Pochopitelné symboly mohou být velmi užitečné pro vyjádření významu způsobem, který (v ideálním případě) nevyžaduje překlad. Kulturní rozdíly mohou mít opět silný vliv.

V Las Vegas byl MGM Grand Hotel původně navržen tak, že přední vchod prošel obrovskými smaragdově zbarvenými lví ústy. Krátce po otevření myšlenky ji roztrhali a znovu postavili vchod, aby odstranili lví ústa, protože zjistili, že lví ústa mají v některých asijských kulturách zvláště negativní symboliku.

V oblasti počítačů však existují běžné ikony, které dosáhly mezinárodního uznání určitých významů - dobře pochopený je obvykle lepší výběr, zejména pro upozornění.

Text je král, jazykové rozdíly bez ohledu na to. Jasný a jednoduchý text je nejlepší způsob, jak vyjádřit konkrétní význam. Jediné slovo s vyskakovacím nástrojem-tip dalších informací je moje osobní preference pro použitelnost.

Animace a pohyb ovlivní pozornost, pokud je to cílem. Jediná blikající červená LED na zdi 1000 červených LED jistě upoutá vaši pozornost.

TL; DR

Stručně řečeno, je důležitější mít dobrý/vysoký jas a popisný text a symboly než jakákoli konkrétní barevná kombinace.

Zde je příklad použití kontrastu jasu, modifikace vašeho příkladu tlačítka smazat vs tlačítka Uložit:

SAVE DELETE MODIFIED

1
Myndex

Při vytváření uživatelských rozhraní je třeba zvážit, že barva by nikdy neměla sdělit význam. Destruktivní tlačítka však můžete zvýraznit tak, že se liší od ostatních tlačítek nebo zbytku rozhraní. Namísto přemýšlení o barvách, které byste mohli použít, zkuste přemýšlet o tom, jak změnit vzhled tlačítka .

Změňte design

  • Ohraničení - Pokud váš současný design obsahuje tlačítka bez ohraničení, zkuste přidat velmi odlišný (tlustý?) Černý nebo bílý rámeček. Tím se tlačítko "pop" ze zbytku rozhraní.
  • Velikost - Zkuste si hrát s výškou nebo šířkou tlačítka. Velikost může pomoci odlišit destruktivní tlačítka od běžných tlačítek. Ale nemusí to být vždy o velikosti tlačítka, možná byste mohli změnit velikost písma štítku?
  • Styl písma - Když mluvíme o fontech, jak přidat podtržení, kurzívu nebo tučné písmo na štítek, aby to vyniklo?
  • Styl - Možná přidat stín nebo mít pouze ohraničení a žádnou barvu výplně. Hrajte s designem a nechte jej vypadat jinak .

Barvy

Kreativní stránka každého se liší, takže pokud si chcete zachovat svůj současný styl, ale změnit barvy, doporučil bych podívat se na barevné kolečko pro barvy, které jsou oproti vašim červeným. To pomůže, aby tlačítko vyniklo. Můžete také zdůraznit tlačítko tím, že jde o destruktivní barvy, jako je žlutá, červená (zjevně tmavší nebo světlejší), černá nebo bílá (pokud to vyhovuje vašemu návrhu.)

Design je velmi náročnou součástí vývojového procesu, takže hraní vám určitě pomůže. Získejte názory lidí - nechte je, aby si vybrali design. Udělejte nějaké návrhy makety. Doufám, že to pomohlo.

0
Aaron