CN103150153A - 一种用户界面的设计方法及装置 - Google Patents

Abstract

本申请实施例提供了一种用户界面的设计方法及装置，利用迁移恰当加工理论，在用户界面设计之初，用户可利用滑尺，圈定用户界面中特定部分具有易用性的位置，在用户界面完成初步设计，进行测试调整过程中，用户还可利用滑尺，根据已观看过的待测试的用户界面，圈定特定部分所在的位置并绘制出该特定部分的具体细节，设计者可根据用户绘制的该特定部分的图形，与待测试的用户界面中该特定部分所在范围的重合度以及细节的符合度，确定该设定部分的设计是否具有易用性，本申请实施例可提高了所设计的用户界面的易用性。

Description

一种用户界面的设计方法及装置

技术领域

本申请涉及计算机技术领域，尤其涉及一种用户界面的设计方法及装置。

背景技术

在现有软件界面、网页等用户界面的设计过程中，用户界面的设计者一般按照自己个人的设计意图来设计各部分的布局、各功能组件、背景图片等，这样，用户界面最终所呈现出来的使用效果，往往会根据每个设计者的知识背景、喜好和使用习惯等因素产生巨大差异。由于缺乏对用户界面使用效果客观的评价工具，采用这种设计方法所设计出的用户界面，显然不一定能够满足普通用户对于网页的使用需求，达到最佳的使用的效果。

在用户界面初步设计完成之后，往往会使用让参与测试者使用软件或者页面之后，根据自身对用户界面使用感受，然后做出评价，设计者根据用户的评价，对网页的各部分进行修改和调整，这个过程中，同样由于缺乏对用户界面使用效果客观的评价工具，受不同参与测试者的知识背景、喜好和审美观念等因素的影响，无法客观地、准确地反映用户界面的最终使用效果，从而影响到最终生成的用户界面的使用效果。

发明内容

本申请实施例提供的用户界面的设计方法及装置，为使用户界面的设计达到较好的使用效果提供了一种客观的、可量化的辅助设计手段。

具体地，本申请实施例提供的用户界面的设计方法之一，包括：

根据设计指令，向其返回包含用户界面的设计模板的页面；所述设计模板的外框由多个标尺组成，且在各标尺之间分别设置有多个横向和纵向滑动尺图标；

针对设计模板中的每个设定部分，接收用户输入的滑动指令，在所述页面中，将所述滑动指令指定的横向滑动尺图标和/或纵向滑动尺图标移动至对应位置；

将滑动后的各滑动尺图标之间圈定的范围作为该设定部分所在的范围，完成该设定部分的设计。

本申请实施例提供的用户界面的设计方法之二，包括：

向用户显示待测试的用户界面；

在关闭所述待测试的用户界面后，向所述用户推送测试页面，所述测试页面的外框由多个标尺组成，且在各标尺之间分别设置有多个横向和纵向滑动尺图标；

针对待测试的用户界面的每个设定部分，接收用户输入的滑动指令，将滑动指令指定的横向滑动尺图标和/或纵向滑动尺图标移动至对应位置；

接收用户在滑动后的各滑动尺图标之间圈定的范围中输入的绘图指令，在所述圈定的范围内绘制该设定部分对应的图形；

将绘制的图形，与所述待测试的用户界面中该设定部分相比较，并根据比较结果确定是否需要调整该设定部分。

本申请实施例提供的用户界面的设计装置之一，包括：

推送模块，用于根据用户发出的设计指令，向其返回包含用户界面的设计模板的页面；所述设计模板的外框由多个标尺组成，且在各标尺之间分别设置有多个横向和纵向滑动尺图标；

接收模块，用于针对设计模板中的每个设定部分，接收用户输入的滑动指令；

滑动执行模块，用于在所述页面中，将所述滑动指令指定的横向滑动尺图标和/或纵向滑动尺图标移动至对应位置；

设计模块，用于将滑动后的各滑动尺图标之间圈定的范围作为该设定部分所在的范围，完成该设定部分的设计。

本申请实施例提供的用户界面的设计装置之二，包括：

推送模块，用于向用户显示待测试的用户界面；以及在关闭所述待测试的用户界面后，向所述用户推送测试页面，所述测试页面的外框由多个标尺组成，且在各标尺之间分别设置有多个横向和纵向滑动尺图标；

接收模块，用于针对待测试的用户界面的每个设定部分，接收用户输入的滑动指令；以及接收用户在滑动后的各滑动尺图标之间圈定的范围中输入的绘图指令；

滑动执行模块，用于将滑动指令指定的横向滑动尺图标和/或纵向滑动尺图标移动至对应位置；

绘图模块，用于根据所述绘图指令，在所述圈定的范围内绘制该设定部分对应的图形；

调整模块，用于将绘制的图形，与所述待测试的用户界面中该设定部分相比较，并根据比较结果确定是否需要调整该设定部分。

本申请实施例提供的用户界面的设计方法之三，包括：

向用户提供辅助工具，所述辅助工具包括背板、设置在背板边缘的边框以及在横向和纵向布置的多个滑尺，所述滑尺的两端与所述边框滑动连接；

针对待设计的用户界面中的每个设定部分，用户滑动所述辅助工具上的滑尺至所需位置；

将滑动后的各滑动尺图标之间圈定的范围作为该设定部分在待设计的用户界面中的范围，完成待设计的用户界面中该设定部分的设计。

本申请实施例提供的一种用户界面的设计方法之四，包括：

向用户显示待测试的用户界面；

在关闭所述待测试的用户界面后，为用户提供辅助工具，所述辅助工具包括背板、设置在背板边缘的边框以及在横向和纵向布置的多个滑尺，所述滑尺的两端与所述边框滑动连接；

针对待测试的用户界面中的每个设定部分，用户滑动所述辅助工具上的滑尺，并在所述测试工具的背板上各滑尺之间圈成的范围内绘制其观看到的该设定部分对应的图形；

将用户在所述背板上绘制的图形，与所述待测试的用户界面中该设定部分相比较，并根据比较结果确定是否需要调整该设定部分。

本申请实施例还提供了一种应用于上述用户界面设计的方法之三和之四的专用辅助装置，包括：背板、设置在背板边缘的边框以及在横向和纵向布置的多个滑尺；

所述滑尺的两端与所述边框滑动连接。

本申请实施例的有益效果包括：

本申请实施例提供的用户界面的设计方法及装置，利用迁移恰当加工理论，在用户界面设计之初，用户可利用滑尺，圈定用户界面中特定部分具有易用性的位置，在用户界面完成初步设计，进行测试调整过程中，用户还可利用滑尺，根据已观看过的待测试的用户界面，圈定特定部分所在的位置并绘制出该特定部分的具体细节，设计者可根据用户绘制的该特定部分的图形，与待测试的用户界面中该特定部分所在范围的重合度以及细节的符合度，确定该设定部分的设计是否具有易用性，本申请实施例提供的用户界面设计方法及装置，在设计过程中由于使用了可客观地、准确地反映出该用户界面的是否具有较好的使用效果的辅助手段，从而进一步提高了用户界面的易用性。

附图说明

图1为本申请实施例提供的用户界面的设计方法的流程图之一；

图2为本申请实施例提供的用户界面的设计方法的流程图之二；

图3为本申请实施例提供的用户界面的设计装置的结构示意图之一；

图4为本申请实施例提供的用户界面的设计装置的结构示意图之二；

图5为本申请实施例提供的用户界面的设计方法的流程图之三；

图6为本申请实施例提供的用户界面的设计方法的流程图之四；

图7为本申请实施例提供的专用辅助装置的结构示意图。

具体实施方式

下面结合说明书附图，对本申请实施例提供的一种用户界面的设计方法及装置的具体实施方式进行说明。

本申请实施例提供的用户界面的设计方法及装置，利用公知心理学中的迁移恰当加工理论(Transfer-appropriate processing)，该理论认为，用户在看到一个软件界面和网页页面时，在其大脑中对当下的界面在第一印象，会对软件和网页等产品的易用性有较深刻的影响。这样，基于该原理，可以在设计过程在用户界面中选择让用户记忆深刻的位置布置重要的功能组件，或者让用户通过对测试页面的回忆，确定测试页面中某个特定部分是否对用户产生深刻的印象，从而确定该特定部分的布置是否具有普遍的易用性。由于这一理论是客观存在的，不会受不同用户自身知识背景、喜好和使用习惯等因素影响，利用这一理论，可以对所设计的用户界面的易用性进行量化。

具体地，本申请实施例提供的用户界面的设计方法，涉及以下两种具体实施方式：

第一种方式，所采用的辅助工具是由计算机软件实现的；

第二种方式，所采用的辅助工具是实体工具。

本申请实施例首先对用户界面的设计方法的第一种方式及对应的装置进行详细的说明。

第一种方式：

在此种方式下，本申请实施例提供的用户界面的设计方法，可以应用于用户界面设计之初，例如，各部分布局的确立的过程中，如图1所示，包括如下步骤：

S101、接收设计指令，并根据该指令，向其返回包含用户界面的设计模板的页面；

其中，所述设计模板的外框由多个标识有刻度线的标尺组成，且在各标尺之间分别设置有多个横向和纵向滑动尺图标；

S102、针对设计模板中的每个设定部分，接收用户输入的滑动指令；

S103、根据用户输入的滑动指令，在该页面中，将滑动指令指定的横向滑动尺图标和/或纵向滑动尺图标移动至对应位置；

S104、将滑动后的各滑动尺图标之间圈定的范围作为该设定部分所在的范围，完成该设定部分的设计。

本申请实施例中，用户界面包括但不限于：软件界面、网页页面等。

上述S102中，针对设计模板中的每个设定部分，例如，视频网页视频播放的窗口的设计，可以提示用户：“请调整滑尺以确定该部分所在的位置”，用户可根据自己对于易用性较好的网页的记忆，拖动滑尺图标至固定位置，即发出了滑动指令。

上述S103中，需要解析用户输入的滑动指令中携带的滑动尺标识、滑动方向和滑动位移；

根据滑动尺标识，确定需要发生滑动的滑动尺图标；

根据需要发生滑动的滑动尺图标当前在标尺上的起始位置、滑动方向和滑动位移，计算出滑动尺图标在标尺上的目的位置，并将滑动尺图标移动至该滑动尺在标尺上的目的位置。

上述S104中，滑动后的各滑动尺之间圈定的范围通过下述方式确定：

根据滑动后的横向滑动尺图标和/或纵向滑动尺图标在标尺上的目的位置，确定各滑动尺之间圈定的范围的边界坐标。

举例来说，需要设计网页中视频播放窗在布局中的位置，假设横向滑尺的数量和纵向滑尺的数量均为2个，那么在滑尺滑动到固定位置之后，四个滑尺之间圈定范围即该视频播放窗口所在的位置。

在第一种方式下，本申请实施例提供的用户界面的设计方法，可以应用于用户界面设计初步完成之后，对用户界面进行测试调整的过程中，如图2所示，该方法包括如下步骤：

S201、向用户显示待测试的用户界面；

S202、在关闭待测试的用户界面后，向用户推送测试页面；

测试页面的外框由多个标识有刻度线的标尺组成，且在各标尺之间分别设置有多个横向和纵向滑动尺图标；

S203、针对待测试的用户界面的每个设定部分，接收用户输入的滑动指令，将滑动指令指定的横向滑动尺图标和/或纵向滑动尺图标移动至对应位置；

S204、接收用户在滑动后的各滑动尺图标之间圈定的范围中输入的绘图指令，在所述圈定的范围内绘制该设定部分对应的图形；

S205、将绘制的图形，与待测试的用户界面中该设定部分相比较，并根据比较结果确定是否需要调整该设定部分。

上述S201～S205中提及的用户，是指在参与用户界面测试过程的用户。

上述S201和S202中，可以给用户显示待测试的用户界面，然后在设定的时间之后关闭，此时向用户推送用户检测该待测试的用户界面的测试页面，该测试页面与S101中的页面的内容类似，测试页面具有外框，外框由多个标识有刻度线的标尺组成，且在各标尺之间分别设置有多个横向和纵向滑动尺图标；滑动尺上也有刻度线。

上述S203，需要用户根据自己对待测试的用户界面的记忆，在测试页面上通过滑尺圈出特定部分所在的区域。

例如用户观看的待测试的用户界面为视频网站的网页，针对视频网站网页上的视频播放窗口，用户凭记忆，在测试页面上，利用滑尺图标，滑动横向和/或纵向滑尺图标，从而圈出对应的位置，即发出了滑动指令。

上述S203中将滑动指令指定的横向滑动尺图标和/或纵向滑动尺图标移动至对应位置的具体实施过程，与上述S103相同，在此不再赘述。

接下来，S204中，用户需要在滑尺圈定的范围内，凭自己对于待测试的用户界面的记忆，进一步地绘制出该设定部分对应的图形，例如，具体绘制该设定部分各主要功能组件对应的子图形。

在测试页面中，可以提供不同形状的图形由用户直接选择，例如，用户在滑尺圈定范围内，用户使用不同形状的子图形(例如圆形、方块等)来代表视频播放窗口的节目选项窗口、播放/暂停按钮、停止按钮、进度条窗口等。又如用户使用方框+文字的方式，分别绘制电子商务网页中商品介绍部分的商品价格栏、尺码选项栏、颜色选项栏、数量选项栏及付款方式栏等。

这样，测试软件可根据用户输入的针对其观看过的待测试的用户界面中该设定部分中各功能组件的绘图指令，在滑尺圈定的范围内绘制出该设定部分各功能组件对应的子图形。

在上述S205中，将在测试页面中绘制该设定部分对应的图形，与待测试的用户界面中该设定部分相比较，可以是位置的比较，也可以是具体细节的比较。

位置的比较的目的，在于评价待测试的用户界面中该设定部分的布置位置，是否具备普遍的易用性，具体比较的过程如下：

1)将绘制的该设定部分对应的图形在测试页面中所占的范围，与该设定部分在待测试的用户界面中所占范围相比较，确定绘制的图形所占的范围和该设定部分在待测试的用户界面中所占范围之间的重叠部分；

2)计算该设定部分在所述待测试的用户界面中所占范围的面积大小，以及根据所述标尺和所述滑尺上的刻度，计算出重叠部分的面积大小；

3)计算该重叠部分的面积大小与该设定部分在所述待测试的用户界面中所占范围的面积大小之间的比值；

4)当计算出的比值大于设定的阈值时，确定不需要调整该设定部分；否则，确定需要调整该设定部分。

用户在测试页面上绘制的与该设定部分对应的图形与改设定部分在待测试的用户界面上的位置重合度越大，则认为该设定部分在待测试的用户界面上设置的位置越具有易用性，反之，如果用户在测试页面上绘制的与该设定部分对应的图形与改设定部分在待测试的用户界面上的位置重合度较小甚至完全不重合，则认为该设定部分的位置设置不具有易用性，需要进行调整。

在对于该设定部分位置布置的易用性进行测试之后，还可以利用该测试页面，对于该设定部分的设计细节进行测试。具体实现过程如下：

将绘制的各功能组件对应的子图形，与待测试的用户界面中该设定部分进行比较，如果滑动尺圈定的范围内，未包含某个功能组件的子图形，那么认为该功能组件的设计缺乏易用性，需要进行进一步地调整，例如，删除该功能组件、编辑该功能组件在该设定部分中的位置、形状、大小、颜色等方式达到调整的目的。

上述S201～S205中，在整个用户界面设计过程中，可以执行多次，直至整个用户界面的各部分都具备普遍的易用性标准。

基于同一申请构思，本申请实施例还提供了用户界面的设计装置，由于该装置所解决问题的原理与前述用户界面的设计方法的第一种方式相似，因此该装置的实施可以参见前述方法的实施，重复之处不再赘述。

本申请实施例提供的用户界面的设计装置之一，如图3所示，包括：

推送模块301，用于根据用户发出的设计指令，向其返回包含用户界面的设计模板的页面；该设计模板的外框由多个标识有刻度线的标尺组成，且在各标尺之间分别设置有多个横向和纵向滑动尺图标；

接收模块302，用于针对设计模板中的每个设定部分，接收用户输入的滑动指令；

滑动执行模块303，用于在该页面中，将滑动指令指定的横向滑动尺图标和/或纵向滑动尺图标移动至对应位置；

设计模块304，用于将滑动后的各滑动尺图标之间圈定的范围作为该设定部分所在的范围，完成该设定部分的设计。

进一步地，上述滑动执行模块303，具体用于解析用户输入的滑动指令中携带的滑动尺标识、滑动方向和滑动位移；根据所述滑动尺标识，确定需要发生滑动的滑动尺图标；根据所述需要发生滑动的滑动尺图标当前在所述标尺上的起始位置、所述滑动方向和滑动位移，计算出所述滑动尺图标在所述标尺上的目的位置，并将所述滑动尺图标移动至所述目的位置。

进一步地，上述滑动执行模块303，进一步用于根据滑动后的横向滑动尺图标和/或纵向滑动尺图标在标尺上的目的位置，确定各滑动尺之间圈定的范围的边界坐标。

本申请实施例提供的用户界面的设计装置之二，如图4所示，包括：

推送模块401，用于向用户显示待测试的用户界面；以及在关闭待测试的用户界面后，向该用户推送测试页面，测试页面的外框由多个标识有刻度线的标尺组成，且在各标尺之间分别设置有多个横向和纵向滑动尺图标；

接收模块402，用于针对待测试的用户界面的每个设定部分，接收用户输入的滑动指令；以及接收用户在滑动后的各滑动尺图标之间圈定的范围中输入的绘图指令；

滑动执行模块403，用于将滑动指令指定的横向滑动尺图标和/或纵向滑动尺图标移动至对应位置；

绘图模块404，用于根据所述绘图指令，在各滑动尺图标之间圈定的范围内绘制该设定部分对应的图形；

调整模块405，用于将绘制的图形，与待测试的用户界面中该设定部分相比较，并根据比较结果确定是否需要调整该设定部分。

进一步地，上述调整模块405，具体用于将绘制的图形所占的范围，与该设定部分在待测试的用户界面中所占范围相比较，确定绘制的图形所占的范围和该设定部分在待测试的用户界面中所占范围之间的重叠部分；计算该设定部分在待测试的用户界面中所占范围的面积大小，以及根据标尺和滑尺上的刻度，计算出重叠部分的面积大小；计算重叠部分的面积大小与该设定部分在待测试的用户界面中所占范围的面积大小之间的比值；当计算出的比值大于设定的阈值时，确定不需要调整该设定部分；否则，确定需要调整该设定部分。

进一步地，上述接收模块402，具体用于接收用户针对其观看过的待测试的用户界面中该设定部分中各功能组件的绘图指令；

上述绘图模块404，具体用于解析绘图指令，在各滑尺圈定的范围内分别绘制绘图指令指定的各功能组件对应的子图形。

进一步地，上述调整模块405，还用于当确定需要调整该设定部分时，根据绘制的图形所在测试页面中的位置，调整该设定部分在待测试的用户界面中的位置；以及将绘制的各功能组件对应的子图形，与待测试的用户界面中该设定部分进行比较，对于未包含在绘制的子图形中的功能组件进行调整。

本领域技术人员可以理解附图只是一个优选实施例的示意图，附图中的模块或流程并不一定是实施本申请所必须的。

本领域技术人员可以理解实施例中的装置中的模块可以按照实施例描述进行分布于实施例的装置中，也可以进行相应变化位于不同于本实施例的一个或多个装置中。上述实施例的模块可以合并为一个模块，也可以进一步拆分成多个子模块。

上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。

第二种方式：

在此种方式下，本申请实施例提供的用户界面的设计方法，采用实体的辅助工具的方式，提高所设计的用户页面的易用性。其具体依据的原理与第一种方式类似，在此不再赘述。

该方法可以应用于用户界面设计之初，如图5所示的流程，包括如下步骤：

S501、向用户提供辅助工具；

该辅助工具包括背板、设置在背板边缘的边框以及在横向和纵向布置的多个滑尺，滑尺的两端与边框滑动连接；

S502、针对待设计的用户界面中的每个设定部分，用户滑动该辅助工具上的滑尺至所需位置；

S503、将滑动后的各滑动尺图标之间圈定的范围作为该设定部分在待设计的用户界面中的范围，完成待设计的用户界面中该设定部分的设计。

该方法还可以应用于用户界面完成初步设计需要进行测试调整的过程中，如图6所示的流程，包括如下步骤：

S601、向用户显示待测试的用户界面；

S602、在关闭待测试的用户界面后，为用户提供辅助工具；

该辅助工具包括背板、设置在背板边缘的边框以及在横向和纵向布置的多个滑尺，滑尺的两端与边框滑动连接；

S603、针对待测试的用户界面中的每个设定部分，用户滑动辅助工具上的滑尺，并在测试工具的背板上各滑尺之间圈成的范围内绘制其观看到的该设定部分对应的图形；

S604、将用户在测试工具的背板上绘制的图形，与待测试的用户界面中该设定部分相比较，并根据比较结果确定是否需要调整该设定部分。

本申请实施例还提供了一种应用于如图5和图6所示的用户界面设计的方法的专用辅助装置，如图7所示，该装置包括：背板1、设置在背板1边缘的边框2以及在横向和纵向布置的多个滑尺3；

其中，滑尺3的两端与边框2滑动连接。

较佳地，边框2和滑尺3上设置有刻度。

较佳地，滑尺3的末端设置有滑套4，滑尺3通过滑套4与边框2滑动连接。

进一步地，滑套上还设置有夹子5，夹子5可以将该辅助装置固定于纸张上，或者固定于进行用户界面设计的电脑显示屏上。

进一步地，横向滑尺和纵向滑尺的数量分别为2个。

本申请实施例提供的用户界面的设计方法及装置，利用迁移恰当加工理论，在用户界面设计之初，用户可利用滑尺，圈定用户界面中特定部分具有易用性的位置，在用户界面完成初步设计，进行测试调整过程中，用户还可利用滑尺，根据已观看过的待测试的用户界面，圈定特定部分所在的位置并绘制出该特定部分的具体细节，设计者可根据用户绘制的该特定部分的图形，与待测试的用户界面中该特定部分所在范围的重合度以及细节的符合度，确定该设定部分的设计是否具有易用性，本申请实施例提供的用户界面设计方法及装置，在设计过程中由于使用了可客观地、准确地反映出该用户界面的是否具有较好的使用效果的辅助手段，从而进一步提高了用户界面的易用性。

显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。

Claims (18)

1.一种用户界面的设计方法，其特征在于，包括：

根据设计指令，向其返回包含用户界面的设计模板的页面；所述设计模板的外框由多个标尺组成，且在各标尺之间分别设置有多个横向和纵向滑动尺图标；

针对设计模板中的每个设定部分，接收用户输入的滑动指令，在所述页面中，将所述滑动指令指定的横向滑动尺图标和/或纵向滑动尺图标移动至对应位置；

将滑动后的各滑动尺图标之间圈定的范围作为该设定部分所在的范围，完成该设定部分的设计。

2.如权利要求1所述的方法，其特征在于，根据滑动指令，将所述滑动指令指定的滑动尺图标移动至对应位置，具体包括：

解析滑动指令中携带的滑动尺标识、滑动方向和滑动位移；

根据所述滑动尺标识，确定需要发生滑动的滑动尺图标；

根据所述需要发生滑动的滑动尺图标当前在所述标尺上的起始位置、所述滑动方向和滑动位移，计算出所述滑动尺图标在所述标尺上的目的位置，并将所述滑动尺图标移动至所述目的位置。

3.如权利要求1或2所述的方法，其特征在于，滑动后的各滑动尺之间圈定的范围通过下述方式确定：

根据滑动后的横向滑动尺图标和/或纵向滑动尺图标在所述标尺上的目的位置，确定各滑动尺之间圈定的范围的边界坐标。

4.一种用户界面的设计方法，其特征在于，包括：

向用户显示待测试的用户界面；

在关闭所述待测试的用户界面后，向所述用户推送测试页面，所述测试页面的外框由多个标尺组成，且在各标尺之间分别设置有多个横向和纵向滑动尺图标；

针对待测试的用户界面的每个设定部分，接收用户输入的滑动指令，将滑动指令指定的横向滑动尺图标和/或纵向滑动尺图标移动至对应位置；

接收用户在滑动后的各滑动尺图标之间圈定的范围中输入的绘图指令，在所述圈定的范围内绘制该设定部分对应的图形；

将绘制的图形，与所述待测试的用户界面中该设定部分相比较，并根据比较结果确定是否需要调整该设定部分。

5.如权利要求4所述的方法，其特征在于，将绘制的图形，与待测试的用户界面中该设定部分相比较，并根据比较结果确定是否需要调整该设定部分，具体包括：

将绘制的图形所占的范围，与该设定部分在待测试的用户界面中所占范围相比较，确定绘制的图形所占的范围和该设定部分在待测试的用户界面中所占范围之间的重叠部分；

计算该设定部分在所述待测试的用户界面中所占范围的面积大小，以及根据所述标尺和所述滑尺上的刻度，计算出所述重叠部分的面积大小；

计算所述重叠部分的面积大小与所述设定部分在所述待测试的用户界面中所占范围的面积大小之间的比值；

当所述比值大于设定的阈值时，确定不需要调整该设定部分；否则，确定需要调整该设定部分。

6.如权利要求4或5所述的方法，其特征在于，所述绘图指令，为用户针对其观看过的待测试的用户界面中该设定部分中各功能组件的绘图指令；

在所述圈定的范围内绘制所述设定部分对应的图形，具体包括：

解析所述绘图指令，在所述圈定的范围内分别绘制所述绘图指令指定的各功能组件对应的子图形。

7.如权利要求6所述的方法，其特征在于，还包括：当确定需要调整该设定部分时，根据绘制的图形所在测试页面中的位置，调整所述设定部分在待测试的用户界面中的位置；

以及将绘制的各功能组件对应的子图形，与待测试的用户界面中该设定部分进行比较，对于未包含在绘制的子图形中的功能组件进行调整。

8.一种用户界面的设计装置，其特征在于，包括：

推送模块，用于根据设计指令，向其返回包含用户界面的设计模板的页面；所述设计模板的外框由多个标尺组成，且在各标尺之间分别设置有多个横向和纵向滑动尺图标；

接收模块，用于针对设计模板中的每个设定部分，接收用户输入的滑动指令；

滑动执行模块，用于在所述页面中，将所述滑动指令指定的横向滑动尺图标和/或纵向滑动尺图标移动至对应位置；

设计模块，用于将滑动后的各滑动尺图标之间圈定的范围作为该设定部分所在的范围，完成该设定部分的设计。

9.如权利要求8所述的装置，其特征在于，滑动执行模块，具体用于解析用户输入的滑动指令中携带的滑动尺标识、滑动方向和滑动位移；根据所述滑动尺标识，确定需要发生滑动的滑动尺图标；根据所述需要发生滑动的滑动尺图标当前在所述标尺上的起始位置、所述滑动方向和滑动位移，计算出所述滑动尺图标在所述标尺上的目的位置，并将所述滑动尺图标移动至所述目的位置。

10.如权利要求9所述的装置，其特征在于，所述滑动执行模块，进一步用于根据滑动后的横向滑动尺图标和/或纵向滑动尺图标在所述标尺上的目的位置，确定各滑动尺之间圈定的范围的边界坐标。

11.一种用户界面的设计装置，其特征在于，包括：

推送模块，用于向用户显示待测试的用户界面；以及在关闭所述待测试的用户界面后，向所述用户推送测试页面，所述测试页面的外框由多个标尺组成，且在各标尺之间分别设置有多个横向和纵向滑动尺图标；

接收模块，用于针对待测试的用户界面的每个设定部分，接收用户输入的滑动指令；以及接收用户在滑动后的各滑动尺图标之间圈定的范围中输入的绘图指令；

滑动执行模块，用于将滑动指令指定的横向滑动尺图标和/或纵向滑动尺图标移动至对应位置；

绘图模块，用于根据所述绘图指令，在所述圈定的范围内绘制该设定部分对应的图形；

调整模块，用于将绘制的图形，与所述待测试的用户界面中该设定部分相比较，并根据比较结果确定是否需要调整该设定部分。

12.如权利要求11所述的装置，其特征在于，所述调整模块，具体用于将绘制的图形所占的范围，与该设定部分在待测试的用户界面中所占范围相比较，确定绘制的图形所占的范围和该设定部分在待测试的用户界面中所占范围之间的重叠部分；计算该设定部分在所述待测试的用户界面中所占范围的面积大小，以及根据所述标尺和所述滑尺上的刻度，计算出所述重叠部分的面积大小；计算所述重叠部分的面积大小与所述设定部分在所述待测试的用户界面中所占范围的面积大小之间的比值；当所述比值大于设定的阈值时，确定不需要调整该设定部分；否则，确定需要调整该设定部分。

13.如权利要求11或12所述的装置，其特征在于，所述接收模块，具体用于接收用户针对其观看过的待测试的用户界面中该设定部分中各功能组件的绘图指令；

所述绘图模块，具体用于解析所述绘图指令，在所述圈定的范围内分别绘制所述绘图指令指定的各功能组件对应的子图形。

14.如权利要求13所述的装置，其特征在于，所述调整模块，还用于当确定需要调整该设定部分时，根据绘制的图形所在测试页面中的位置，调整所述设定部分在待测试的用户界面中的位置；以及将绘制的各功能组件对应的子图形，与待测试的用户界面中该设定部分进行比较，对于未包含在绘制的子图形中的功能组件进行调整。

15.一种用户界面的设计方法，其特征在于，包括：

向用户提供辅助工具，所述辅助工具包括背板、设置在背板边缘的边框以及在横向和纵向布置的多个滑尺，所述滑尺的两端与所述边框滑动连接；

针对待设计的用户界面中的每个设定部分，用户滑动所述辅助工具上的滑尺至所需位置；

将滑动后的各滑动尺图标之间圈定的范围作为该设定部分在待设计的用户界面中的范围，完成待设计的用户界面中该设定部分的设计。

16.一种用户界面的设计方法，其特征在于，包括：

向用户显示待测试的用户界面；

在关闭所述待测试的用户界面后，为用户提供辅助工具，所述辅助工具包括背板、设置在背板边缘的边框以及在横向和纵向布置的多个滑尺，所述滑尺的两端与所述边框滑动连接；

针对待测试的用户界面中的每个设定部分，用户滑动所述辅助工具上的滑尺，并在所述测试工具的背板上各滑尺之间圈成的范围内绘制其观看到的该设定部分对应的图形；

将用户在所述背板上绘制的图形，与所述待测试的用户界面中该设定部分相比较，并根据比较结果确定是否需要调整该设定部分。

17.一种应用于如权利要求15或16所述的用户界面设计的方法的专用辅助装置，其特征在于，包括：背板、设置在背板边缘的边框以及在横向和纵向布置的多个滑尺；

所述滑尺的两端与所述边框滑动连接。

18.如权利要求17所述的专用辅助装置，其特征在于，所述滑尺的末端设置有滑套，所述滑尺通过其末端的滑套与所述边框滑动连接。

Images