본문 바로가기

안드로이드

Material Design

Material Design

Material Design이란 플랫 디자인의 장점을 살리면서도 빛에 따른 종이의 그림자 효과를 이용하여 입체감을 살리는 디자인 방식

 

구글에서 제공하는 Material Guide를 사용하면 이미지 파일을 포토샵으로 소스를 만들어 추출 할 필요 없이 안드로이드 디자인 서포트 라이브러리를 연결함으로써 가이드된 UI를 사용 가능


Android에서의 Material Design 제공

  1. 모든 UI 위젯 스타일을 지정하는 머티리얼 디자인 앱 테마
  2. 목록 및 카드와 같은 복잡한 뷰를 위한 위젯
  3. 맞춤 그림자 및 애니메이션을 위한 새로운 API

사용자에게 친숙한 UX 패턴

  1. 플로팅 작업 버튼으로 UI의 기본 동작으로 촉진
  2. 앱 바로 브랜드, 탐색, 검색 및 기타 작업을 표시
  3. 탐색 창을 사용하여 앱 탐색을 표시하고 숨김
  4. 앱 레이아웃 및 탐색에 접기 방식 툴바, 탭, 하단 탐식 메뉴 등의 기타 여러 머티리얼 구성 요소중 하나를 사용

엘리베이션 그림자 및 카드

 

엘리베이션은 흔히 레이아웃에 카드 기반 레이아웃이 포함되어 있을 때 적용

머티리얼 스타일의 카드 안에 중요한 정보를 표시하는 데 도움 됨

CardView 위젯을 사용하여 기본 엘리베이션으로 카드를 생성 가능

 

Android 뷰에는 X, Y 속성 외에 Z 속성 존재

  1. 그림자의 크기 : Z 값이 더 높은 뷰는 더 큰 그림자 투영
  2. 그리기 순서 : Z 값이 더 높은 뷰가 다른 뷰 위에 표시

애니메이션

 

새로운 애니메이션 API를 사용하면 UI 컨트롤의 터치 피드백, 뷰 상태 변경 및 활동 전환을 위한 맞춤 애니메이션을 만들 수 있다

 

  1. 터치 피드백 : 뷰의 터치 이벤트에 응답
  2. 회전 표시 : 뷰를 숨기고 표시
  3. 맞춤 활동 전환 : 활동 간에 전환
  4. 곡선 모션 : 자연스러운 애니메이션
  5. 뷰 상태 변경 : 하나 이상의 뷰 속성 변경 사항을 애니메이션 처리
  6. 뷰 상태 변경 사이에 상태 드로어블에 애니메이션 표시 가능

 


드로어블

  1. 벡터 드로어블 : 선명도의 손식 없이 확장 가능하며 단일 색상 인앱 아이콘에 적합
  2. 드로어블 색조 조정 : 비트맵을 알파 마스크로 정의하고 런타임 시 색상으로 비트맵에 색조 지정
  3. 색상 추출 : 비트맵 이미지에서 주요 색상을 자동으로 추출
반응형

'안드로이드' 카테고리의 다른 글

[안드로이드] 카카오 API 로그인  (0) 2022.02.09