5. 컨트롤 컴포넌트

1. iOS 컴포넌트

 

 1) System Button

  - 앱 내에서 특정 액션을 실행하는 버튼

  - Default는 글자 만으로 이루어진 버튼

  - 경우에 따라서는 아이콘을 포함하거나 외곽에 선을 넣어서 버튼임을 명확히 하기도 함

 2) Switch

  - 상태를 on/off하는 데 사용 (좌: on / 우: off)

  - 스위치는 테이블 뷰에서만 사용

 3) Stepper 

  - 특정 양을 늘리거나 줄이고자 할 때 사용

  - 일반적으로 +/-를 사용

  - 작은 수치를 변환하는 경우에만 활용 (큰수치 변환에는 부적합)

  - 구체적인 수치의 변화를 숫자 등으로 보여주지 않으므로, 사용자가 조작한 결과를 보여줄 수 있을 정도로

     조작에 따른 변화를 노출 시켜줘야 함

 4) Slider 

  - 정해진 범위 내에서이 수치 값 변화를 손쉽게 진행할 수 있음

  - 일반적으로 좌측이 적은 방향이로 우측이 많은 방향이며 이를 좌/우 아이콘으로 나타냄

 5) Picker

  - 사용자가 하나의 값을 선택해야 할 경우 손쉽게 선택할 수 있도록 제공

Picker	Date Picker

 6) Page Control 

  - 총 몇 페이지가 존재하며, 현재 페이지가 몇 번째 페이지인지 시각적 확인 가능

  - 페이지가 10개 미만일 경우 권장

 7) Add, Info button 

  - 특정 위치에 한정적으로 액션을 실행하는 역할 수행

  - Add button: 특정 아이템, 항목을 추가하는 기능

  - Info button: 해당 아이템에 대한 정보 제공

 8) Indicator

  - 네트워크 상태를 나타내거나 화면 내 콘텐츠를 refresh 할 때 진행 상황에 대해서 알려주는 목적

 9) Text Field

  - 텍스트 입력 영역

  - 필요에 따라 Clear 아이콘, 별도 아이콘을 배치할 수 있으며, 힌트 텍스트를 넣을 수 있음

2. Android 컴포넌트

 

 1) Button

  - 텍스트, 이미지 혹은 둘 다 사용된 형태로 배치

  (1) Flat Button 

   - 들려 있지는 않지만 잉크 반응을 보여주는 잉크로 만든 버튼

  (2) Raised Button

   - 들려 있으며 누를 때 잉크 반응을 보여주는 일반적인 직사각형 Material 버튼

  (3) Floating Action Button

   - 들려 있으며 누를 때 잉크 반응을 보여주는 둥근 Material 버튼

   - Default(일반적으로 많이 사용)와 Mini (타 컴포넌트들과 사용 시 비주얼의 통일성을 위해 사용) 

      2가지 형태 제공

   - Floating Action Button 사용의 경우 해당 페이지의 경우 이미지를 터치하는 것이 주가 되기에 

     사용하지 않음 (해당 버튼 사용 전 적합성 판단 필요) 

   - 중요 액션 만을 위한 것으로 일반 버튼 형태로 남용하는 것은 지양 

   - Create, Favorite, Share, Navigate 등과 같이 긍정적 행동으로 활용하는 것을 권장

   - Save, Delete, Alert, Error 등과 같이 부정적인 사항에 대해서는 사용 지양 

   - 원형의 Flat한 형태로 떠있는 형태로 디자인 권장 (다른 형태나 Skeuomorphism 지양)

* Skeuomorphism 장/단점

1. 장점

 - 익숙함의 제공, 낯설음에 대한 배려 (아날로그적 사용감을 그대로 적용하여 제품에 대한 높은 친밀감)

 - 시각적으로 어필할 수 있는 여지가 많음

 - 사물을 그대로 보여주어 직관적이기 때문에 사용법을 미리 짐작 가능

2. 단점

 - 아날로그에서는 편했던 조작이 디지털화면으로 옮겨올 경우 불편해지고 

   화면을 쓸데없이 많이 차지하는 경우가 많음 

 - 하나의 시스템 안에서 어플리케이션들이 각각의 대표적 기기의 형태를 그래픽화할 경우

   전체 시스템 그래픽 look and feel의 일관성을 갖기 힘듦

- 그 기기를 실제로 사용해보지 못한 사용자의 경우 실생활의 경험을 잘 전달하지 못할 수 있음

- 디자이너가 새로운 매체에 대해 그리고 디자인에 대해 덜 고민하게 되어 창의적 결과물을 기대하기 힘듦 

  (디자인 콘셉트가 명확하기 때문에 디자인 평가에서 비난을 피할 수 있다는 점을 디자이너들이 악용할 여지가 

   높음)

 2) Chip

  - 해시 태그와 유사한 역할을 하며, 자유로운 형태의 텍스트, 미리 정의된 텍스트, 규칙, 또는 연락처를 

     포함하는 다양한 유형의 개체를 위해 사용

 

 3) List Control 

  - 리스트 뷰 내 Control을 의미하며, 텍스트 좌/우에 배치

  - 리스트 아이템의 상태를 나타내거나 추가정보, 특정 액션을 수행할 수 있는 아이콘 형태로 배치

  (1) Check box 

   - 체크가 주요 액션을 경우 왼쪽에, 주된 콘텐츠가 있고 체크가 부가적으로 따라갈 경우 오른쪽에 배치

  (2) Switch 

   - on/off 액션 수행 (on/off 방향은 iOS와 동일)

  (3) Reorder 

   - 리스트 내 콘텐츠 배열(위치) 수정시 사용

   - 항상 우측에 표시

  (4) 확장/축소

   

 4) Picker

  - Dialogue Window로 보여짐

  (1) Date Picker 

  (2) Time Picker 

 5) Selection Control

  (1) Check Box

   - 여러가지 항목 중 원하는 옵션 선택 시 (중복 가능)

  (2) Radio Button

   - 여러가지 항목 중 단 한개 옵션 선택 시 (단일 항목 선택)

   - 선택할 수 있는 항목이 많을 경우 드롭다운 방식의 버튼이 유리

  (3) Switch

   - 텍스트로 on/off로 표현하지 않고 버튼이미지만 활용하는 것을 권장

 6) Slider 

  - 볼륨, 밝기, 컬러 값 등을 손쉽게 이동하며 수치조정을 할 때 사용

  - 경우에 따라서는 수치 표현 가능 

  - 별도의 아이콘 형태로 표현 가능

 7) Text Field

  (1) Label (Floating Inline Label)

   - 사용자가 입력 필드를 터치하면 해당 필드가 강조 (컬러와 함께 위로 올라온 듯한 느낌 표현)

  (2) Single-Line Text Field

   - 1줄만 입력 가능한 Text Field 

  (3) Multi-Line Text Field

   - 하나의 Field이나 여러 줄의 텍스트를 넣을 수 있음

  (4) Full-width Text Field

   - Multi-Line Text Field보다 많은 내용을 적을 수 있는 Field 

  (5) Character Counter

   - 글자 수 제한이 있을 경우 사용

  (6) Auto Complete

   - Search 기능 사용 시 추천항목을 보여주거나 자동 완성 기능 제공 

  (7) Search Filter

   - App bar에서 Search 기능이 활성화하여 텍스트를 입력하는 경우 콘텐츠를 필터링/정렬하여 

     보여주는 기능

  (8) Required Field

   - 필수 입력 항목으로 항목 옆에 *(별표)를 표시하며, 해당 항목을 입력하지 않았을 경우 표시