MBL302设计Windows Mobile应用程序的用户界面（张欣）.ppt

MBL302设计Windows Mobile应用程序的用户界面 张欣 Team Lead US-MDD-Test 微软有限公司 议程 屏幕的方位性 分辨率 界面布局 软键和菜单 输入 导语：Mobile设备的人机界面的发展 LED 单色屏幕 灰度屏幕 彩色屏幕 手写 。。。。。。 Windows Mobile UI设计常规的概念 常见的一些概念的转换 鼠标--〉触笔 键盘--〉硬件按钮 Mobile？ Mobility？ 用户输入 界面保持简洁 Windows Mobile UI设计设计原则 简单易操作 记忆负担小 符合用户认知习惯 屏幕的方位性What is it？ 屏幕的方位性考虑如下问题 用户会在运行时旋转屏幕 三种主要的策略 改变内容的大小 动态的对内容进行重新布局 改变内容 保持用户体验的一致性 屏幕的方位性程序主界面 屏幕的方位性程序主界面 屏幕的方位性程序主界面 屏幕的方位性对话框 设计成正方形的区域 动态的对内容重新布局 屏幕的方位性对话框 屏幕的方位性对话框 屏幕的方位性托管代码中如何处理 使用控件的Anchor属性 在运行时对内容重新布局 Form.OnResize事件 捕获屏幕的旋转事件 Microsoft.WindowsMobile.Status.SystemState 分辨率What is it? 分辨率考虑如下问题 绝大部分的设备的屏幕的物理大小是一样的 分辨率越高，则每个象素越小 字体应该比较大而且可读性要好 每一个点击区域应该容易被点击 不要过于靠近屏幕边沿和角落 触笔:5.04mm(21像素)；手指:9.12mm(38像素) 分辨率位图和图标 位图不管是放大还是缩小，效果都会失真 为你所支持的分辨率分别处理位图和图标 分辨率分辨率的支持以及图标的大小 界面布局设计原则 避免不相关的/冗余的信息 合理组织信息的展现顺序 提供易见且易理解的提示信息 保持界面布局的一致性 提供一定的快捷操作 提供友好的错误提示信息 界面布局三种主要视图 列表视图 信息视图 编辑视图 软键和菜单What is it? 软键和菜单软键 以前只是在Smartphone上有 在Pocket PC上是一个新的功能 方便了单手操作 Smartphone和Pocket PC的界面更加一致 软键和菜单软键设计原则 常用的且无损害性的命令放在SK1上 SK2可以是一个命令或者是个菜单 软键上的命令提示字符要简短，限制在一个词 让菜单尽可能的小 SK1的命令不要在SK2的子菜单中重复 尽可能的不要使用子菜单 将相似的命令进行分组 软键和菜单菜单设计原则 让菜单尽可能的小 SK1的命令不要在SK2的子菜单中重复 尽可能的不要使用子菜单 将相似的命令进行分组 适当的禁用与移除菜单项 不同界面中保持一致的菜单顺序 为Smartphone的菜单助记键调整菜单顺序 软键和菜单菜单的顺序 SK1：最有可能的无危害的操作 SK2 次要操作命令 编辑类命令 视图类命令 其他支持性命令 选项类命令 软键和菜单菜单的变化 Today屏幕上没有了“新建”菜单命令 菜单栏上没有图标 更加容易访问 软键和菜单在.NET CF中访问 System.Windows.Forms.MainMenu MenuItem.Click event handler 输入考虑如下问题(一) 尽量单击触发而不要使用双击 尽可能的减少用户的点击的次数 使用命令加速键 支持常用的快捷键 剪切、复制、粘贴 选择全部 粗体、斜体、下划线 输入考虑如下问题(二) 尽量支持单手操作 使用键盘时 Softkeys 编辑类控件 硬件按钮 使用触笔时 按钮 超链接 上下文菜单 输入Input Panel MSDN：Mobile Developer Center /mobility OpenNETCF Smartphone Developer Network Pocket PC Developer Network 输入面板的状态 Portrait Landscape Square 策略1: 改变内容的大小 策略2: 动态的对内容进行重新布局 策略3: 改变内容 策略1: 设计成正方形的区域 策略2: 动态的对内容重新布局 处理屏幕的旋转 96 DPI 131 DPI 大：64x64 小：32x32 480x640 192 DPI 大：44x44 小：22x22 240x320 131 DPI 大：32x32 小：16x16 176x220 240x320 96 DPI 图标 Smartphone Pocket PC Smartphone Pocket PC File Explorer的菜单的演变