사용자 인터페이스 - 색상 및 레이아웃
https://stackoverflow.com/questions/5242
-
08-06-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
저는 특히 웹 애플리케이션 정보에 관심이 있지만 데스크톱 애플리케이션 개발에도 어느 정도 호기심을 갖고 있습니다.이 질문은 내 개인 웹사이트 작업과 내 직업에 의해 발생합니다. 여기서 몇 가지 기능을 개발했지만 사이트의 모양과 느낌에 통합하는 것은 다른 사람에게 맡겼습니다.
색 구성표, 레이아웃, 서식 등과 같은 항목에 대한 가이드나 경험 법칙이 있나요?나는 방문자에게 가독성과 명확성을 보장하고 싶지만 동시에 단조롭고 지루하지 않기를 원합니다.
이 분야에 대한 지식은 - 사진을 건네주면 화면에 재현할 만큼의 지식이 있지만, 새로운 인터페이스를 디자인하라고 하거나 기존 인터페이스를 다시 디자인하라고 하면 어디서부터 시작해야 할지 모르겠어요. .
해결책
일반적으로 각 운영 체제에는 사용자 인터페이스 지침이 있습니다.Windows의 경우 이봐.(편집하다:해당 게시물의 링크가 깨졌습니다.하지만 "사용자 인터페이스 지침" MSDN에는 모든 것에 대한 기사가 있습니다)
애플도 자신만의 것을 갖고 있다.또한, 계속 유지하고 싶을 수도 있습니다. 접근성 마음에.
다른 팁
색상의 대비가 좋은지 확인하는 한 가지 팁은 색상의 스냅샷을 찍어 회색조로 변환하는 것입니다.무언가를 읽을 수 없다면 색상을 잘못 선택한 것입니다.
게다가 사용자 인터페이스에 관한 것은 아니지만 비포 앤 애프터 매거진 색상, 디자인 및 관련 주제에 대한 꽤 좋은 힌트를 줄 수 있습니다.심지어 다운로드할 수 있는 무료 PDF도 있습니다.
그 책 인터페이스 디자인, 작성자: Jenifer Tidwell 주제에 대한 전체 장이 있습니다(9장, 온라인에서 발췌 가능).책 전체를 추천할 가치가 있습니다.
웹 UI의 경우, 여기서는 극단적으로 웹 디자인에서 가장 중요한 색상은 흰색, 즉 "빛"이라고 말하고 싶습니다.그 위에 촘촘한 콘텐츠를 배치하는 색상입니다.
기본 콘텐츠 영역에서는 항상 어두운 텍스트, 밝은 배경을 사용하세요.
그리고 레이아웃에서 가장 중요한 규칙은 공백입니다.콘텐츠가 숨을 쉬게 하세요.
이 두 가지 간단한 규칙을 따르는 것은 대부분의 "사용자 인터페이스 사용성" 지침보다 더 가치가 있습니다.
그런데 MS 사용자 인터페이스 지침은 (대체로) 끔찍합니다.Jakob Nielsen을 읽고 Apple 디자인 미학을 살펴보세요. 그러나 MS의 "중성 회색/파란색 크런치박스" 12단계 마법사 10pt UI 텍스트 철학은 피하세요.
(저는 오랜 MS GUI 프로그래머로서 이렇게 말합니다.)
저는 잘 어울리는 색을 찾는 걸 어려워해서 대부분 제가 원하는 색(예: 녹색)인 자연 사진을 속이고 사용한 다음 이 웹사이트 주요 색 구성표를 꺼내십시오.일반적으로 자연은 자신만의 멋진 색 구성표를 설정하는 데 꽤 능숙합니다.
고대비 색상 조합을 사용하세요.흰색 배경에 검정색 텍스트가 고대비 콤보의 가장 좋은 예입니다.
나쁜 조합은 빨간색 배경에 녹색 텍스트입니다.나처럼 색맹인 사람들에게는 끔찍한 일입니다.
색맹인에게 사이트가 어떻게 보이는지 확인하세요. colorfilter.wickline.org
데스크탑 애플리케이션의 경우:무엇을 하든지 손으로 고른 색상을 사용하지 마십시오."창 배경", "메뉴 텍스트" 등과 같은 명명된 시스템 색상을 고수하십시오.그렇지 않으면 OS 접근성 기능에 의존하는 사람들은 색상 선택에 제한을 받을 것이며(예를 들어 고대비 테마를 선택할 수 없음) 데스크탑 테마를 사용자 정의하려는 사람들은 귀하의 응용 프로그램이 보기 흉하다고 생각할 것입니다.
다음은 귀하의 사용성에 대한 몇 가지 간단한 지침입니다. 타이포그래피.이러한 사항은 주로 가독성 및 접근성 문제를 해결합니다.
해야 할 일:
- 상대적인 글꼴 크기 사용(em)
- LANG 속성을 사용하여 문서 내의 언어 변경 사항을 식별합니다.
- 흰색 배경에 검정색 텍스트
- 제목에는 H1, H2 등을 사용합니다.적절하게 중첩하세요.
- 콘텐츠를 덩어리로 나누고 사용자가 찾고 있는 내용에 맞는 제목으로 정리하세요.
- 명확하고 간단한 카피 작성
- 왼쪽 정렬, 오른쪽 정렬
- 텍스트와 배경 색상은 고대비여야 합니다.
하지 말아야 할 것:
- 링크 텍스트로 "여기를 클릭하세요" 또는 "자세히 보기"를 사용하세요.
- 강조하려면 밑줄을 사용하세요
- 2개 이상의 글꼴 유형 모음
- 이탤릭체
- 모두 대문자를 사용하는 텍스트 블록
- 흰색 배경에 실제 빨간색 또는 실제 파란색 텍스트 사용(색수차)
