-
[한번에 끝내는 UI/UX] 안드로이드 디자인 가이드_7강기획 관련/UI_UX 2023. 3. 10. 14:00
목차
01. [안드로이드 가이드 문서 확인] 메테리얼디자인 이해하기
1) 메테리얼 디자인 특징
- 메테리얼 디자인은 메타포(현실에 대한 은유) 현실에 대한 종이, 빛, 그림자들이 인간에게 가장 익숙한 매체로 인식하여 그것으로 디자인을 했다는 의미이다.
- 모션을 굉장히 중요시 여기고 있음2) Sufaces
- 메테리얼 디자인은 현실에 근거한 것이기 때문에 현실세계에서 어색한 것은, 메테리얼 디자인에서도 허용되지 않는다.
왼쪽 : 허용 / 오른쪽 : 비허용 메테리얼 디자인은 물리적 공간이기 때문에 사용자 인터렉션이 박스를 넘을 수 없다. 메테리얼 디자인에서 그림자값은 현실에 근거해야 한다.(두번째의 경우 바깥 그림자는 있으나, 안쪽에 겹쳐지는 부분에 그림자가 부존재) iOS에서는 많이 쓰이지만, 메테리얼에서는 택도 없는 디자인이다. 3) Elevation(고도)
- 페이지들의 높이값
Component elevation values
1. Nav drawer: 16dp
2. App bar: 4dp
3. Card: 1dp to 8dp
4. FAB: 6dp
5. Button: 2dp to 8dp
6. Dialog: 24dp왼 : 다이얼로그는 최상단 값으로 보여줘야 한다. / 오 : 클릭했을 때 그림자값으로 선택되었다는 것을 보여줘야 한다. 고도에 따른 모션은 아래와 같다. (프론트 개발자와 소통할 때, 아래의 모션을 지정하여 알려주면 소통하기 쉽다)
- Changes in shadows : 클릭하였을 때, 그림자값으로 선택되었다는 것을 보여줘야 한다. (상단 이미지 참고)
- Displaying overlap : 뒤의 화면을 덮으면서 보여진다. (링크)
- Pushing : 뒤의 화면을 밀면서 보여진다. (링크)
- Scaling : 화면이 커지면서 보여진다. (링크)
- Parallax : 스크롤을 올릴때 뒤에 있는 이미지가 살짝 같이 올라간다. (링크)
- Combining motion techniques : 텍스트가 움직일 때 뒤에 있는 이미지가 같이 끌려간다. (링크)
4) Light and shadow (빛과 그림자)
- key light : 밝기의 방향성
- ambient light : 전체적인 밝기 조정(명도)
- key and ambient light : 키 라이트와 엠비언트 라이트를 혼합하여 사용
- dark surface : 어두운 표면에서 사용
key light와 ambient ligth 를 혼합해서 써라 위와 같이 고도값이 액션 시 고도값이 느껴지게 디자인 되야한다. 02. 레이아웃
1) 반응형 레이아웃
- 보통은 가장 작은 사이즈는 360으로 한다.
Screen size (가로사이즈) Margin Body Layout columns Extra-small (phone) 0-599dp 16dp Scaling 4 Small (tablet) 600-904 32dp Scaling 8 905-1239 Scaling 840dp 12 Medium (laptop) 1240-1439 200dp Scaling 12 Large (desktop) 1440+ Scaling 1040 12 03. 네비게이션
1) 네비게이션의 방향성
- 측면 탐색은 동일한 계층 수준에서 화면 사이를 이동하는 것을 말합니다. 앱의 기본 탐색 구성 요소는 계층 구조의 최상위 수준에 있는 모든 대상에 대한 액세스를 제공해야 합니다.
- 전방 탐색은 연속적인 계층 수준의 화면 간 이동, 흐름의 단계 또는 앱 간 이동을 의미합니다. 전방 탐색은 컨테이너(예: 카드, 목록 또는 이미지), 단추, 링크에 또는 검색을 사용하여 탐색 동작을 포함합니다.
- 역방향 탐색은 시간순(한 앱 내에서 또는 여러 앱 간에) 또는 계층적으로(앱 내에서) 화면을 통해 뒤로 이동하는 것을 말합니다. 플랫폼 규칙은 앱 내에서 역방향 탐색의 정확한 동작을 결정합니다.
2) 모션
- 부모 자식 관계
- 형제 관계
- 최상위 전환
3) 검색
- 항상 검색창이 떠있는 상태
- 아이콘으로 제공하고 있다가 클릭했을 때 제공되는 상태
04. interaction [ 중요한 부분이므로 링크]
설명은 자체적으로 해석한 것이므로, 위 링크 들어가서 자세한 액션을 보면 됩니다.
1)Navigational gestures
- Tap
- Scroll and pan : 원하는 곳으로 이동
- Drag : 클릭한 채로 위 아래
- Swipe : 스치듯이 옆으로
- Pinch : 두손가락으로 이동
2)Action gestures
- Tap
- Long press : 꾹 눌러서, 선택
- Swipe : 스치듯이 옆으로
3)Transform gestures
- Double tap : 더블 클릭하여 확대
- Pinch : 두손가락으로 포지션 이동 및 확대
- Compound gestures : 두손가락으로 확대
- Pick up and move : 선택 및 드래그 하여 원하는 부분으로 이동
05. communication
1) alert dialog
2) Acknowledgement (통보)
3) Data visualization (데이터 시각화)
차트 쪽은 chartjs.org 에서 라이브러리도 제공하고 있음. 디자인 시 자체제작을 하는지 라이브러리를 쓰는지에 따라 디자인이 달라질 수 있다.
- 기본
- 데이터 비교
- 랭킹 (등등등..)
4) Lauch screen(스플래쉬 화면)
시작 화면에는 두 가지 유형이 있습니다.
- UI 실행 화면은 앱의 실제 UI에 대한 비대화형 미리보기를 표시합니다. 이 실행 화면은 앱 실행과 앱 내 활동 전환 모두에 적합합니다.
- 브랜드 런치 스크린은 일시적인 브랜드 노출을 제공합니다.
5) Onboarding
6) Offline states
출처 : 패스트 캠퍼스 "한번에 끝내는 UX/UI 디자인 초격차 패키지 Online" 강의 7강
'기획 관련 > UI_UX' 카테고리의 다른 글
[한번에 끝내는 UI/UX] 브랜딩 UX 디자인 시스템 구축_10강 (0) 2023.04.07 [한번에 끝내는 UI/UX] UX/UI 디자인을 위한 심리학 법칙_8강 (0) 2023.04.05 [한번에 끝내는 UI/UX] 모바일 UX/iOS 가이드_5강 (0) 2023.02.27 [한번에 끝내는 UI/UX] UX/UI 디자인 노하우_4강 (0) 2023.02.23 [한번에 끝내는 UI/UX] UX 유저리서치_2강(이해관계자) (0) 2023.02.17