인터페이스 색상을 선택하는 프로세스는 특히 다양한 버튼 상태, 글꼴 및 기타 UI 요소를 고려할 때 복잡할 수 있습니다. 이 글에서는 프로젝트에 맞는 색 구성표를 성공적으로 선택하는 데 도움이 되는 방법과 원칙을 공유하겠습니다.  1. 기본 색상 정의  웹사이트를 디자인할 때 색상 구성표를 선택해야 하는 경우가 많습니다. 때로는 고객이 이미 기본 브랜드 색상을 갖고 있는 경우도 있습니다. 이 경우 기본 색상을 보완할 추가 색상과 음영을 선택해야 합니다. 기본 색상 외에도 오류 상태, 링크, 일러스트레이션, 아이콘 표시, 그래픽 및 대시보드 사용 등 다양한 목적으로 사이트에서 추가 색상이 사용됩니다.  2. 색상 조화 활용  색상의 조화를 잘 이루려면 단색, 보색, 삼각형 등 다양한 색상 조화 방식을 사용하는 것이 좋습니다. 프로젝트의 기본 색상을 보완하는 조화로운 색상 팔레트를 만드는 데 도움이 될 수 있습니다. 현재 우리는 기술이 빠르게 발전하는 세상에 살고 있으며, 쉽게 색 구성표를 생성하는 특별한 서비스가 있습니다. 예를 들어  color.adobe.com을 사용합니다.   내가하는 방법은 다음과 같습니다.    드롭다운 목록에서 원하는 구성표를 선택합니다.  하나.    기본 색상으로 표시된 필드에 필요한 색상 값을 입력합니다.  둘.    내 필요에 맞는 색상을 결정하십시오. 삼.    내 경우에는 Figma를 사용하여 작업 공간으로 전송합니다. 4개.  3. 톤 선택  다음으로 선택한 각 색상의 음영을 결정해야 합니다. 선택한 색상의 색조를 선택하려면 이 과정에 도움이 되는 특정 서비스를 이용할 수 있습니다. 색상의 음영을 결정하는 방법에는 두 가지가 있습니다.  첫 번째 방법은 더 복잡한 공식을 사용합니다.  헤더 색상을 선택하세요(반드시 검은색일 필요는 없음).  HLS 모드로 전환합니다.  첫 번째 셀을 건너뛰고 두 번째 셀의 값을 2만큼 줄이고 세 번째 셀의 값을 5만큼 늘립니다.   두 번째 방법은 서비스를 이용하는 것입니다(쉽고 빠르게)   colors.dopely.top    원하는 색상의 값을 입력하세요.  하나.    색상과 단계 수를 선택합니다(저는 5개를 사용했습니다).  둘.    색조와 단계 수를 선택합니다.  삼.    . 결과적으로 한 가지 색상에 대해 다음과 같은 표를 만들었습니다. 4개    = 기본, P    = 이것이 우리의 기본 색상입니다. P 60    = 이것은 우리가 Tints에서 수집한 밝은 톤입니다. P 10부터 P 50까지    = 이것은 우리가 음영 패널에서 수집한 어두운 음영입니다.  P 60에서 P 100까지  다른 색상, 텍스트 및 오류 상태에 대해서도 동일한 과정을 반복하세요!  4. 색상 접근성 확인하기  제한된 능력을 가진 사용자를 포함하여 모든 사용자가 선택한 색상에 접근할 수 있도록 하는 것이 중요합니다. 인터페이스를 만들 때 따를 수 있는   (웹 콘텐츠 접근성 지침)와 같은 지침이 있습니다. 색상의 접근성을 확인하려면 선택한 색상의 대비와 접근성을 확인하는 플러그인이나 웹 서비스와 같은 특정 도구를 사용할 수 있습니다. WCAG  Figma 플러그인 –  대비  웹 서비스 –    냉각기  5. 다양한 인터페이스 상태에 대한 색상 정의  웹 프로젝트의 색상 팔레트를 디자인하는 마지막 단계에서는 특정 요소 상태에 필요한 단계 수를 결정해야 합니다. 일반적으로 우리는 네 가지 주요 상태를 식별합니다.  활성화됨(요소의 차분하고 정상적인 상태)  호버(마우스오버)  활성(버튼이나 다른 컨트롤 클릭)  비활성화됨(차단된 요소)   단계 수를 결정하기 위해 기본 색상 값(프라임)을 고정하는 색상 패널을 사용합니다. 그런 다음 호버 및 활성 상태의 단계 수를 계산합니다. 그런 다음 버튼과 버튼 안의 텍스트를 쉽게 읽을 수 있도록 다양한 접근성 상태를 테스트합니다.  예를 들어,   다음 접근 방식을 설명합니다. 호버 상태는 초기 색상에서 1.5단계이고 활성 상태는 기본 색상에서 2단계입니다. 마찬가지로 선택한 상태는 기본 색상에서 한 단계 더 나아갑니다. 이 방법을 사용하면 색상 팔레트를 정의하고 능력이 제한된 사용자를 포함하여 광범위한 사용자가 접근성을 보장할 수 있습니다. 호버 및 활성 상태가 식별되는 텍스트에도 동일한 접근 방식이 적용됩니다. IBM 지침에서는   호버 상태  기본 색상이   인 경우 밝은 색상으로 반 단계 올라가야 합니다.  검정색과 70 사이  기본 색상이   인 경우 더 어두운 톤으로 반 단계 낮추어야 합니다.  60에서 흰색 사이   언론/활성 상태    의 값에서는 활성 상태가 두 단계 더 가벼워집니다. 100에서 70 사이    사이의 값에서는 활성 상태가 두 단계 더 어두워집니다.  60에서 10   선택된 상태  100에서 70 사이의 값의 경우 선택한 상태가 한 단계 가벼워집니다.   60에서 10 사이의 값에서는 선택한 상태가 한 단계 어두워집니다.   디자인과 텍스트를 테스트하여 읽기 쉽고 올바르게 표시되는지 확인하는 것도 중요합니다. 작업을 완료한 후 다양한 인터페이스 상태와 텍스트가 제대로 보이고 작동하는지 확인하세요.  이것은 내 경험을 바탕으로 한 팁이라는 점을 기억하십시오. 자신만의 단계를 추가하고 순서를 변경할 수 있지만 텍스트와 다양한 인터페이스 상태의 대비를 모든 사용자가 잘 읽을 수 있도록 접근성 테스트를 수행하는 것을 잊지 마십시오.  색상 구성표를 올바르게 선택하는 것은 사용자 친화적이고 매력적인 사용자 인터페이스를 만드는 데 중요한 역할을 합니다. 이러한 간단한 단계를 따르고 사용 가능한 도구를 사용하면 프로젝트에 맞는 색상을 선택하고 최적화할 수 있습니다.  당신이 내 기사를 즐겼기를 바랍니다. 질문이 있으시거나 추가 정보가 필요하시면 언제든지 댓글을 남겨주세요.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

The writer was physically present in relevant location(s) to this story. The location is also a prevalent aspect of this story be it news or otherwise.

Read my Articles 

Read My Stories

Coveted Careers: Mastering the Art of Securing Top UI/UX Design Roles in 2024

이 오디오는 이야기의 원래 언어로 제작되었습니다!

너무 오래; 읽다

Boost your HackerNoon story @ $159.99! 🚀

색상을 선택하고 다양한 상태에 대한 음영을 결정하는 방법(호버, 활성, 누르기, 비활성화)

About Author

코멘트

태그 걸기

이 기사는 다음에서 발표되었습니다.

Related Stories

Crypto Growth: 효과적인 사용자 페르소나 만들기

보이지 않는 레이어: 사용자 인터뷰가 대체할 수 없는 자산인 이유

AI의 힘을 발휘하세요. 최첨단 기술의 체계적 검토: 개요 및 소개

Crypto Growth: 효과적인 사용자 페르소나 만들기

보이지 않는 레이어: 사용자 인터뷰가 대체할 수 없는 자산인 이유

AI의 힘을 발휘하세요. 최첨단 기술의 체계적 검토: 개요 및 소개

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps