Mobile UX for Windows Mobile

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

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

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

CES’2010 에서 본 윈도우 모바일 UX출처: WMPowerUser

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

Design Concept - InteractionHomeStartInternet ExplorerMobile 66

윈도우폰 애플리케이션 개발 방법Smart Device projectPlatform BuilderC#, VB.NETC/C++HardwareSoftwareApplicationWin32, MFC, ATLOS

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

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

터치 제스처 동작원리 GESTUREINFOGF_INERTIAGF_BEGIN종류에 따라(Gesture IDs)GF_ENDGID_BEGIN = 1GID_END = 2GID_PAN = 4GID_SCROLL = 8GID_HOLD = 9GID_SELECT = 10GID_DOUBLESELECT = 11GID_LAST = 11

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

Demo관리형 제스처 샘플

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

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

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

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

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

Demo오픈 소스 프레임워크

오픈소스(1) Fluid – Windows Mobile 6.x Touch Controlshttp://fluid.codeplex.com/http://www.codeproject.com/KB/mobile/MobilePasswordSafe.aspx

오픈소스(2) - iPhone UI21http://iphoneui.codeplex.com/http://www.codeproject.com/KB/mobile/IPhoneUI.aspx

오픈소스(3) - Alpha Mobile ControlsAlphaBlend() - Alpha Blending 과 Alpha Channel 이용http://blogs.msdn.com/chrislorton/archive/2006/04/07/570649.aspxhttp://www.codeproject.com/KB/mobile/Windows_Mobile_UI.aspx

오픈소스(4) - SilvermoonOpenGL ES 2.0을 이용한 UX 프레임워크http://silvermoon.codeplex.com/

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

Mobile UX for Windows Mobile

More Related Content

Similar to Mobile UX for Windows Mobile (20)

More from Seo Jinho (20)

Mobile UX for Windows Mobile