머터리얼 UI 구성요소
8. 탐색 바와 슬라이더: 대화형 슬라이더는 연속 또는 불연속적인 범위의 값을 슬라이더
끝을 움직여서 선택할 수 있다. 가장 작은 값은 왼쪽, 가장 큰 값은 오른쪽에 있고
슬라이더의 상호작용적 속성 때문에 슬라이더는 볼륨, 밝기, 채도와 같은 강도 레벨
을 반영하는 설정을 위한 기능이다.
9. 프로그레스와 활동: 프로그레스 바(progress bar)와 활동 표시(activity indicator)는
사용자에게 무언가가 진행중이며 시간이 약간 걸린다는 것을 알리는 데에 사용한다.
10. 스위치: 스위치에는 세 가지 종류(체크박스, 라디오 버튼, 온오프 스위치)가 있고
스위치를 통해 사용자는 원하는 선택을 할 수 있다.
11. 대화 상자: 대화 상자(dialog)는 앱에서 작업을 계속 진행하기 위해 결정사항이나
필요한 추가 정보를 사용자에게 묻는다. 이러한 요청은 단순한 확인/취소 결정부터
좀 더복잡한 조절 설정이나 텍스트 입력까지도 포함한다.
12. 피커: 피커(picker)는 값들의 모음에서 값 하나를 선택하는 간단한 방법을 제공한다.
위/ 아래 버튼을 터치하거나, 키보드/스와이프 제스처로 값을 선택할 수도 있다.
수행 내용 / UI 디자인 가이드 이해하기
- UI 가이드 라인의 목적과 적용범위를 파악한다.
- UI 디자인 가이드 목차를 리뷰한다.
1. UI 컴포넌트 별 페이지 구성을 파악한다.
2. UI 구현을 위한 기본적인 디자인원칙을 파악한다.
3. UI 디자인 가이드 기본원칙은 서비스를 기획하고 설계하는데 반드시 준수해야 할 기본
사항들을 정의하고 있다. 설계자는 UI 디자인 가이드 기본원칙을 숙지하고 기본원칙에서
제시하는 필수사항과 권장사항, 제약사항을 고려하여 개발한다. 다음은 모바일 서비스 UI
설계에서 일반적으로 적용되는 기본원칙이다.
(1) 사용자 경험에 초점을 맞춘다.
(가) 사용자가 서비스를 사용하는 목적과 상황을 이해한다.
(나) 사용자가 설명서 없이 쉽게 사용할 수 있어야 한다.
(다) 사용자의 잠재적인 실수를 고려해야 한다.
(라) 항상 훌륭한 기술이 사용자의 만족도를 높이는 것은 아니다.
(마) 아름다운 디자인만이 최선인 것은 아니다.
(바) 기기에 따른 사용성의 특징을 이해한다.
(2) 소수의 핵심기능에 집중한다.
(가) 간략해야 한다.
(나) 모바일에 최적화된 사용자 경험을 제공한다.
(다) 목적을 분명히 한다.
(3) 서비스의 호환성, 확장성을 고려한다.
(가) 모바일 서비스의 호환성을 확보하여 개발한다.
(나) 화면의 크기는 320*480을 최소 크기로 하여 확장성을 고려한다.
(다) 특정한 플랫폼에만 작동하는 기능에 의존하지 않는다.
(4) 정보소외계층의 접근성을 고려한다.
(가) 다양한 조건의 환경과 사용자가 사용할 수 있어야 한다.
(나) 접근성을 위한 지침을 준수하여 개발한다.
(다) 웹표준을 준수하여 개발한다. (App개발 시 예외)
(라) HTML, CSS, ja_ej_vasc_ej_ript 소스를 분리하여 개발한다.
(마) 아름다운 디자인만이 최선인 것은 아니다.
(5) 일관성을 유지한다.
(가) 스타일의 일관성을 유지한다.
(나) 용어사용의 일관성을 유지한다.
(다) 조작방식의 일관성을 유지한다.
(6) 이미지를 제한적으로 사용한다.
(가) 경량화된 이미지를 사용한다.
(나) 비윤리적 이미지를 사용하지 않는다.
(다) 이미지의 저작권을 확보한다.