[새싹X스나이퍼팩토리] 기업연계 실무특화 UX/UI 디자인 마스터 과정 12일차 "앱 UI 설계하기”

 

 

모바일 정보구조 설계의 4가지 방식

 

모바일은 화면이 작은 한계로 인해 다양한 정보구조 방식을 사용한다.
계층구조, 허브앤스포크, 중첩인형, 탭뷰 4가지 방식이 있다.

 

계층 구조

Hierarchy(계층구조)는 정보 규모가 크고 단계적으로 정보를 탐색하는 경험이 많은 서비스에서 사용.
대부분의 웹사이트는 계층구조 방식을 따르며 1depth~4depth 사용하기도 한다.
모바일에서는 depth(계층)가 많을수록 사용자들이 불편하고 어렵게 느껴서 사용하지 않는 것이 좋다.

 

모바일 설계시 Depth

 

모바일 정보구조는 기본적으로 2 Depth로 초과하지 않는 것이 좋다.
안드로이드, iOS 모두 3 Depth로 제한한다. 최근 1 Depth 설계가 유행이다.

 

UI 설계

 

1. 레이아웃: 서비스의 메뉴 계층 구조에 따라 일관된 레이아웃을 설계한다.
내비게이션 UI - 메뉴바, 탭, 검색, 필터, 태그
미디어 - 이미지, 동영상, 배너, 이벤트
콘텐츠 설명 - 화면 설명, 상품 설명
목록 - 상품 목록, 제목 순서
실행 - 버튼, 툴바
안내/피드백 - 화면 안내, 결과 피드백

2. 내비게이션

3. UI 기본 요소

4. UI 복합 구성

5. UI 화면 설계

6. 사용자 이용 흐름 설계

 

인터랙션의 구성요소

 

1. 제스처 (Gesture): 탭, 더블 탭, 롱 탭, 스크롤, 패닝, 스와이프, 핀치 인/아웃

2. 선택과 실행 (Selection/Action): 맥락 도구, 목록 내 활동(더보기/플래그/삭제 기능), 툴 바, 옵션 메뉴, 주활동 버튼, 상태변화 버튼

3. 상태 (States)

4. 상태변화 (Transition)

 

UI 설계 시 지켜야 할 원칙

 

사용자를 생각하게 만들지 않는다.

사용자에게 부득이하게 정보 입력, 동의, 인증 과정을 요청할 때는 최소화 한다.

UI 내에 사용자의 시선을 끌고 주의를 환기시키는 요소를 의도적으로 강조한다.

블록, 구분선 같은 UI 요소를 통해 정보의 구조를 빠르고 쉽게 전달한다.

일관된 레이아웃과 내비게이션으로 사용자에게 명확한 구조를 전달한다.

타깃 유저의 능력을 고려해 폰트의 크기, 정보 디자인, 아이콘 등을 설계한다.

 

 

 

---

본 후기는 [스나이퍼팩토리] 기업연계 실무 특화 UX/UI 디자인 마스터 과정 (B-log) 리뷰로 작성 되었습니다.