iOS 가이드라인 3

바

1. 내비게이션 바 Navigation Bar 
내비게이션 바는 일련의 계층적 앱 화면 탐색이 가능한 공간으로, 상태 바 아래 앱 화면 상단에 배치된다. 새 화면이 표시되면 이전 화면의 제목으로 레이블 된 뒤로 가기 버튼이 왼쪽에 배치된다. 오른쪽에는 현재 페이지의 내용을 관리하는 데 쓰이는 편집 및 완료 버튼과 같은 컨트롤이 포함되기도 한다. 반투명의 배경색을 사용할 수 있으며, 키보드가 화면에 나타나거나 제스처가 발생하면 크기가 줄거나 숨겨지게 할 수 있다.
내비게이션 바에는 컨트롤 기능보다는 현재 페이지의 제목이 표시되는 경우가 많아 타이틀 바라고 부르기도 한다. 상황에 따라 제목을 비워두기도 하고, 앨범이나 아티스트 이름, 재생 목록 같은 콘텐츠와 구분되게 하려고 큰 타이틀 제목을 사용하기도 하는데, 큰 제목은 스크롤 하면 더욱 명확히 구분된다. 시계와 같은 앱에는 탭 레이아웃이 있지만, 탭마다 고유하게 인식할 수 있는 레이아웃이 있으므로 큰 제목은 필요하지 않다.
내비게이션 바에는 분할된 세그먼트 컨트롤을 사용하는 것도 가능하다. 내비게이션 바 내부에 세분된 컨트롤을 배치하고, 각 컨트롤은 상호 배타적인 버튼으로 각각 기능하는 두 개 이상의 세그먼트로 구성한다. 모든 세그먼트의 폭은 같아야 하며, 텍스트나 이미지를 포함할 수 있다. 또한, 각 세그먼트는 너비가 같으므로 5개 이하로 구성하는 것이 바람직하다. 내비게이션 바의 뒤로 가기 버튼을 탭 하면 항상 이전 화면으로 돌아간다. 

 

2. 검색 창 Search Bar
검색 창은 화면 상단에 위치하며, 단독으로 둘 수도 있고 검색 모음이나 내용 보기에 표시할 수도 있다. 취소 버튼이나 지우기 버튼을 배치해 사용성을 높일 수 있으며, 사용자가 쉽게 검색할 수 있도록 힌트와 맥락을 제안할 수도 있다. 또한, 사람들이 검색 범위를 좁힐 수 있도록 서치바에 스코프 바 Scope Bar를 추가 할 수 있다. 

Scope Bar

3. 상태 바 Status Bar
상태 바는 현재 시각, 통신사, 네트워크 상태, 배터리 수준 등 장치의 현재 상태에 대한 정보를 표시하는 공간으로, 화면의 최상단에 표시된다. 색상은 일반적으로 검은색과 흰색이다. 전체 화면 미디어를 표시할 때는 일시적으로 숨길 수도 있지만 영구적으로 숨기면 안 된다.

4. 탭 바 Tab Bar
iOS의 탭 바는 화면 하단에 위치하는데, 이에 따라 툴바와 혼동될 수 있다. 사용자는 탭 바의 메뉴들이 서로 밀접하게 관련되어 있으며 같은 화면 안에서 현재의 콘텐츠 내용과 관련된 데이터로 전환할 것을 기대한다. 내비게이션 바가 현재 보기와 관련되지 않은 별도의 화면으로 이동하는 것과 달리, 툴바는 화면 이동 없이 항목 만들기, 항목 삭제, 주석 추가, 사진 찍기 등 현재 화면에서의 조작에 관여한다.
iOS의 탭 바에서는 텍스트만 사용하는 경우는 드물고, 대부분 아이콘 또는 아이콘과 함께 레이블링 Labeling 된 문자의 조합으로 사용된다. 탭 바의 메뉴 아이콘은 앱의 여러 섹션을 신속하게 전환하는 데 사용된다. 또한, 가로 화면과 세로 화면에서 같은 높이를 유지하고, 키보드가 표시되면 숨겨져야 한다.
탭 바에는 여러 탭이 포함될 수 있지만, 3~5개의 메뉴를 사용하는 것이 적당하다. 공간이 제한되어 일부 탭을 표시할 수 없는 경우 마지막 탭은 추가 탭을 보여주는 탭이어야 한다. 새 정보가 해당 화면의 보기에 연관되는 경우, 탭 메뉴에 배지를 사용하는 것을 권장하며 인터페이스를 예측할 수 있는 상태로 유지해야 한다. 액션이 있는 메뉴는 탭 바가 아닌 툴바를 활용해야 하며, 기능을 사용할 수 없다고 해서 화면에서 생략하지 말고 사용 불가능한 탭에 대해서는 이유를 제시해야 한다. 

5. 툴바 Tool Bar
툴바는 앱 하단에 표시되며, 현재 보기 또는 화면의 콘텐츠 내용과 관련된 작업을 수행하기 위한 버튼을 포함한다. 툴바는 반투명의 배경 색조가 있으며, 사용자가 필요하지 않으면 숨길 수 있다. 숨겨진 툴바는 화면 하단을 탭 해 다시 표시할 수 있고, 화면에 키보드가 있을 때는 나타나지 않아야 한다.

뷰

1. 액션 시트 Action Sheet와 액티비티 뷰 Activity View
액션 시트는 컨트롤 또는 작업에 대한 응답으로 나타나는 특정 스타일의 경고로, 현재 맥락과 관련된 두 가지 이상의 선택 사항을 제공한다. 사용자는 액션 시트를 통해 상호작용을 시작하거나 확인 요청을 할 수 있다. 나열된 작업을 수행하지 않기 위한 취소 버튼도 필요하다. 작은 화면에서는 액션 시트가 화면 아래에서 위로 나타나며 큰 화면에서는 한 번에 팝업으로 표시된다.
액티비티 뷰는 복사, 즐겨찾기, 찾기와 같은 특정 과업을 수행하는 데 사용되며, 즉시 작업을 수행하거나 진행하기 전에 더 많은 정보를 나타낼 수 있다. 특히 사용자가 앱에서 수행할 수 있는 맞춤 서비스나 작업에 대한 권한을 부여하기 위해 사용한다. 

 

2. 컬렉션 뷰 Collection View와 이미지 뷰 Image View
컬렉션 뷰는 그리드와 스택, 타일, 원형 배열 등을 포함한 인터페이스로, 정보를 보는 유연한 방법을 제공하기 위해 만들어진 컨트롤이다. 이미지 기반 콘텐츠를 보여주는 데 적합하고, 사진과 같이 순서대로 배열된 콘텐츠를 관리하는 데 주로 사용된다. 
이미지 뷰는 투명하거나 불투명한 배경 위에 단일 이미지 또는 애니메이션 시퀀스를 표시한다. 이미지 뷰 내에서 이미지의 크기를 조정하거나 특정 위치에 고정할 수 있다.

3. 테이블 Table
테이블 리스트는 텍스트 기반 콘텐츠를 표시할 때 사용하며, 데이터를 섹션 또는 그룹으로 나누어 단일 열의 스크롤 행 목록으로 표시한다. iOS에서는 테이블 리스트를 테이블 뷰 Table View라고 한다. 대표적인 UI 형태에는 기본 테이블 뷰와 그룹 테이블 뷰가 있다.
기본 테이블 뷰의 행은 레이블이 있는 섹션으로 분리되며, 각 섹션에 선택 옵션이 있는 경우에는 테이블의 오른쪽 가장자리를 따라 수직으로 표시한다. 그룹 테이블 뷰는 그룹마다 최소 하나 이상의 행으로 구성하고 인덱스는 포함하지 않는다. 각 그룹에는 그룹의 맥락을 설명하는 머리글과 도움말을 표시하는 바닥글을 포함할 수 있다. 기본 테이블 뷰와 그룹 테이블 뷰는 사용자가 쉽게 읽고 수정할 수 있도록 몇 가지 변형 스타일도 제공한다.

 

컨트롤

1. 버튼 Button
버튼은 사용자가 터치할 때 발생하는 동작을 알려주는 컨트롤이다. 버튼 시스템은 대부분 미리 정의된 다양한 버튼 스타일을 제공하며, 사용자 지정 버튼을 디자인할 수도 있다. 
iOS에서 쓰이는 버튼의 종류에는 시스템 버튼, 상세정보 공개 버튼, 정보 버튼, 연락처 추가 버튼이 있다.

2. 콘텍스트 메뉴 Context Menu
iOS 13 이상에서는 상황에 맞는 메뉴를 사용해 화면상의 항목과 관련된 추가 기능에 접근할 수 있으며, 피크 Peek과 팝 Pop은 3D 터치를 지원하는 장치에서만 사용할 수 있다. 콘텍스트 메뉴는 이름 그대로 상황에 맞는 명령을 즉시 표시하는 메뉴이다. 콘텍스트 메뉴를 보려면 스와이프하면 된다. 

Context Menu

3. 편집 메뉴 Edit Menu
텍스트 필드, 텍스트 보기, 웹 보기, 이미지 보기에서 요소를 길게 터치하거나 두 번 탭 하면 편집 메뉴를 표시할 수 있다. 이 메뉴에는 오려두기, 복사하기, 붙여넣기, 선택, 전체 선택 등의 명령이 있으며, 일부는 선택적으로 비활성화할 수 있다. 아무것도 선택하지 않으면 복사하기 또는 잘라내기와 같이 선택이 필요한 옵션이 메뉴에 표시되지 않아야 한다. 마찬가지로 이미 선택된 항목이 있는 경우에도 선택 옵션이 표시되지 않아야 한다.

4. 피커Picker와 날짜 선택
피커는 사용할 수 있는 값 목록에서 하나의 값을 선택하는 데 사용되며, 사용자가 필드를 편집하거나 메뉴를 탭 할 때 화면 맨 아래에 또는 팝 오버로 표시된다. 피커의 높이는 대략 5행의 목록 값이며, 선택 도구의 너비는 장치 및 맥락에 따라 화면 너비나 내부 보기로 나타난다. 배경색을 제외하고는 피커 컨트롤의 비주얼 스타일이나 크기를 변경할 수 없다.
날짜 선택 도구 역시 피커와 같은 방식으로 작동하며 특정 날짜나 시간 또는 둘 모두를 선택하기 위한 인터페이스로 구성되어 있다. 

5. 활동 지표와 진행 바 Progress Bar 
스마트폰에서는 사용자가 현재 상태를 정확히 알 수 있도록 진행 상황을 피드백하는 일이 매우 중요하다. 사용자는 현재의 맥락을 이해하고 다음 행동을 하기까지 오래 기다리지 않는다. 따라서 사용자의 액션에 대한 피드백은 다양한 방법으로 제공되어야 하며, 그중에서도 진행 상태에 대한 피드백은 반드시 제공되어야 한다. 
사용자가 버튼을 터치하거나 새로고침을 했다면 사용자의 명령을 받아 다음 프로세스가 시작되었음을 알리는 것이 좋다. 이때 공간을 많이 차지하거나 위치가 너무 도드라지는 것은 바람직하지 않고 진행 바를 사용해 왼쪽에서 오른쪽으로 채워지는 형태로 디자인하는 것이 좋다.

6. 슬라이더 Slider와 스테퍼 Stepper
슬라이더는 썸이라는 컨트롤이 있는 가로 트랙으로, 손가락으로 슬라이드 해 최솟값과 최댓값 사이를 이동할 수 있다. 슬라이더의 값이 변경되면 최솟값과 썸 사이의 트랙 부분이 색상으로 채워진다. 또한, 최솟값과 최댓값을 의미하는 아이콘을 슬라이더 왼쪽과 오른쪽에 표시할 수 있다.
스테퍼는 값을 증가 또는 감소시키기 위해 사용하는 두 개의 세그먼트 컨트롤로 이루어진다. 기본적으로 스테퍼의 한 세그먼트는 플러스 기호, 다른 세그먼트는 마이너스 기호로 표시하며, 필요에 따라 사용자 지정 이미지로 변경할 수 있다. 

 

7. 스위치 Switch
스위치는 토글 Toggle 형태의 컨트롤로 두 개의 상호 배타적인 기능을 켜고 끌 때 사용한다. 보통 테이블의 행에서 단일 설정 옵션의 상태를 전환하는 데 사용한다. 스위치가 제어하는 옵션과 상태는 해당 인라인 레이블에서 명확하게 표시하고, 사용자와 컨트롤 사이의 상호작용을 위해서는 색상이나 토글 위치 등의 명확한 시각적 피드백을 제공해야 한다. 

 

 

2023.04.12 - [UXUI 디자인] - 안드로이드 가이드 라인 1

안드로이드 가이드 라인 1

 

2023.04.11 - [UXUI 디자인] - iOS 가이드라인 2

iOS 가이드라인 2