Chip
칩은 고객이 누를 수 있도록 키워드를 강조하는 장치입니다.
Version 1.0기본 원칙
- 키워드가 명료해야 합니다.
- 정보를 분류하여 볼 수 있어야 합니다.
- 구체적인 정보에 접근할 수 있도록 도와야합니다.
타입
1. 아웃라인 칩
컨테이너 컬러 없이 아웃라인으로만 표현된 칩입니다.
2. 틴트 칩
컨테이너와 레이블에 모두 컬러를 적용한 칩입니다. 레이블이 잘 보이도록 옅은 컨테이너 컬러를 사용합니다.
3. 필 칩
짙은 컨테이너 컬러를 적용한 칩입니다. 레이블은 컨테이너 컬러와 명확히 구분될 수 있도록 White로 표현합니다.
한 줄에 연속으로 여러 가지 스타일을 섞어서 사용
모양
1. 캡슐형 칩
알약처럼 모서리 없이 둥근 형태의 기본형 칩입니다. 키워드 사이를 더 정확하게 구분하고 주목도를 높이는 데 사용합니다.
2. 직사각형 칩
가로로 긴 네모 형태의 칩입니다. 상품 사진이 중요한 역할을 하는 L 사이즈 칩에만 사용합니다.
구조
1. 컨테이너
칩의 모든 구성요소를 담은 영역입니다.
2. 아이콘
고객에게 익숙한 메타포를 활용해 키워드의 이해를 돕고 주목도를 높입니다. 아웃라인, 필, 컬러 아이콘 모두 사용할 수 있습니다.
3. 레이블
상품 속성, 검색 키워드, 브랜드명, 상품 추천・제안을 한 단어 혹은 짧은 단어의 조합으로 표현합니다.
4 이미지
브랜드 로고, 상품 사진, 상품 색상과 같은 직관적인 정보를 제공합니다.
컬러
각 스타일에 따라 10가지 컬러의 칩을 사용할 수 있습니다.
상태
칩을 필터로 사용할 때는 필터 조건의 선택 전후 상태를 명확히 구분하여 표시합니다.
1. 보통 상태
칩이 선택되기 전 상태입니다. 아웃라인과 틴트 칩 모두 사용할 수 있습니다.
2. 선택 상태
선택된 상태는 필 칩을 사용합니다.
필터 칩으로 사용하는 경우, 선택한 속성을 칩 안에 레이블로 표현할 수 있습니다.
사용 맥락
검색 키워드
빠른 검색을 돕는 추천 또는 연관 검색어를 미리 제시합니다. 칩을 누르면 검색 결과를 보여주는 다음 페이지로 이동합니다.
검색창 안에서 이전에 검색한 키워드를 칩으로 표현하여, 추가로 입력한 검색어와 구분합니다. S 사이즈 칩을 사용합니다.
필터
상품 속성, 추천・제안 등을 칩으로 나열하여, 구체적인 조건에 부합하는 검색 결과를 볼 수 있도록 도와줍니다.
여러 개의 조건을 동시에 선택할 수 있고, 페이지 이동 없이 같은 페이지 내에서 선택된 칩을 구분하여 표시합니다.
