[제로베이스] 5주차 학습일지 3

인터페이스 디자인

1. 레이아웃과 그리드시스템

Screen Size

• 요구하는 해상도에 맞게 아트보드를 작성
• 최신 기종보다 두 단계 정도 낮은 기종을 정의해서 사용

Layout

• 설계, 지면의 배열
• 잡지나 광고, 출판물을 디자인할 때 텍스트나 이미지 등의 요소를 보기 좋게 배열하는 것을 의미

Grid system

• 디자인에서 화면을 구성하는 요소들을 일관된 시스템 속에서 배치하는 것
• 화면을 효과적으로 사용하기 위해 가상의 구역을 나누어 놓는 것
• 안드로이드에서는 8배수를 기준으로 그리드 시스템을 활용
• 4배수, 2배수 기준으로 정의하기도 한다

Columns

• 단의 수를 의미
• 컨텐츠를 포함하는 부분

Gutters

• 컬럼의 간격을 의미
• 컨텐츠의 분리

Margins

• 화면의 왼쪽 및 오른쪽 가장자리 사이의 공간

2. 컬러시스템

Primary color

• 주색

Secondary color

• 보조색
• 보조색은 주색과 조화를 이루는 컬러를 사용해야 한다

Gray Scale

• 정보의 강약을 나타내고, 계층을 구분

3. 아이콘

Iconography

• 대상의 특징을 살려 만드는 기호
• 문자처럼 규칙과 의미가 있다

App Icon

• 모바일 바탕화면에서 앱을 실행시키기 위한 아이콘

System Icon

• 구동된 플랫폼에서 직접 사용하는데 필요한 아이콘

4. 인터렉션

• 유저 인터페이스를 작동시켜 목적을 달성하는 행동 과정

Gestures

• Navigation gestures
  - 사용자가 이용 과정에서 쉽게 이동할 수 있게 도와주는 역할
  • ex) tap, scroll, pan, drag, swipe, pinch
• Action gestures
  - 동작 수행, 완료를 위한 액션을 일으키는 역할
  • ex) tap, long press, swipe,
• Transform gestures
  - 어떤 화면이 변환되는 방식
  • ex) pinch, compound gestures, pick up & move