모바일 웹/앱 UI & UX 설계 이론(2)

3,154
-1

Published on

[ITOnAir] 데브멘토 동영상, 정선경 아주대교육연구소 연구위원 2/2부_성공하는 모바일 서비스를 위한 실전 강연
UX 패턴의 구성요소와 영역모바일 App의 Task & FlowUI Design 구성 요소UI & UX Map본 영상은 데브멘토 ITOnAir (tv.devmento.co.kr) 또는 다음tv팟(tvpot.daum.net/pot/Itonair)을 통해 웹과 모바일로 시청하실 수 있습니다.

0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,154
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
16
Embeds 0
No embeds

No notes for slide

모바일 웹/앱 UI & UX 설계 이론(2)

  1. 1. UX Pattern Design의 정의 “UX Pattern Design” : 사용자의 인식과 행동에 영향을 주는 요소(?)를 파악하고 사용자의 경험에 긍정적인 작용을 할 수 있도록 제반 요소(?)들을 창조하거나 일체화 하는 것 Dr. 도널드 노먼 (Donald A. Norman)  제품의 기능성 + 사용성 + 즐거움(Pleasure) => Value 1
  2. 2. Persona? “페르소나(Persona)” : 사용자들이 어떤 목적, 유형의 이용 형태를 보이는가를 기반으로 사용자의 역할, 사용자의 사용 정보, 목표 사용자 선언 페르소나의 페르소나의 구성요소 페르소나의 목적 설계 기반 End Goals Behavior Knowledge Experience Goals Activity Interests Life Goals Contextual Influence Specific Pain points Stakeholder 페르소나 설계 참여자 Web analyst 2
  3. 3. UX Pattern의 구성 요소 Blank Zone Click Through Title Option Key ? Pattern Layout Button Layer Component 3
  4. 4. UX Pattern의 영역 iPhone4 iPad iPhone3G(S) 해상도 : 960*640 해상도 : 1024*768 해상도 : 480*320 입력해상도 : 1280*720 입력해상도 : 1280*720 입력해상도 : 640*480 출력해상도 : 1024*768 출력해상도 : 1024*768 Size : 3.5 Inch Size : 9.7 Inch Size : 3.5 Inch 4
  5. 5. UX Pattern의 영역 Status Bar 20 pixels Navigation Bar 44 pixels Custom View 367 pixels Tab Bar 49 pixels 320 pixels 20 pixels 32 pixels 44 pixels 192 pixels 32 pixels 5
  6. 6. 모바일 App의 Task & Flow Page Page App 접속  Page 승차권 예매  Layer  Menu 조건 선택 Condition  Path(Arrow) 조건 입력 Decision Point 결과 내 선택  Decision Point 로그인  Condition(조건) 예약하기 예약완료 Layer 6
  7. 7. UI Design 구성 요소 Layout  Fact  구성 요소들에 대한 화면상 배열  Navigator Tools Bar  정보의 양 [기준 Size] : 사이즈와 해상도  Poll  정보의 그룹 : 유사 정보의 근접 배치  정보의 정렬 : DOM tree설계  Search  Login 동적 Contents  Contents  변동 기준의 존재 여부  Promotion  배열하는 변동기준에 의한 자료 분류  File download  임의 기준에 의한 자료 분류  LBS  Footer 정적 Contents  etc  Push형 Contents 7
  8. 8. UI & UX Map 8
  9. 9. Summary. UI&UX map 9

×