구글의 Material design뿐만 아니라 다른 가이드도 있길래 정리할 목적이다.

기본 가이드 요약

Modal window는 상단 우측에 X 버튼 노출하지 않는다.

우측 상단보단 하단이 사용성이 더 좋다.

풀프레임 dialog에 X 버튼은 왼쪽 상단을 권장

풀프레임 dialog는 입력을 요청할 경우 사용한다.
우측에는 확인이나 기타 버튼이 들어가는 것을 기본으로 한다.
사용자 인터페이스 일관성을 위해 네비게이션 관련 버튼은 동일 위치에 두는 것을 권장

긍정적인 액션 버튼은 오른쪽에 배치

dialog 또는 경고 메세지창에서 긍정적인 액션은 오른쪽에 배치하는 것이 원칙

입력을 완료하지 않은 상태에서 완료버튼은 비활성화를 권장

오류방지를 위해서 비활성화를 권장한다. 오류 메세지는 사용자 경험을 해치는 주범이다.

입력에 맞는 키보드 제공

이는 직접 경험을 해보았기에 굉장히 불편하다는 기억이 있다. 이메일 작성이면 이메일에 맞는 번호입력만 있다면 넘버패드를 제공받는게 확실히 편하다는 기억이 있다.

검색 필드 우측에 검색 버튼은 추천하지 않는다.

검색어 입력후 키보드의 검색(완료)버튼을 사용하는 것이 사용성이 좋다.

스크롤을 고려해서 컨텐츠의 그리드를 화면 하단에 정확하게 정렬하지 않는다.

스크롤을 하면 더 많은 컨첸츠가 있다는 것을 예상할 수 있는 시각적인 단서를 제공해야 된다.

탭은 중첩되지 않아야한다.

탭은 1행만, 최대 5개로 하고 안된다면 좌우 스크롤을 권장

버튼 스타일은 중요도에 맞게 사용

다른 기능의 버튼을 같은 스타일로 사용하지 마라

버튼 스타일을 다른 요소에 사용하지 마라

CTA(Call to Action)는 사용자에게 어떤 행위를 권하거나 유도하는 도구 또는 기법이다.
주문서 화면에서 결제하기는 CTA버튼이다. 화면에서 가장 눈에 띄어야하는 요소 중 하나이다. 이 버튼은 화면에서 시각적으로 차별화해야한다.

테두리가 있거나 면으로 된 버튼보다는 테두리가 없는 텍스트 버튼을 기본으로 사용

버튼 레이블을 의미 있는 단어로 지정하고 메인 컬러나 시스템 컬러를 사용해서 해당 요소가 이넡렉션 가능하다는 것을 알린다.

시각적 노이즈는 최소화

모든 시각적인 요소는 목적과 의미가 있어야 한다.
모바일의 사용환경을 고려한다면 충분한 여백이 있어야한다.
컨텐츠가 많다면 계층구조를 명확히 하고 연관 정보는 그룹으로 묶어 화면의 복잡함을 줄인다.

네비게이션 바에서 아이콘과 텍스트를 같이 쓰지 마라

햄버거 아이콘 아래 menu 텍스트 레이블은 사용을 권장하지 않는다.

키보드를 통해 많은 입력하는 dialog는 완료 버튼은 상단 우측에 권장

많은 입력이 필요한 풀프레임 dialog에서 키보드가 노출되면 하단의 완료버튼은 키보드에 가려진다.

회원가입 또는 로그인 시 비밀번호는 볼 수 있거나 가릴 수 있는 옵션을 제공해라

입력한 비밀번호는 기본적으로 (••••••) 형태로 가려져 있어야 한다. 모바일에서는 작은 키보드로 인해 오타 발생이 빈번하고 사용자가 입력한 비밀번호를 볼 수 있는 옵션을 토글 형태로 제공한다면 빠르게 수정이 가능하다.

사용자가 입력하는 내용이 형식에 맞는다면 실시간 피드백을 해라

사용자가 입력하는 데이터가 형식에 맞는다면 실시간 확인을 통해서 적절한 피드백을 해야한다. 이는 사용자의 입력 오류를 줄여준다.

텍스트 필드에 입력한 텍스트는 모두 지울 수 있는 기능이 필요하다.

UI 구조 상 버튼 형식으로 제공하기 어렵다면 카카오톡처럼 흔들면 모두 삭제가 되게끔 한다.

예, 아니오 처럼 두 개의 옵션만 있는 경우 하나의 체크박스 또는 토글 스위치를 사용

이용약관 동의할 때 하나의 체크박스만 사용하는 것이 더 사용성이 좋다.

키보드에 중요한 액션 버튼이 가려지면 안된다.

로그인 버튼처럼 키보드가 있는 상태에서 완료가 가능해야 한다.

팝업은 권장하지 않는다만 꼭 필요하다면 풀프레임 팝업을 고려해라

Modal 팝업은 거부감을 준다. 꼭 필요하다면 풀 프레임 팝업을 고려해라

좌우 슬라이드되는 컨첸츠는 가로 그리드에 딱 맞출 필요는 없다.

모바일의 한정된 화면 크기에서 콘텐츠를 부각할 방안을 고민해야 한다.

메인 페이지의 슬라이더 이미지는 3~5개가 적당하다.

사용자는 자주 슬라이더를 둘러보진 않는다. 3개 이상의 프로모션은 노출이 적고 효과도 적다.

선택 옵션이 5개 이하라면 드롭다운보단 옵션을 노출하는 것이 좋다.

드롭다운은 옵션의 개수가 많다면 화면의 공간을 줄여주는 좋은 요소이다. 일반적으로 7개 이상이면 드롭다운을 사용하는 것을 권장한다.

탭 바의 옵션은 최대 5개로 제한

안드로이드에서는 Bottom Navigation의 항목은 최대 5개로 제한

삭제와 같은 되둘릴 수 없는 액션의 경우 다시 한번 확인 요청을 한다.

사용자가 실수로 삭제한 경우 되돌리기는 매우 어렵다. 삭제 혹은 입력 중 취소를 하면 확인 요청을 해야한다.

리스트에서 선택 또는 실행 버튼은 불필요하다.

리스트의 항목 하나를 터치한 경우 주요 액션이 실행된다. 리스트 내에 주 액션 외 부수적인 액션은 오른쪽에 배치한다.

주 액션과 되돌릴 수 없는 액션은 같은 위치에 배치하지 않는다.

장바구니에서 주문 버튼과 삭제버튼은 다른 위치에 배치해야한다.

본문의 행간은 150% 이상이여야 읽기 편하다.

모바일은 가독성이 떨어지는 환경이다. 글줄의 간격은 더 넓어야 한다.

네비게이션 바에 너무 많은 컨트롤을 추가하지 마라

일반적으로 컨텐츠 페이지와 상세정보 화면에서 네비게이션 바에는 현재 화면 타이틀, 뒤로 가기, 화면 컨텐츠를 관리하는 컨트롤 외에 추가적인 요소는 넣지 않는 것을 권장

탑 버튼을 사용하지 않아도 된다.

사용해야한다면 아래로 스크롤할 경우 노출하지 않고 스크롤이 멈추거나 위로 스크롤하면 노툴하게끔 인터렉션을 고민해라

중앙 정렬 하지마

Material design

안드로이드 디자인에 있어 디자인 가이드라고 이해를 하고있다. 여러 컴포넌트, 테마, 색상등에 대한 여러 가이드와 사용법이 잘 정리되어있다.
Material Design3
Material Design