UI_UX Design/UI Design 개론

ch05_iOS가이드라인(5)_컨트롤

jsBae 2024. 11. 27. 15:41
학습목표 :
iOS 앱에서 컨트롤 요소를 효과적으로 설계, 구성, 활용하는 역량을 기르는 데 중점을 둔다.

버튼(Button):

버튼(Button): 사용자가 터치할 때 발생하는 동작을 알려주는 컨트롤이다.

  • iOS에서 쓰이는 버튼의 종류에는 시스템 버튼, 상세정보 공개 버튼, 정보 버튼, 연락처 추가 버튼이 있다.

콘텍스트 메뉴

상황에 맞는 명령을 즉시 표시하는 메뉴이다. 콘텍스트 메뉴를 보려면 스와이프하면 된다.
  1. 사용 사례:
    • 터치(길게 누르기) 및 클릭으로 메뉴 표시.
    • 예: 메일 앱에서 "답장", "이동" 옵션 제공.
  2. 모범 사례:
    • 관련성: 현재 항목과 직접 관련된 작업만 포함.
    • 간결성: 메뉴 항목은 최소화(필요한 작업만).
    • 일관성: 앱 전체에서 컨텍스트 메뉴 지원.
    • 파괴적 명령 강조: 삭제 등은 하단 배치, 빨간색으로 표시.
    • 아이콘 사용: SF Symbols로 명령 의미 강화.
  3. 주의사항:
    • 하위 메뉴는 한 단계까지만 사용.
    • 사용 불가능한 항목은 숨김.
    • 키보드 단축키는 메인 메뉴에만 표시.

편집메뉴

  • 텍스트 필드, 텍스트 보기, 웹 보기, 이미지 보기에서 요소를 길게 터치하거나 두 번 탭하면 편집 메뉴를 표시할 수 있다.
  • 이 메뉴에는 오려두기, 복사하기, 붙여넣기, 선택, 전체 선택 등의 명령이 있으며, 일부는 선택적으로 비활성화할 수 있다.

피커와 날짜 선택

  • 피커(Picker): 사용 가능한 값 목록 (사람들이 선택할 수 있는 여러 개의 고유한 값의 스크롤 가능한 목록) 에서 하나의 값을 선택하는 데 사용되며, 사용자가 필드를 편집하거나 메뉴를 탭할 때 화면 맨 아래에 또는 팝 오버로 표시된다.
  • 사용자가 단일 또는 다중 값을 선택할 수 있도록 지원하는 UI 요소.
  • 종류: 날짜 피커, 시간 피커, 사용자 정의 피커 등 다양한 스타일 제공.
  • 날짜 선택도구 역시 피커와 같은 방식으로 작동하며 특정 날짜나 시간 또는 둘 모두를 선택하기 위한 인터페이스로 구성되어 있다.
  • 형태:
    • 휠 스타일 피커: 회전하는 휠 형태로 옵션 선택.
    • 콤팩트 스타일(iOS 14 이상): 화면 공간을 절약하며 탭으로 피커 확장.
  • 사용 사례:
    • 중간에서 긴 항목 목록: 많은 선택지를 빠르게 스크롤하여 선택 가능.
    • 날짜 및 시간 선택: 달력 보기나 키패드 입력 대안으로 사용.
    • 숫자 입력: 숫자 값 선택을 간편하게 지원.
  • 장점:
    • 간결하고 공간 절약.
    • 사용자가 실수 없이 선택 가능.
  • best 적용
    • 항목 길이에 따라 적합한 도구 선택:
      • 중간~긴 목록: 피커 사용.
      • 짧은 목록: 풀다운 버튼 사용.
      • 매우 큰 목록: 리스트나 테이블 뷰 사용(인덱스 포함 가능).
  • 예측 가능하고 논리적 정렬: 숨겨진 값을 빠르게 탐색할 수 있도록 알파벳순 등 논리적으로 정렬.
  • 컨텍스트 내 표시: 새로운 화면 전환 없이 편집 필드 아래나 팝오버로 피커 표시. 일반적으로 화면 하단에 나타남.
  • 세분성 조정(날짜 피커): 분 단위를 기본값(0~59) 대신 더 큰 간격(예: 15분 단위: 0, 15, 30, 45)으로 설정.

loading

활동 지표(rating indicators)와 진행 바(Progress bar)

  • 진행 상태는 정적인 요소가 아니라 동적인 요소이므로 시작과 완료를 보여주는 것이 좋고, 시간이 많이 걸릴 때는 상호작용을 추가해 사용자의 긴장을 완화해야 한다.
  • 사용자가 버튼을 터치하거나 새로고침을 했다면 사용자의 명령을 받아 다음 프로세스가 시작되었음을 알리는 것이 좋다.

 

  • 확정적 진행률 표시기 (Determinate):
    • 작업 기간이 알려져 있을 때 사용.
    • 예: 파일 업로드, 변환 등.
    • 작업 완료에 따라 선형 또는 원형 트랙을 채움.
  • 불확정적 진행률 표시기 (Indeterminate):
    • 작업 기간이 알려지지 않을 때 사용.
    • 예: 복잡한 데이터 로딩, 동기화 등.
    • 작업이 진행 중임을 시각적으로 표시하지만, 완료 시점은 알리지 않음.

디자인 형태

  1. 선형 진행률 표시기:
    • 진행률 막대: 선형 트랙이 왼쪽에서 오른쪽으로 채워짐.
    • 사용 예: 파일 다운로드.
  2. 원형 진행률 표시기:
    • 트랙이 시계 방향으로 채워짐.
    • 사용 예: 이미지 렌더링.

best 적용

  • 순위를 변경하기 쉽게 만드세요. 순위가 매겨진 항목 목록을 제시할 때, 사람들이 별도의 편집 화면으로 이동하지 않고도 개별 항목의 순위를 인라인으로 조정 가능
  • 별을 사용자 지정 기호로 대체하는 경우 그 목적이 명확한지 확인하십시오. 별은 매우 인식 가능한 순위 기호이며, 사람들은 다른 기호를 평가 척도와 연관시키지 않을 수 있습니다.

 

슬라이더와 스테퍼

슬라이더(Slider): 썸(Thumb)이라는 컨트롤이 있는 가로 트랙으로, 손가락으로 슬라이드해 최솟값과 최댓값 사이를 이동할 수 있다.

 

1. 슬라이더의 특징 :

  • 값 변경 시 최소값과 썸 사이 트랙이 색상으로 채워짐.
  • 선택적 아이콘: 슬라이더의 좌우에 최소값/최대값 의미를 나타내는 아이콘 표시 가능.

2. 모범 사례

  • 사용자 정의 디자인: 트랙 색상, 썸네일 이미지, 좌우 아이콘 등을 조정해 앱 디자인과 조화.
    • 예: 이미지 크기 조절 시, 왼쪽에 작은 이미지, 오른쪽에 큰 이미지 아이콘 사용.
  • 일관된 방향: 
    • 수평 슬라이더: 최소값은 왼쪽, 최대값은 오른쪽.
    • 수직 슬라이더: 최소값은 하단, 최대값은 상단.
  • 추가 입력 옵션 제공: 텍스트 필드: 정확한 값을 입력 가능하도록 추가.

스테퍼(Stepper)

스테퍼(Stepper): 값을 증가 또는 감소시키기 위해 사용하는 두 개의 세그먼트 컨트롤로 이루어진다.

  • 스테퍼는 작은 값 변경에는 단독으로 사용하고, 큰 범위 값에는 텍스트 필드와 함께 사용해 정확성과 편리성을 제공해야 한다.
  • 독립적 표시: 스테퍼 자체는 값을 표시하지 않으므로, 변경된 값이 어디에 적용되는지 명확히 해야 함.

모범 사례

  1. 값 표시 명확화:스테퍼가 영향을 미치는 값을 레이블 또는 텍스트 필드에 표시하여 사용자 혼란을 방지.
  2. 텍스트 필드와의 페어링:
    • 값 변경 범위가 크거나 특정 값을 입력해야 할 경우 스테퍼 + 텍스트 필드를 함께 사용.
    • 예: 인쇄 화면에서 사본 수를 설정할 때, 스테퍼로 조정하거나 텍스트 필드에 입력.
  3. 소규모 값 조정:스테퍼는 몇 번의 탭으로 값을 미세 조정할 때 효과적.

스위치 (toggle controls)

  • 스위치(Switch): 토글 형태의 컨트롤로 두 개의 상호 배타적인 기능을 켜고 끌 때 사용한다. 토글은 두 가지 상반된 상태(예: 켬/끔) 간의 전환을 지원하여 사용자가 콘텐츠나 뷰의 상태를 관리할 수 있도록 돕는 도구이다.
  • 보통 테이블의 행에서 단일 설정 옵션의 상태를 전환하는 데 사용한다.
  • 각 상태를 나타내는 다른 모양을 사용합니다.
  • 항목 목록 선택과 같은 작업에는 팝업 버튼을 사용하는 것이 더 적합하다.

Best 적용

 

  • 영향 명확히 표시 : 토글이 영향을 미치는 설정이나 콘텐츠를 명확히 식별. 필요 시 설명 레이블 추가.
  • 현재 상태 전달 : 색상 채우기, 배경 모양, 체크 표시 등으로 시각적 차이를 명확히 함.
    • 색상만으로 구분하지 않고 다른 시각적 요소를 추가.
  • 토글 버튼 디자인 : 아이콘과 배경 업데이트를 통해 상태와 목적을 전달.
  • 주의사항 
    • 토글은 상태 관리용으로만 사용.
    • 모든 사용자가 쉽게 인식할 수 있는 시각적 설계 필요.

 

728x90
반응형