Sushi Design System - UI Kit

Zomato

앱 정보

Sushi는 Zomato의 고유한 디자인 시스템으로, 깨끗하고 단순한 디자인 언어에 따라 강력한 사용자 인터페이스를 구축하는 데 도움이 됩니다. 우리 zomato에서 처음부터 이것을 구축했습니다. 우리를 위한 디자인 시스템일 뿐만 아니라 사용자에게 새롭고 향상된 경험을 제공하는 데 도움이 됩니다. Sushi는 원자적이고 깨끗하며 단순한 디자인 언어에 따라 맞춤형 사용자 인터페이스를 구축하는 데 도움이 될 수 있습니다. Sushi는 자체 디자인 언어를 기반으로 하지만 여러 영역에서 내부적으로 Google의 Material Design 구성 요소를 완전히 수용하고 사용합니다.

제품, 엔지니어링, 마케팅, 브랜딩 등 Zomato 내의 다양한 팀에서 디자인 시스템 및 브랜드 가이드라인의 참고 자료로 활용 및 대표됩니다.

디자인 시스템이란 무엇입니까?
설계 시스템은 명확한 표준에 따라 함께 조합하여 여러 응용 프로그램을 구축할 수 있는 재사용 가능한 구성 요소 모음입니다. 디자인 시스템은 디지털 제품을 구축하는 데 사용하는 자산과 구성 요소의 모음이 아닙니다. Intercom의 제품 디자인 이사인 Emmet Connolly에 따르면, “... 대부분의 디자인 시스템은 사실상 패턴 라이브러리에 불과합니다. 거의 무한한 방식으로 조립할 수 있는 UI 레고 조각의 큰 상자입니다. 모든 조각이 일치할 수 있지만 조립된 결과가 일치한다는 의미는 아닙니다. 귀하의 제품은 단순히 재사용 가능한 UI 요소 더미 그 이상입니다. 구조와 의미가 있습니다. 일반적인 웹 페이지가 아니라 개념 시스템의 구현입니다.”

스시 디자인 시스템

기초
기초는 우리 디자인 시스템의 타이포그래피, 색상 팔레트, 아이콘, 간격, 그림자 및 정보 아키텍처를 정의하는 디지털 브랜드 지침입니다. 스시는 원자 설계 원칙에 따라 원자 ➡️ 분자 ➡️ 유기체로 정렬된 구성 가능한 구성 요소를 사용하여 상향식으로 만들어집니다.

원자적 디자인
우리 시스템에 매핑된 원자 설계(Brad Frost가 설명한 대로).

#아톰
나눌 수 없는 가장 작은 단위는 원자입니다. Android(또는 모든 모바일 UI)에서 텍스트 레이블, 버튼 및 이미지 홀더는 원자입니다.

#분자
여러 원자가 관련되어 형성되지만 사용자에게는 여전히 단일 개체처럼 보이고 동작하는 뷰가 분자입니다. 예를 들어, 입력 필드에는 입력 상자, 오류 필드 및 지우기 버튼이 있지만 함께 하나의 엔터티입니다.

#유기체
복잡하지만 함께 응집력 있는 방식으로 작동하는 재사용 가능한 구성 요소. 여러 원자와 분자로 구성됩니다. 각각의 숫자와 아이콘이 있는 태그로 구성된 등급 표시줄이 그 예입니다. 다른 등급이 선택되면 태그의 색상도 변경됩니다. 각 태그는 개별적으로 다른 장소에서도 사용되지만 평가 막대로서 모두 함께 작동하여 새로운 의미를 만듭니다.

서체
아시다시피 타이포그래피는 문자를 표시할 때 읽기 쉽고 읽기 쉽고 매력적으로 보이도록 활자를 배열하는 기술입니다. 서체의 배열은 서체, 글자크기, 줄길이, 줄간격, 글자간격을 선택하고, 글자쌍 사이의 간격을 조절하는 것이다.

다음 서체 변형을 지원합니다.

엑스트라 라이트
빛
정기적 인
중간
반굵게
용감한
엑스트라볼드

최대 8개의 글꼴 가중치가 있는 모든 글꼴을 사용하고 이러한 별칭에서 할당할 수 있습니다. 데모용 Metropolis, Okra 및 Roboto가 있지만 브랜드에 맞는 글꼴을 사용할 수 있습니다.

색상
Sushi는 팔레트에 미리 정의된 색상 세트도 제공합니다. 매우 독특한 경우에는 자신의 색상을 자유롭게 사용할 수 있지만 그렇지 않은 경우 제품의 모든 구성 요소에 이 팔레트의 색상을 사용하는 것이 좋습니다.

코드 저장소