MID应用程序设计标准样式指南：UI组件

最新推荐文章于 2021-03-24 12:11:41 发布

moblin

最新推荐文章于 2021-03-24 12:11:41 发布

阅读量4.1k

点赞数

文章标签： ui reference 工具 nokia 任务产品设计

示例代码

移动互联网设备的用户界面样式简介

Intel的移动互联网设备（Mobile Internet Device，MID）是一种新型的低功耗计算设备，它可以作为手持设备安装到汽车等嵌入式环境中。本文档是开发MID应用程序的UI指南。

MID应用程序架构以Hildon应用程序架构为基础，并且秉承了Hildon中的一些用户界面和风格特性。然而，MID的用户界面、导航以及用户体验在许多方面都与Nokia N系列手持设备不同。

本指南旨在为开发人员提供建议，指导开发人员开发新的MID应用程序或者将现有应用程序移植到MID。它概括了MID用户界面的一些主要特性，包括用户交互、系统和应用程序的界面和外观、控制钮的常见位置以及导航。本指南的目的是为MID用户提供一致、综合的体验。有关Hildon应用程序UI样式的一般建议，请参阅Hildon UI Style Guide ².

MID硬件规格及其制约因素

MID手持设备的体积比笔记本的体积小，具备基本的用户输入和系统导航，使用触摸屏和有限的硬件按钮及控制钮。掌握这些基本情况对于应用程序的设计很重要。

硬件设备

各种设备之间的MID硬件特性差异较大，但是至少具备以下共同特征：

屏幕尺寸

最小: 对角线4.8英寸（最常见）

最大: 对角线 7 英寸

屏幕分辨率

大小:

水平像素：景观模式下800或者1024
垂直像素：景观模式下480或者600

应用程序不能只限定于固定的分辨率或者宽度/高度比例。比如，有些设备可能是800x480或者800x600。有的设备可能支持多种分辨率，比如800x480和1024x600。应用程序应该注册通知，以了解屏幕分辨率或者屏幕方向何时发生变化。
颜色深度:最少16位（65536色)。默认：24位（ 16M 色)
DPI：225

输入机制

触摸屏：可通过人工触摸进行系统操作
触摸屏笔：有些设备会配备触摸屏笔（可选），以便更准确地进行操作。
硬件控制：设备上的按钮和控制钮。
软键盘：屏幕上会出现软键盘，可通过手触摸或者用触摸屏笔输入文本/数字。用户可以设置编辑区聚焦时自动启动软键盘。
键盘（可选）：设备可以配备键盘。

内存

因设备而定，最小256 MB。

存储器

因设备而定，最小：1GB SSD。最大：硬盘容量（如果存在的话）

硬件控制

除了电源开关，没有什么硬件是MID必需配备的，包括键盘。通过屏幕上的控制条，用户界面可实现完全面导航，并且可以完全通过触摸来实现输入。下一节介绍的硬件控制可以帮助简化并加速常见用户任务。

建议（期望）

电源开关：长按为开机或者关机；短按为唤醒或者待机
锁定屏幕以免放在口袋时发现意外操作
全屏切换按钮
跳转到主屏幕按钮
相机的快门按钮在背面的镜头旁边
上/下/左/右箭头（在显示器面板上）

其他特性

滚动控制（上/下/左/右以可覆盖它）
亮度控制（设备可能具有环境亮度感应器）
音量控制
屏幕旋转
用于显示当前应用程序菜单的菜单键

设备示例照片

下图是某MID的设计方案：

图2-1：某MID的设计方案

MID UI目标

手持设备上的小屏幕UI

当屏幕为4.5英寸且用户在眼睛距离屏幕12-18英寸远的地方进行手动操作的时候，用户界面必须是清晰而且完全可用的。应用设计时必须考虑：

屏幕分辨率必须是准确的800x480, 800x600, 和 1024x600。不可以是待定随分辨率。
所有对话框都适适同一屏幕尺寸（对话框的相关信息详下下文）
应用程序在全屏模式下运行良好，来回重复切换时屏幕都应清晰可见
尽量减少使用水平滚动条的需求
软键盘激活之后，当前应用程序窗口的尺寸可能会缩小以容纳软键盘。这时必须确保编辑区域还处于聚焦状态并且恢复尺寸之后依然可见。

可读性和文本外观

所设计的用户界面必须在4.5英寸的小屏幕下运行良好。文本操作的选择对于可读性很重要。设计良好的应用程序会为大众提供系统默认的字体选择。这样，用户可以对字体大小和其他特性进行编辑。如果选择提供习惯字体，那么应高度关注字体大小、字形、行距和对比度。

手指触摸第一，其次触摸屏笔，最后键盘

MID UI必须通过手指触摸屏操作就能实现完全导航。然而，MID UI的一个目标就是强调用手指触摸进行最普通的操作而不是用触摸屏笔完成。按照手指的一般特征，触摸时控制区应该是1平方厘米或者更大（像素70x70，分辨率800x480）。触摸区应该很容易就能找到而且其布局要根据手指操作的方便性来确定。

触摸屏笔

在某些情况下，触摸屏笔可能是必须的。非100%手指驱动的的应用程序与MID应该是可以兼容的。但是，使用触摸屏笔要求用户每次用完之后都要把笔放回原处。这会影响用户的使用速度。设计用户界面的时候应该考虑到这个问题。

文字输入

应该尽量减少文字输入的需要。如果有可能实现用手指触摸点击就能完成操作而不用输入文字的话，应该加强调研。因为文字输入是小型移动设备的克星。

右键单击

右键单击是通过长按触摸屏实现的。这种方法笨拙、速度缓慢且效果不理想。如果有其他方法可以实现同样的功能则应尽量避免使用右键单击。

经过简化的UI

系统的整体使用应该简单。从Mobile Desktop UI开始，针对某些特定类型的体验将产品设计成能够快速操作一些关键的应用程序。该系统应该能够支持软件安装且没有数量限制。然而，其最终目的不是成为安装了几百个应用程序的标准桌面系统，而是提供一套核心的、集成性良好的应用程序来支持移动“on the go”任务，比如浏览网页、播放影音和通信（聊天/即时信息）。

产品设计应该考虑如何通过简单的、手指导航的操作方式来实现最重要的特性。更高级的特性可以再进一步实现，但是典型的功能要迅速掌握。

小型窗口管理器

Matchbox Window Manager³或其同类的软件包可以在全屏模式下提供简单、基于堆栈的窗口管理器。应用程序窗口的上方会出现情景对话。但是，多个高级窗口不能同时并排显示。新窗口会占满整个屏幕，完全覆盖当前的窗口。应用程序窗口的顶部或者两侧会有选项框或者任务导航板提供导航并显示系统状态。

菜单和工具栏

在实现最常用操作的前提下应该尽量减少菜单和工具栏的数量。有些地方可以采用子菜单、高级选项对话框的形式或者直接删除不用。菜单是下拉列表（不是水平列表）。菜单不应只有一个选项（比如：文件->退出）。相反，应该将这一操作放在顶层。比较推荐的菜单组织形式如下所示。多级选项菜单备受推崇。

文件
编辑（剪切/复制/粘贴。选项：选项/首选项/设置）
--------
选项/首选项/设置
--------
关于
退出

对话框

所有对话框都必须适应800x480的分辨率。控制钮应该足够大且足够清晰，能够使用手指进行导航。对话框不要求能够滚动，但是在必要时应该将高级特性添加到子对话框中。

有限资源

与标准的现代PC机相比，MID处理器的性能和资源非常有限。只要有可能，就应该尽量避免使用大量的内存，打开大量的文件或者处理大量进程。

节电

Intel的新一代移动处理器（代号为Menlow, Moorestown及其他）采用了低功耗设计，以显著延长电池寿命。实现此特性的一个基本方法就是在设备待机时自动将CPU切换为低能耗状态。这时必须确保机器待机不会引起CPU中断。CPU可能在显示0%利用率的同时接受应用程序的中断命令。有关详细信息，请参阅： http://www.lesswatts.org/projects/applications-power-management/

方向

MID的屏幕可以左旋90度。这种模式可以在UI上操作或者通过硬件控制。切换到肖像模式时（默认是景观模式）也应正常运行。当系统切换到肖像模式时应该预先发出通知。

硬件交互

硬件交互因设备不同而有所差异。

UI交互

MID系统导航和用户交互是通过手指（优先）、触摸屏笔、软键盘、硬盘（如果有）或者设备上的按钮/控制钮在用户界面上进行操作实现的。

触摸屏

单击：点击按钮或者选中列表选项，是最常见的操作。
选中和激活：两次触摸，第一次是选中某一列表选项，第二次是选择/下载/开始。这样，在导航列表，比如从播放列表中挑选一首歌曲的时候，可以减少混乱。
手指向下按住：相当于右键单击，显示上下文菜单。
拖放：移动对象（或者重新排列列表选项）时，选中目标直接拖动到新的位置然后放开。
平移：触摸屏幕并拖动手指可以移动当前查看的内容（相当于滚动）。平移的作用是，在浏览页面或者文档编辑时，可以使用手指操作移动窗口中的内容。
手势：用预定义手势在屏幕上滑动手指作为某一操作启动的快捷方式。滚动最为常用。
触摸、移动：触摸点击菜单，菜单弹出之后把手指滑动到要选的选项，抬手再点击选择所选项。把手放到菜单区之外，选项操作动作会自动取消，也就不会有任何菜单选项被选中。

软键盘

用户界面会内置一个支持触摸操作的软键盘。用户可对软键盘做一些设置。软键盘可通过手指或者触摸屏笔进行操作。当软键盘出现时，当前的应用程序会变得模糊或者会调整尺寸。

硬键盘

MID可能会配备硬键盘。而硬键盘也形式多样，可能是滑盖型、扩展型、可拆卸型或者凸出型。但是应用程序可能会无法检测到硬件的存在。

MID用户界面细节

MID Desktop UI

MID Desktop UI为应用程序提供了全图形化的运行环境。它定义了各组件的总体布局，这与系统的导航和用户的体验密切相关。它包含以下主要部分：

“主屏幕”：主屏幕将在系统启动时显示，之后可以在主屏幕启动应用程序。
导航按钮、工具栏或者控制钮：这些特性允许用户启动应用程序和导航系统。
状态栏：包含电池/电源状态、网络连接、音量和其他服务的状态图标的区域。
配置工具：应用程序需要配置系统设置的所有配置，包括网络连接、电源和支持的用户首选项。

以上罗列的MID Desktop UI组件的确切设计和布局根据运营系统供应商（OSV）而有所不同，甚至可能根据制造商随带的设备而有所差异。基于MID基准和用户界面创建并根据建议设计的应用程序必须在任何一款MID Desktop UI上都运行自如。

众所周知，当前的MID Desktop UI有两套操作系统。一套是Red Flag（中科红旗）开发的MIDINUX*。另一套是任何OSV都可能会用的Reference UI。Ubuntu正在为即将发布的Ubuntu-mobile版本定义自己的MID Desktop UI。

主屏幕示例

下图展示了MID Desktop UI主屏幕的外观设计。这并不是最终方案，但是关于简化用户体验和手指触摸导航方面的设计会参考较多。

图6-1：Reference UI主屏幕

图6-2：Red Flag主屏幕

应用程序启动/激活

主屏幕是系统启动之后出现的第一个画面，并为用户提供了用于启动应用程序指示符（比如上图演示的大图标）。单击应用程序图标之后，程序将启动并占满选项框下面的区域。选项框的具体内容将在下一节中详细介绍。

用户可通过Task Switching（任务切换）控制钮或者点击专用硬件“Home Screen（主屏幕）”按钮随时切换到主屏幕。

应用程序UI布局

MID Desktop UI之间的差异形式多样。然而，对于所有应用程序布局，如果基于Hildon应用程序框架，那么都会与下图相类似，顶部有一个面板（选项框）和应用程序区域。

图 6-3：应用程序UI布局

选取框

Reference MID Desktop UI的选取框示例如下图所示：

图6-4：Reference MID Desktop UI的选取框示例。

选取框可能包含多个组件，包括导航按钮和系统状态指示符。（Reference选取框组件的详细介绍见附录1）。切换到全屏模式时可隐藏选项框。

应用程序菜单

在选取框中可以看到一个应用程序菜单。应用程序菜单上有标签显示当前应用程序的名称。Reference UI 和 Red Flag操作系统的选取框中的应用程序菜单示例如下：

图6-5：Reference UI和Red Flag应用程序菜单示例

该菜单通常位于左上角，但是也可能在选取框的其他位置。该菜单的内容是在应用程序启动时专门加载的。每次移植应用程序时，都应该确定哪些内容对于移动环境最为重要，以尽可能地减小菜单的大小。

用户通过触摸应用程序菜单中的标题来访问菜单。用户将从下拉菜单中选择所需的菜单选项。

关闭/最小化按钮

另一个常见但非必须的选取框组件是关闭和最小化按钮。它们通常位于右上角，可用于关闭或隐藏当前应用程序。

应用程序区域

正常模式下，应用程序区域占满选取框下方的区域。全屏模式下，选项框隐藏，应用程序窗口占满全屏。

工具栏

应用程序区域内有应用程序工具栏。工具栏至少应该一些基本特性，使用户能够以最简单的方式完成最常见的任务。工具栏应设计成触摸式导航。采用Hildon框架时，工具栏位于屏幕底部。

滚动/平移

MID应用程序都应该使用平移来实现滚动（手指触摸并拖动）。我们极不鼓励使用标准窗口滚动条，而是使用"moko"滚动组件（适用于C和Python）来实现平移。

应用程序导航

应用程序导航是根据具体的应用程序而定的，在本指南中不具体讨论。导航到其他应用程序的具体方式是由MID Desktop UI根据每个OSV量身设计的。在MID中，某些应用程序可能会自动启动其他应用程序。比如，用户点击网页上的在线电台链接时，媒体播放器会根据该统一资源定位符（Uniform Resource Locator, URL）自动启动。如果用户的聊天应用程序中有URL地址的链接，那么用户可以点击链接并自动启动浏览器。

Hildon UI样式推荐

Hildon User Interface Style Guide² 提供了基于Hildon的应用程序开发建议。8-14章包含许多适用于MID应用程序的概念，并且是推荐阅读的。它们分别是：

第8章：如何构造菜单
第9章：上下文敏感菜单
第10章：如何使用工具栏
第11章：输入法
第12章：拖放
第13章：对话框

第14章：通知

将应用程序移植到MID

将已有应用程序移植到MID共有两个步骤。第一步是将应用程序加载到嵌入式MID软件堆栈中并运行。完成此任务的具体操作介绍详见Moblin.org网页中的"SDK"部分。

第二个步骤是根据该MID UI样式指南（详见第3部分）调整用户界面和交互。没有第二个步骤，应用程序也能在MID上启动和运行，但是不好看且不好用，不能满足用户的期望。

1 Nokia开发的Hildon应用程序框架。更多相关信息请参阅 www.maemo.org
2 Hildon UI样式指南：www.maemo.org
3 Matchbox Window Manager详见 http://matchbox-project.org/
4 MIDINUX是Red Flag专门为MID设计的Linux发行版