Lists는 용도에 따라 A.Basic List와 B.Menu List로 구분됩니다.

Basic List는 카테고리 분류, 옵션 선택 등 하위 선택 항목을 정리할때 사용합니다. Title 필수 노출이며 Icon, Label, Selection control은 옵션으로 선택 가능합니다.

Type

Basic List는 리스트 선택 시 페이지 이동을 기본으로하며 필요시 Radio button 또는 Checkbox 선택으로 변경할 수 있습니다. 선택옵션 가이드는 Selection Controls을 참고해주세요.

Icon

Icon은 16x16 사이즈이며 타이틀과 같은 맥락의 이미지를 사용해야 합니다. 리스트를 그룹으로 사용 시 사용자가 쉽게 탐색할 수 있도록 Icon은 일관된 형식으로 사용해야합니다.

Label

Label은 사용자가 리스트를 선택하는데에 도움을 줄 수 있는 정보 요소입니다. 자세한 가이드는 Label을 참고해주세요.

Do : 제목은 최대 한줄까지 입력 가능

Title은 Icon, Label, Selection controls 영역을 제외하고 최대 한줄까지 입력 가능하며 영역을 넘어갈 시 말줄임 처리 됩니다.

Do : 제목은 텍스트 대신 이미지도 사용 가능

Title에 텍스트 대신 이미지도 사용 가능합니다. 이미지는 최대 높이에 맞춰 가로폭을 리사이징 하며 최대 가로폭을 넘어갈 시 높이가 리사이징 됩니다.

Basic List의 높이는 사용 영역 상황에 따라 44 또는 48로 사용 가능합니다. Title의 기본 컬러는 Gray-900을 사용하며 Label, Selection control 영역을 제외하고 최대 한줄까지 표기 가능합니다.

Basic List의 서로간에 계층이 상하관계일 경우 직관적인 구조적 이해를 위해 Title은 들여쓰기 합니다. 들여쓰기 간격은 계층간 16씩 늘어납니다. 들여쓰기 시 Icon은 사용할 수 없고 Text 또는 Image만 사용 가능합니다.

Divider는 리스트간의 구분을 돕는 시각 요소입니다. 높이 1에 좌우 여백 16으로 Gray-200 을 사용합니다.

Menu List는 서비스 최상위 뎁스에 위치한 메뉴를 정리할때 사용합니다. Title과 Indicator는 필수 노출이며 Alert text는 옵션으로 선택 가능합니다.

Alert Text

Alert text는 사용자에게 Menu List의 넛징 또는 메세지 전달이 필요할때 사용합니다. Alert text를 통해 사용자는 페이지를 이동하지 않고도 Menu List를 선택 시 랜딩되는 페이지나 혜택을 예측할 수 있습니다.

Do : Alert text는 용도에 맞게 사용

Alert text의 기본 색상으로는 텍스트 Gray-700, 숫자 Blue-500을 사용하며 필요 시 3rd 색상 사용이 가능합니다.

Don’t : Alert text는 두줄로 표기 불가능

Alert text는 Title영역을 제외하고 최대 한줄까지 표기 가능합니다. 문장은 최대한 간결하게 사용하여 두줄처리 되지 않도록 주의해야 합니다.

Menu List는 단일 사이즈로 높이 기준 48을 사용합니다. Title의 기본 컬러는 Gray-900을 사용합니다. Alert text 표기는 Title 영역을 제외하고 표기 가능합니다.

Divider는 List간의 구분을 돕는 시각 요소입니다. 좌우 Margin 16으로 Gray-200 을 사용합니다.

이전글

Labels

다음글

Navigation