• Save
Mobile design pattern
Upcoming SlideShare
Loading in...5
×
 

Mobile design pattern

on

  • 6,386 views

Mobile design pattern

Mobile design pattern

Statistics

Views

Total Views
6,386
Views on SlideShare
5,986
Embed Views
400

Actions

Likes
75
Downloads
0
Comments
0

8 Embeds 400

http://yoda.co.kr 257
http://dhwls12.cafe24.com 88
http://blog.naver.com 37
http://search.daum.net 5
http://100.100.100.16 5
http://redmine.viewreple.com 4
http://devilchen.tistory.com 3
http://www.slideee.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Mobile design pattern Mobile design pattern Presentation Transcript

  • 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)을 불어 넣는다
  • 3This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. 모바일 IA 패턴
  • 4This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. 참고: Designing for mobile by Elaine Information Architecture > 1.1. 기본적인 정보 탐색 패턴 사용자들은 정보를 탐색하는 목적에 따라서 탐색하는 방식도 달라지기 마련이다. IA 설계에 있어서 가장 기본적인 사 항은 컨텐츠/정보의 형태와 구성과 더불어 사용자들의 정보 탐색 패턴을 발견하는 일이다. Source : Louis Rosenfeld
  • 5This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. 참고: Designing for mobile by Elaine 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
  • 6This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. 참고: Designing for mobile by Elaine Information Architecture > 1.2. 모바일 정보 탐색 패턴 모바일은 그 경험의 특성상 복잡한 이동보다는 특정 화면을 중심으로 정보를 찾아들어갔다가 나올 때에는 단순한 행 위 또는 메타포를 반복적으로 선택하는, 간결한 정보 탐색 패턴이 대다수이다 SOURCE : www.lamarca.ca SOURCE : unideal.net
  • 7This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. 참고: Designing for mobile by Elaine Information Architecture > 1.2. 모바일 정보 탐색 패턴 그러나 모바일은 컨텍스트나 기기 자체가 실제 환경에 기반한다는 특징 때문에 다음과 같이 PC에서는 찾아볼 수 없는 복잡한 탐색이 존재하기도 한다. I’m Here 다른 사용자의 공간으로 이동 Rewind Zoom out Forward Zoom in 실제 ↔ 가상 Jumping
  • 8This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. 참고: Designing for mobile by Elaine Information Architecture > 1.3. SNS에서의 정보 탐색 패턴 SNS는 물리적인 컨텐츠보다는 사용자와 그들의 행위, 다른 사용자와의 관계/교류방식, 이를 뒷받침하는 시스템 기능 이 중요하기 때문에 사용자(Self), 행위들(Activities), 관계/교류방식(Community)의 3가지 요소가 가장 기본적이 며, 이들을 둘러 싼 여러가지 패턴들에 의해서 서비스 형상이 결정된다 SOURCE : Social Web Systems Common Model, Alberto San José
  • 9This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. 참고: Designing for mobile by Elaine Information Architecture > 1.4. Hierachy 메인 화면에서 출발하여 각 서브 메인 및 하위 페이지들까지 계층적으로 접근하는 방식. (웹 IA와 유사). 메뉴가 복잡 할 경우에는 사용자들의 탐색 흐름이 끊길 수 있는 위험이 존재
  • 10This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. Information Architecture > 1.5. Hub & Spoke 메인 화면을 중심으로 페이지들이 연결되어 있음. 메뉴가 복잡하지 않아서 사용자들이 쉽게 탐색할 수 있다. 다음에 나오는 Nested doll과 짝을 이루는 경우가 많다. 그러나 메뉴가 복잡할 경우 메인화면의 부담이 지나치게 가중될 수 있다. 그래서 좌/우측에 숨겨진 확장메뉴를 추가로 배치하여 문제점을 보완한다 참고: Designing for mobile by Elaine
  • 11This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. Information Architecture > 1.6. Nested doll 메인 화면에서 순차적으로 정보를 탐색해 들어갔다가 다시 역순으로 바깥으로 나오는 패턴. 순차적인 구조(Linear)로 인해 사용자들이 쉽게 탐색 경로를 예측하고 되돌이킬 수 있다는 장점이 있는 반면 탐색 중간에 다른 경로로 이동할 수 없다는 단점이 있다. 참고: Designing for mobile by Elaine
  • 12This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. Information Architecture > 1.7. Tabbed view 화면내 상시적으로 노출된 Tab 메뉴를 클릭해서 각 정보들을 탐색하는 방식. 이때 Tab 메뉴는 글로벌 네비게이션을 담당하고 해당 메뉴내 탐색은 Hub & Spoke나 Nested doll 패턴을 이용하는 경우가 많다. 앱초창기에 많이 쓰였고 지 금도 여러 앱에서 찾아볼 수 있는 패턴이지만 UI 표현에 제약을 가한다는 단점이 있다 참고: Designing for mobile by Elaine
  • 13This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. Information Architecture > 1.8. Dashboard 도시락(Bento box) 패턴이라고도 하며 메인화면내 모듈 단위의 정보가 여러 개 노출되어 있어서 보다 상세한 정보를 보려고 할 경우 각 상세페이지에 들어가게 되는 패턴이다. Hub & Spoke와 유사하며 테블릿에 많이 활용된다 참고: Designing for mobile by Elaine
  • 14This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. 모바일 IxD 패턴
  • 15This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. Interaction Design > 2.1. Gestures 모바일에서 사용자의 조작에 따른 가장 기본적인 7가지 인터렉션 패턴 참고: Designing for mobile by Elaine Tab Long Tab Double Tab Small Swipe Large Swipe Pich/Spread
  • 16This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. Interaction Design > 2.2. Transitions 탭을 했을 때 나타나는 인터렉션의 변화(Trasitions) 참고: Designing for mobile by Elaine Quick Change Expand Flip Open to Full Screen
  • 17This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. Interaction Design > 2.2. Transitions Swipe을 했을 때 나타나는 인터렉션의 변화(Trasitions) 참고: Designing for mobile by Elaine Horizontal slide along Horizontal slide over
  • 18This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. Interaction Design > 2.2. Transitions 참고: Designing for mobile by Elaine Animated Scrolling Contextual Change
  • 19This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. Interaction Design > 2.3. Call to Actions 참고: Designing for mobile by Elaine
  • 20This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. Interaction Design > 2.4. Contextual Tools 참고: Designing for mobile by Elaine
  • 21This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. Interaction Design > 2.5. Inline Actions
  • 22This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. Interaction Design > 2.6. Multi-state Buttons
  • 23This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. Interaction Design > 2.7. Dialog Invitations
  • 24This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. Interaction Design > 2.8. Tip Invitations
  • 25This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. Interaction Design > 2.9. Tour Invitations
  • 26This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. Interaction Design > 2.10. Transparency Invitations
  • 27This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. Interaction Design > 2.11. Constraints
  • 28This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. Interaction Design > 2.12. Direct Contact
  • 29This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. Interaction Design > 2.11. Ratation 참고: Designing for mobile by Elaine
  • 30This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. Interaction Design > 2.12. Autonomy 참고: Designing for mobile by Elaine
  • 31This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. Interaction Design > 2.13. Feedback 참고: Designing for mobile by Elaine
  • 32This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. 모바일 UI 패턴
  • 33This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. 3. Navigation > 3.1. Springboard 참고: Mobile Design Pattern Gallery(O'REILLY) by Theresa Neil
  • 34This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. 3. Navigation > 3.2. List Menu 참고: Mobile Design Pattern Gallery(O'REILLY) by Theresa Neil
  • 35This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. 3. Navigation > 3.3. tab Menu 참고: Mobile Design Pattern Gallery(O'REILLY) by Theresa Neil
  • 36This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. 3. Navigation > 3.4. Gallery 참고: Mobile Design Pattern Gallery(O'REILLY) by Theresa Neil
  • 37This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. 3. Navigation > 3.5. Dashboard 참고: Mobile Design Pattern Gallery(O'REILLY) by Theresa Neil
  • 38This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. 3. Navigation > 3.6. Metaphor 참고: Mobile Design Pattern Gallery(O'REILLY) by Theresa Neil
  • 39This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. 3. Navigation > 3.7. Mega menu 참고: Mobile Design Pattern Gallery(O'REILLY) by Theresa Neil
  • 40This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. 3. Navigation > 3.8. Page Carousel 참고: Mobile Design Pattern Gallery(O'REILLY) by Theresa Neil
  • 41This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. 3. Navigation > 3.9. Image Carousel 참고: Mobile Design Pattern Gallery(O'REILLY) by Theresa Neil
  • 42This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. 3. Navigation > 3.10. Tool bar
  • 43This is UX Design 2nd edition / lectureⓒ 2014 UX1. All rights reserved. 3. Navigation > 3.11. Option Menu