스타일

Material 3 Expressive

같은 프로젝트 작업실로 스타일 비교.

같은 프로젝트 작업실로 스타일 비교
프로젝트 / 오늘 · 01

공간 만들기

다음 아이디어를 위한 작은 공간.

자료를 모으고 방향을 그린 뒤 문구를 다듬습니다. 세 가지 작은 작업으로 생각이 담긴 작업실을 만듭니다.

작업

시작할 준비가 되었습니다.

본문 안의 가상 데모입니다. 초기화·새로고침으로 처음 상태로 돌아갑니다.

개념

Material 3 Expressive는 색·형태·크기·움직임으로 주의를 이끕니다. 이 예제는 큰 작업 조작부와 다양한 곡률을 사용합니다.

예시

열한 스타일은 개요·작업 3개·진행률·자료 메모 2개가 같은 작업실입니다. 메뉴로 이동하고 완료 체크·상태 필터·메모 펼치기를 사용하세요. 하나를 완료하면 1 / 3과 33%가 표시됩니다. 필터 결과가 없으면 안내가 나옵니다. 초기화·새로고침하면 전체 필터·미완료 3개·0%·닫힌 메모로 돌아갑니다. 완료하면 진행 패널의 형태가 짧게 반응합니다. 모션 감소 설정에서는 움직이지 않습니다.

추천 조건

핵심 동작을 시각적으로 강조할 때 어울립니다. 표현적인 형태에서도 익숙한 라벨과 읽기 순서를 유지해야 합니다.

Google Design

비교 요약
같은 범주의 비교
개념특징장점제약적합한 상황조합 조건
Material 3 Expressive색면·다양한 곡률·큰 조작부·짧은 형태 반응을 사용합니다.크기와 영역 구분으로 주요 동작을 강조합니다.표현적인 형태에서도 익숙한 라벨과 읽기 순서를 유지해야 합니다.핵심 동작을 시각적으로 강조할 때 어울립니다.단색 표면에 명확한 그리드와 모션 감소 지원을 결합합니다.
이어서 살펴보기원본·수정 제안 ↗

이 선택에 관한 이야기

세 언어가 댓글을 공유합니다. 작성하려면 GitHub 로그인이 필요합니다.