Material Design(1)

Material Design 이란?

• 구글의 통합 디자인 가이드
• 사용자들에게 직관적인 디자인을 보여주면서 편의성을 높인다

Material Design의 효과는?

• Material Design은 디자인 권장사항, 일반규칙, 시각적 요소가 포함되어 있어서 어느 기기에서나 친근한 분위기를 조성할 수 있는 생생한 앱을 구축할 수 있다
• 이를 사용하면 사용자의 눈을 사로잡는 앱을 만드는 동시에 사용성을 향상하고 사용자 참여도와 유지율을 개선할 수 있다

Material Design Goals

• Create
  • 우수한 디자인의 고전적 원리를 종합한 시각 언어를 만든다
• Unify
  • 플랫폼, 장치 및 입력 방법 간 사용자 환경을 통합하는 단일 기반 시스템을 개발한다
• Customize
  • Material의 시각적 언어를 확장하고, 브랜드 표현을 위한 유연한 기반을 제공한다

? ? 뭔말이람 ? ?

Material Design Principles

• Material is the metaphor
  • Material Design은 빛과 그림자를 반사하는 방법을 포함한다
  • 몬말이냐?
  • Material 환경은 추상화된 공간을 유지하면서 표면과 입면의 두 가지 속성으로 작업을 수행하기 때문에 우리가 살고있는 3차원 환경을 모델링하는데 큰 도움이 된다
• Bold, graphic, intentional
  • Material Design은 타이포그래피, 그리드, 공간, 스케일, 색상 및 이미지와 같은 인쇄디자인 방법에 따라 안내되어 사용자를 몰입시키는 의미나 포커스를 만든다
• Motion provides meaning
  • 동작은 주의력을 집중시키고, 미묘한 피드백과 일관된 전환을 통해 연속성을 유지한다
• Flexible foundation(유연한 기초?)
  • Material system은 컴포넌트, 플러그인, 디자인 요소를 매끄럽게 구현할 수 있는 맞춤형 코드베이스와 통합되어 있으며 브랜드 표현을 가능하게 하기 위해 설계되었다
• Cross-platform
  • Material Design은 안드로이드, ios 및 웹에서 공유된 구성요소를 사용하여 플랫폼간에 동일한 UI를 유지한다

Material Design Guidlines

• Material Theming

  • Material Tenming은 제품 브랜드를 더 잘 반영하기 위해 Material Design을 체계적으로 맞춤화할 수 있는 기능이다
  • 세가지의 주요 작업은 테마 커스터마이징, 디자인 목업에 적용시키기, 코드에 사용하기

• 테마에 구현하기

  • Color

    • color system은 구성요소, 텍스트, 아이콘 및 화면에 적용할 수 있는 12가지 색상 범주를 지원한다

    

    • 이러한 색상 선택은 Material Palettes’ 에서 선택가능하다
    • on colors 는 텍스트나 아이콘과 같은 다른 화면 요소가 표면 앞에 나타날 때 마다 뒤에 있는 요소에 대해 명확하고 읽기 쉽게 나타나도록 설계된 색이다

  • Typogaphy

    • 화면에 나타나는 다양한 텍스트 스타일과 크기, 13개의 카테고리를 지원한다

    1
    <style name="TextAppearance.MaterialComponents.Headline1" parent="TextAppearance.AppCompat.Display4"></style>
    

  • Shape

    • 두 가지 유형의 shape이 있다

    • Rounded shape

      • 모서리를 둥글게

        

    • Cut shape

      • 삼각형 모양으로 잘라준다

        

    • 카테고리 값을 변경하면 다른 모양을 사용할 수 있다

  • Icon

    • material.io 에서 다운받거나 내장 vector assets에서 사용할 수 있다
    • 시각적 일관성을 유지하기 위해 각 아이콘 세트를 앱 전체에서 일관되게 사용해야 한다

    

Material Design Usability(사용성)

• Accessibility

  • 접근성은 다양한 능력을 가진 사용자가 UI를 탐색, 이해 및 사용할 수 있도록 한다

  • 접근성 이해

    • 앱의 접근성을 개선하면 시야, 실명, 장애 를 포함한 모든 사용자의 사용성을 향상시킬 수 있다
    • 사용자가 작업에 대한 호출을 구분해 명확한 레이아웃을 설계하여 탐색할 수 있도록 지원한다
    • 터치, 키보드 및 마우스 입력 방법을 지원하는 것처럼 플랫폼별 지원할 수 있는 기술

  • 계층구조

    • 네이게이션이 쉬울 때, 사용자는 앱의 어디에 있는지 무엇이 중요한지 이해할 수 있다
    • 시각적 계층이 중요한 이유는 사용자가 개발자가 의도한 순서대로 내용을 읽을 수 있도록 올바른 순서로 작성해야 한다

    

    • 각 1,2,3,4 단계로 읽어서 시각적 계층을 보여준다

    

    • 기본적으로 시스템(screen readers)이 탑-다운 방식으로 읽기 때문에 주의가 필요하다

  • Focus order

    • 시각적 레이아웃의 순서를 따르는 focus는 화면 상단에서 하단으로 흐르는데, 가장 중요한 항목에서 가장 덜 중요한 항목으로 이동할 수 있다
    • focus 포인트와, 움직임을 결정하는데 도움이 되도록 요소들이 포커스를 받는 순서, 그룹화 하는 방법, 포커스의 요소가 사라지면 포커스가 움직이는 위치등을 고려해야 한다

    

    • 1 ~ 8 순서로 포커스가 움직인다

• Color and contrast(색상과 대비)

  • 사용자가 앱의 내용을 보고 해석하고 올바른 요소와 상호작용하여 앱을 이해하는데 도움을 준다

  • 색상 대비는 사용자가 다양한 텍스트와 비 텍스트 요소를 구분하는 데 중요하다. 대조가 높으면 이미지를 더 쉽게 볼 수 있다

    

    • 색상의 대비가 잘 된 예

    

    • 색상의 대비가 잘못된 예

Android fingerPrint

• 지문은 장치의 잠금 해제, 앱 로그인 및 앱 내 구매 인증에 사용될 수 있다

• Icon

  • 화면에 표시되면 지문 아이콘은 사용자가 화면 자체를 터치하여(표시된 위치에서) 지문을 감지할 수 있음을 나타낸다.

  • 지문 아이콘은 64dp 원 안에 표준 시스템 아이콘 크기(36dp)로 표시해야 한다.

    

Android Permission

• 허가요청은 간단하고 명료하며 이해할 수 있어야 한다

• 권한은 9개의 그룹으로 나누어져 사용자가 하나의 동작에 포함된 모든 권한을 그룹으로 묶음으로써 부여할 수 있다.

  예를 들어, 사용자에게 연락처를 보고 편집하고 추가할 수 있는 권한을 제공하려면, 각각을 개별적으로 요청하는 것보다 이러한 권한을 단일 권한 그룹(연락처라고 함)으로 그룹화하는 것이 더 효율적이다.

  

• 권한 전략은 요청한 권한 유형의 명확성과 중요성에 따라 다르다

  • 각 전략은 사용자에게 권한을 도입하는 다른 방법을 제공한다
  • 중요한 권한 은 미리 요청해야 한다
  • 사용 시 앱 내에서 보조 권한 을 요청할 수 있다

  • 명확하지 않은 권한은 사전 또는 앱 내에서 권한에 관련된 교육을 제공해야 한다

    

• 또한 권한이 거부 될 때마다 피드백을 제공해야 한다

  • 권한을 거부하면 기능이 의도 한대로 작동하지 않을 수 있으므로 권한이 거부 될 때마다 사용자에게 설명해야 한다

Android Settings

• 설정은 사용자가 앱의 동작 방식에 대한 기본 설정을 표시하도록 한다

• 위치

  • 모든 앱 설정은 ‘setting’ 라벨을 통해 접근할 수 있어야 한다

• 설정은 잘 구성되고 예측 가능해야하며 관리 가능한 많은 옵션이 있어야 한다

• 그룹화

  • 가장 중요하거나 자주 사용하는 설정을 미리 표시

    

  • 구분선을 사용하여 여런 관련 설정을 그룹화 한다
  • 섹션 제목이 포함될 수 있다

• 작문 스타일

  • 직접적이고 이해할 수 있어야 한다

    

Android Notifications

• 앱을 사용하지 않을 때 짧고 시기 적절하게 관련 정보를 제공한다

• 다른 사용자와의 커뮤니케이션이나 유익한 작업 알림이 효과적인 알림이다

• 알림이 도착하면 알림창에 추가된다

  • 상태 표시 줄에 아이콘으로 표시
  • 소리 나 진동
  • 현재 화면을 들여다보고 사용자의 관심을 끌기

• Android의 알림 창에는 일반적으로 다음과 같은 조정이 적용되어 알림이 역 시간순으로 표시된다.

  • 앱의 공지 우선 순위 또는 중요도
  • 알림이 최근에 사용자에게 소리 또는 진동을 경고했는지 여부
  • 알림에 첨부 된 모든 사람 및 별표 표시 여부
  • 알림이 진행중인 전화 통화 또는 음악 재생과 같은 중요한 진행중인 활동을 나타내는 지 여부

• 콘텐츠 제목은 다음과 같아야한다.

  • 30 자 미만이어야한다
  • 가장 중요한 정보를 포함
  • 숫자 나 짧은 텍스트 문자열을 포함하거나 텍스트가 앞에 오지 않는 한 변수를 피해야 한다

  • 헤더에 이미 표시된 앱 이름을 제외한다

    

참고사이트

• Material Design

• Previous
  [Android] Android:Onclick을 구현하는 방법
• Next
  [Android] Material Design(2)