컨트롤 사용, 힌트 메시지 표현, 색상 및 창 레이아웃 스타일 등 일관된 표준을 준수하여 진정한 일관성을 유지해야 합니다.
이렇게 하면 다음과 같은 이점이 있습니다.
1: 사용자가 사용할 때 정확한 정신 모델을 만들 수 있습니다. 한 인터페이스를 능숙하게 사용한 후 다른 인터페이스로 전환하면 다양한 기능을 쉽게 추론할 수 있으며 문장 이해에 신경 쓸 필요가 없습니다.
2. 교육과 지원 비용을 낮추면, 지원 인원도 일일이 지도하기 귀찮다.
3. 사용자에게 통일된 느낌을 주고 혼란스럽지 않고 행복하며 지원을 늘린다.
둘째: (색상) 색상을 적절하게 사용하고 대비 원칙을 따르십시오.
1: 소프트웨어 유형 및 사용자 작업 환경에 따라 적절한 색조를 선택하는 균일한 색조
예: 보안 소프트웨어, 업계 표준에 따라 노란색, 친환경, 블루 패션, 보라색 로맨틱 등을 선택할 수 있습니다. , 밝은 색은 사람을 편안하게 하고, 어두운 배경은 사람을 피곤하지 않게 한다.
2. 자체 시리즈 인터페이스가 없는 경우 표준 인터페이스를 사용할 수 있으며, 운영 체제와 통일되어 시스템의 표준 색상표를 읽을 수 있습니다.
3. 색맹과 약한 사용자는 특별한 색상을 사용하여 중요한 점이나 특별한 것을 나타내더라도 특수 표시기를 사용해야 합니다. Quot! ,? 글머리 기호, 아이콘 등
4. 배색에도 테스트가 필요합니다. 모니터와 그래픽 카드 문제로 인해 각 기계의 색상 표현이 다른 경우가 많습니다. 엄격하게 테스트해야 하는데, 다른 기계는 색상 테스트를 해야 한다.
5. 대비 원칙을 따릅니다. 밝은 배경에는 어두운 문자를, 어두운 배경에는 밝은 문자를 사용합니다. 파란색 문자는 흰색 배경에서 쉽게 식별할 수 있으며, 빨간색과 파란색의 대비가 부족하고 파란색과 흰색의 대비가 크기 때문에 빨간색 배경에서 구분하기가 어렵습니다. 특별한 경우를 제외하고는 대비가 강한 색상을 사용하지 마십시오. 혐오스럽습니다. 전체 인터페이스는 가능한 한 다른 색상을 사용하지 마십시오.
셋째: (자원) 자원
정교한 마우스 커서, 아이콘, 지시도, 언더레이 등이 필요한 다채로운 인간-컴퓨터 상호 작용 인터페이스입니다.
1: 위의 색상표 작성, 아이콘 작성 단계 표준화, itop 의 outlookbar 아이콘 설계 표준 참조 등 통일된 규칙도 따라야 합니다.
2. 표준 아이콘 스타일 디자인, 균일한 구도 레이아웃, 균일한 색조, 대비, 레벨, 화면 스타일이 있습니다.
3. 언더레이에 녹여야 합니다. 색이 옅고 대비가 낮기 때문에 가능한 적은 색상을 사용합니다.
4. 아이콘과 이미지는 의미를 명확하게 표현하거나, 일반 표준을 따르거나, 개체를 사용자의 컴퓨터와 쉽게 연결시켜야 한다. 기본 기묘한 도안을 그리는 것은 절대 허용되지 않는다.
5. 마우스 커서 스타일이 통일되어 시스템 표준을 최대한 사용하여 중복을 방지합니다. 예를 들어, 일부 소프트웨어에서는 손의 모양이 네 가지 다른 모양으로 되어 있습니다.
4: (글꼴) 글꼴
균일한 글꼴을 사용하는 경우 글꼴 표준 선택은 운영 체제 유형에 따라 달라집니다.
중국어는 표준 글꼴을 사용하고, 영어는 표준 MicrosoftSansSerif 를 사용하며, 특수 글꼴 (예서, 초서 등) 은 고려하지 않는다. , 특수한 경우는 그림으로 대체할 수 있습니다.) 를 통해 각 사용자가 사용할 때 정상적으로 표시할 수 있습니다.
글꼴 크기는 MSS 글꼴 8 점, 송체 5 9 점 (10.5 점) 과 같은 시스템 표준 글꼴을 기준으로 합니다.
특수 힌트 및 향상된 표시를 제외한 모든 컨트롤은 가능한 한 균일한 크기의 글꼴 속성을 사용해야 합니다.
Windows 시스템에는 큰 글꼴의 속성을 설정하는 데스크톱 설정이 있습니다. 많은 인터페이스 디자이너들이 이것에 대해 자주 고민하고 있다. 디자인이 Microsoft 의 표준을 따르고 모든 컨트롤이 상대적 크기로 설정된 경우 크기 글꼴 전환 시 특별한 문제가 발생하지 않습니다.
그러나 창 디자인 단위로 격자를 사용하는 것이 편리하기 때문에 큰 글꼴을 변경한 후 레이아웃이 혼란스러워지는 경우가 많습니다.
이 경우 다음과 같이 처리해야 합니다.
1: 프로그램이 자동으로 크기를 조정하고 래스터 값에 해당 축척을 곱합니다.
2. 모두 도트 매트릭스 단위로 시스템 글꼴 조정에 관계없이 큰 글꼴 조정에 따른 번거로움을 줄일 수 있습니다. 이 방법은 BCB/DELPHI 에서 자주 사용되지만, 불가피한 결과는 시스템과 통일되지 않는다는 것이다.
다섯째: (텍스트) 서면 표현
힌트 정보 및 도움말 문서의 텍스트 표현은 다음 지침을 따릅니다.
1: 구어화, 예의화, you 와 please 를 많이 사용하며 전문 용어를 사용하거나 적게 써서 오자를 근절한다.
2. 쉼표, 마침표, 세미콜론의 용법으로 정보가 많으면 세그먼트화해야 함을 암시합니다.
경고, 정보 및 오류는 해당 방법으로 표시됩니다.
4. 통합 언어 설명 (예: 기능 해제 버튼) 을 사용하여 종료, 복귀, 닫기로 설명할 수 있으므로 통일해야 합니다.
5. 사용자에 따라 그에 상응하는 어조로 단어를 사용한다. 예를 들면 전문 소프트웨어, 많은 직업이 나타날 수 있고, 사용자는 모두 아이들이다. 이렇게 하면 친절하고 우호적이며, 노인 사용자는 성숙하고 점잖아야 한다. 표준을 설정하고 표준을 따릅니다.
6: (스타일) 컨트롤 스타일, 잘못된 컨트롤을 사용하지 마십시오. 컨트롤 기능은 한결같아야 합니다.
같은 스타일의 디자인 컨트롤이 있습니다. 만약 일련의 컨트롤을 설계할 수 없다면, 표준 컨트롤을 사용한다면, 결코 어수선하고 엉망진창이 되어서는 안 된다. (윌리엄 셰익스피어, 햄릿, 지혜명언)
컨트롤을 오용하지 마십시오. 예를 들면 다음과 같습니다.
버튼 스타일을 사용하여 표 기능을 만들고 주 메뉴를 사용하여 저작권 정보를 표시합니다.
같은 유형의 컨트롤은 같은 방식으로 작동합니다. 예를 들어 컨트롤을 두 번 클릭하면 일부 동작을 수행할 수 있지만 동일한 컨트롤을 두 번 클릭해도 응답하지 않습니다.
컨트롤은 하나의 기능만 수행하며 다시 사용할 수 없습니다.
7: (ALIGN) 컨트롤 레이아웃, 창이 혼잡하지 않고 컨트롤이 기능별로 결합됩니다.
1: 화면이 혼잡해서는 안 됩니다.
혼잡한 스크린은 이해하기 어려워 사용하기가 어렵다. 테스트 결과 (Mayhew, 1992) 에 따르면 전체 화면 커버리지는 40% 를 초과하지 않고 그룹 클럭 커버리지는 62% 를 초과하지 않습니다.
사람을 보자, 너무 붐비지 말고, 너무 느슨하지 마라.
컨트롤 간격은 프로젝트 전체에서 일정하며 일관성을 위해 양식 크기를 조정합니다. 양식 크기가 일정하더라도 컨트롤 사이의 행 간격을 파괴하는 것보다 일부 영역을 유지하는 것이 좋습니다.
2. 지역 약정
컨트롤 행, 수직 정렬, 컨트롤 간격은 기본적으로 동일합니다.
행과 행 사이의 간격은 동일하며 양식 테두리와의 거리는 행과 행 사이의 간격보다 커야 합니다 (간격에 빈 여백을 더한 값).
화면에 여러 편집 영역이 있는 경우 시각적 효과와 효율로 영역을 구성합니다.
3. 데이터 정렬이 적절해야 합니다.
설명문, 중국어판은 중국어 전각 콜론으로 수직으로 정렬될 때 오른쪽으로 콜론을 눌러야 합니다 (그림 참조). 수직 컨트롤의 폭은 가능한 한 일치해야 합니다. 왼쪽으로 정렬합니다.
4. 유효한 조합
논리적으로 관련된 컨트롤은 해당 종속성을 표시하기 위해 함께 그룹화해야 합니다. 반대로 빛을 원하지 않는 물건은 분리해야 하고, 물품 집합 사이의 간격에 따라 그룹화하거나, 상자를 이용하여 각자의 영역으로 나누어야 한다.
예를 들어, 다음 인터페이스에서 검색 방법을 선택하여 청구 방법에 관계없이 번호 범위가 주요 호출 번호 범위를 나타내는지 아니면 호출 번호 범위를 나타내는지 결정합니다.
검색 방법과 회계 방법 교환으로 수정해야 합니다. 사용자의 오해를 피하기 위해서.
5. 창이 확대/축소될 때 컨트롤의 위치 및 레이아웃:
인터페이스가 절판되거나 못생기지 않도록 해결 방법은 다음과 같습니다.
1: 고정 창 크기, 크기 변경이 허용되지 않습니다.
2: 창의 크기를 변경하고 컨트롤의 위치와 크기를 변경합니다.
BCB/델파이의 VCL 에서 대부분의 컨트롤에는 레이아웃 속성이 있습니다. 일부 컨트롤에는 레이아웃 조정에 사용할 수 있는 정렬 속성이 있습니다 (TcustomPanel, Tmemo 등). 을 누르고 왼쪽, 오른쪽, 위, 아래, 클라이언트 등의 속성을 사용하여 레이아웃에 따라 자동으로 조정됩니다.
대부분의 컨트롤에는 Anchors 속성이 있습니다. 이 속성이 true 이면 각 가장자리와의 거리가 변경되었는지 여부를 나타냅니다. 이렇게 하면 조판 작업을 더 설계할 수 있다.
8: (taborder) 탭 순서
성어, 읽기 순서, 왼쪽에서 오른쪽으로, 위에서 아래로
양식에 있는 컨트롤의 탭 활성화 순서입니다. BCB/DELPHI 는 양식 디자인의 마우스 오른쪽 버튼 클릭 메뉴를 사용하여 TabOrder 설정을 선택하고 VC 는 양식의 RES 편집 영역에서 ctrl+D 를 사용합니다.
9: (바로 가기&; 가속기 & ampPopMenu) 바로 가기 키, 바로 가기 키 및 팝업 메뉴.
바로 가기 키:
1: 전역 바로 가기 메뉴에 설명되어 있습니다. CTRL+XXX 를 누르면 도움말 목록에 병합됩니다.
2. 바로 가기 키에 대한 도움말 및 특별 지침을 작성하고 교육을 사용할 때 사용법을 강조합니다.
10: (동작) 사용자 상호 작용
1: 보이지 않는 대신 사용하지 않도록 설정합니다
기능이 때때로 사용자에게 허용되지 않도록 하려면 컨트롤을 임의로 숨길 수 없으며, disable 속성으로 표시해야 합니다. 이는 사용자가 컨트롤이 누락된 것을 발견하고 당황하는 것을 방지하기 위함입니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 기능명언)
2. 창의 팝업 위치가 명확해야 합니다
컨트롤을 클릭하면 팝업 창이나 메뉴가 눈에 띄는 힌트를 주어야 한다. 최소 요구 사항은 방금 클릭한 위치를 덮어 사용자가 새 인터페이스로 쉽게 이동할 수 있도록 하는 것입니다.
3. 작업 수행 시 프롬프트 표시.
11: (도움말) 온라인 도움말:
1: 시스템 기본값 및 업계 표준 제어 작업은 일일이 설명할 필요 없이 특수 제어만 설명하면 됩니다.
2. 컨트롤을 추가하고 해당 도움말 파일에 직접 연결하는 특수 작업 및 특수 기능 인터페이스입니다.
3. 특별설정은 비교적 상세하므로 인터페이스에서 간결하고 명확한 문장으로 설명하거나 Tiptool 을 이용하여 2 단계를 보조해야 한다.
12: 발표 시 명확한 규칙.
통일된 것을 하나씩 해석하고, 일반적인 설명을 제공하고, 도움말 및 사용 설명서를 넣고 용어집을 추가합니다.
부록:
예술가는 언제 참여했습니까?
미공은 인터페이스 미화의 주요 인력으로서 미공 디자인과 포장 디자인 능력뿐만 아니라 전체 프로젝트를 꿰뚫어 인터페이스 프로그래머 시스템에 대한 참고 의견을 제시해야 한다.
1: 소프트웨어 설계 초반, 미공은 수요 이해, 유사 소프트웨어 인터페이스의 부족 분석, 주색, 전형적인 인터페이스 스타일, 전체 미술 포장 구상 등을 담당했습니다.
2. 인터페이스 프로토타입 설계 과정에서 개발자와 함께 최종 표현 스타일을 수정 및 논의하고 UI 표준을 설정합니다.
3. 프로그램 개발 과정에서 표준 스타일의 리소스 파일 (icon, cur, BMP 등) 을 제공합니다. 참고) 통합 스타일 리소스의 설계 프로세스를 요약하여 표준 문서 * 를 형성합니다.
4. 제품화 방면에서 도움말 문서, 사이트 스타일, 제작을 돕고, 첨부된 홍보 사진, 애니메이션, 제품 포장, 포스터 등을 제작한다.