it-swarm-korea.com

내 앱의 기본 색상이 빨간색 인 경우 "위험"으로 선택할 색상

나는이 질문을 꽤 오랫동안 내 머리에 감고있다. 문제는 내 주요 응용 프로그램에 빨간색 테마가 있다는 것입니다. 취소 버튼의 경우 회색 만 사용했지만 이제는 "위험한"색이 필요합니다. 어떻게해야합니까? 보라색? 주황색? 빨간색을 다시 사용하는 것이 어색하고 어둡습니까?

PD : 나는 우리의 경쟁사 색상이기 때문에 파란색을 사용할 수 없습니다.

enter image description here

56
caravana_942

나는 당신이 놀 필요가 있다고 생각합니다. 화면이 빨간색이고 경고 또는 위험을 사용하려는 경우. 다음과 같은 제안이 있습니다.

1- 앱 색상과 위험 행동을 구별하기 위해 여전히 빨간색을 사용하지만 다른 정도 를 사용할 수 있습니다.

2- 순수한 흰색 팝업을 사용하고이 팝업 내에 빨간색 아이콘 , 느낌표 또는 기호를 적용 할 수 있습니다.

3- 또 다른 제안은 검은 색을 사용하고 검은 색 팝업 위에 흰색 표시를 사용하는 것입니다. 변경 될 수 있습니다.

귀하의 적색 시스템 화면을 제공 할 수 있다면 바로 해결책을 드릴 수 있습니다.

enter image description here

101
Khalil Hanna

버튼의 색상에만 초점을 맞추는 것이 아니라 특정 작업에 대한 경험 전체에 집중하는 것이 좋습니다. 삭제 버튼에 반드시 별도의 위험 색상이 필요하지는 않습니다. 표준 빨간 버튼을 사용할 수 있지만 다른 위험 메시지로 지원할 수 있습니다. 이처럼 :

enter image description here

사용자가 위험한 일을하려고한다면 버튼 색상에만 의존하기보다는 경고와 메시지를 사용하여 위험을 강조하는 것이 좋습니다.

또한 빨간색 앱에 대해 본질적으로 위험하거나 무서운 것은 없다고 말할 가치가 있습니다. 나는 코카콜라를 위해 잠시 동안 디자인했고 그들의 주요 브랜드 색상은 빨간색입니다. 웹 사이트 및 앱에 빨간색 브랜딩을 적용하는 방법을 보여주는 좋은 예입니다. 그들은 주로 검은 색, 회색 및 흰색을 강조 색상으로 사용합니다.

52
Michael

여기서 주목해야 할 하나의 절대적으로

의미만을 전달하기 위해 색상에만 의존하지 마십시오.

색상은 시각적 메시지를 전달하는 데 유용하지만 이러한 종류의 UX 결정을 내릴 때는 접근성을 고려해야합니다. 사용자에게 어떤 형태의 색맹이나 기타 시각 장애가있는 경우 그 의미를 전달하기 위해 다른 종류의 표시기 (아이콘 또는 문구)가 필요합니다. 버튼 이름이 Delete이라는 사실은 훌륭하지만 '시스템 크리티컬'정보가 염려되는 경우 단순히 색상을 지표로 사용하는 것 이상의 방법으로 전달해야합니다.

이 기사 접근성과 관련하여 색상 사용을 다루며 이에 대한 단락이 있습니다.

"... 중요한 시스템 정보를 전달하기 위해 색상에 의존하지 않도록하여 접근성을 보장하십시오. 따라서 오류 상태, 성공 상태 또는 시스템 경고와 같은 상황에서는 상황을 명확하게 불러내는 메시지 또는 도해 법을 통합해야합니다. 의 위에."

또한 빨간색이 앱의 주요 색상임을 고려하면 최소한 4.5:1는 최소한 WCAG 2 레벨 AA 을 준수해야합니다. 이것은 다음을 확인하기위한 정말 유용한 도구입니다. https://webaim.org/resources/contrastchecker/

35
indextwo

실행 가능한 옵션의 수가 증가함에 따라 최종 결정을 내리기가 더 어려워 질 수 있습니다. 몇 개로 좁 히면 사용자가 선호하는 구성표를 선택할 수 있도록 고려하십시오.

고려해야 할 몇 가지 색 구성표 :

  • 빨간색 = 위험 = 앱이 위험합니다. 앱의 기본 색상을 변경하십시오

  • 파란색 = 경쟁사 색상. 경쟁사 = 위험합니다. 위험을 위해 파란색을 사용하십시오 밝은 파란색은 긍정적 경고 (예 : 성공)로 오인 될 수 있지만 진한 파란색은 그렇지 않을 수 있습니다.

  • 흑백을 사용하십시오- Khalil Hanna 's answer 의 예는 놀랍습니다. 문제는 흑백이며 일반 텍스트와 혼동 될 수 있습니다. 검은 색 + 주황색/노란색의 문제가 없을 수 있습니다.

  • 표준 색상 사용 테마의 기본 색상에 관계없이. 녹색 = 성공. 노란색/주황색 =주의. 빨간색 = 위험/경고. 기타.

    그러나 Aline points out 과 같이 Google Material Design Color Usage 는 다음과 같이 조언합니다. "빨간색은 브랜드 색상이므로 오류 상태. 브랜드 색상을 사용하지 않는 대체 경고 색상을 선택하십시오. " 그들의 예는 주황색을 사용합니다. 그러나 자주색도 실행 가능한 옵션으로 보입니다.

    Material Design Example

10
習約塔

"위험 색상"은 앱의 색상 체계와 차별화되어야합니다. 의미를 고려하는 것도 좋습니다. 대부분의 문화권에서 빨강/주황색/노란색은 위험,주의,주의를 나타냅니다. 일반적으로 파란색 또는 녹색 메시지가 표시되면 자동으로 성공 피드백이라고 생각합니다. 기본 색상에서 눈에 띄려면 주황색 또는 노란색을 사용해야한다고 생각합니다.

Google Material Design에서는 주황색으로 빨간색 테마를 사용합니다. https://material.io/design/color/color-usage.html#meaning

5
Aline

위험을 나타내는 첫 번째 색 구성표는 특히 검은 색이 대각선 줄무늬 인 경우 노란색과 검은 색의 조합입니다. 나는 위험과의 연관성이 꿀벌에서 비롯된 것으로 생각합니다.

간단히 yellow black sign Google에 들어가면 일종의 위험을 나타내는 많은 표시가 나타납니다. 독, 떨어질 위험, 범죄 현장에서 사용되는 테이프 등에 관한 노래.

나는 두껍고, 노랑, 검은 색 대각선으로 경계선이있는 메시지 박스를 개인적으로 보았으며, 잠재적으로 위험한 무언가, 아마도 위험한 결정이 있다고 생각합니다. 같은 패턴의 둥근 삼각형이있는 버튼을 보면 그 버튼을 누르면 매우 조심해야한다는 것을 알 수 있습니다.

나에게 일반 빨간색은 실제로 강하지 않으며 같은 수준의 위험을 완전히 극복하려면 흰색과 검정색이 필요합니다.

5
trlkly

이미 빨간색을 사용하고 있다면 노란색과 검은 색을 사용하십시오. 그것은 자연의 자연적인 경고 신호이며, 확실히 주목을 끌 것입니다. 또한 건설 현장에 대한 많은 위험 신호에도 사용됩니다.

enter image description here

서방 국가에서는 문화적 위험이 검은 색보다 빨간색이 아닙니다.

enter image description here

2
Danielillo

주목 받기

색상 의미없는 의미

색상만으로는 의미를 전달하지 않으며, 그 자체로 "위험"또는 "경고"의 표현에 의존해서는 안됩니다. 또한, Deuteranomaly (수컷의 6 %)와 같은 시각 장애는 몇 가지 언급 한 바와 같이 문화적 차이를 언급하지 않고 특정 색상 대비를 보이지 않게합니다.

명암, 기호 및 텍스트

빨강, 노랑, 주황과 같은 색은 색이 특정한 의미를 갖기 때문에가 아니라 색이 특정 색 대비, 휘도 대비 및 "눈길을 끌기"때문에 배경과 대비되기 때문에 선택되었습니다.

적절한 휘도 대비를 유지하고 의도가 분명한주의/매력 지향 기호를 사용하는 것이 더 중요합니다.

휘도 대비 손상이나 문화적 차이로 인해 잘못 인식 될 수있는 색상 대비에 의존하지 않으며 심볼이 두드러지게 나타납니다. 주변 자극 (텍스트, 버튼 등)보다 더 높은 휘도 대비를 사용하는 것이주의와 사용자 초점을 얻는 데 도움이됩니다.

색 대비 경고의인지 인식 측면에서 인식을 높이는 데 도움이 될 수 있지만 이차 설계 고려 사항이어야합니다. 예를 들어, 시장이 북미 인 경우 green는 경고에 대한 잘못된 선택 일 수 있습니다. 그러나 녹색과 상대 색상 인 빨간색 (자주색 포함)은 일반적인 사람의 시각적 인식에서 매우 강한 가장자리 감지 .

이해할 수없는 기호 aa는 (이상적으로) 번역이 필요하지 않은 방식으로 의미를 전달하는 데 매우 유용합니다. 문화적 차이는 다시 큰 영향을 미칠 수 있습니다.

라스 베이거스에서 MGM 그랜드 호텔은 원래 전면 입구가 거대한 에메랄드 색 사자 입을 통해 설계되었습니다. 생각을 연 직후, 그들은 사자의 입이 일부 아시아 문화에서 특히 부정적인 상징을 가지고 있음을 발견하여 사자의 입을 제거하기 위해 그것을 찢고 입구를 재건했습니다.

그러나 컴퓨터 영역에는 특정 의미를 국제적으로 인정한 공통 아이콘이 있습니다. 일반적으로 경고를 전달하는 데 더 나은 선택이 일반적입니다.

텍스트는 왕입니다. 언어 차이에도 불구하고. 명확하고 간단한 텍스트는 특정 의미를 전달하는 가장 좋은 방법입니다. 추가 정보가 포함 된 팝업 도구 설명이있는 단일 Word는 유용성을 선호합니다.

애니메이션 및 모션 목표 인 경우주의에 영향을 미칩니다. 1000 개의 빨간색 LED 벽에 빨간색으로 깜박이는 단일 LED는 예를 들어주의를 끌 것입니다.

TL; DR

요컨대, 특정 색상 조합보다 좋은/높은 휘도 대비 및 설명 텍스트 및 기호를 갖는 것이 더 중요합니다.

다음은 휘도 대비를 사용하는 예입니다. 삭제 버튼 대 저장 버튼의 예가 수정되었습니다.

SAVE DELETE MODIFIED

1
Myndex

사용자 인터페이스를 만들 때 고려해야 할 사항은 컬러가 의미를 전달해서는 안 됨입니다. 그러나 다른 버튼이나 다른 인터페이스와 다르게 파괴적인 버튼을 강조 표시 할 수 있습니다. 사용할 수있는 색상을 생각하는 대신 단추를 다른 보이게 만드는 방법에 대해 생각하십시오.

디자인 변경

  • Borders-현재 디자인에 테두리가없는 버튼이 있으면 매우 뚜렷한 검은 색 또는 흰색 테두리를 추가해보십시오. 그러면 인터페이스의 나머지 부분에서 단추가 "팝"됩니다.
  • Size-버튼의 높이 또는 너비로 놀아보십시오. 크기는 파괴적인 버튼을 일반 버튼과 구별하는 데 도움이됩니다. 그러나 항상 버튼의 크기와 같을 필요는 없습니다. 레이블의 글꼴 크기를 변경할 수 있습니까?
  • Font Style-글꼴에 대해 이야기 할 때, 밑줄, 기울임 꼴 또는 굵은 글씨를 레이블에 추가하여 눈에 띄는 방법은 무엇입니까?
  • Style-그림자를 추가하거나 테두리 만 있고 채우기 색상이 없을 수 있습니다. 디자인을 가지고 놀아 보이게 다른 .

그림 물감

모든 사람의 창의적 측면은 다양하므로 현재 스타일을 유지하고 색상을 변경하려면 빨간색과 반대되는 색상의 색상환을 살펴 보는 것이 좋습니다. 이렇게하면 버튼이 돋보이게됩니다. 노랑, 빨강 (분명히 어둡거나 밝음), 검정 또는 흰색 (디자인에 적합한 경우)과 같은 파괴적인 색상으로 이동하여 버튼을 강조 할 수도 있습니다.

디자인은 개발 과정에서 매우 어려운 부분이므로 놀아 보는 것이 도움이 될 것입니다. 사람들의 의견을 구하십시오-디자인을 선택하도록하십시오. 모형 디자인을 만드십시오. 이것이 도움이 되었기를 바랍니다.

0
Aaron