Mobile应用程序的用户界面.pptVIP

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