Material 디자인 체계에서 색·형태·크기·움직임으로 주요 행동을 강조합니다.
동네 소풍 페이지에서 주민은 일행의 자리를 확보합니다. 같은 크기의 차분한 버튼을 나열하면 참가 행동이 묻힙니다. 절제된 평면 구분보다 주요 행동과 생기 있는 피드백을 강조하려 합니다.
세 명을 고르고 참가합니다. 큰 곡선 버튼은 취소로 바뀌고 참가 완료와 세 자리를 표시합니다. 인원을 바꾸거나 취소할 수 있습니다. 동작 감소 설정에서는 짧은 형태 반응을 없앱니다.
토요일 · 강변 잔디밭 · 12:00
참가 전
확보한 자리: 0
본문 안의 가상 데모입니다. 초기화·새로고침으로 처음 상태로 돌아갑니다.
Material 3 Expressive는 색·형태·크기·움직임으로 주의를 이끕니다. 창작한 웹 예제이며 네이티브 Material 컴포넌트 라이브러리가 아닙니다. 라벨과 읽기 순서도 유지해야 합니다.
선택해서 읽는 자료 · 개요 읽기 시간과 별도
하나의 행동을 강조하고 제품의 분위기에 맞을 때 선택합니다. 플랫 디자인과 공존할 수 있으며 절제된 화면에는 형태 변화와 동작이 더 적어도 됩니다.
소풍 예제는 초대·인원·참가 상태를 나눕니다. 참가 후 곡선 버튼의 의미가 눈에 보이게 바뀝니다. 꽃은 장식이며 유일한 확인 신호가 아닙니다.
상태 문구와 눌림 의미를 애니메이션과 독립시킵니다. 동작 감소에서는 반응을 없앱니다. 실제 행사는 서버의 잔여 자리 확인이 필요하며 이 예제는 1~6명을 표시할 뿐 예약하지 않습니다.
표현적인 강조에 대한 Google 연구입니다. 이 소풍 데모의 과업 성능 향상을 입증하지는 않습니다.
확인키보드·포커스·리플로·대비 요구사항의 근거이며 시각 스타일만으로 준수를 입증하지는 않습니다.
확인| 개념 | 특징 | 장점 | 제약 | 적합한 상황 | 조합 조건 |
|---|---|---|---|---|---|
| Material 3 Expressive | 표현적인 형태·크기·움직임 | 주요 행동을 강하게 강조 | 강조가 밀집 정보와 경쟁할 수 있음 | 눈에 띄고 친근한 참가 행동 | 명확한 상태와 동작 감소 지원 |
프로젝트를 처음 시작하나요? 설명을 입력해 첫 프롬프트를 준비하세요.
맞춤 프롬프트 만들기 →이미 외부 AI와 대화 중이라면 이 글의 링크와 내 프로젝트에 맞는 이유, 중요하게 보는 장단점을 전달하세요. 합의한 요구사항에 어떻게 적용할지 요청하세요.
이 글 링크: Material 3 Expressive
이 선택에 관한 이야기
세 언어가 댓글을 공유합니다. 작성하려면 GitHub 로그인이 필요합니다.