Embed Size (px)
DESCRIPTION
연합세미나 발표 자료 입니다
Citation preview
7
박 현 철 CTO ([email protected])Windows Phone MVPBlueFish System
스마트폰 UX 의 혁명 !윈도우 폰 7 앱 개발 -Panorama & Pivot
2
Hello Lunaness~! 박현철
BlueFish System CTO Windows Phone MVP WinMoDev 부시삽 Blog : http://lunaness.tistory.com Twitter : @BF_Lunaness Facebook : http://www.facebook.com/lunaness
Windows Phone Project Petit Diary 1, 2 M-Alarm Etc…
“ 애플 , 구글 , 거기 서 !” 윈도폰 7 반격 개시 < 조선일보 /9 월 10일 >
소셜 기능을 전면에 내세운 폰 , PC 와의 호환이 안정적인 구조 윈도폰 7 에 대한 전망은 엇갈리나 한국 제조업체에는 기회
Adenda Smart Design Pivots & Panoramas
Pivots Panoramas
Review Q&A
Smart Design
Metro
WP7 의 통합된 경험Hub 를 통하여 폰에서의 일상적인 작업을 단순화 한다 !
매력적이고 몰입되는 경험 제공주제별로 앱 , 서비스 , 콘텐츠 및 웹이 함께 표현일상적인 작업 단계의 간소화
WP7 의 통합된 경험Hub 를 통하여 폰에서의 일상적인 작업을 단순화 한다 !
Smart design is your
Information.Competitive power.Money.
Pivots and Panoramas
11
Pivots & Panoramas 윈도우폰 7 어플리케이션 최고의 컨트롤
새로운 윈도우폰 7 의 UX 를 쉽게 적용할 수 있다 UX 가이드라인과 시스템 동작에 가장 잘 어울린다
그래픽 적이다 ( 리스트 방식 , Off-Screen 콘텐트 )
사용자를 위한 정보를 덩어리로 정보를 나눌 수 있다 동작구조가 물리적으로 비슷하다
주기적 , 왼쪽 또는 오른쪽 제스처 , 후방탐색
Pivot
Pivot
Pivots Defined
Application view managerData filtersApp views관련 컨텐츠
화면 크기에 최적화 된 컨텐츠최대 7 개 뷰 사용 가능
15
Using Pivot
동일한 데이터를 여러 뷰에서 보여주는 것이 가장 좋다( Ex : Inbox: read/unread email)관련 데이터의 “스크린”이 좋다(Ex : system 또는 app settings)
간결한 UI 는 사용자를 집중시킨다- 그러나 연관된 옵션은 고정시켜 표시
<controls:Pivot Title="PIVOT">
<controls:PivotItem Header="one"> <TextBlock Text="..."/> </controls:PivotItem>
<controls:PivotItem Header="two"> <ListBox ItemsSource="{Binding}"/> </controls:PivotItem>
</controls:Pivot>
Pivot
Demo
Panorama
Panorama
19
Panoramas Defined 수평형 켄버스로 구성 레이어형 에니메이션 과 UI 컨트롤 제공 Top Layer 의 기본적인 UX 와 작업 제공 최대 4 개의 뷰 사용 가능
20
Using Panoramas
“hub” 에 대한 최고의 경험 제공(Pictures, Music, etc.)
몰입형 UI 는 응용 프로그램 내에서 추가된 컨텐츠로 사용자를 안내하는데 도움을 준다새로운 어플리케이션에 대한 좋은 출발점- Rich 미디어 시나리오에 특화
<controls:Panorama Title="panorama"> <controls:Panorama.Background> <ImageBrush ImageSource="Back.jpg"/> </controls:Panorama.Background>
<controls:PanoramaItem Header="one"> <TextBlock Text="..."/> </controls:PanoramaItem>
<controls:PanoramaItem Header="two" Orientation="Horizontal">
<ItemsControl ItemsSource="{Binding}" ItemsPanel="{StaticResource}"> </ItemsControl> </controls:PanoramaItem></controls:Panorama>
Panorama
Demo
Panorama Design Guide-lines 사용자가 탐색할 수 있도록 유도한다 사용자에게 흥미를 줄 수 있는 콘텐츠
( 나에 대하여 , 사람들에 대하여 , etc.) 물리적인 즐거움을 보여주도록 만들어라 사용자에게 경험을 제공할 수 있도록 보조적인 역할로
사용해라 세세하게 Task 선택에 주의를 기울여라 신선하고 역동적이며 경쟁력있는 컨텐츠 일관성의 균형 , 놀라움
직관성
Comparison
Pivots VS. Panoramas
레이아웃이 단순하기 때문에 수치 아이템 표시에 좋다
프로그래밍을 위한 Rich코드 -Behind 시나리오 선택
LoadingPivotItem 과 Un-loadingPivotItem 이벤트는 콘텐츠 생성을 쉽게 제어
화면 공간을 보다 효율적으로 사용
보다 시각적으로 놀라운 경험을 쉽게 만들 수 있다
DefaultItem 속성은 OS에 어울리는 쉬운 동작을 만들 수 있게 제공된다
어떠한 크기의 배경 이미지라도 자동으로 알맞게 표시된다
수평형 PanoramaItems는 변하기 쉬운 크기의 콘텐츠를 유연하게 표시
Pivot Panorama
26
To Pano or not to Pano…Panorama 가 언제 필요할 지 생각해 보세요 App bar 가 필요하십니까 ?
배경이미지의 전체 표현을 원하십니까 ? 얼마나 다양한 콘텐츠 형식 , 뷰 또는 둘 다 있습니까 ? 얼마나 많이 모든 뷰를 보이실 겁니까 ? 사용자에게 사용되거나 생산성에 대하여
내 App 이 필요합니까 ?
27
절대로 집에 가서 시도 하지 마세요 !
Panorama 안에 Pivot 을 배치하지 마십시오 Pivot 안에 Pivot 을 배치하지 마십시오 Pivot 이나 Panorama 를 만들 때 생성마법사
흐름을 벗어나지 마십시오
28
Review Smart Design 은 반드시 고려해야 한다 윈도우폰 7 의 Metro 스타일은 Smart Design 으로
구성되어 있다 . Metro 스타일을 사용하여 센스있게 만들 수 있다 Pivot 은 동일한 Data 를 분리하여 보여주기에 좋다 “Hub” 에 대한 최고의 경험을 제공할 수 있다 .
Q&A
© 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.
MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
