Mobile UX for Windows Mobile

Download Mobile UX for Windows Mobile

Post on 18-Jan-2015

3.364 views

Category:

Documents

4 download

DESCRIPTION

Mobile UX for Windows Mobile

TRANSCRIPT

  • 1. UX
    (Jinho.Seo@microsoft.com)
    /

    : http://blogs.msdn.com/jinhoseo
    : http://www.winmodev.net
    : @synabreu

2. Agenda
6.5 UX

6.5 DTK
Apps
Fruid
Touch Control
Silvermoon for OPEG GL ES
UX
3. UX ?
UX !
!
4. CES2010 UX
: WMPowerUser
5. ?

/ Phone UI
(/)



6. Design Concept - Interaction
Home
Start
Internet
Explorer
Mobile 6
6
7. Demo
Windows Mobile 6.5
8.
Smart Device project
Platform Builder
C#, VB.NET
C/C++
Hardware
Software
Application
Win32, MFC, ATL
OS
9. 6.5 DTK
, API
Windows Mobile 6 SDK
10.
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 Wrapper
GestureRecognizer
PhysicsEngine
AutoGestureContext
11.
GESTUREINFO
GF_INERTIA
GF_BEGIN

(Gesture IDs)
GF_END
GID_BEGIN= 1
GID_END = 2
GID_PAN = 4
GID_SCROLL = 8
GID_HOLD = 9
GID_SELECT = 10
GID_DOUBLESELECT = 11
GID_LAST = 11
12. Managed Wrapper
GestureRecognizer
http://code.msdn.microsoft.com/gestureswm
PhysicsEngine

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) =>
13. Demo

14. ?
!!
!!


15. Touch UI
Chris Touch UI
for Windows Mobile 6.1/6.5
http://touchui.codeplex.com/
http://blog.wmdev.net/
16. Touch UI(1)
private void MainForm_Load(object sender, EventArgs e)
{
dialogStack = new List();
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 fps
timer.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;
}
17. Touch UI(2) Scroll Up/Down
private 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();
}
}
18. 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;
}
else
e.Graphics.DrawImage(Common.Instance.PaintBitmap, r, r, GraphicsUnit.Pixel);
}
19. Demo

20. (1) Fluid Windows Mobile 6.x Touch Controls
http://fluid.codeplex.com/
http://www.codeproject.com/KB/mobile/MobilePasswordSafe.aspx
21. (2) - iPhone UI
21
http://iphoneui.codeplex.com/
http://www.codeproject.com/KB/mobile/IPhoneUI.aspx
22. (3) - Alpha Mobile Controls
AlphaBlend() - Alpha Blending Alpha Channel
http://blogs.msdn.com/chrislorton/archive/2006/04/07/570649.aspx
http://www.codeproject.com/KB/mobile/Windows_Mobile_UI.aspx
23. (4) - Silvermoon
OpenGL ES 2.0 UX
http://silvermoon.codeplex.com/
24.
UX !
UX !
UX !
!
!