Badge

Badge는 상태나 수치에 대한 정보를 시각적으로 제공하는 역할로 사용 됩니다. Wind에서 Badge는 일반적으로 상태를 시각적 Color Mapping을 통해 직관적으로 판단할때 주로 사용 됩니다.

Anatomy

1. Badge Container
2. Text Label
3. Icon Btn
4. Badge Box
5. Extra Label

Usage

Badge는 보여주고자 하는 정보의 특성에 따라서 6가지로 분류됩니다.

1. Box Badge
2. Contained Badge
    a. Text Type
    b. Number Type
3. Count Badge
4. Severity Badge
5. Button Badge
6. Text Badge

Box Badge와 Label Badge는 Progress 혹은 Status를 Color mapping하여 사용자에게 시각적으로 정보를 표출 할때 주로 사용되며, Count Badge는 해당 영역 내에서 전체적인 갯수를 표출할때 주로 사용됩니다. 대표적으로 사용되는 3가지 타입와 더불어 Severity Badge, Button Badge, Text Badge 의 타입도 추가적으로 사용됩니다.

1. Box Badge

Box의 형태로 Badge내부에 별도의 Label 정보를 제공하지 않고, 색상만으로 정보를 제공할때 사용됩니다.

2. Contained Badge

Label에 해당되는 정보는 Text와 Number가 있으며, Text Type의 경우 외부 Label과 함께 활용되기도 합니다.

3. Count Badge

전반적인 수치를 개별적으로 단일하게 나타낼때 사용이 됩니다.

4. Severity Badge

Zoomable에서 결함의 5단계와 미확인 결함의 6가지의 단계를 표기해주는 역할을 합니다. Box형태의 Badge에 결함의 단계를 Text로 표기하여 함께 사용 됩니다.

5. Button Badge

Button Badge의 경우 Badge를 클릭하였을때 특정 Action을 수행 할 수 있는 것이 특징이다.

6. Text Badge

Text Badge의 경우 Badge를 클릭하였을때 특정 Action을 수행 할 수 있는 것이 특징이다.

Semantic Variants

Severity Badge의 경우 6+1개의 색상 분류를 활용하여 단계별 심각도를 각각의 색상으로 구상하였습니다. Box Badge의 경우 4가지 색상분류를 사용하여 Progress를 나타내는 단계를 구성을 하였습니다.

Contents

각 Badge에는 Color Mapping이라는 특징으로 인해 텍스트 이외의 정보를 각 영역에 매핑하여 나타내는 것으로 표기가 되기때문에 Text와 Color가 되기까지 사용자는 것을 원칙으로 하고 있습니다.

Badge에서 사용되는 Contents는 Container 영역내에 text label이 포함되거나 외부에 Extra Label의 형식으로 이름과 같이 Text Type 만 포함 가능합니다. Badge의 타입에 따라 Count Badge와 Severity Badge의 경우에는 포함되는 Text Label의 Contents Type이 숫자로만 한정되어 사용 됩니다. Box Badge에 Extra Label이 함께 사용되어지는 경우는 특정 Progress에 대한 Label로, 변동가능한 Text가 사용되는 것이 아닌 고정되어진 Text로 변경이 불가능 한 것이 특징입니다.

Sizing

Badge의 사이즈는 일반적으로 Large, Medium, Small로 총 세가지를 사용이 되며 각각은 Height의 값에 의해서 사이즈가 결정 되어지며 Contained, Count, Severity Badge의 Height 변경에 따라 Text와 관계없이 Text의 글자수 나이카나 빠를때 검증합니다. 선택에 맞게 Width의 Height를 동일하게 하는 방법과 최소 크기를 통한 Padding 규칙적으로 적용되어서 Auto와 같이 적용합니다.

1. Text Character = 1

Text의 속성인 Badge의 최고의 상기 Padding을 동일하게 사용하고 Height와의 비율 값으로 해당 라인의 Badge를 맞추는 것이 원칙이며 Auto는 Height를 사용되지 않고 사용됩니다.

2. Text Characters > 1

글자가 1개가 아닌 Text가 Badge 내에 두개이상의 경우에 전반적으로 동일 Padding 값을 기준으로 사용이 됩니다. Text Level 변경에서 사이즈가 변동 되지 않는 것이 특징이며, Text 1 Line 글자에 따라서만 활용하는 가변 Width에 있어서 단어 이상은 활용되지 않는 것이 특징입니다. (Single Words: Medium, Only) 사이즈 필수 값은 것으로 합니다.

Variants

Table of Properties - Textual Badge

Table of Properties - Box Badge

Table of Properties - Severity Badge