用户界面实现方法及装置与制造工艺

本发明涉及智能终端交互技术领域，具体涉及一种用户界面实现方法及装置。

背景技术：
随着智能终端设备的不断普及，用户对智能终端设备的软件需求越来越多，但目前提供给用户的各种软件良莠不齐，界面各异，智能终端用户在众多的应用软件中，最终会选择用户界面（UserInterface，简称：UI）视觉效果良好，且具有良好的体验的应用留在自己的智能终端上长期使用。面对用户的多样化需求，如何设计出能够满足用户需求的UI成为一个巨大的挑战。UI设计是智能终端软件的人机交互、操作逻辑、美观界面的整体设计。UI是智能终端操作系统中人机交互的窗口，它必须基于智能终端的物理特性和软件的应用特性进行合理的设计。目前，已有的UI设计基于的是可扩展标记语言（eXtensibleMarkupLanguage，简称：XML）的界面解析渲染技术，该技术主要利用XML作为数据结构的载体，记录UI元素的位置、布局等属性，以便在运行时解析以生成所需要的对象。以小米手机的锁屏引擎为例，在其XML文件中以每个UI元素为单位定义UI元素的各种属性和逻辑，例如对于解锁UI元素（该元素为一个图片），定义了这个图片的位置、旋转、透明度、缩放比例等属性，这个图片所适用的各种动画效果，以及这个图片的操作属性，如“unlocker”属性，表示该解锁UI元素可以直线拖拽，拖拽动作会引发解锁行为。在这类UI设计中，UI模式比较单一，都是以一个UI元素为单位，描述该UI元素的属性和逻辑，采用这样的方式对逻辑的描述不足，难以支持类似于游戏这样的复杂逻辑；而且这种设计的扩展性不足，它仅支持直线拖拽的解锁行为，如更改解锁模式需要开发单独的逻辑，有可能已经超出了其最初的设计框架。

技术实现要素：
鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的用户界面实现方法和相应的用户界面实现装置。根据本发明的一个方面，提供了一种用户界面实现方法，包括：为用户界面上的界面元素建立物体-行为-结果模型，其中，所述物体-行为-结果模型包括物体、行为和结果的描述信息，所述物体是指所述用户界面上的界面元素；所述行为是指对所述物体进行的动作；所述结果是指对所述物体执行所述行为之后，所述用户界面呈现的状态；解析所述物体-行为-结果模型以得到物体、行为和结果之间的对应关系；根据所述物体的描述信息以及物体、行为和结果之间的对应关系，将与所述物体对应的界面元素显示在用户界面上，并实现与用户的界面交互。根据本发明的另一方面，提供了一种用户界面实现装置，包括：模型构建器，适于为用户界面上的界面元素建立物体-行为-结果模型，其中，所述物体-行为-结果模型包括物体、行为和结果的描述信息，所述物体是指所述用户界面上的界面元素；所述行为是指对所述物体进行的动作；所述结果是指对所述物体执行所述行为之后，所述用户界面呈现的状态；解析器，适于解析所述物体-行为-结果模型以得到物体、行为和结果之间的对应关系；执行器，适于根据所述物体的描述信息以及物体、行为和结果之间的对应关系，将与所述物体对应的界面元素显示在用户界面上，并实现与用户的界面交互。在本发明提供的方案中，不再以UI元素为单位预先定义其属性和逻辑，而是将多个UI元素的属性和逻辑等信息分为物体、行为和结果的描述信息分别来定义，然后通过解析物体-行为-结果模型得到物体、行为和结果之间的对应关系，根据该对应关系在用户界面上实现多个UI元素。基于该物体-行为-结果模型使得开发应用主题变得简单，也使得复杂的逻辑描述变得简单。物体-行为-结果模型的开放性和扩展性可以支持更多复杂、有趣的界面设计，无论是物体、行为和结果都可以独立地进行演进，因此当开发者需要实现当前应用能力以外的功能时，可以独立于主框架继续开发新增加的功能，从而很方便的实现扩展。上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。附图说明通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：图1示出了根据本发明一个实施例的用户界面实现方法的流程图；图2示出了根据本发明一个实施例的建立IBA模型的过程示意图；图3示出了根据本发明一个实施例的用户界面实现装置的结构框图。具体实施方式下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。通常来说，智能终端设备的每一个应用的用户界面都包含很多个UI元素，如果按照现有技术以每个UI元素为单位定义其属性和逻辑，势必会使上述问题更加复杂化。因此，本发明提供了一种用户界面实现方法及装置，在该方法及装置中，为多个UI元素建立物体（Item）-行为（Behavior）-结果（Action）模型，以下简称IBA模型。在本发明中，不再以UI元素为单位预先定义其属性和逻辑，而是将多个UI元素的属性和逻辑等信息分为物体、行为和结果的描述信息分别来定义，然后通过解析IBA模型得到物体、行为和结果之间的对应关系，根据该对应关系在用户界面上实现多个UI元素。在本发明以下实施例中，将以锁屏应用为例介绍本发明的技术方案。本发明实施例所采用的锁屏应用是基于安卓（Android）系统的平台性质锁屏产品。通过该锁屏应用用户可以根据个人偏好随意下载服务器端提供的各式各样的锁屏主题样式，在智能终端自由进行锁屏主题切换。该锁屏应用将锁屏能力、终端系统的各种快捷功能以及服务器端业务能力以统一UI交互、接口或配置文件等方式对外提供，抽象成为统一的锁屏开发规范提供给第三方开发者。该锁屏应用将形成一个锁屏产品的平台，让第三方开发者发布的主题通过服务器端锁屏中心的渠道提供给用户。图1示出了根据本发明一个实施例的用户界面实现方法100的流程图。如图1所示，方法100始于步骤S101，其中为用户界面上的UI元素建立IBA模型。IBA模型包括物体、行为和结果的描述信息。其中，物体是指用户界面上的界面元素，具体地，物体可以包括：用于在用户界面上展现静态图或动态图的图片控件、用于在用户界面上展现文本内容的文字控件、用于描述矩形的区域控件、用于包含多个控件的组控件或预定义物体控件。行为是指对物体进行的动作，行为可以是用户的操作行为，如用户在界面上进行的某种可触发事件的动作，例如点击或拖拽某个物体；行为也可以是系统的自身行为，如可触发事件的触发条件。结果是指对物体执行行为之后，用户界面呈现的状态，结果表示行为将会触发的事件，可能是产生某个系统行为（如解锁、打电话等），也可能是系统自身参数的调整。以锁屏应用为例，本发明将用户界面抽象为物体、行为和结果，以近自然的语言描述UI，这里采用的是XML语言。图2示出了根据本发明一个实施例的建立IBA模型的过程200示意图，如图2所示，该过程200始于步骤S201，首先，在预设目录下新建XML文件，定义锁屏主题。例如，在XML文件中定义：<lockname="onepiece"></lock>其中，lockname字段填写的是主题名称。后续所有定义的内容都会填写在<lock>标签内。在步骤S201之后，过程200进入步骤S202，其中在主题标签内部定义图层标签。例如，在<lock>标签内部定义：<layername="mainlayer"></layer>其中，layername字段填写的是图层名称。后续所有位于同一图层的物体都要在同一图层标签内部定义。不同图层标签的layername字段是唯一的，不能重复使用。在步骤S202之后，过程200进入步骤S203，其中在图层标签内部添加物体，即定义物体的描述信息。物体的描述信息包括物体名称和物体属性，物体名称用于唯一标识该物体，物体属性用于描述根据物体的描述信息所显示的界面元素的特征信息。可选地，物体属性可以包括以下属性中的一项或多项：位置属性、大小属性、旋转属性、缩放属性、可见度属性以及颜色属性等等。可选地，物体属性还可以包括动画属性，动画属性用于描述根据物体的描述信息所显示的界面元素的动画效果。根据物体类型的不同，其对应的物体属性也会有所不同。以最简单的滑动解锁为例，该主题一般包括一个图片控件，图片控件用于在锁屏界面上展示静态或动态的图片，图片来源可以被设置为预先配置好的主题包中的图片，也可以由用户自定义选择。举例来说，在图层标签内部添加子节点图片控件如下：<imagename="ship"res="ship.png"basey="#screen_h-80"basex="#screen_w/8"restraint="keepy"/>上述图片控件的描述信息包括物体名称name=“ship”和物体属性，物体属性包括：图片来源属性res="ship.png"和位置属性basey="#screen_h-80"basex="#screen_w/8"。其中，“ship”是图片控件的唯一标识符，该图片控件使用的图片是"ship.png"，图片的起始中心坐标为"#screen_w/8"，"#screen_h-80"，其中#screen_w表示屏幕宽度，#screen_h表示屏幕高度。为了让上述图片只能横向运动，即实现横向滑动解锁，还需在图层标签外部添加约束器，即定义约束器的描述信息。例如，添加约束器如下：<restraintname="keepy"><restraint_elementtype="shortcut"shortcut="keepy"/></restraint>上述约束器的描述信息包括约束器名称name="keepy"和移动范围信息type="shortcut"shortcut="keepy"。其中，"keepy"是该约束器的唯一标识符，type="shortcut"表示约束器的类型为shortcut，当约束器的类型为shortcut时，keepx表示移动时x轴的坐标不变，keepy表示移动时y轴的坐标保持不变。因此上述约束器的移动范围信息具体为保持y轴的坐标不变。对应的，图片控件的描述信息还包括约束器信息restraint="keepy"，"keepy"与上述添加的约束器的名称是相对应的，表示图片控件受到上述约束器的限制，移动时需保持y轴的坐标不变，即在水平方向上移动。另外，为了定义解锁的目标区域，还需在图层标签内部添加子节点区域控件如下：<regionname="target"basey="#screen_h-80"basex="#screen_w*7/8"h="100"w="100"/>上述区域控件的描述信息包括物体名称name="target"以及位置属性basey="#screen_h-80"basex="#screen_w*7/8"、大小属性h="100"w="100"。其中，"target"是区域控件的唯一标识符，区域的起始中心坐标为"#screen_w*7/8"，"#screen_h-80"，区域的高为100，宽为100。由于绝大部分用户点亮手机查看锁屏界面的主要目的是查看时间，那么显示一个漂亮的时钟和当前的日期能够大大方便用户的使用。为了显示时钟，可以利用预定义物体控件来实现。预定义物体控件集成了一些特殊功能的组件，实际上是一个组，但不需要分别定义子节点。以时钟组件为例，在预先配置好的主题包内提供有clock_0.png～clock9.png以及冒号clock_dot.png共11张图片，预定义的时钟组件class="clock"由这些图片组成，在图层标签内部添加预定义物体控件如下：<superitemname="clock"basey="#screen_h*0.1"basex="#screen_w*0.5"class="clock"/>上述预定义物体控件的描述信息包括物体名称name="clock"和位置属性basey="#screen_h*0.1"basex="#screen_w*0.5"、类型属性class="clock"。其中，"clock"是该预定义控件的唯一标识符，该预定义控件由主题包内的11张图片组成，其起始中心坐标为"#screen_w*0.5"，"#screen_h*0.1"。依据这些属性，上述11张图片将会以起始中心坐标为中心自动并排排版，中间无间隔、无重叠，形成时钟。为了显示日期，可以利用文字控件来实现。例如，在图层标签内部添加文字控件如下：<textname="date"align="center"color="#AAEEEEEE"basey="#screen_h*0.1+60"basex="#screen_w*0.5"paras="@date_yyyy/MM/ddEE"content="%s"size="16"/>上述文字控件的描述信息包括文字名称name="date"和物体属性，该物体属性包括：对齐属性align="center"、颜色属性color="#AAEEEEEE"、位置属性basey="#screen_h*0.1+60"basex="#screen_w*0.5"、参数属性paras="@date_yyyy/MM/ddEE"、内容属性content="%s"、文字大小属性size="16"。其中，"date"是该文字控件的唯一标识符，该文字控件中文本的对齐方式为以中心对齐，文字的颜色值为"#AAEEEEEE"，文字大小为16，文字控件起始中心坐标为"#screen_w*0.5"，"#screen_h*0.1+60"。内容属性content表示需要显示的文字内容，支持类似于C语言的格式化字符串，用%表示需要替换的参数。在该例子中，内容属性是可配置的字符串参数"%s"，它的实际参数定义在paras内，以@date开头，这表示content内的"%s"将被替换为一串日期信息，具体格式为yyyy/MM/ddEE，例如2012/07/06周二。为了能够使锁屏界面更富有生气，还可以添加一些具有动画效果的图片控件。例如，为上述图片控件"ship"添加背景海浪(由另一图片控件"wave1"来实现)和前景海浪(由另一图片控件"wave2"来实现)，让图片控件"ship"显示在两层海浪之间。而海浪不应该是固定的，它们可以上下波动。海浪依然需要定义在图层标签内部，由于先定义的控件将被置于底层，而后定义的控件将被置于顶层，因此将wave1的描述信息放在"ship"的描述信息之前，将wave2的描述信息放在"ship"的描述信息之后。在图层标签内部添加两个图片控件"wave1"和"wave2"：<imagename="wave1"res="wave1.png"basey="#screen_h-50+6*$sin(6.28*(#time%3000/3000))"basex="#screen_w/2"/>……<imagename="wave2"res="wave2.png"basey="#screen_h-30+6*$sin(-6.28*(#time%3000/3000))"basex="#screen_w/2"/>上述两个图片控件的动画效果是通过位置属性来实现的，这两个图片控件的basey都是根据表达式得到的，其中"#time"的值表示从锁屏启动到当前帧所花费的毫秒数；那么"#time%3000/3000"则表示一个以三秒为周期，从0到1的周期变化。结合三角函数，可以很方便地制造出波动效果。可选地，也可以通过物体属性所包含的动画属性来描述所显示UI元素的动画效果。该动画属性可以为alpha渐变动画(alpha_animation)，位移动画(position_animation)，缩放动画(scale_animation)，旋转动画(rotate_animation)，图片帧动画(frame_animation)，斜切动画(skew_animation)。这些动画属性也可以作为控件的子元素来定义。每种动画的播放方式都可以分为单次播放和循环播放，由其状态值来控制，状态值为0表示停止播放，状态值为1表示单次播放，状态值为...