MBL302MBL302设计设计 Windows MobileWindows Mobile 应应用程序的用户界面用程序的用户界面

张欣张欣Team LeadTeam LeadUS-MDD-TestUS-MDD-Test微软有限公司微软有限公司

议程议程

屏幕的方位性屏幕的方位性分辨率分辨率界面布局界面布局软键和菜单软键和菜单输入输入

导语：导语： MobileMobile 设备的人机界面的设备的人机界面的发展发展

LEDLED

单色屏幕单色屏幕灰度屏幕灰度屏幕彩色屏幕彩色屏幕手写手写。。。。。。。。。。。。

Windows Mobile UIWindows Mobile UI 设计设计常规的概念常规的概念

常见的一些概念的转换常见的一些概念的转换鼠标鼠标 ---- 〉〉触笔触笔键盘键盘 ---- 〉〉硬件按钮硬件按钮

MobileMobile ？ ？ MobilityMobility ？？用户输入用户输入界面保持简洁界面保持简洁

Windows Mobile UIWindows Mobile UI 设计设计设计原则设计原则

简单易操作简单易操作记忆负担小记忆负担小符合用户认知习惯符合用户认知习惯

屏幕的方位性屏幕的方位性What is itWhat is it ？？

PortraitPortraitLandscapeLandscape SquareSquare

屏幕的方位性屏幕的方位性考虑如下问题考虑如下问题

用户会在运行时旋转屏幕用户会在运行时旋转屏幕三种主要的策略三种主要的策略

改变内容的大小改变内容的大小动态的对内容进行重新布局动态的对内容进行重新布局改变内容改变内容

保持用户体验的一致性保持用户体验的一致性

屏幕的方位性屏幕的方位性程序主界面程序主界面

策略策略 1: 1: 改变内容的大小改变内容的大小

屏幕的方位性屏幕的方位性程序主界面程序主界面

策略策略 2: 2: 动态的对内容进行重新布局动态的对内容进行重新布局

屏幕的方位性屏幕的方位性程序主界面程序主界面

策略策略 3: 3: 改变内容改变内容

屏幕的方位性屏幕的方位性对话框对话框

设计成正方形的区域设计成正方形的区域动态的对内容重新布局动态的对内容重新布局

屏幕的方位性屏幕的方位性对话框对话框

策略策略 1: 1: 设计成正方形的区域设计成正方形的区域

屏幕的方位性屏幕的方位性对话框对话框

策略策略 2: 2: 动态的对内容重新布局动态的对内容重新布局

屏幕的方位性屏幕的方位性托管代码中如何处理托管代码中如何处理

使用控件的使用控件的 AnchorAnchor 属性属性在运行时对内容重新布局在运行时对内容重新布局

Form.OnResizeForm.OnResize 事件事件捕获屏幕的旋转事件捕获屏幕的旋转事件

Microsoft.WindowsMobile.Status.SystMicrosoft.WindowsMobile.Status.SystemStateemState

处理屏幕的旋转处理屏幕的旋转

分辨率分辨率What is it?What is it?

96 DPI96 DPI 131 DPI131 DPI

分辨率分辨率考虑如下问题考虑如下问题

绝大部分的设备的屏幕的物理大小是一样的绝大部分的设备的屏幕的物理大小是一样的分辨率越高，则每个象素越小分辨率越高，则每个象素越小

字体应该比较大而且可读性要好字体应该比较大而且可读性要好每一个点击区域应该容易被点击每一个点击区域应该容易被点击

不要过于靠近屏幕边沿和角落不要过于靠近屏幕边沿和角落触笔触笔 :5.04mm(21:5.04mm(21 像素像素 )) ；手；手指指 :9.12mm(38:9.12mm(38 像素像素 ))

分辨率分辨率位图和图标位图和图标

位图不管是放大还是缩小，效果都会失真位图不管是放大还是缩小，效果都会失真为你所支持的分辨率分别处理位图和图标为你所支持的分辨率分别处理位图和图标

分辨率分辨率分辨率的支持以及图标的大小分辨率的支持以及图标的大小

Pocket Pocket PCPC

SmartphoSmartphonene 图标图标

96 DPI96 DPI 240x320240x320 176x220176x220

大：大：32x3232x32

小：小：16x1616x16

131 131 DPIDPI 240x320240x320

大：大：44x4444x44

小：小：22x2222x22

192 192 DPIDPI 480x640480x640

大：大：64x6464x64

小：小：32x3232x32

界面布局界面布局设计原则设计原则

避免不相关的避免不相关的 // 冗余的信息冗余的信息合理组织信息的展现顺序合理组织信息的展现顺序提供易见且易理解的提示信息提供易见且易理解的提示信息保持界面布局的一致性保持界面布局的一致性提供一定的快捷操作提供一定的快捷操作提供友好的错误提示信息提供友好的错误提示信息

界面布局界面布局三种主要视图三种主要视图

列表视图列表视图信息视图信息视图编辑视图编辑视图

软键和菜单软键和菜单What is it?What is it?

SmartphoneSmartphone Pocket PCPocket PC

软键和菜单软键和菜单软键软键

以前只是在以前只是在 SmartphoneSmartphone 上有上有在在 Pocket PCPocket PC 上是一个新的功能上是一个新的功能方便了单手操作方便了单手操作SmartphoneSmartphone 和和 Pocket PCPocket PC 的界面更的界面更加一致加一致

软键和菜单软键和菜单软键设计原则软键设计原则

常用的且无损害性的命令放在常用的且无损害性的命令放在 SK1SK1 上上SK2SK2 可以是一个命令或者是个菜单可以是一个命令或者是个菜单软键上的命令提示字符要简短，限制在一软键上的命令提示字符要简短，限制在一个词个词让菜单尽可能的小让菜单尽可能的小

SK1SK1 的命令不要在的命令不要在 SK2SK2 的子菜单中重复的子菜单中重复尽可能的不要使用子菜单尽可能的不要使用子菜单

将相似的命令进行分组将相似的命令进行分组

软键和菜单软键和菜单菜单设计原则菜单设计原则

让菜单尽可能的小让菜单尽可能的小SK1SK1 的命令不要在的命令不要在 SK2SK2 的子菜单中重复的子菜单中重复尽可能的不要使用子菜单尽可能的不要使用子菜单

将相似的命令进行分组将相似的命令进行分组适当的禁用与移除菜单项适当的禁用与移除菜单项不同界面中保持一致的菜单顺序不同界面中保持一致的菜单顺序为为 SmartphoneSmartphone 的菜单助记键调整菜单的菜单助记键调整菜单顺序顺序

软键和菜单软键和菜单菜单的顺序菜单的顺序

SK1SK1 ：最有可能的无危害的操作：最有可能的无危害的操作SK2SK2次要操作命令次要操作命令编辑类命令编辑类命令视图类命令视图类命令其他支持性命令其他支持性命令选项类命令选项类命令

File ExplorerFile Explorer 的菜单的演的菜单的演变变

软键和菜单软键和菜单菜单的变化菜单的变化

TodayToday 屏幕上没有了“新建”菜单命令屏幕上没有了“新建”菜单命令菜单栏上没有图标菜单栏上没有图标更加容易访问更加容易访问

软键和菜单软键和菜单在在 .NET CF.NET CF 中访问中访问

System.Windows.Forms.MainMeSystem.Windows.Forms.MainMenunu

MenuItem.Click event handlerMenuItem.Click event handler

输入输入考虑如下问题考虑如下问题 (( 一一 ))

尽量单击触发而不要使用双击尽量单击触发而不要使用双击尽可能的减少用户的点击的次数尽可能的减少用户的点击的次数使用命令加速键使用命令加速键支持常用的快捷键支持常用的快捷键剪切、复制、粘贴剪切、复制、粘贴选择全部选择全部粗体、斜体、下划线粗体、斜体、下划线

输入输入考虑如下问题考虑如下问题 (( 二二 ))

尽量支持单手操作尽量支持单手操作使用键盘时使用键盘时

SoftkeysSoftkeys

编辑类控件编辑类控件硬件按钮硬件按钮

使用触笔时使用触笔时按钮按钮超链接超链接上下文菜单上下文菜单

输入输入Input PanelInput Panel

输入面板的状态输入面板的状态

MSDNMSDN ：： Mobile Developer CenterMobile Developer Centerhttp://http://msdn.microsoft.commsdn.microsoft.com/mobility/mobility

OpenNETCFOpenNETCFhttp://www.opennetcf.orghttp://www.opennetcf.org

Smartphone Developer NetworkSmartphone Developer Networkhttp://www.smartphonedn.comhttp://www.smartphonedn.com

Pocket PC Developer NetworkPocket PC Developer Networkhttp://http://www.pocketpcdn.comwww.pocketpcdn.com