CN110366723A - 用分层标识符来表示图形用户界面元素的位置 - Google Patents

用分层标识符来表示图形用户界面元素的位置 Download PDF

Info

Publication number
CN110366723A
CN110366723A CN201880013633.2A CN201880013633A CN110366723A CN 110366723 A CN110366723 A CN 110366723A CN 201880013633 A CN201880013633 A CN 201880013633A CN 110366723 A CN110366723 A CN 110366723A
Authority
CN
China
Prior art keywords
page
subregion
graphic element
region
area
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Withdrawn
Application number
CN201880013633.2A
Other languages
English (en)
Inventor
A·雷
J·G·阮
A·Y·拉布奈茨
M·B·莫尔多韦安
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Microsoft Technology Licensing LLC
Original Assignee
Microsoft Technology Licensing LLC
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Microsoft Technology Licensing LLC filed Critical Microsoft Technology Licensing LLC
Publication of CN110366723A publication Critical patent/CN110366723A/zh
Withdrawn legal-status Critical Current

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00Handling natural language data
    • G06F40/10Text processing
    • G06F40/12Use of codes for handling textual entities
    • G06F40/14Tree-structured documents
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/04817Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00Handling natural language data
    • G06F40/10Text processing
    • G06F40/12Use of codes for handling textual entities
    • G06F40/137Hierarchical processing, e.g. outlines
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00Handling natural language data
    • G06F40/10Text processing
    • G06F40/166Editing, e.g. inserting or deleting
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0482Interaction with lists of selectable items, e.g. menus

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Health & Medical Sciences (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Artificial Intelligence (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)
  • Document Processing Apparatus (AREA)

Abstract

描述了与通过对分层位置标识符的使用来表示与图形元素在页面中的位置相关的技术。设计画布使用区域、分区、和子分区来表示页面,其中,一个区域包括1‑m个分区,一个分区包括1‑p个子分区。图形元素在子分区中的位置以元组的形式被表示为分层位置标识符。分层位置标识符包括区域的索引值、分区的索引值、和子分区的索引值。当渲染页面时,图形元素基于其分层位置标识符而在页面中被定位。

Description

用分层标识符来表示图形用户界面元素的位置
背景技术
当前存在被配置为允许组织中的用户创建页面的基于web(网络)的应用,其中,基于web的应用允许组织中的用户设计被配置为向其他用户呈现与组织密切相关的内容的页面。在非限制性示例中,基于web的应用可以向用户提供设计画布,其中,设计画布是被配置为促进对组织的页面的创建(和设计)的图形工具。更加具体地,设计画布是用户可以采用以将一个或多个图形元素在页面上定位的图形工具,其中,图形元素可以是文本、图像、视频、微件(widget)等。例如,图形元素可以是微件,当渲染页面时,该微件被配置为获取组织的雇员目录并使得雇员目录被呈现在页面中。
被配置为促进页面的创建的传统设计画布限制了图形元素可以位于页面上的位置。例如,使用传统设计画布,用户无法并排放置两个微件。该限制可能产生美学上令人不悦的页面以及对显示不动产的次优使用。
另外,一旦采用传统的设计画布来发布包括若干图形元素的页面,则对用户而言,修改页面的设计就很麻烦。例如,如果用户希望在页面中的两个现有图形元素之间包括新的图形元素,则设计画布需要用户从页面中删除将出现在期望插入的图形元素下方的所有图形元素,并且接着以用户所期望的顺序重新插入图形元素。如果用户希望将图形元素在页面中重新排序,则存在相同的问题。
更进一步地,传统设计画布使用定义的(X,Y)坐标来表示图形元素的位置,这是由于设计画布直接将图形元素嵌入页面中。由此,无论用于显示页面的显示窗口的大小如何,该页面都以相同的方式被显示(这可能使得某些页面在某些显示窗口中被次优地呈现)。因此,如果用户期望页面在相对小的显示器(例如,移动计算设备的显示器)上在美学上令人愉悦,则用户必须设计完全独立的页面。
发明内容
以下是在本文中更加详细地描述的主题的简要概述。该概要不旨在关于权利要求的范围进行限制。
在本文中所描述的是与基于web的设计画布有关的各种技术,所述基于web的设计画布是被配置为促进页面(例如,网页)的创建的图形工具。在示例中,设计画布可以特别适合于创建企业内部的页面。相比于不灵活地(例如,使用静态(X,Y)坐标)表示页面中的图形元素的位置信息的传统设计画布,在本文中所描述的设计画布分层地表示图形元素的位置信息。更加特别地,设计画布使用区域、分区、和子分区来对页面进行建模。例如,设计画布将页面建模为包括1到n个区域,其中,每个区域包括1到m个分区,并且每个分区包括1到p个子分区。应当理解的是,页面中的两个区域可以包括不同数量的分区;因此,第一区域可以包括一个分区,而第二区域可以包括四个分区。同样地,不同的分区可以包括不同数量的子分区(例如,第一分区可以包括两个子分区,而第二分区可以包括五个子分区)。设计画布还允许用户定制分区、和/或子分区的大小。例如,可以将权重分配给分区,其中,该分区的大小(例如,水平地)是基于该权重的。例如,当每个区域可以包括多达m个分区时,能够给予分区的最大权重可以是m(指示该分区最多占据整个区域),而最小权重可以是由此,分配给区域中的分区的权重指示该分区的绝对(水平)大小,以及该分区相对于该区域中的另一分区的(水平)大小。
此外,如前所述,每个分区可以包括p个子分区,其中,置于子分区中的图形元素的大小可以是基于该分区的大小和该分区中的其他子分区的数量的。当设计画布的用户指示要将图形元素置于特定的子分区中时,设计画布可以使用分层位置标识符来表示图形元素在页面中的位置,该分层位置标识符包括区域索引值、分区索引值、和子分区索引值,其中,这些值表示所述区域、分区、和子分区在页面上的位置(以及相对于其他区域、分区和子分区的位置)。由此,当图形元素位于第一区域的第一分区中的第一子分区中时,设计画布可以使用分层位置标识符(1,1,1)来表示图形元素的位置。类似地,当第二图形元素位于第一区域的第二分区的第一子分区中时,设计画布可以使用分层位置标识符(1,2,1)来表示第二图形元素的位置。
这种用于以分层方式表示图形元素的位置的方法具有优于传统设计画布所使用的方法的各种优点。具体地,设计画布确保单调地增加图形元素的位置索引,这使得新的图形元素能够容易地被添加到现有页面,并且还允许对现有图形元素的容易的重新排序。例如,在两个现有区域Z1与Z2之间添加新的区域Znew包括创建新区域索引值,其中,该新区域索引值可以是被分配给Z1和Z2的区域索引值之间的任何值,以及将其添加至页面的位置索引。此外,一旦该页面被发布,则该页面的布局状态可以以下列格式保持:[Z1[S1[Wl,W2...],S2[W1...]...],Z2...],其中,{Z:区域,S:分区,W:子分区}。因此,当客户端计算设备渲染页面时,可以容易地解构所述布局信息。更进一步地,将页面的布局表示为森林允许图形元素的渐近最优的获取时间,由此使得更优化的对比(diffing)算法能够识别在页面中关于其布局的改变(例如,自页面上次被更新以来从页面添加或删除了哪些区域、分区、和/或图形元素)。
以上概述呈现了简化的概述,以便提供对在本文中所讨论的系统和/或方法的一些方面的基本理解。该发明内容不是在本文中所讨论的系统和/或方法的广泛的概述。其不旨在标识系统和/或方法的关键/重要元素或者描绘这样的系统和/或方法的范围。其唯一的目的是以简化的形式呈现一些概念,以作为之后所呈现的更加详细的说明的前序。
附图说明
图1是促进构建页面的示例性计算系统的示意图。
图2是示出了示例性设计画布的示意图。
图3是另一示例性设计画布的示意图。
图4是示出了渲染页面的客户端计算设备的示意图。
图5示出了第二大小的显示器上的页面的显示。
图6是示出了第三大小的显示器上的页面的显示的示意图。
图7是示出了促进基于页面的区域分区或子分区中的文本来对页面进行排名的示例性系统的示意图。
图8是示出了对示例性片段的生成的示意图。
图9是示出了用于以分层方式来编码图形元素在页面上的位置的示例性方法的流程图。
图10是示出了用于在显示器上渲染页面的示例性方法的流程图。
图11示出了示例性计算系统。
具体实施方式
现在参考附图来描述与分层地表示页面的图形元素的位置的设计画布有关的各种技术,其中,通篇中相同的附图标记用于指代相同的元素。在以下的说明中,出于解释说明的目的,阐述了多种具体细节以便提供对一个或多个方面的彻底的理解。然而,显然的是,可以在没有这些具体的细节的情况下而实践这样的方面。在其他实例中,以框图形式示出了公知的结构和设备以便促进对一个或多个方面的描述。此外,应当理解的是,被描述为由某些系统组件所实行的功能可以由多个组件来执行。类似地,例如,一个组件可以被配置为执行被描述为由多个组件实行的功能。
此外,术语“或”旨在表示包含性的“或”,而不是排除性的“或”。即,除非另外指定或者从上下文中清楚,否则短语“X采用A或B”旨在表示自然的包含性排列中的任何一个。即,以下实例中的任何一个都满足短语“X采用A或B”:X采用A;X采用B;或者X采用A和B两者。此外,除非另外指定或者从上下文中清楚以指向单数形式,否则如在该申请和所附权利要求书中所使用的冠词“一个”和“一”应该一般地被解释为表示“一个或多个”。
此外,如本文所使用的,术语“组件”、“模块”和“系统”旨在涵盖用计算机可执行指令编码的计算机可读数据存储单元,所述计算机可执行指令使得当处理器被执行时实行某些功能。计算机可执行指令可以包括例程、函数等。还应当理解的是,组件、模块、或系统可以位于单个设备上或者跨几个设备分布。此外,如在本文中所使用的,术语“示例性的”旨在表示充当某事物的说明或示例,并且不旨在指示偏好。
在本文中所描述的是与设计画布有关的各种技术,所述设计画布分层地表示图形元素在通过所述设计画布设计的页面中的位置。所述设计画布是促进设计页面的图形工具,其中,设计画布基于区域、分区、和(可选的)子分区来对(待设计的)页面的布局进行建模。更加具体地,设计画布将页面建模为包括1-n个区域,其中每个区域包括1-m分区,并且其中,每个分区包括1-p个子分区。使用该布局,设计画布使用区域、分区、和子分区索引来表示图形元素在页面中的位置。因此,图形在页面上的位置分层地并且相对于其他图形元素在页面上的位置被表示。以该方式表示图形元素位置允许与传统设计画布可能的相比较不繁琐的页面编辑(添加和移除图形元素)。此外,分层地表示图形元素位置促进图形元素在多种显示窗口大小的页面中的灵活呈现。
现在参考图1,示出了促进设计计算机实现的页面的示例性系统100。所述页面可以是通过计算机可执行应用(例如,web浏览器或其他合适的计算机可执行应用)在显示器上呈现的网页或其他合适的页面。系统100包括通过网络连接106与主机计算设备104进行通信的客户端计算设备102。客户端计算设备102包括处理器108和存储器110,其中,存储器110具有加载在其中的页面设计系统112。在非限制性示例中,存储器110可以具有加载在其中的web浏览器或其他基于web的应用,其可以被引导至主机计算设备104(例如,通过对应于主机计算设备104的统一资源定位符(URL))。接着,主机计算设备104可以将页面设计系统112发送至客户端计算设备102,因此页面设计系统112被加载到客户端计算设备102的存储器110中。
客户端计算设备102还包括显示器114,其中,页面设计系统112当由处理器108执行时,可以使得设计画布116被呈现在显示器114上。页面设计系统112包括分层模块118,其以分层方式对页面的布局进行建模。例如,分层模块118可以将通过设计画布116所创建的页面的布局建模为包括1到n个区域,其中,每个区域包括1到m个分区,并且另外其中,每个分区包括1到p个子分区。应当理解的是,不同区域可以包括不同数量的分区(例如,第一区域可以包括三个分区,而第二区域可以包括五个分区)。还应当理解的是,不同的分区可以包括不同数量的子分区(例如,第一分区可以包括一个子分区,而第二分区可以包括四个子分区)。如在图1中所示,设计画布116被示出为描绘了页面的两个区域119和120(其中,区域119和120中的每个包括1到m个分区,并且所述分区中的每个分区包括1到p个子分区)。
页面设计系统112还包括保持性模块122,其被配置为使用分层位置标识符来保持图形元素的位置(如由用户通过设计画布116定义的)。根据示例,用户可以向设计画布116提出以下输入:第一区域119的第一分区中的第一子分区将要包括图形元素,其中,该图形元素可以是微件、视频、图像、文本等。保持性模块122可以使用(区域索引值、分区索引值、子分区索引值)的元组(例如,三元组)来表示图形元素在页面中的位置;在该示例中,所述元组可以是(1,1,1)。
接着,用户可以向页面设计系统112(通过设计画布116)提出:第一区域119的第二分区中的第一子分区将要包括第二图形元素。响应于接收到这样的输入,保持性模块122可以使用三元组(1,2,1)来表示第二图形元素的位置。保持性模块122可以使这些位置表示作为分层位置标识符124被存储在存储器110中,其中,所述分层位置标识符124中的每个分层位置标识符可以包括区域的索引值、分区的索引值、以及子分区的索引值。因此,当之后渲染页面时,每个图形元素可以在页面中位于由其分层位置标识符所表示的区域、分区、和子分区中。
此外,如先前所指示的,每个区域可以包括1-m个分区,其中,区域中的分区的大小可以由分配给该分区的权重来定义。例如,当区域中的某个分区被分配了权重m时,该区域包括单个分区,并且该分区占据整个区域。同样,当权重被分配给分区时,该区域中有l-(m-l)个另外的分区。换句话说,该分区占据了该区域的1/m。同样地,可以可选地给子分区分配指示子分区大小的权重。
现在提出系统100的示例性操作。客户端计算设备102的用户使得客户端计算设备102执行web浏览器,并且将web浏览器引导至主机计算设备104(其托管页面设计系统112)。主机计算设备104可以托管企业web应用,所述企业web应用可以被配置用于文档存储、页面托管、内容结构化等,其中,页面设计系统112是企业web应用的一部分。客户端计算设备102的用户可以将web浏览器引导至与页面设计系统112相对应的地址。主机计算设备104响应于web浏览器被引导至与主机计算设备104处的页面设计系统112相对应的地址而将页面设计系统112发送至客户端计算设备102。
页面设计系统112被加载在存储器110中,并且当由处理器108执行时,使得设计画布116被呈现在显示器114上。接着,客户端计算设备102的用户可以指示:由该用户设计的页面要包括图形元素,其中,所述图形元素将要被置于区域、分区、和子分区中,如上所述。设计画布116可以支持用于将图形元素定位在区域的分区的子分区中的多种技术。在示例中,设计画布116可以以图形方式描绘区域边界,并且用户可以提出定义区域中的分区的数量以及每个分区中的子分区的数量的输入。接着,设计画布116可以描绘该区域的分区和子分区的边界。接着,用户可以选择能够使得窗口被呈现的子分区(例如,右键单击),其中,所述窗口可以包括能够在所选择的子分区中被显示的多个图形元素。用户可以选择用于在子分区中呈现的图形元素,并且页面设计系统112可以使用分层位置标识符来表示该图形元素的位置。在另一示例中,设计画布116可以支持拖放(drag and drop)功能,其中,呈现图形元素的库,并且另外其中,用户可以从该库中选择图形元素并将其拖动至期望的子分区。响应于图形元素位于期望的子分区中,页面设计系统112使用分层位置标识符来表示图形元素的位置。
更加特别地,响应于接收到用户打算将图形元素在页面中置于区域、分区、和子分区中的指示,保持性模块122可以生成图形元素的分层位置标识符,其中,所述分层位置标识符指示图形元素位于由用户所标识的区域、分区、和子分区中。此外,在将图形元素置于子分区中之前或之后,用户可以提出关于分区、和/或子分区的大小的输入,并且页面设计系统112可以基于来自用户的输入来向该分区分配权重。可以针对用户指示要包括在页面中的每个图形元素来重复该过程。一旦用户设计了页面并且保持性模块122使用分层位置标识符124表示了图形元素在页面中的位置,则用户可以向页面设计系统112指示该页面将被发布。页面设计系统112使得所创建的页面(包括分层位置标识符124(或其表示))被发送至其中可以托管该页面的主机计算设备104。
现在参考图2,示出了设计画布116的示例性示意图。在设计画布116中,用户已经指示了通过设计画布116设计的要发布的页面将包括两个区域119和120。第一区域119包括两个分区202和204,而第二区域120包括三个分区206、208、和210。第一区域119的第一分区202包括两个子分区212和214,而第一区域119的第二分区204包括一个子分区216。第二区域120的第一分区206包括一个子分区218,第二区域120的第二分区208包括两个子分区220和222,而第二区域120的第三分区210包括一个子分区224。当通过设计画布116设计页面时,用户例如可以指示第一图形元素将位于子分区212中,第二图形元素将位于子分区214中,等等。
如在图2中所示,保持性模块122可以将分层位置标识符分配至位于所描绘的子分区中的图形元素。例如,可以为位于子分区212中的图形元素分配分层位置标识符(1,1,1),其中,权重被分配至分区202(因为分区202占据了第一区域119的空间的一半)。在另一示例中,位于子分区214中的图形元素可以具有分配至其的分层位置标识符(1,1,2),其中,分区202具有分配至分区202的权重位于子分区216中的图形元素可以具有分配至其的分层位置标识符(1,2,1),这是由于图形元素位于第一区域119的第二分区的第一子分区中。该分区204可以具有分配至其的权重这是由于分区204占据第一区域119的空间的一半。位于子分区218中的图形元素可以具有分配至其的分层位置标识符(2,1,1),其中,分区206具有分配至其的权重这是由于分区206占据了第二区域120的空间的1/4。当用户指示要发布该页面时,保持性模块122可以序列化分层位置标识符124,以使得它们采用1[1[1,2]],[2[1]]],[2[1[1]],[2[1,2]],[3[1]]]的形式。该格式允许应用(例如,web浏览器)在渲染结果页面时解构布局信息。
现在参考图3,示出了设计画布116的另一示例性描绘。图3描绘了对页面的编辑以包括第一区域119与第二区域120之间的第三区域302。将容易理解的是,当将第三区域302插入第一区域119与第二区域120之间时描述的原理还适用于在现有分区之间插入新的分区,在现有子分区之间插入新的子分区,对区域、分区或子分区重新排序,等等。根据示例,页面可以先前已经通过设计画布116发布。之后,终端用户(可以是或可以不是发布该页面的相同的终端用户)可以选择通过对设计画布300的使用来编辑页面,并指示第三区域302将被添加在该页面上并且位于第一区域119与第二区域120之间。
使用传统方法,如果用户想要在现有图形元素之间放置图形元素(如在图3中所示),则需要用户删除在将要插入的图形元素之后的所有图形元素,并且随后在合适的位置重新插入所删除的图形元素。使用在本文中所描述的分层布局方法,用户可以指示第三区域302将要位于第一区域119与第二区域120之间。接着,用户可以通过设计画布116指示第三区域将要包括单个分区304,并且分区304将要包括单个子分区306。用户还可以指示图形元素将位于子分区306中。
响应于从用户处接收到该输入,保持性模块122可以为区域302、分区304、和子分区306创建索引值。为了保持分层位置标识符的单调递增性质,保持性模块122可以为第三区域302生成索引值,以使得该值在第一区域119的索引与第二区域120的索引值之间。因此,如果第一区域119的索引值是Z1=1,并且第二区域120的索引值是Z2=2,则保持性模块122可以为第三区域创建索引值Z3=(Z1+Z2)/2=1.5。因此,保持性模块122可以将分层位置标识符(1.5,1,1)分配至位于第三区域302的分区304的子分区306中的图形元素。此外,如在图3中所指示的,当分区304占据第三区域302的整个空间时,分区304具有分配至其的权重m。
现在参考图4,示出了促进渲染通过设计画布116创建的页面的示例性系统400。系统400包括通过网络连接406彼此通信的客户端计算设备402和主机计算设备404。尽管未示出,但主机计算设备404可以托管通过设计画布116所创建的页面,如在图3中所示。客户端计算设备402可以是任何合适类型的计算设备,包括:台式计算设备、膝上型计算设备、平板计算设备、移动电话、可穿戴计算设备等。客户端计算设备402包括处理器408和存储器410,其中,存储器410具有加载在其中的应用412。例如,应用412可以是web浏览器,但是可以构想到其他类型的应用。
客户端计算设备402的用户指示应用412获取在主机计算设备404处托管的页面。主机计算设备将页面414发送至客户端计算设备402,其中,主机计算设备404利用页面414来发送布局数据416和对应的指令418。因此,尽管页面414被描绘为包括布局数据416和指令418,但是应当理解的是,布局数据416和指令418可以被认为在页面414外部。当客户端计算设备402接收到页面414时,页面414被加载到存储器410中。布局数据416是基于页面中的图形元素的分层位置标识符124的,并且可以具有上文所述的森林结构(以使得应用412可以解构布局数据416以识别页面414中的每个图形元素的分层位置标识符)。指令418被配置为通知以指示应用412关于如何基于布局数据416来渲染页面。
客户端计算设备402还包括显示器420,其中,应用412当由处理器408执行(并且基于布局数据416和指令418)时,使得页面414在显示器420上被渲染。当在显示器420上被显示时,页面414包括基于布局数据416而在页面414上被定位(并且相对于彼此定位)的多个图形元素422-436。例如,由于图形元素422-426均被包括在第一区域119中,因此图形元素422-426可以看起来属于页面414中的同一行。类似地,由于图形元素428在第三区域302中,因此图形元素428可以看起来存在于页面414上的不同行中。在图4中,页面414在其内被显示的显示窗口被假定为有些大,以使得每个区域中的图形元素可以被显示在同一行中。
现在参考图5,描绘了显示窗口500,其中,页面414被示出在显示窗口500内,并且另外其中,显示窗口500比页面414在其中被示出为在图4中被显示的显示窗口窄。例如,用户可以调整显示窗口的大小以使得显示窗口变小。在另一示例中,显示窗口500可以被示出在小于显示器420的显示器上,例如,用于平板(板式)计算设备的显示器。
在一个示例中,指令418可以指示:在具有小于显示窗口500的宽度的宽度的子分区中显示的图形元素将以其原始大小被显示,而在具有大于显示窗口500的宽度的宽度的子分区中显示的图形元素将减小大小,以使得整个图形元素可以在显示窗口500中被示出。实际上,在图4中所描绘的显示窗口中,区域和/或分区可以被视为是单个行,而在图5中,区域和/或分区可以包含多个行(子分区将不包含多于一行)。
在图5中所示出的示例中,由于显示窗口500已经变窄(当与在图4中所示出的显示窗口相比时),因此在显示窗口500中没有足够的水平空间供图形元素422-426以单行来呈现;因此,区域119在水平方向降低大小的同时竖直地扩展。应用412接收显示窗口500的宽度信息,并且接着使用指令418步进通过布局数据416,以在页面414上定位元素422-436并且调整元素422-436的大小。例如,应用412解构布局数据416并且根据分层位置标识符(1,1,1)来确定图形元素422将在页面414中被定位。应用412可以确定显示窗口500的宽度大于由(1,1,1)索引的子分区的宽度,并且因此,基于分层位置标识符(1,1,1)以其完整大小来渲染图形元素422。应用412转向分层位置标识符(1,1,2),并且确定显示窗口500的宽度大于由(1,1,2)索引的子分区的宽度。接着,应用412确定所述子分区的组合宽度是否大于显示窗口500的宽度;在该情况下,组合宽度小于显示窗口500的宽度,并且因此,根据分层位置标识符(1,1,2)定位的图形元素被渲染在与图形元素422相同的行中。
继续该示例,应用412步进至分层位置标识符(1,2,1),并且确定由这样的标识符索引的子分区的宽度小于显示窗口500的宽度。由此,这样的子分区中的图形元素426将要以完整大小被显示。然而,应用412可以确定第一区域119中的三个子分区的组合宽度大于显示窗口500的宽度;因此,应用可以在区域119中增加行,并且可以在该新的行中渲染图形元素426。因此,图形元素426位于图形元素422和424下方,而不是图形元素426在图形元素426的旁边被描绘(如图4所示)。
应用412此后步进到分层位置标识符(2,1,1),并且确定由这样的标识符索引的子分区的宽度大于显示窗口500的宽度。因此,应用412可以缩小该子分区,以使得其宽度对应于显示窗口500的宽度。接着,应用412可以在(大小减小的)子分区中渲染图形元素428。针对页面414的每个子分区来重复上述过程。如所描绘的,接着,被描绘为一个显示窗口中的单个行的区域和/或分区可以被描绘为另一显示窗口中的多个行。当应用412用于在显示器420上渲染页面414的布局数据416与任何形状因子无关时,启用该功能。因此,如在比较图4和5时所示出的,页面414的布局可以随着视口改变而动态且无缝地更新。因此,在示例中,T-宽中的多列布局可以被更新为T-窄中的单列布局。
现在参考图6,示出了在比显示窗口600窄的显示窗口500中对页面414的另一示例性渲染。页面414保留所有图形元素422-436(其中,图形元素434和436可以通过与滑块602的交互来访问)。如图所示,图形元素426和428已经变窄,这是由于图形元素426和428在其内存在的子分区具有大于显示窗口600的宽度的宽度。此外,由于包括这样的图形元素422和424的子分区的总宽度大于显示窗口600的宽度,因此图形元素422和424不再彼此并排显示。类似地,由于包括这样的元素430和432的子分区的总宽度大于显示窗口600的宽度,因此图形元素430和432不再彼此并排显示。图形元素422、424和430-436是以其原始大小被渲染的(由于包括这样的元素的子分区的宽度小于显示窗口600的宽度)。当表示图形元素在页面414中的位置时,由于分层位置标识符而不是不灵活的(X,Y)坐标的使用,因此改变所渲染的页面414的布局的能力是可能的。
现在参考图7,示出了被配置为基于所接收的查询相对于彼此对页面进行排名的示例性计算设备700。计算设备700包括数据存储单元702,数据存储单元702包括页面索引704。在页面索引704中索引的页面中的一个或多个页面可以具有与其对应的分层位置数据,如上文所描述的。此外,所述页面中的一个或多个页面的区域、分区、和/或子分区可以具有分配至其的文本。例如,区域、分区、和/或子分区可以可选地包括标题,其中,在渲染页面时所述标题可以或可以不提出以供显示。在页面索引704中,关键字可以索引一个或多个页面,并且还可以索引与关键字相对应的区域、分区、和/或子分区(其中,这样的关键字可以被包括在区域、分区、和/或子分区的标题中,其中,该关键字可以被包括在区域、分区、和/或子分区的内容中,等等)。由此,并且更加具体地,页面索引中的关键字可以索引页面,并且还可以被映射至该页面的区域、分区、和/或子分区。
计算设备700另外地包括处理器706和存储器708,其中,存储器708具有加载在其中的搜索模块710,并且其中,搜索模块710包括排名器712,排名器712被配置为基于所接收的查询和页面的特征相对于彼此对页面进行排名。在示例中,搜索模块710可以被配置为获取由所接收的查询中的一个或多个关键字索引的页面。排名器712可以确定该关键字是否被包括在该页面中的区域、分区、或子分区中,并且可以基于该关键字被包括在区域、分区、或子分区中而相对于其他页面对该页面进行排名。例如,排名器712可以基于(所接收的查询中的)该关键字在区域的标题、分区的标题、和/或子分区的标题中而向页面分配分数。
计算设备700被配置为将搜索结果返回至从其接收到查询的计算设备。在另一示例中,计算设备700可以被配置为识别页面中与关键字相对应的区域、分区、和/或子分区。当接收到搜索结果的计算设备的用户点击搜索结果时,该用户可以立即被引导至包括该用户所提出的查询中的关键字的区域、分区、或子分区。在这样的情况下,在渲染页面时,应用412可以利用布局数据416以使页面被加载,这使得包括在查询中所提出的关键字的区域、分区、或子分区被突出地显示在用户采用的计算设备的显示器上(例如,应用412自动地滚动以使得包括该关键字的区域、分区、或子分区在页面中居中)。
现在参考图8,示出了示例性计算设备800,其被配置为基于页面的布局数据来生成片段。计算设备800包括处理器802和存储器804,其中,存储器804包括由处理器802执行的片段生成器模块806。存储器804另外具有加载在其中的页面808,其中,该页面具有如在本文中已经描述的布局。在图8中所示出的示例中,页面808具有第一区域810和第二区域812,其中,第一区域810包括第一区域标题并且第二区域812包括第二区域标题。片段生成器模块806被配置为基于页面808的布局数据以及区域810和812的区域标题来生成页面808的片段814。片段814包括从页面808提取的被配置为概括页面808的内容的文本和/或影像。由于区域标题可假定为关于被包括在区域810和812中的图形元素的内容是描述性的,因此可假定片段生成器模块806可以利用这些区域标题的至少部分来生成片段814。
图9和图10示出了与创建和渲染页面有关的示例性方法,其中,采用分层位置标识符来表示图形元素在页面中的位置。尽管将方法示出并描述为按顺序执行的一系列动作,但应当理解并意识到,所述方法不受序列顺序的限制。例如,一些动作可以以不同于在本文中所描述的次序而发生。另外,动作可以与另一动作同时发生。此外,在一些实例中,不要求所有的动作都实现在本文中所描述的方法。
此外,在本文中所描述的动作可以是计算机可执行的指令,所述计算机可执行指令可以由一个或多个处理器来实现和/或被存储在计算机可读介质或多个介质上。计算机可执行指令可以包括例程、子例程、程序、执行的线程等。更进一步,可以将方法中的动作的结果存储在计算机可读存储介质中、显示在显示器设备上等。
现在转到图9,示出了促进设计页面的示例性方法900。方法900在902处开始,并且在904处,使得设计画布被显示在计算设备的显示器上。如上所述,可采用设计画布以基于来自计算设备的用户的输入来构造(设计)页面,其中,所述页面当被构建时,将在计算机可执行应用加载页面时显示。此外,如上所述,设计画布定义了页面上的区域以及区域内的分区。
在906处,通过设计画布接收以下指示:该页面当被构造时,将在分区中包括图形元素,其中,当计算机可执行应用加载该页面时,该图形元素将被显示在该页面中。在908处,响应于接收到这样的指示,基于区域和分区来在页面中定义该图形元素的位置,其中,所述计算机可执行应用在加载该页面时,基于区域和分区将该图形元素在该页面中定位。方法900在910处完成。
现在参考图10,示出了用于基于页面的分层布局数据在显示器上渲染页面的示例性方法1000。方法1000在1002处开始,并且在1004处,从主机计算设备获取页面,该主机计算设备与请求该页面的计算系统进行网络通信。该页面包括图形元素,并且基于图形元素的分层位置标识符来定义该图形元素在该页面中的位置。如前所述,该图形元素的分层位置标识符可以标识要在其内显示图形的区域和分区(和子分区)。在1006处,响应于获取了该页面,使得该页面被显示在显示器上,其中,所述图形当被显示时,基于分层位置标识符在该页面中被定位。方法1000在1008处完成。
现在参考图11,示出了可以根据在本文中所公开的系统和方法而使用的示例性计算设备1100的高级说明。例如,可以在支持设计网页的系统中使用计算设备1100。计算设备1100包括执行被存储在存储器1104中的指令的至少一个处理器1102。所述指令可以是例如用于实现被描述为由在上文中所讨论的一个或多个组件所实行的功能的指令,或者是用于实现在上文中所描述的方法中的一个或多个的指令。处理器1102可以通过系统总线1106来访问存储器1104。除了存储可执行指令之外,存储器1104还可以存储图形元素、分层位置标识符等。
计算设备1100另外地包括可以由处理器1102通过系统总线1106进行访问的数据存储1108。数据存储1108可以包括可执行指令、图形元素、分层位置标识符、页面索引等。计算设备1100还包括允许外部设备与计算设备1100进行通信的输入接口1110。例如,输入接口1110可以用于从外部计算机设备中、从用户处等接收指令。计算设备1100还包括将计算设备1100与一个或多个外部设备接合的输出接口1112。例如,计算设备1100可以通过输出接口1112来显示文本、图像等。
可以构想的是,环境中可以包括经由输入接口1110和输出接口1112与计算设备1100进行通信的外部设备,该环境提供了用户可以与其进行交互的大体上任何类型的用户接口。用户接口类型的示例包括图形用户界面、自然用户界面等。例如,图形用户界面可以从采用输入设备(例如,键盘、鼠标、遥控器等)的用户处接受输入,并且在诸如显示器之类的输出设备上提供输出。此外,自然用户界面可以使用户能够与计算设备1100以免受由输入设备(例如,键盘、鼠标、遥控器等)所施加的约束的方式进行交互。相反,自然用户界面可以依赖于话音识别、触摸和触摸笔识别、屏幕上的和邻近屏幕的手势识别、空中手势、头部和眼部追踪、语音和话音、视觉、触摸、手势、机器智能等。
另外地,尽管被示出为单个系统,但应当理解的是计算设备1100可以是分布式系统。因此,例如,几个设备可以通过网络连接进行通信,并且可以共同地执行被描述为由计算设备1100所执行的任务。
在本文中所描述的各种功能可以以硬件、软件、或任何其组合实现。如果以软件实现,则功能可以作为一个或多个指令或者代码被存储在计算机可读介质上或者通过计算机可读介质传输。计算机可读介质包括计算机可读存储介质。计算机可读存储介质可以是能够由计算机访问的任何可用的存储介质。作为示例而非限制,这样的计算机可读存储介质可以包括RAM、ROM、EEPROM、CD-ROM、或者其他光盘存储、磁盘存储或其他磁存储设备、或者可以用于携带或存储以指令或数据结构的形式的并且可以由计算机访问的期望的程序代码的任何其他介质。如在本文中所使用的,盘和碟包括压缩碟(CD)、激光碟、光碟、数字通用碟(DVD)、软盘、以及蓝光碟(BD),其中盘通常磁性地再现数据,而碟通常利用激光来光学地再现数据。此外,经传播的信号不被包括在计算机可读存储介质的范围内。计算机可读介质还包括通信介质,其包括有助于将计算机程序从一个地方传输到另一个地方的任何介质。连接可以例如是通信介质。例如,如果使用同轴电缆、光纤电缆、双绞线、数字订阅者线(DSL)、或者诸如红外、无线电、以及微波之类的无线技术将软件从网站、服务器、或者其他远程源中进行发送,则同轴电缆、光纤电缆、双绞线、数字订阅者线(DSL)、或者诸如红外、无线电、以及微波之类的无线技术被包括在通信介质的定义中。以上的组合也应该被包括在计算机可读介质的范围内。
可替代地或者另外,在本文中所描述的功能可以至少部分地由一个或多个硬件逻辑组件执行。例如而没有限制,可以被使用的硬件逻辑组件的说明性类型包括:现场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、片上系统(SoC)系统、复杂可编程逻辑设备(CPLD)等。
上文已经描述的内容包括一个或多个实施例的示例。当然,为了描述上文提到的方面的目的,不可能描述以上的设备或方法的每个能想到的修改和替代物,但是本领域技术人员可以想到,对各种方面的许多进一步的修改和排列是可能的。由此,所描述的方面旨在包含落在所附权利要求的精神和范围内的所有这样的替代物、修改、和变型。此外,就在具体实施方式或权利要求中所使用的术语“包括”的方面而言,这样的术语旨在以类似于术语“包含”的方式而是包含性的,如当作为权利要求中的转换词而被采用时所解释的“包含”那样。

Claims (15)

1.一种由计算设备的处理器执行的方法,所述方法包括:
使得设计画布被显示在所述计算设备的显示器上,所述设计画布可采用以基于来自所述计算设备的用户的输入来构造页面,其中,所述页面当被构造时,将在计算机可执行应用渲染所述页面时被显示,并且另外其中,所述设计画布定义所述页面上的区域以及所述区域内的分区;
通过所述设计画布来接收以下指示:所述页面当被构造时,将在所述分区中包括图形元素,其中,当所述计算机可执行应用渲染所述页面时,所述图形元素将被显示在所述页面中;以及
响应于接收到所述指示,利用标识所述区域和所述分区的分层位置标识符来表示所述图形元素在所述页面中的位置,其中,当渲染所述页面时,所述计算机可执行应用基于所述分层位置标识符将所述图形元素在所述页面中定位。
2.根据权利要求1所述的方法,其中,所述图形元素是微件。
3.根据权利要求1所述的方法,还包括:
通过所述设计画布来接收将应用于所述分区的分区权重,其中,所述分区权重相对于所述区域中其他分区的大小来定义所述分区的大小;以及
基于所述分区权重来表示所述图形元素在所述页面中的所述位置。
4.根据权利要求1所述的方法,其中,所述区域包括第二分区,所述方法还包括:
通过所述设计画布来接收以下第二指示:所述页面当被构造时,将在所述第二分区中包括第二图形元素,其中,当所述计算机可执行应用渲染所述页面时,所述图形元素将被显示在所述页面中;以及
响应于接收到所述第二指示,利用标识所述区域和所述第二分区的第二分层位置标识符来表示所述第二图形元素在所述页面中的第二位置,其中,当渲染所述页面时,所述计算机可执行应用基于所述第二分层位置标识符将所述第二图形元素在所述页面中定位。
5.根据权利要求1所述的方法,还包括:
通过所述设计画布来接收以下第二指示:所述页面当被构造时,将在所述分区中包括第二图形元素,其中,所述第二图形元素在所述分区中跟随所述图形元素,并且另外其中,当所述计算机可执行应用渲染所述页面时,所述第二图形元素将被显示在所述页面中;以及
响应于接收到所述第二指示,利用标识所述区域、所述分区、以及包括所述图形元素和所述第二图形元素的所述分区的第二分层标识符来表示所述第二图形元素在所述页面中的第二位置,其中,当渲染所述页面时,所述计算机可执行应用基于所述第二图形元素在所述分区中跟随所述图形元素将所述第二图形元素相对于所述图形元素进行定位。
6.根据权利要求1所述的方法,其中,所述位置被编码为三元组,所述三元组包括标识以下项的值:
所述区域相对于由所述设计画布定义的其他区域的位置;
所述分区相对于所述区域中的其他分区的位置;以及
所述图形元素相对于所述分区中其他图形元素的位置。
7.根据权利要求1所述的方法,其中,所述设计画布定义了多个区域,所述方法还包括:
接收用于在所述设计画布中的第一区域与第二区域之间插入所述区域的请求,其中,所述第一区域具有分配至其的第一数字索引值,并且另外其中,所述第二区域具有分配至其的第二数字索引值;以及
响应于接收所述请求,在所述设计画布上的所述第一区域与所述第二区域之间插入所述区域,其中,在所述第一区域与所述第二区域之间插入所述区域包括向所述区域分配第三数字索引值,所述第三数字索引值大于所述第一数字索引值并且小于所述第二数字索引值。
8.一种计算系统,包括:
处理器;以及
存储指令的存储器,所述指令当由所述处理器执行时,使得所述处理器执行包括以下项的动作:
从与所述计算系统进行网络通信的主机计算设备获取页面,其中,所述页面包括图形元素,并且另外其中,所述图形元素在所述页面中的位置是由分层位置标识符定义的;以及
响应于获取到所述页面,使得所述页面被显示在显示器上,其中,所述图形元素当基于所述分层位置标识符被显示时,在所述页面中被定位。
9.根据权利要求8所述的计算系统,其中,所述图形元素是微件。
10.根据权利要求8所述的计算系统,其中,所述图形元素是图像、视频、或文本中的一个。
11.根据权利要求8所述的计算系统,其中,所述页面包括区域,所述区域包括分区,并且所述图形元素在所述分区中,并且另外其中,所述分层位置标识符指示所述图形元素在所述区域的所述分区中。
12.根据权利要求11所述的计算系统,其中,所述分层位置标识符还包括所述分区的权重,所述权重指示所述区域中的所述分区的大小。
13.根据权利要求11所述的计算系统,其中,所述分区包括第二图形元素,所述动作还包括:
基于所述显示器的大小将所述图形元素相对于所述第二图形元素在所述页面中定位。
14.根据权利要求13所述的计算系统,其中,当所述分区中包括这两个图形元素的子分区的总宽度小于所述页面在其内被显示的显示窗口的宽度时,将所述图形元素和所述第二图形元素彼此并排显示,并且另外其中,当所述子分区的所述总宽度大于所述显示窗口的所述宽度时,所述图形元素显示在所述第二图形元素上方。
15.一种包括指令的计算机可读存储介质,所述指令当由处理器执行时,使得所述处理器执行包括以下项的动作:
从主机计算设备获取页面,其中,所述页面包括多个区域,所述多个区域中的区域包括多个分区,所述多个分区中的分区包括多个子分区,并且所述多个子分区中的子分区包括图形元素,并且另外其中,所述页面包括所述图形元素的分层位置标识符,所述分层位置标识符包括所述区域的第一索引值、所述分区的第二索引值、以及所述子分区的第三索引值;以及
使得所述页面被显示在显示器上,其中,所述图形元素基于所述图形元素的所述分层位置标识符被显示在所述页面上的位置处。
CN201880013633.2A 2017-02-24 2018-02-19 用分层标识符来表示图形用户界面元素的位置 Withdrawn CN110366723A (zh)

Applications Claiming Priority (3)

Application Number Priority Date Filing Date Title
US15/441,462 US20180246859A1 (en) 2017-02-24 2017-02-24 Representing position of graphical user interface elements with hierarchical identifiers
US15/441,462 2017-02-24
PCT/US2018/018576 WO2018156440A1 (en) 2017-02-24 2018-02-19 Representing position of graphical user interface elements with hierarchical identifiers

Publications (1)

Publication Number Publication Date
CN110366723A true CN110366723A (zh) 2019-10-22

Family

ID=61563478

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201880013633.2A Withdrawn CN110366723A (zh) 2017-02-24 2018-02-19 用分层标识符来表示图形用户界面元素的位置

Country Status (4)

Country Link
US (1) US20180246859A1 (zh)
EP (1) EP3563253A1 (zh)
CN (1) CN110366723A (zh)
WO (1) WO2018156440A1 (zh)

Families Citing this family (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US10839037B2 (en) 2018-09-21 2020-11-17 Microsoft Technology Licensing, Llc Connected application experience
US11418621B2 (en) 2018-09-21 2022-08-16 Microsoft Technology Licensing, Llc Cloud-based composable data layer
CN114064161B (zh) * 2020-07-31 2023-12-22 阿里巴巴集团控股有限公司 生成页面的方法、装置及存储介质

Family Cites Families (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20030014445A1 (en) * 2001-07-13 2003-01-16 Dave Formanek Document reflowing technique
US6889226B2 (en) * 2001-11-30 2005-05-03 Microsoft Corporation System and method for relational representation of hierarchical data
US7362311B2 (en) * 2003-04-07 2008-04-22 Microsoft Corporation Single column layout for content pages
US9383916B2 (en) * 2009-09-30 2016-07-05 Microsoft Technology Licensing, Llc Dynamic image presentation
US20140258863A1 (en) * 2013-03-11 2014-09-11 United Video Properties, Inc. Systems and methods for browsing streaming content from the viewer's video library
US9524273B2 (en) * 2013-03-11 2016-12-20 Oracle International Corporation Method and system for generating a web page layout using nested drop zone widgets having different software functionalities
US10127327B2 (en) * 2014-05-21 2018-11-13 Adobe Systems Incorporated Cloud-based image processing web service
US9639263B2 (en) * 2014-08-05 2017-05-02 Weebly, Inc. Native overlay for rapid editing of web content

Also Published As

Publication number Publication date
US20180246859A1 (en) 2018-08-30
EP3563253A1 (en) 2019-11-06
WO2018156440A1 (en) 2018-08-30

Similar Documents

Publication Publication Date Title
US20210097098A1 (en) Arrangements of documents in a document feed
US8577911B1 (en) Presenting search term refinements
EP2972731B1 (en) Website building by utilizing data lists
US10061756B2 (en) Media annotation visualization tools and techniques, and an aggregate-behavior visualization system utilizing such tools and techniques
US7707486B2 (en) Logical spreadsheets
KR101368068B1 (ko) 데이터베이스 구축 방법, 이를 실행하는 데이터베이스 구축 서버 및 이를 저장한 기록 매체
CN101495982B (zh) 网页绘制优先级机制
US10102567B2 (en) User curated collections for an online application environment
AU2014259978B2 (en) Tagged search result maintenance
US20140019892A1 (en) Systems and Methods for Generating Application User Interface with Practically Boundless Canvas and Zoom Capabilities
CA2625726C (en) Optimization-based visual context management
KR20120139716A (ko) 공유가능한 사용자 인터페이스를 이용해 정보를 구성하는 방법 및 시스템
US10621271B2 (en) Reordering a multi-level layout using a hierarchical tree
JP2013504793A (ja) ズーミング・グラフィカル・ユーザー・インターフェース
WO2008154114A1 (en) Web clip using anchoring
Kim et al. Menu design for computers and cell phones: Review and reappraisal
JP2017068410A (ja) 情報処理装置、情報処理方法及びプログラム
KR20170047256A (ko) 시맨틱 카드 뷰 제공 기법
CN110366723A (zh) 用分层标识符来表示图形用户界面元素的位置
Vanderdonckt et al. Exploring a design space of graphical adaptive menus: normal vs. small screens
US20090319955A1 (en) Techniques for a navigation based design tool
Anderson et al. Seven Hypertexts
US9116603B2 (en) Managing interactions with data having membership in multiple groupings
Jung et al. Reviewing design movement towards the collective computing era: How will future design activities differ from those in current and past eras of modern computing?
CN113360741A (zh) 在搜索结果中动态注入相关内容

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
WW01 Invention patent application withdrawn after publication
WW01 Invention patent application withdrawn after publication

Application publication date: 20191022