Mobile design pattern

Mobile Design Pattern
모바일 UX 디자인시 알아야 할 패턴들
UX1 | UX Design Consulting Firm
Most Distinctive & Creative UX Design Company
NOTICE: Proprietary and Confidential
This material is proprietary to UX1
It contains trade secret and confidential information which is solely the property of UX1
This material is for client’s internal use only. It shall not be used, reproduced, copied, disclosed, transmitted,
in whole or in part, without the express consent of UX1
ⓒ 2014 UX1. All rights reserved.

2This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved.
Pattern은 Design에
영감(Inspiration)을
불어 넣는다

모바일 IA 패턴

참고: Designing for mobile by Elaine
Information Architecture > 1.1. 기본적인 정보 탐색 패턴
사용자들은 정보를 탐색하는 목적에 따라서 탐색하는 방식도 달라지기 마련이다. IA 설계에 있어서 가장 기본적인 사
항은 컨텐츠/정보의 형태와 구성과 더불어 사용자들의 정보 탐색 패턴을 발견하는 일이다.
Source : Louis Rosenfeld

Information Architecture > 1.1. 기본적인 정보 탐색 패턴
IA GURU인 피터 모빌은 2010년에 출간한 [Search Pattern]을 통해서 다음과 가튼 7가지 기본 정보 탐색 패턴이 있
다고 하였다
SOURCE : Search Patterns.Peter Moville. 2010
We search to find results
We ask to find answers
We use filters so the right stuff finds us
Browsing involves wandering and wayfinding
We flow between modes

Information Architecture > 1.2. 모바일 정보 탐색 패턴
모바일은 그 경험의 특성상 복잡한 이동보다는 특정 화면을 중심으로 정보를 찾아들어갔다가 나올 때에는 단순한 행
위 또는 메타포를 반복적으로 선택하는, 간결한 정보 탐색 패턴이 대다수이다
SOURCE : www.lamarca.ca SOURCE : unideal.net

Information Architecture > 1.2. 모바일 정보 탐색 패턴
그러나 모바일은 컨텍스트나 기기 자체가 실제 환경에 기반한다는 특징 때문에 다음과 같이 PC에서는 찾아볼 수 없는
복잡한 탐색이 존재하기도 한다.
I’m Here
다른 사용자의 공간으로 이동
Rewind
Zoom out
Forward
Zoom in
실제 ↔ 가상
Jumping

Information Architecture > 1.3. SNS에서의 정보 탐색 패턴
SNS는 물리적인 컨텐츠보다는 사용자와 그들의 행위, 다른 사용자와의 관계/교류방식, 이를 뒷받침하는 시스템 기능
이 중요하기 때문에 사용자(Self), 행위들(Activities), 관계/교류방식(Community)의 3가지 요소가 가장 기본적이
며, 이들을 둘러 싼 여러가지 패턴들에 의해서 서비스 형상이 결정된다
SOURCE : Social Web Systems Common Model, Alberto San José

Information Architecture > 1.4. Hierachy
메인 화면에서 출발하여 각 서브 메인 및 하위 페이지들까지 계층적으로 접근하는 방식. (웹 IA와 유사). 메뉴가 복잡
할 경우에는 사용자들의 탐색 흐름이 끊길 수 있는 위험이 존재

Information Architecture > 1.5. Hub & Spoke
메인 화면을 중심으로 페이지들이 연결되어 있음. 메뉴가 복잡하지 않아서 사용자들이 쉽게 탐색할 수 있다. 다음에
나오는 Nested doll과 짝을 이루는 경우가 많다. 그러나 메뉴가 복잡할 경우 메인화면의 부담이 지나치게 가중될 수
있다. 그래서 좌/우측에 숨겨진 확장메뉴를 추가로 배치하여 문제점을 보완한다

Information Architecture > 1.6. Nested doll
메인 화면에서 순차적으로 정보를 탐색해 들어갔다가 다시 역순으로 바깥으로 나오는 패턴. 순차적인 구조(Linear)로
인해 사용자들이 쉽게 탐색 경로를 예측하고 되돌이킬 수 있다는 장점이 있는 반면 탐색 중간에 다른 경로로 이동할
수 없다는 단점이 있다.

Information Architecture > 1.7. Tabbed view
화면내 상시적으로 노출된 Tab 메뉴를 클릭해서 각 정보들을 탐색하는 방식. 이때 Tab 메뉴는 글로벌 네비게이션을
담당하고 해당 메뉴내 탐색은 Hub & Spoke나 Nested doll 패턴을 이용하는 경우가 많다. 앱초창기에 많이 쓰였고 지
금도 여러 앱에서 찾아볼 수 있는 패턴이지만 UI 표현에 제약을 가한다는 단점이 있다

Information Architecture > 1.8. Dashboard
도시락(Bento box) 패턴이라고도 하며 메인화면내 모듈 단위의 정보가 여러 개 노출되어 있어서 보다 상세한 정보를
보려고 할 경우 각 상세페이지에 들어가게 되는 패턴이다. Hub & Spoke와 유사하며 테블릿에 많이 활용된다

모바일 IxD 패턴

Interaction Design > 2.1. Gestures
모바일에서 사용자의 조작에 따른 가장 기본적인 7가지 인터렉션 패턴
Tab Long Tab Double Tab Small Swipe Large Swipe Pich/Spread

Interaction Design > 2.2. Transitions
탭을 했을 때 나타나는 인터렉션의 변화(Trasitions)
Quick Change Expand Flip
Open to Full Screen

Swipe을 했을 때 나타나는 인터렉션의 변화(Trasitions)
Horizontal slide along Horizontal slide over

Animated Scrolling Contextual Change

Interaction Design > 2.3. Call to Actions

Interaction Design > 2.4. Contextual Tools

Interaction Design > 2.5. Inline Actions

Interaction Design > 2.6. Multi-state Buttons

Interaction Design > 2.7. Dialog Invitations

Interaction Design > 2.8. Tip Invitations

Interaction Design > 2.9. Tour Invitations

Interaction Design > 2.10. Transparency Invitations

Interaction Design > 2.11. Constraints

Interaction Design > 2.12. Direct Contact

Interaction Design > 2.11. Ratation

Interaction Design > 2.12. Autonomy

Interaction Design > 2.13. Feedback

모바일 UI 패턴

3. Navigation > 3.1. Springboard
참고: Mobile Design Pattern Gallery(O'REILLY) by Theresa Neil

3. Navigation > 3.2. List Menu

3. Navigation > 3.3. tab Menu

3. Navigation > 3.4. Gallery

3. Navigation > 3.5. Dashboard

3. Navigation > 3.6. Metaphor

3. Navigation > 3.7. Mega menu

3. Navigation > 3.8. Page Carousel

3. Navigation > 3.9. Image Carousel

3. Navigation > 3.10. Tool bar

3. Navigation > 3.11. Option Menu

Mobile design pattern

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (17)

Semelhante a Mobile design pattern

Semelhante a Mobile design pattern (20)

Mais de Rightbrain UX1 Consulting group

Mais de Rightbrain UX1 Consulting group (9)

Mobile design pattern