Mobile UX for Windows Mobile

오픈소스를 이용한 윈도우 폰 UX애플리케이션 개발,[object Object],서진호 차장 (Jinho.Seo@microsoft.com),[object Object], 모바일/임베디드 디벨로퍼 에반젤리스트,[object Object],한국 마이크로소프트,[object Object],블로그: http://blogs.msdn.com/jinhoseo,[object Object],커뮤니티: http://www.winmodev.net,[object Object],트위터: @synabreu,[object Object]

Agenda,[object Object],윈도우 모바일 6.5 UX 아키텍처,[object Object],개발자들을 위한 요구 사항,[object Object],윈도우 모바일 6.5 DTK에 포함된 터치 및 제스처,[object Object],오픈 소스 프레임워크를 이용한 Apps 개발,[object Object],Fruid,[object Object],Touch Control,[object Object],Silvermoon for OPEG GL ES ,[object Object],윈도우 모바일 UX 애플리케이션 개발 최적화,[object Object]

세계는 지금 모바일 UX 전쟁?,[object Object],모바일 UX의 스마트폰 얼굴이기 때문에!,[object Object],하드웨어보다는 소프트웨어 차별화 시대로!,[object Object]

CES’2010 에서 본 윈도우 모바일 UX,[object Object],출처: WMPowerUser,[object Object]

왜 폰에서 사용자 경험이 중요한가?,[object Object],더 뛰어난 그래픽 사용자 경험,[object Object],직관적인/생산적인 Phone UI,[object Object],더 나은 인터넷 브라우징 (모바일/데스크톱),[object Object],끊김없는 연결성,[object Object],더 나은 멀티미디어 경험,[object Object],오피스 도구와의 통합,[object Object]

Design Concept - Interaction,[object Object],Home,[object Object],Start,[object Object],Internet ,[object Object],Explorer,[object Object],Mobile 6,[object Object],6,[object Object]

Demo,[object Object],Windows Mobile 6.5,[object Object]

윈도우폰 애플리케이션 개발 방법,[object Object],Smart Device project,[object Object],Platform Builder,[object Object],C#, VB.NET,[object Object],C/C++,[object Object],Hardware,[object Object],Software,[object Object],Application,[object Object],Win32, MFC, ATL,[object Object],OS,[object Object]

윈도우 모바일 6.5 DTK,[object Object],에뮬레이터 이미지, 터치 제스처 및 위젯 API,[object Object],반드시 Windows Mobile 6 SDK 필요,[object Object]

터치 제스처 ,[object Object],DTK 에서는 C/C++만, 코드 갤러리에 C#용,[object Object],http://code.msdn.microsoft.com/gestureswm,[object Object],동작원리,[object Object],제스처는 마우스 메시지가 아니다.,[object Object],WM_GESTURE 메시지 (GESTUREINFO 구조체 포함),[object Object],기본 제스처,[object Object],Pan, Scroll (Inertia), Select (Tap), Double-select, Hold,[object Object],컨트롤에서의 터치 제스처 지원,[object Object],ListView및 ListBox (콤보 박스 포함),[object Object],WebView및 TreeView, Tab (왼쪽에서 오른쪽으로 스크롤링),[object Object],Managed Wrapper,[object Object],GestureRecognizer,[object Object],PhysicsEngine,[object Object],AutoGestureContext,[object Object]

터치 제스처 동작원리 ,[object Object],GESTUREINFO,[object Object],GF_INERTIA,[object Object],GF_BEGIN,[object Object],종류에 따라,[object Object],(Gesture IDs),[object Object],GF_END,[object Object],GID_BEGIN = 1,[object Object],GID_END = 2,[object Object],GID_PAN = 4,[object Object],GID_SCROLL = 8,[object Object],GID_HOLD = 9,[object Object],GID_SELECT = 10,[object Object],GID_DOUBLESELECT = 11,[object Object],GID_LAST = 11,[object Object]

Managed Wrapper,[object Object],GestureRecognizer,[object Object],http://code.msdn.microsoft.com/gestureswm,[object Object],PhysicsEngine,[object Object],자연스러운 스크롤링을 할 수 있음,[object Object],스크롤링시 rubber-band 효과 제공,[object Object],Animation point 의 스트림 생성,[object Object],AutoGestureContext,[object Object], 자동적인 제스처 핸들링 및OwnerAnimate이벤트 핸들러 ,[object Object],var g = new GestureRecognizer();,[object Object],g.TargetControl= panel1;,[object Object],g.Select += (sender, GestureEventArgs e) => …,[object Object],g.DoubleSelect += (sender, GestureEventArgs e) => …,[object Object],g.Hold += (sender, GestureEventArgs e) => …,[object Object],g.Pan += (sender, GestureEventArgs e) => …,[object Object],g.Scroll += (sender, GestureScrollEventArgs e) => …,[object Object]

Demo,[object Object],관리형 제스처 샘플,[object Object]

왜 오픈 소스 프레임워크인가?,[object Object],창조적인 아이디어를 빠르게 구현하기 위해!!,[object Object],개발한 소스를 재활용 하기 위해!!,[object Object],멀티 장치 디스플레이에도 동일하게 동작하기 위해,[object Object],글로벌 언어 및 리소스를 편리하게 관리,[object Object]

Touch UI ,[object Object],Chris 가 개발한 Touch UI ,[object Object], for Windows Mobile 6.1/6.5,[object Object],http://touchui.codeplex.com/,[object Object],http://blog.wmdev.net/,[object Object]

Touch UI(1),[object Object],private void MainForm_Load(object sender, EventArgs e),[object Object],{,[object Object],dialogStack = new List<Dialog>();,[object Object],MainDialogmainDialog = new MainDialog(Common.Instance.ScreenFactor, Common.Instance.ClientRectangle);,[object Object],mainDialog.Selected += new EventHandler(dialogSelected);,[object Object],dialogStack.Add(mainDialog);,[object Object], navigate();,[object Object], timer = new Timer();,[object Object],timer.Interval = 80; // 12.5 fps,[object Object],timer.Tick += new EventHandler(timer_Tick);,[object Object],timer.Enabled = true;,[object Object], loaded = true;,[object Object],},[object Object],private void MainForm_Activated(object sender, EventArgs e),[object Object],{,[object Object], if(loaded) timer.Enabled= true;,[object Object],},[object Object],private void MainForm_Deactivate(object sender, EventArgs e),[object Object],{,[object Object], if(loaded) timer.Enabled = false;,[object Object],},[object Object]

Touch UI(2) – Scroll Up/Down,[object Object],private void MainForm_MouseUp(object sender, MouseEventArgs e),[object Object], {,[object Object],dialogStack.Last().MouseUp(new Point(e.X, e.Y));,[object Object], },[object Object],…..,[object Object],private void MainForm_KeyDown(object sender, KeyEventArgs e),[object Object], {,[object Object],dialogStack.Last().KeyDown(e);,[object Object],},[object Object],….,[object Object],private void navigateForward(),[object Object], {,[object Object], if(dialogStack.Last() is MainDialog),[object Object], {,[object Object],MainDialogmainDialog = (MainDialog)dialogStack.Last();,[object Object],DetailDialogdetailDialog = new DetailDialog(Common.Instance.ScreenFactor, Common.Instance.ClientRectangle, mainDialog.SelectedLine + 1);,[object Object],dialogStack.Add(detailDialog);,[object Object], navigate();,[object Object], },[object Object],},[object Object]

Touch UI(3),[object Object],protected override void OnPaint(PaintEventArgs e),[object Object],{,[object Object],base.OnPaint(e);,[object Object], if(!loaded) return;,[object Object],dialogStack.Last().Paint(Common.Instance.PaintGraphics);,[object Object], Rectangle r = Common.Instance.ClientRectangle;,[object Object], if(animationLeft != 0),[object Object], {,[object Object],e.Graphics.DrawImage(Common.Instance.PaintCopyBitmap,,[object Object], new Rectangle(animationLeft - r.Width * animationLeft.CompareTo(0), 0, r.Width, r.Height),,[object Object], r, GraphicsUnit.Pixel);,[object Object],e.Graphics.DrawImage(Common.Instance.PaintBitmap, new Rectangle(animationLeft, 0, r.Width, r.Height), r, GraphicsUnit.Pixel);,[object Object],animationLeft -= animationOffset;,[object Object], if(Math.Abs(animationLeft) < Math.Abs(animationOffset)),[object Object],animationLeft = 0;,[object Object], },[object Object], else,[object Object],e.Graphics.DrawImage(Common.Instance.PaintBitmap, r, r, GraphicsUnit.Pixel);,[object Object],},[object Object]

Demo,[object Object],오픈 소스 프레임워크,[object Object]

오픈소스(1) Fluid – Windows Mobile 6.x Touch Controls,[object Object],http://fluid.codeplex.com/,[object Object],http://www.codeproject.com/KB/mobile/MobilePasswordSafe.aspx,[object Object]

오픈소스(2) - iPhone UI,[object Object],21,[object Object],http://iphoneui.codeplex.com/,[object Object],http://www.codeproject.com/KB/mobile/IPhoneUI.aspx,[object Object]

오픈소스(3) - Alpha Mobile Controls,[object Object],AlphaBlend() - Alpha Blending 과 Alpha Channel 이용,[object Object],http://blogs.msdn.com/chrislorton/archive/2006/04/07/570649.aspx,[object Object],http://www.codeproject.com/KB/mobile/Windows_Mobile_UI.aspx,[object Object]

오픈소스(4) - Silvermoon,[object Object],OpenGL ES 2.0을 이용한 UX 프레임워크,[object Object],http://silvermoon.codeplex.com/,[object Object]

결론,[object Object],윈도우 모바일 UX의 기본적인 디자인 철학과 컨셉트를 이해하라!,[object Object],윈도우 모바일 UX 애플리케이션은 다양한 오픈 소스 프레임워크로 개발 할 수 있다!,[object Object],먼저 윈도우 모바일 UX에 맞게 디자인 설계한 다음 프로토타입을 테스트하라!,[object Object],한 화면에 모든 것을 표현하지 말라!,[object Object],배터리가 없어지거나 전화가 오거나 알람이 울릴 때 등 다양한 이벤트 환경을 고려하여 디자인하라!,[object Object]

Mobile UX for Windows Mobile

Mobile UX for Windows Mobile

Recommended

More Related Content

Similar to Mobile UX for Windows Mobile

Similar to Mobile UX for Windows Mobile(20)

More from Seo Jinho

More from Seo Jinho(20)

Mobile UX for Windows Mobile