Slides
Components
인디케이터는 2가지로 Dot Indicator, Number Indicator로 콘텐츠 구성 내용에 따라 분류됩니다.
- A
- B
Dot Indicator
Dot Indicator는 동선에서 사용자의 위치를 명확하게 표시하며 많은 양의 콘텐츠를 분리할 수 있는 탐색 기능으로 사용합니다.
Anatomy
Variants
States
Dot Indicator의 Dot이 Active상태일 경우 Green-500을 사용하며 Inactive상태에서는 Gray-300을 사용합니다.
Table of Figma Properties
| Property | Values | Default Value |
|---|---|---|
| State | Active, Inactive | Active |
Usage Guidelines
Do : Dot Indicator는 중앙 정렬로 사용
기본적으로 Dot Indicator는 카테고리 또는 콘텐츠 아래 중앙 정렬하여 사용합니다.
Don’t : 오른쪽 또는 왼쪽 정렬 사용 제한
오른쪽 또는 왼쪽으로 정렬하여 사용하는 것을 제한합니다.
Do : 현재 진행중인 단계만 표시하여 사용
모든 단계(동선)을 보여주되 현재 진행중인 단계만 Green-500 컬러를 사용합니다.
Don’t : 중복으로 동선을 표시하여 사용 제한
Green-500 Color를 중복으로 사용하는 것을 제한합니다.
Do : Dot은 최대 5개까지만 표시하여 사용
사용자의 간결한 여정을 위해 최소 2개 최대 5개까지만 Dot으로 표시하여 사용합니다.
Don’t : 1개 또는 6개 이상의 Dot을 표시하여 사용 제한
최소 1개 또는 최대 6개 이상의 Dot을 표시하여 사용하는 것을 제한합니다.
Do : 스마일홈 카드 내 포함하여 사용
Dot Indicator는 스마일홈 카드 내 포함하여 사용할 수 있습니다.
Spec
Sizes
Dot Indicator의 Dot은 단일 사이즈 6으로 각 Dot의 간격은 4로 고정해 사용합니다.
Dot은 최대 5개까지 표시기로 사용 가능하며 화면의 Center정렬로 사용합니다.
Number Indicator
Number Indicator는 콘텐츠의 개수가 명확하게 표시되어야 하는 경우 노출 한정하여 사용합니다. 기본 형태에서 플러스 아이콘이 결합한 경우 버튼 요소로 기능을 확장합니다. e.g. 홈 상단 배너 영역
Anatomy
Variants
Icon
Number Indicator는 아이콘 유무에 따라 Without Icon과 With Icon으로 분절되어 관리됩니다.
Table of Figma Properties
| Property | Values | Default Value |
|---|---|---|
| Icon | True, False | True |
Behaviors
Combined with swipe
Slides 내 모든 Indicator는 접근성을 고려해 Swiper와 결합하여 고정 사용하며, Scroll Interaction일 경우 Indicator와 결합하여 사용하지 않습니다.
- 1
- 2
Usage Guidelines
Do : 우측 힌트 콘텐츠 있을 시 사용
기본적으로 Number Indicator는 우측 힌트 콘텐츠가 있는 상태에서 사용합니다.
Do : 힌트 콘텐츠 없이 사용
Number Indicator는 힌트 콘텐츠 없이도 사용합니다.
Do : 우측 또는 중앙 정렬로 사용
홈 배너 이미지는 우측 정렬, 상품 상세페이지 내 확대보기에서는 중앙정렬로 사용합니다.
Don’t : 왼쪽 정렬 사용 제한
왼쪽으로 정렬하여 사용하는 것을 제한합니다.
Do : Line Style의 Indicator 사용 (e.g. 홈 배너이미지)
Line Indicator의 Track Color는 Gray-100, Line Color는 각 콘텐츠 마다 사용하는 컬러에 맞게 사용합니다. Line 두께는 1로 콘텐츠 개수에 따라 Width 가변 적용하여 사용합니다.
Do : Line Style의 Indicator 사용 (e.g. 홈 딜리버리 카드)
Line Indicator는 콘텐츠 아래 16의 사이간격을 두고 배치하여 사용합니다. 표시되고 있는 콘텐츠 순서에 따라 Line의 위치가 정해진 고정 너비에 맞게 Track위에서 이동합니다.
Spec
Sizes
Number Indicator의 기본형은 높이 24로 Width는 아이콘 결합에 따라 가변 적용합니다.
전체보기 Plus 아이콘을 결합하여 사용할 경우 사이간격은 9이며, 텍스트 사이즈는 12를 기본으로 합니다.
Placement
Number Indicator는 콘텐츠 위에 Floating되어 Home 광고형 배너 이미지 우측 아래 8의 간격을 두고 사용합니다.
상품 상세 페이지 내 상품이미지 우측 아래 각각 16의 간격, 확대보기는 중앙정렬로 하단 24간격을 두고 배치하여 사용합니다.
- 1
- 2
