1 / 36

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

MBL302 设计 Windows Mobile 应用程序的用户界面. 张欣 Team Lead US-MDD-Test 微软有限公司. 议程. 屏幕的方位性 分辨率 界面布局 软键和菜单 输入. 导语： Mobile 设备的人机界面的发展. LED 单色屏幕 灰度屏幕 彩色屏幕 手写 。。。。。。. Windows Mobile UI 设计 常规的概念. 常见的一些概念的转换 鼠标 --〉 触笔 键盘 --〉 硬件按钮 Mobile ？ Mobility ？ 用户输入 界面保持简洁. Windows Mobile UI 设计 设计原则.

gareth-clark
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. MBL302设计Windows Mobile应用程序的用户界面 张欣 Team Lead US-MDD-Test 微软有限公司

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

  3. 导语：Mobile设备的人机界面的发展 • LED • 单色屏幕 • 灰度屏幕 • 彩色屏幕 • 手写 • 。。。。。。

  4. Windows Mobile UI设计常规的概念 • 常见的一些概念的转换 • 鼠标--〉触笔 • 键盘--〉硬件按钮 • Mobile？ Mobility？ • 用户输入 • 界面保持简洁

  5. Windows Mobile UI设计设计原则 • 简单易操作 • 记忆负担小 • 符合用户认知习惯

  6. 屏幕的方位性What is it？ Landscape Square Portrait

  7. 屏幕的方位性考虑如下问题 • 用户会在运行时旋转屏幕 • 三种主要的策略 • 改变内容的大小 • 动态的对内容进行重新布局 • 改变内容 • 保持用户体验的一致性

  8. 屏幕的方位性程序主界面 策略1: 改变内容的大小

  9. 屏幕的方位性程序主界面 策略2: 动态的对内容进行重新布局

  10. 屏幕的方位性程序主界面 策略3: 改变内容

  11. 屏幕的方位性对话框 • 设计成正方形的区域 • 动态的对内容重新布局

  12. 屏幕的方位性对话框 策略1: 设计成正方形的区域

  13. 屏幕的方位性对话框 策略2: 动态的对内容重新布局

  14. 屏幕的方位性托管代码中如何处理 • 使用控件的Anchor属性 • 在运行时对内容重新布局 • Form.OnResize事件 • 捕获屏幕的旋转事件 • Microsoft.WindowsMobile.Status.SystemState

  15. 处理屏幕的旋转

  16. 分辨率What is it? 96 DPI 131 DPI

  17. 分辨率考虑如下问题 • 绝大部分的设备的屏幕的物理大小是一样的 • 分辨率越高，则每个象素越小 • 字体应该比较大而且可读性要好 • 每一个点击区域应该容易被点击 • 不要过于靠近屏幕边沿和角落 • 触笔:5.04mm(21像素)；手指:9.12mm(38像素)

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

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

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

  21. 界面布局三种主要视图 • 列表视图 • 信息视图 • 编辑视图

  22. 软键和菜单What is it? Smartphone Pocket PC

  23. 软键和菜单软键 • 以前只是在Smartphone上有 • 在Pocket PC上是一个新的功能 • 方便了单手操作 • Smartphone和Pocket PC的界面更加一致

  24. 软键和菜单软键设计原则 • 常用的且无损害性的命令放在SK1上 • SK2可以是一个命令或者是个菜单 • 软键上的命令提示字符要简短，限制在一个词 • 让菜单尽可能的小 • SK1的命令不要在SK2的子菜单中重复 • 尽可能的不要使用子菜单 • 将相似的命令进行分组

  25. 软键和菜单菜单设计原则 • 让菜单尽可能的小 • SK1的命令不要在SK2的子菜单中重复 • 尽可能的不要使用子菜单 • 将相似的命令进行分组 • 适当的禁用与移除菜单项 • 不同界面中保持一致的菜单顺序 • 为Smartphone的菜单助记键调整菜单顺序

  26. 软键和菜单菜单的顺序 • SK1：最有可能的无危害的操作 • SK2 • 次要操作命令 • 编辑类命令 • 视图类命令 • 其他支持性命令 • 选项类命令

  27. File Explorer的菜单的演变

  28. 软键和菜单菜单的变化 • Today屏幕上没有了“新建”菜单命令 • 菜单栏上没有图标 • 更加容易访问

  29. 软键和菜单在.NET CF中访问 • System.Windows.Forms.MainMenu • MenuItem.Click event handler

  30. 输入考虑如下问题(一) • 尽量单击触发而不要使用双击 • 尽可能的减少用户的点击的次数 • 使用命令加速键 • 支持常用的快捷键 • 剪切、复制、粘贴 • 选择全部 • 粗体、斜体、下划线

  31. 输入考虑如下问题(二) • 尽量支持单手操作 • 使用键盘时 • Softkeys • 编辑类控件 • 硬件按钮 • 使用触笔时 • 按钮 • 超链接 • 上下文菜单

  32. 输入Input Panel

  33. 输入面板的状态

  34. MSDN：Mobile Developer Center • http://msdn.microsoft.com/mobility • OpenNETCF • http://www.opennetcf.org • Smartphone Developer Network • http://www.smartphonedn.com • Pocket PC Developer Network • http://www.pocketpcdn.com

More Related