[새싹X스나이퍼팩토리] 기업연계 실무특화 UX/UI 디자인 마스터 과정 17일차 "모바일 디자인 구조와 패턴”

 

 

 

모바일 기본 구조

 

타이틀 영역은 타이틀, 기능버튼

내비게이션 영역: 탭 같은 역할로 화면전환, 서비스 전체 구조

탭 바: 5개 메뉴를 넘지 않도록, 햄버거 버튼으로 전체보기 제공

드로어 메뉴는 화면을 효율적으로 사용 가능

 

 

모바일 영역 이론

 

스티븐 후버의 모바일 디바이스 파지 방법론

상단 View(주시 영역): 타이틀, 비주얼 요소 배치한다.

하단 Ineraction(활동 영역): 버튼, 탭 등 사용자가 터치하는 기능 요소를 배치한다.

 

 

드로어 메뉴

 

햄버거 메뉴를 누르면 나온다.

사용자가 필요할 때만 메뉴를 열어서 사용한다.

장점: 좁은 모바일 화면에서 효율적으로 사용

 

 

모달

관련 내용을 위해 작은 창을 띄워서 보여주는 것.

모달: 화면이 어두워지면서 임시로 위에 창이 뜬다. 모달에서 작업이 끝나기 전에 다른 작업을 할 수 없다. 오류나 경고, 정보 등 사용자가 꼭 알아야하는 정보에서 사용한다. 부정(왼쪽) / 긍정(오른쪽)

모달리스: 모달과 원래 화면 모두 제어 가능하다. (도움말)

 

바텀 시트

 

텍스트, 이미지, 액션, 또는 컨텐츠를 포함한 컨테이너 영역으로 화면 하단에 고정되어 표시

현재 상태에 대한 정보, 확인 메세지, 사용자가 선택한 기능에 대한 옵션 등을 보여준다.

위로 쓸어올리면 페이지 전체가 보이게 한다.

 

 

스플래쉬

 

앱을 실행하면 처음에 나오는 화면.

앱이 로딩되는 동안 나타내며 대문 역할을 한다.

로고, 핵심가치, 앱의 성격을 나타내는 이미지를 보여준다.

 

 

온보딩

 

처음 앱을 설치했을 때 맞춤 서비스, 핵심 기능, 주요 서비스를 설명하여 사용자가 잘 적응하도록 돕는 역할

ex) VIBE의 온보딩

 

상세화면

 

좌에서 우측으로 위에서 아래로 시선이 이동하므로 시각적 흐름에 맞게 배치해서 불필요한 것은 최소화하는 것이 좋다.

상세페이지 내에서 가장 중요한 장바구니, 공유, 구매하기 버튼은 우측에 배치하는 것이 좋다.

화면을 이탈하게 하는 뒤로가기 버튼은 손가락이 닿기 가장 어려운 좌측 상단에 배치한다.

 

 

장바구니

 

주소, 체크버튼, 상품목록, 삭제버튼, 수량수정, 할인금액, 구매금액, 주문버튼

전체선택과 선택삭제 기능을 제공하는 것이 좋다.

 

 

 

---

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