web-gelistirme-sc.com

Uygulamamın ana rengi kırmızı ise "tehlike" olarak hangi renk seçilir

Bu soruyu bir süredir kafamın etrafına sarıyorum. Mesele şu ki ana uygulamam kırmızı renk temasına sahip. Ve sadece iptal düğmeleri için sadece gri renkler kullanıyordum ama şimdi "tehlike" rengine ihtiyacım var ... Ne kullanmalıyım? Mor? Portakal? Kırmızıyı tekrar kullanmak garip, belki daha koyu bir kırmızı?

PD: Maviyi kullanamıyorum çünkü rakiplerimizin rengi.

enter image description here

56
caravana_942

Sanırım etrafta oynaman gerekiyor. Ekranlarınız kırmızıysa ve bir uyarı veya Tehlike kullanmak üzereyseniz. Aşağıdaki önerilerim var:

1- Uygulama rengini ve tehlike eyleminizi ayırt etmek için yine de kırmızı kullanabilirsiniz ancak farklı derecede kullanabilirsiniz.

2- Saf beyaz açılır pencere kullanabilir ve bu açılır pencereye kırmızı simgeler , ünlem işareti veya işaretler uygulayabilirsiniz.

3- Bir başka öneri de siyah renk kullanmak ve siyah açılır pencere üzerinde beyaz işaretler kullanmaktır . Bu bir değişiklik olabilir.

Bize kırmızı sisteminizin bir ekranını sunabilirseniz, size doğrudan bir çözüm verebilirim.

enter image description here

101
Khalil Hanna

Sadece düğmenin rengine odaklanmak yerine, belirli bir görev için bir bütün olarak deneyime odaklanmak daha iyidir. Sil düğmesi için ayrı bir tehlike rengine ihtiyacınız yoktur. Standart kırmızı düğmenizi kullanabilirsiniz, ancak diğer tehlike mesajlarıyla destekleyin. Bunun gibi:

enter image description here

Kullanıcınız tehlikeli bir şey yapmak üzereyse, düğmenin rengine güvenmek yerine tehlikeyi vurgulamak için bir uyarı ve mesaj kullanmak daha iyidir.

Ayrıca kırmızı bir uygulama hakkında doğası gereği tehlikeli veya korkutucu bir şey olmadığını söylemeye değer. Bir süre Coca-Cola için tasarladım ve ana marka renkleri kırmızı. Eğer arıyorsanız, kırmızı markalamanın web sitelerine ve uygulamalara nasıl uygulanacağına çok iyi bir örnektir. Aksan renkleri olarak çoğunlukla siyah, gri ve beyaz kullanırlar.

52
Michael

Burada dikkat edilmesi gereken bir anahtar şey:

Anlam iletmek için sadece renge güvenmeyin.

Renkler görsel bir mesaj iletmek için kullanışlıdır, ancak bu tür UX kararlarını verirken erişilebilirliği dikkate almanız gerekir. Kullanıcınızın herhangi bir renk körlüğü veya başka görme bozukluğu varsa, anlamı iletmek için başka bir tür göstergeye (simgeler veya ifadeler) ihtiyacınız vardır. Düğmenin Delete olarak adlandırılmış olması harika, ancak 'sistem açısından kritik' bilgiden endişe ediyorsanız, bunun bir gösterge olarak rengi kullanmanın ötesinde aktarılması gerekir.

Bu makale erişilebilirlik açısından renk kullanımını kapsar ve özellikle bu konuda bir paragrafı vardır:

"... önemli sistem bilgilerini iletmek için renge güvenmediğinizden emin olarak erişilebilirliği sağlayın. Bu nedenle, hata durumları, başarı durumları veya sistem uyarıları gibi şeyler için, neler olup bittiğini açıkça belirten mesajlaşma veya ikonografiyi eklediğinizden emin olun. üzerinde."

Ayrıca, kırmızının uygulamanızın temel rengi olduğunu düşünerek: WCAG 2 seviye AA değerine en az uymak için en az 4.5:1 Kontrastı kullandığınızdan emin olun. Bunu kontrol etmek için gerçekten kullanışlı bir araçtır: https://webaim.org/resources/contrastchecker/

35
indextwo

Geçerli seçeneklerin sayısı arttıkça, nihai bir karar vermek daha zor hale gelebilir. Birkaç kez daralttıktan sonra, kullanıcıların tercih ettikleri düzeni seçmesine izin vermeyi düşünebilirsiniz .

Dikkate alınması gereken bazı renk şemaları:

  • Kırmızı = tehlike = uygulamanız tehlikelidir. Uygulamanızın ana rengini değiştirin.

  • Mavi = rakibin rengi. Rakip = tehlikeli. Tehlike için maviyi kullanın. Daha açık bir mavi, olumlu bir uyarı (başarı gibi) ile karıştırılmış olsa da, koyu mavi olmayabilir.

  • Siyah ve beyaz kullanın. Khalil Hanna'nın cevabı içindeki örnekler dikkat çekicidir. Sorun siyah/beyazın sıradan metinlerle karıştırılması olabilir. Siyah + turuncu/sarı aynı soruna sahip olmayabilir.

  • Temanızın ana rengine bakılmaksızın standart renkler kullanın. Yeşil = başarı. Sarı/Turuncu = Dikkat. Kırmızı = tehlike/uyarı. Vb.

    Ancak, Aline'in işaret ettiği gibi , Google Materyal Tasarımı Renk Kullanımı şu tavsiyelerde bulunur: "Kırmızı bir marka rengi olduğundan, bir hata durumu iletmek için kullanın . Marka renklendirmesi kullanmayan alternatif uyarı renkleri seçin. " Örnekleri turuncu kullanır. Ancak mor da uygun bir seçenek gibi görünüyor.

    Material Design Example

10
習約塔

"Tehlike rengi", uygulamanızın renk düzeninden farklı olmalıdır. Anlamı düşünmek de iyidir. Kırmızı/Turuncu/sarı, çoğu kültürde tehlike, uyarı, dikkat gösterir. Genellikle, mavi veya yeşil bir mesaj görürsem, bunun otomatik olarak bir başarı geri bildirimi olduğunu düşünüyorum. Ana renklerden sıyrılmak için turuncu veya sarı kullanmanız gerektiğini düşünüyorum.

Google Materyal Tasarımı'nda kırmızı temalı turuncu kullanırlar: https://material.io/design/color/color-usage.html#meaning

5
Aline

Tehlikeyi belirtmek için akla gelen ilk renk şeması, özellikle siyah çapraz çizgilerdeyse, sarı ve siyahın bir kombinasyonudur. Tehlike ilişkisinin doğadaki arılardan geldiğinden şüphelenirim.

Basitçe yellow black sign Google'a bir tür tehlikeyi gösteren birçok işaretle sonuçlanacaktır. Zehir, düşme tehlikesi, suç mahallinde kullanılan bant vb.

Kişisel olarak kalın, sarı ve siyah çapraz çizgili bir kenarlığa sahip mesaj kutuları gördüm ve her zaman beni potansiyel olarak tehlikeli bir şey olduğunu, muhtemelen tehlikeli bir karar verileceğini düşündürüyorlar. Aynı desene sahip yuvarlak üçgenli bir düğme görmek, bu düğmeye basarsam çok dikkatli olmam gerektiğini söyler.

Bana göre, düz kırmızı aslında o kadar güçlü değildir ve aynı tehlike seviyesini tamamen aşmak için beyaz ve siyaha ihtiyaç duyar.

5
trlkly

Zaten kırmızı rengi kullanıyorsanız, sarı ve siyah kullanın. Doğanın doğal bir uyarı işaretidir ve kesinlikle dikkat çekecektir. Şantiyeler için birçok tehlike işaretinde de kullanılır.

enter image description here

Batı ülkelerinde kültürel olarak kırmızı üzerine siyahtan daha tehlikeli bir şey yoktur:

enter image description here

2
Danielillo

DİKKAT ÇEKMEK

RENK ANLAMI ANLAMI

Tek başına renk anlam taşımaz ve kendi başına "tehlike" veya "uyarı" ifadelerine güvenilmemelidir. Ayrıca, Deuteranomaly (etkilenen erkeklerin% 6'sı) gibi görme bozuklukları, bazılarının belirttiği gibi kültürel farklılıklardan bahsetmemekle birlikte, bazı renk kontrastlarını görünmez kılar.

KONTRAST, SEMBOLLER ve METİN

Kırmızı, sarı, turuncu gibi renkler, rengin belirli bir anlamı olduğu için değil, renk belirli bir renk kontrastı, parlaklık kontrastı ve "göz alıcı" sağladığı için seçildi ve böylece arka plana karşı öne çıkıyor.

Yeterli parlaklık kontrastına sahip olmak ve niyetlerinde net olan dikkat/cazibe odaklı sembolleri kullanmak daha önemlidir.

Parlaklık kontrastı , bozukluklar veya kültürel farklılıklar nedeniyle yanlış algılanabilecek renk kontrastına dayanmaz ve sembolün öne çıkmasına yardımcı olur. Çevreleyen uyaranlardan (metin, düğmeler vb.) Daha yüksek bir parlaklık kontrastı kullanmak, dikkat ve kullanıcı odağı sağlamaya yardımcı olacaktır.

Renk kontrastı bir uyarının bilişsel olarak tanınması konusunda farkındalığın artırılmasına yardımcı olabilir, ancak ikincil bir tasarım değerlendirmesi olmalıdır. Örneğin, pazar Kuzey Amerika ise, yeşil bir uyarı için muhtemelen kötü bir seçimdir - Ancak rakibin rengi kırmızı ile birlikte (morlar dahil) ) normal insan görsel algısında çok güçlü Kenar algılama oluşturur.

Anlaşılır semboller acan, (ideal olarak) çeviri gerektirmeyen bir şekilde anlam iletmek için çok yararlı olabilir. Yine de kültürel farklılıkların güçlü bir etkisi olabilir.

Las Vegas'ta, MGM Grand Hotel başlangıçta ön girişin dev zümrüt renkli aslan ağzından geçtiği yerde tasarlandı. Düşünceyi açtıktan kısa bir süre sonra, onu yırttılar ve aslanın ağzını çıkarmak için girişi yeniden inşa ettiler çünkü bir aslanın ağzının bazı Asya kültürlerinde özellikle olumsuz bir sembolizme sahip olduğunu keşfettiler.

Yine de bilgisayarlar alanında, belirli anlamların uluslararası olarak kabul edilmesini sağlayan ortak simgeler vardır - iyi anlaşılan, özellikle bir uyarı iletmek için genellikle daha iyi bir seçimdir.

Metin kraldır, dil farklılıklarına rağmen. Açık ve basit metin, belirli bir anlamı ifade etmenin en iyi yoludur. Ek bilgilerin pop-up araç ipucuna sahip tek bir Word, kişisel kullanılabilirlik tercihimdir.

Animasyon ve hareket hedef ise dikkati etkileyecektir. 1000 kırmızı LED duvarındaki tek bir yanıp sönen kırmızı LED, örneğin dikkatinizi çekecektir.

TL; DR

Kısacası, iyi/yüksek parlaklık kontrastı ve açıklayıcı metin ve sembollere sahip olmak, herhangi bir renk kombinasyonundan daha önemlidir.

Parlaklık kontrastını kullanma örneği, örneğin silme düğmesinin kaydetme düğmesi ile değiştirilmesi:

SAVE DELETE MODIFIED

1
Myndex

Kullanıcı Arayüzleri oluşturma hakkında düşünülmesi gereken bir şey renk asla anlam ifade etmemelidir. Ancak, yıkıcı düğmeleri diğer düğmelerden veya arayüzünüzün geri kalanından farklı hale getirerek vurgulayabilirsiniz. Kullanabileceğiniz renkleri düşünmek yerine, düğmenin nasıl farklı görüneceğini düşünmeyi deneyin.

Tasarımı değiştirin

  • Kenarlıklar - Geçerli tasarımınızda kenarlık olmayan düğmeler varsa, çok farklı (kalın?) Bir siyah veya beyaz kenarlık eklemeyi deneyin. Bu, arabirimin geri kalanından "pop" düğmesini yapar.
  • Boyut - Düğmenin yüksekliği veya genişliği ile oynamayı deneyin. Boyut, yıkıcı düğmeleri normal düğmelerden ayırt etmeye yardımcı olabilir. Ancak her zaman düğmenin boyutu ile ilgili olmak zorunda değildir, belki etiketin yazı tipi boyutunu değiştirebilirsiniz?
  • Yazı Tipi Stili - Yazı tipleri hakkında konuşmak, etikete dikkat çekmek için bir alt çizgi, italik veya kalın eklemeye ne dersiniz?
  • Stil - Belki bir gölge ekleyin veya sadece kenarlıklar var ve dolgu rengi yok. Tasarım ile oynayın ve farklı görünmesini sağlayın .

Renkler

Herkesin yaratıcı tarafı değişir, bu nedenle mevcut stilinizi korumak, ancak renkleri değiştirmek istiyorsanız, kırmızılarınızın karşısındaki renkler için bir renk tekerleğine bakmanızı tavsiye ederim. Bu, düğmenin öne çıkmasına yardımcı olacaktır. Düğmeyi ayrıca sarı, kırmızı (açık veya daha koyu), siyah veya beyaz (tasarımınıza uygunsa) gibi yıkıcı renklere giderek vurgulayabilirsiniz.

Tasarım, geliştirme sürecinin çok zorlu bir parçasıdır, bu yüzden etrafta oynamak kesinlikle yardımcı olacaktır. İnsanların fikirlerini alın - bir tasarım seçmelerini sağlayın. Bazı mockup tasarımları yapın. Umarım bu yardımcı olmuştur.

0
Aaron