在竞争激烈的手机市场中，手机制造商和网络运营商不断努力寻找其他竞争优势和差异化因素，以说服消费者选择自己的品牌而不是竞争对手的品牌。

当然，许多因素会影响最终客户的购买决策。它可以是价格，功能，品牌名称，易用性和耐用性，市场曝光度，评级和推荐，物理设备的工业设计等。

不用说，设备成功的关键部分还与用户界面（UI）有关，用户界面将直接影响使用过程中的购买决策和满意度，并间接影响例如网络运营商活动中的定价和媒体曝光度。

本文介绍了构建成功的移动设备UI的关键组件和方法，无论是现在还是将来。尽管重点主要放在移动电话上，但是对于任何具有显示器和GUI的嵌入式系统（即汽车，消费电子产品等），大多数底​​层机制都保持相同，尽管成熟度不同。

战略资产

当谈到手机的用户界面时，不可能不提及iPhone。随着这种标志性设备的推出，在图形丰富性，响应性和创新的输入机制方面，对手机UI外观的认识已提升到一个全新的水平。

更重要的是，用户界面策略突然出现在每个执行人员的议程中，不再需要对坚实而有区别的用户界面的需求。尽管如此，几乎没有制造商能够提供具有相同水平的引人注目的UI体验的手机。

为什么这被证明是非常困难的？要获得iPhone UI体验甚至超越，需要缺少哪些？

在回答这个问题之前，我们需要回到UI和用户体验（UX）指的是什么。在许多情况下，UX被用作UI的同义词。但是，两个表达式之间存在根本差异。

设备的UI通常指的是应用程序用于与最终用户通信的任何图形，听觉，感官或文本信息，并结合最终用户依次用来控制设备的控制序列（例如键盘输入，触摸屏上的手指或手写笔，语音命令，手势等）。

图1：显示的是用户体验生态系统

另一方面，UX是一个术语，用于描述具有许多涉众和参与者的复杂生态系统（上图1）。UX涵盖了用户与产品或服务之间交互的所有方面，包括购买，开箱，设置产品，任何附带材料的质量，网络覆盖范围，客户支持，可用的应用程序和服务等方面的经验。

换句话说，它涵盖了服务和组件的整个范围，而UI是必不可少的部分，因为这是用户与移动设备进行交互时每天都要面对的问题。

显然，iPhone的成功归功于整个用户体验，而不仅仅是用户界面。但是，UI显然起着至关重要的作用，并且本质上涉及两个关键组件-出色的基础技术（软件和硬件），以及高度专注的愿景和完美执行的设计过程。

因此，要使任何UI都成功，视觉和工作流程（即概念设计和视觉设计/方向）必须存在，并且技术必须促进这种视觉的实现。

UI愿景是无可争议的法律，是设备故事讲述和品牌定位的基本组成部分。其他一切都是从属的。正确设置这些部分，可以保证您将能够创建图标设备（至少在UI方面）。好的，那很有道理。但是该技术又需要什么呢？那里需要什么组件，它如何工作？

UI架构

在过去的十年中，我们看到了移动UI领域的惊人发展。在引入完整的图形显示以及后来的彩色屏幕时，移动UI仍处于起步阶段。

在功能为王的技术驱动产品中，UI几乎是最后一刻的化妆品最终层。UI设计受到软件和硬件紧密耦合在一起的严重限制（当时的典型手机包括诺基亚7110，摩托罗拉V50，爱立信T28等）。

在第一阶段之后，设备用户界面逐渐开始成为有形资产，并且越来越多地将用户界面作为区分差异化的重要工具来驱动产品。

随着时间的流逝，新因素开始对UI产生影响，例如网络运营商，内容和服务提供商。如今，第三方开发人员还通过实质上转变为通用服务平台的移动电话为设备用户体验增加了价值。

为了满足来自不同利益相关者的不断增长的需求，现代的用户界面系统构成了一个复杂的软件。它通常被称为UI工具包或UI框架，它提供可重用的软件组件和开发人员工具，以显着简化用户界面的创建。下面的图2显示了这种软件的典型结构（客户端）的简化概述。通常与此结合的是基于PC的工具，可简化UI的实际编写。

图2：基本的UI系统组件概述。

渲染后端

在所有UI系统中，至关重要的组件是图形渲染后端。这可用于对图元（例如图像，几何图形，文本字形等）进行低级绘制。渲染后端可以完全在软件中实现，并与帧缓冲区接口。但是，在高端设备中，它通常还利用底层SoC提供的硬件加速图形功能。

移动设备中最常用的API是Khronos标准API，例如OpenGL | ES 1.x或2.0，有时甚至是OpenVG。OpenGL | ES支持2D和3D图形的加速（具有完整的3D网格），并提供基于完整光栅图形的对单个像素的控制（以有限的分辨率）。

另一方面，OpenVG的目标是矢量图形，它对每个像素的控制较少，但分辨率基本上是无限的。它支持缩放，旋转和其他变换以及形状动画。它在较小的硅芯片面积和更高分辨率的数据表示方面也具有优势。

图形硬件加速的主要驱动力主要是显示分辨率的提高，例如WVGA / 720p / 1080p，以及对多屏支持的需求。

其他驱动因素包括对响应性和质量（例如，引入触摸输入），3D UI和媒体加速的要求。但是，并非毫无疑问地将这些技术集成在一起-增加了BOM，功耗和复杂性（仅举几例，系统体系结构，组织和能力）。

一些硬件系统可能会提供对硬件加速的简化支持，例如仅提供alpha混合（透明度）和加速的blitting过程，而不支持3D。这在汽车和消费电子等行业很常见。

窗口管理器

通常，与图形渲染后端耦合的是窗口管理器。窗口管理器使UI组件的不同部分可以共享物理显示空间，并向应用程序隐藏这种复杂性（例如，一个窗口如何被另一窗口部分遮挡，或者何时弹出对话框出现在顶部等）。

渲染图形并以可靠的实时性能处理窗口管理是处理和内存密集型活动。最重要的是，对具有动画属性，过渡和效果的UI的需求不断增长，这使传统的窗口管理器方法过时了，在该方法中，应用程序直接绘制到显示上。

为了解决这个问题，需要一种基于合成器的窗口管理方法（下面的图3）。简而言之，合成器方法可以将UI的元素视为图层，然后将它们组合（即合并）在一起以生成最终图像。

图3.合成器方法可将UI的元素视为图层，然后将它们组合在一起以生成最终图像。

这些层可能是不同应用程序图的目标，从而导致最终的合成步骤与应用程序图解耦，并且这样做可以消除瓶颈。

合成器可以轻松地为窗口位置，大小设置动画，并以高性能添加透明度和阴影等效果，从而带来更好的UI体验。

组件（例如图像，抗锯齿的文本和几何图元），效果和外部源（例如视频元素）也可以实时组合。

为了进一步提高性能，通常可以在合成器实现中添加诸如智能透支最小化之类的功能（用于软件渲染）。合成功能是硬件加速的理想领域，最近甚至为此目的创建了标准API（Khronos OpenWF）。

控件，小部件

用户界面系统通常将提供一组可重复使用的静态和动态UI构建块，例如标签，列表，输入字段，图标，按钮，滚动条和对话框。这通常称为小部件或控件。

通常可以通过设置某些属性来配置每个控件，例如定义屏幕上的大小和位置。一些属性需要“本地化”，即适应某种语言系统。最重要的是UI中显示的文本字符串，这些字符串根据使用者的母语而变化。

为了支持本地化（有时也称为国际化或I18N），通常会实现资源管理系统，该系统还支持诸如用户界面主题控制之类的东西。

注意布局

将控件放置在窗口中的最直接方法是对每个控件使用绝对定位（x，y）和大小（宽度，高度）。尽管这提供了详细的控制，但是手动进行非常繁琐且不够灵活。相反，大多数系统将包括布局管理。

布局管理器将例如自动对齐边距和大小，提供列表，网格或停靠布局，处理屏幕调整大小的布局（例如，从纵向到横向）。高级布局管理器甚至支持3D布局。

所有需要做的就是告诉它要布局哪些组件以及要满足哪些条件，然后布局管理器将自动为每个组件设置位置和大小。

操纵

为了使用户与UI交互，必须支持直接或间接操纵（或有时两者）。从历史上看，通过硬键间接输入是最常见的方法。但是在过去的几年中，使用触摸屏直接输入的趋势越来越明显。

对于间接输入方案，通常不希望每个组件始终对每个用户输入做出反应。相反，通常会有一些方法来路由和更改输入焦点。

该控件控制哪个具有交互式，动态控件的窗口接收用户输入。在直接操作（带触摸屏）的情况下，用户可以使用手写笔或手指与屏幕上的元素进行交互，并且不需要以相同的方式进行焦点管理。

然而，直接操纵的实施并非没有问题，并且已经使许多依赖传统UI框架的手机制造商倍感头痛。问题在于，通过直接操作，输入和视觉反馈之间的任何滞后都会立即被注意到。

使用间接操纵时，可接受20fps左右的帧速率，而直接操纵至少需要30-40fps才能被视为可靠的体验。作为输入系统的一部分，使用回调定义并通常对一组事件进行建模。

例如，这可能是事件，当用户在可滚动列表中选择列表项，按下按钮等时，会导致基础应用程序逻辑中的状态更改。UI系统还可以触发自主事件，例如，当动画已经结束时。

设计模式

在为应用程序开发UI时，一个常见的陷阱是将数据访问代码，业务逻辑代码和表示代码混合在一起。这样做有几个严重的缺点。

由于相互依赖，应用程序变得难以维护。难以在应用程序和平台之间重用代码；添加或更改新的演示文稿格式非常耗时，等等。

图4：描述了MVC体系结构软件设计模式，以通过分离表示和用户交互，数据访问和业务逻辑来解决问题。

1979年，模型-视图-控制器（MVC）模式首次被描述为一种体系结构软件设计模式，以通过分离表示与用户交互，数据访问和业务逻辑来解决这些问题。上面的图4 概述了MVC中的不同部分，其中包括：

模型： 表示应用程序在其上运行的数据。当模型更改其状态时，它将通知其关联的视图。数据通常存储在持久性存储库中。

视图。 该视图负责将模型数据进行可视化呈现并将其呈现为合适的一组用户界面元素。

出于不同的目的，一个模型可以共存多个不同的视图。一个基本示例是一个列表，该列表在一个视图中可能是一个简单的垂直滚动列表，而在另一个视图中是一个轮播3D列表，但仍具有相同的基础模型。

控制器。 控制器接收用户输入事件（有时通过视图），然后通过对模型中的不同对象进行调用和状态更改来启动操作。

声明性UI方法

在现代UI开发中，另一种非常有效的机制是声明性UI方法（与编程方法相对）。

声明性UI通常是指一种设置，其中视觉表示（MVC中的视图）由在运行时解析并在其上执行的人类可读语言（例如，基于XML）控制。

声明性UI语言的一个示例是Microsoft XAML。在某些功能强大的系统中，甚至UI流程也由声明性语句控制，从而实现了更大的灵活性（例如，非常快速的更改和UI的“重排”以适应新的外形尺寸）。这不是绝对必须的，但在许多情况下证明是非常有价值的。

通过采用声明式方法可以解决许多挑战。它使项目角色和团队角色之间的区别更加清晰，从而实现了并行工作流程。它有助于减少周期时间和开发成本；它更好地支持快速和后期定制。它可以实现更高效的快速原型制作；它减少了测试时间，等等。

流血的边缘用户界面

谁曾想到移动设备用户界面的发展趋于平稳，却犯了一个重大错误。展望未来，对用户界面的要求只会加速，我们看到2010年及以后的许多明显趋势将影响用户界面的实施和设计。以下是示例：

（1） 设备中装满了新型传感器（输入和输出），这些传感器将带来一系列新的场景和需要探讨的交互范例；

2个 具有多个显示供稿（> 2）和交互界面的UI（均用于设备本身，也适用于设备连接到其他CE设备（例如电视机等）的情况）；

（3） 将微微投影仪引入通过用户通过摄像机输入由空中手势控制的投影UI的手机中；

（4） AR炒作，即具有组件和交互作用的UI叠加在摄像机源上，并与背景场景集成在一起；

（5） 标准显示器上的3D UI，并且也实现为“真实” 3D，即具有自动立体显示器。

这些仅是少数几个用例，但要支持这些用例以及更多用例，我们需要重新考虑成功的UI策略的两个最重要的因素：

（1） UI愿景是法律。概念设计和视觉设计/方向应予以指导。

（2） UI技术必须具有足够的能力来促进此类UI愿景和工作流程的实施。

现在，从UI技术的角度来看，我们可以确定UI框架必须提供的三个关键组件（除了诸如布局，小部件等核心功能之外）：

组件1 ：由合成器驱动的UI架构（必须从一开始就存在）；

组件2 ：支持MVC驱动的开发（具有UI客户端体系结构和工具）；和，

组件3 ：一种有助于声明性UI方法的机制（通常通过XML控制的视觉效果和流程）。

重要的第四个因素（不是UI框架本身的一部分，但在总体体验中起着至关重要的作用）还在于基础系统如何有效地向UI提供数据，即数据绑定（MVC中的模型部分）。 ）。

由于文件系统速度慢或系统总线带宽太小而造成的瓶颈将不可避免地破坏整个UI体验。

成功地应用这些关键元素将不仅为当今的用户界面奠定坚实的基础，而且还将为用户界面的未来挑战和机遇做好准备。

它将提供在启动之前，之中和之后设计/重新设计UI的功能。通过简化跨平台和操作系统的UI的移植，它将支持选择哪个平台的艰难决策。

与精心制作的图形渲染后端一起，它还使您可以在外形尺寸和硬件功能之间进行缩放。它将允许您突破移动用户界面的视觉限制和图形丰富性。

看起来似乎很简单，但是仍然有许多制造商在努力使所有零件正确无误。然后出现了Android。

Android：iPhone的竞争者

去年，基于Android的设备数量激增，这通常被认为是iPhone的唯一真正竞争者。实际上，从技术角度来看，Android是用于下一代移动设备的功能强大且精心设计的平台。

它具有强大的体系结构和系统设计，具有较低的进入障碍/学习曲线，每个应用程序都是Web 2.0公民和Dalvik RTE（以及部分基于XML的UI框架）。

但是，它仍然没有真正优化以解决长期的UI挑战。作为示例，从根本上讲，它仍然是UI的一种编程方法，其代码充满了设计决策（即，它不是由设计驱动的）。

另一个示例是“所有应用程序创建均等”的概念，从程序员的角度来看这是好的，但最终用户却难以做出决定。

此外，RTE基于Dalvik / Java的事实对于拥有多平台策略的任何人都有弊端。

当前，Android不支持最新一代的硬件功能（例如具有3D的OpenGL | ES 2.0），这从UI角度来看是一个缺点，尽管Google表示，逐渐地，这将在某些时候通过高明的功能和后续版本公开。

尽管如此，就像今天一样，Android确实提供了一个良好的起点，但是手机制造商或运营商需要投资摆脱困境，并为UI创造自己的品牌感觉。

通常，这是通过专有的附加UI功能来完成的，就像我们在HTC Sense UI中看到的那样，迄今为止，这是最成功的替代Android UI。

但是，趋势很明显，并且基本上所有制造商都在遵循HTC的发展道路（Motorola Blur UI，Sony Ericsson X10 UI等）。时间将证明这是否是可持续的策略并提供足够的差异化。