CN113760427A - 显示页面元素的方法和电子设备 - Google Patents

显示页面元素的方法和电子设备 Download PDF

Info

Publication number
CN113760427A
CN113760427A CN202110899628.XA CN202110899628A CN113760427A CN 113760427 A CN113760427 A CN 113760427A CN 202110899628 A CN202110899628 A CN 202110899628A CN 113760427 A CN113760427 A CN 113760427A
Authority
CN
China
Prior art keywords
size
page element
electronic device
user
interface
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.)
Granted
Application number
CN202110899628.XA
Other languages
English (en)
Other versions
CN113760427B (zh
Inventor
董锋
翁佳伟
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.)
Honor Device Co Ltd
Original Assignee
Honor Device Co Ltd
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 Honor Device Co Ltd filed Critical Honor Device Co Ltd
Priority to CN202110899628.XA priority Critical patent/CN113760427B/zh
Publication of CN113760427A publication Critical patent/CN113760427A/zh
Application granted granted Critical
Publication of CN113760427B publication Critical patent/CN113760427B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input 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/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction 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/04817—Interaction 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
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input 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/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/016—Input arrangements with force or tactile feedback as computer generated output to the user
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input 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/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction 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/0482—Interaction with lists of selectable items, e.g. menus
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input 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/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04842—Selection of displayed objects or displayed text elements
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input 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/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input 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/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04847—Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input 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/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input 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/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G06F3/04883—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures for inputting data by handwriting, e.g. gesture or text
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input 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/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G06F3/04886—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures by partitioning the display area of the touch-screen or the surface of the digitising tablet into independently controllable areas, e.g. virtual keyboards or menus
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F2203/00—Indexing scheme relating to G06F3/00 - G06F3/048
    • G06F2203/01—Indexing scheme relating to G06F3/01
    • G06F2203/014—Force feedback applied to GUI
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F2203/00—Indexing scheme relating to G06F3/00 - G06F3/048
    • G06F2203/048—Indexing scheme relating to G06F3/048
    • G06F2203/04803—Split screen, i.e. subdividing the display area or the window area into separate subareas
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F2203/00—Indexing scheme relating to G06F3/00 - G06F3/048
    • G06F2203/048—Indexing scheme relating to G06F3/048
    • G06F2203/04806—Zoom, i.e. interaction techniques or interactors for controlling the zooming operation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input 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/16—Sound input; Sound output
    • G06F3/167—Audio in a user interface, e.g. using voice commands for navigating, audio feedback

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请提供了一种显示页面元素的方法和电子设备，该方法包括：该电子设备显示第一图形用户界面，该第一图形用户界面包括页面元素；该电子设备检测到用户对该页面元素的第一操作；该电子设备响应于该第一操作，对该页面元素的尺寸进行调整；该电子设备将该页面元素的尺寸调整之后，自动显示第二图形用户界面，该第二图形用户界面与该第一页面元素相关联。本申请实施例有助于在用户操作时增强电子设备对用户的反馈效果。

Description

显示页面元素的方法和电子设备
本申请是申请日为2019年08月09日、申请号为201910736105.6、申请名称为“显示页面元素的方法和电子设备”的发明申请的分案申请。
技术领域
本申请涉及电子设备领域，并且更具体地，涉及一种显示页面元素的方法和电子设备。
背景技术
用户在使用电子设备的过程中，往往会遇到操作之后无响应的场景，如点击了某个应用程序(application，APP)的图标之后图标未做出任何反馈，给用户带来等待的感受。较长时间的等待甚至会让用户质疑当前的操作是否是他做出的，从而带来不符合预期的操作体验。
发明内容
本申请提供一种显示页面元素的方法和电子设备，有助于在用户操作时增强电子设备对用户的反馈效果。
第一方面，提供了一种显示页面元素的方法，该方法应用于电子设备，该方法包括：该电子设备显示第一界面，该第一界面包括第一页面元素，该第一页面元素的尺寸为第一尺寸；该电子设备检测到用户对该第一页面元素的第一操作；该电子设备响应于该第一操作，将该第一页面元素由该第一尺寸缩小为第二尺寸，并从该第二尺寸恢复到该第一尺寸；该电子设备在由该第二尺寸恢复到该第一尺寸之后，自动显示第二界面，该第二界面与该第一页面元素相关联。
本申请实施例中，电子设备在检测到用户点击页面元素的操作后，电子设备可以控制页面元素按照一定比例缩小，通过检测到用户的操作改变页面元素的尺寸，有助于增强电子设备对用户操作的反馈，从而增强了电子设备对用户操作的提示效果。
在一些可能的实现方式中，该第二界面与该第一页面元素相关联可以理解为该第二界面为电子设备对第一页面元素的第一操作后显示的新的界面。
示例性的，该第一界面为电子设备的桌面，该第一页面元素为桌面上的某一个应用程序的图标，该第二界面可以为该应用程序的显示界面。
示例性的，该第一界面可以为电子设备负一屏界面或者下拉菜单的显示界面，该第一页面元素可以为负一屏界面或者下拉菜单的显示界面的通知卡片，第二界面可以为电子设备检测到用户对该第一页面元素的第一操作后显示的新的界面，其中，该第二界面上可以包括和该第一界面不同的页面元素。
示例性的，该第一界面为电子设备的多个任务卡片显示界面，该第一页面元素为该多个任务卡片中的一个任务卡片，该第二界面可以为该任务卡片对应的应用程序的显示界面。
结合第一方面，在第一方面的某些实现方式中，该第一页面元素包括应用程序的图标、通知卡片和任务卡片中的任意一个。
本申请实施例中，电子设备在检测到用户点击图标、通知卡片或者任务卡片的操作后，电子设备可以控制图标、通知卡片或者任务卡片按照一定比例缩小，通过检测到用户的操作改变图标、通知卡片或者任务卡片的尺寸，有助于增强电子设备对用户操作的反馈，从而增强了电子设备对用户操作的提示效果。
结合第一方面，在第一方面的某些实现方式中，该通知卡片包括下拉菜单中的通知卡片和负一屏的通知卡片中的任意一个。
结合第一方面，在第一方面的某些实现方式中，该将该第一页面元素由该第一尺寸缩小为第二尺寸，并从该第二尺寸恢复到该第一尺寸，包括：通过模拟弹簧，将该第一页面元素由该第一尺寸缩小为第二尺寸，并从该第二尺寸恢复到该第一尺寸。
本申请实施例中，电子设备在检测到用户对第一页面元素的第一操作时，可以模拟弹簧的特性，该第一操作(例如，按压)可以模拟自然力学，有助于增强用户的自然感受。
结合第一方面，在第一方面的某些实现方式中，当该第一页面元素为应用程序的图标时模拟第一弹簧振子；或者，当该第一页面元素为通知卡片时模拟第二弹簧振子；或者，当该第一页面元素为任务卡片时模拟第三弹簧振子；其中，该第一弹簧振子、第二弹簧振子和第三弹簧振子的质量相同、刚度依次降低、阻尼依次降低。
本申请实施例中，电子设备通过模拟自然力学，通过对不同的页面元素定义不同的点击效果，有助于增强用户的自然感受，增强电子设备对用户操作的反馈，从而增强了电子设备对用户操作的提示效果。
在一些可能的实现方式中，该第一弹簧振子、第二弹簧振子和第三弹簧振子的质量相同、刚度依次降低、阻尼依次降低、初速度依次降低。
在一些可能的实现方式中，该第一弹簧振子、第二弹簧振子和第三弹簧振子的质量相同、刚度相同、阻尼依次升高。
结合第一方面，在第一方面的某些实现方式中，该第一页面元素为图标时，该第二尺寸为该第一尺寸的K倍；或者，当该第一页面元素为通知卡片时，该第二尺寸为该第一尺寸的L倍；或者，当该第一页面元素为任务卡片时，该第二尺寸为该第一尺寸的M倍；其中，0＜K≤L≤M＜1。
本申请实施例中，电子设备在检测到用户点击页面元素的操作后，电子设备可以控制不同的页面元素按照不同的比例进行缩小，对不同页面元素会给用户带来不同的视觉体验，有助于增强电子设备对用户操作的反馈，从而增强了电子设备对用户操作的提示效果。
结合第一方面，在第一方面的某些实现方式中，当该第一页面元素为图标时，从该第一尺寸缩小为该第二尺寸的时长为第一时长N；当该第一页面元素为通知卡片时，从该第一尺寸缩小为该第二尺寸的时长为第二时长P；当该第一页面元素为任务卡片时，从该第一尺寸缩小为该第二尺寸的时长为第三时长Q；其中，100ms≤N≤P≤Q≤250ms。
本申请实施例中，电子设备在检测到用户点击页面元素的操作后，电子设备可以控制不同的页面元素缩小到第二尺寸的时间不同，对不同页面元素会给用户带来不同的视觉体验，有助于增强电子设备对用户操作的反馈，从而增强了电子设备对用户操作的提示效果。
结合第一方面，在第一方面的某些实现方式中，该自动显示第二界面，包括：当该第一页面元素从该第二尺寸恢复到该第一尺寸时，该电子设备的显示界面由该第一界面平滑过渡到该第二界面。
本申请实施例中，电子设备在将第一页面元素恢复到初始尺寸时，将显示界面由第一界面平滑过渡到第二界面，在增强了电子设备对用户操作的提示效果的同时也可以提高用户的视觉感受。
结合第一方面，在第一方面的某些实现方式中，该电子设备的显示界面由该第一界面平滑过渡到该第二界面，包括：当该第一页面元素从该第二尺寸恢复到该第一尺寸时，该电子设备显示该第二界面；或者，当该第一页面元素从该第二尺寸恢复到该第一尺寸并间隔第一时间段时，该电子设备显示该第二界面。
结合第一方面，在第一方面的某些实现方式中，该第一操作为用户的手指触摸该第一页面元素的操作，该将该第一页面元素由该第一尺寸缩小为第二尺寸，包括：当检测到用户的手指触摸该第一页面元素时，开始将该第一页面元素由该第一尺寸缩小为该第二尺寸；或者，当检测到用户的手指离开该第一页面元素时，开始将该第一页面元素由该第一尺寸缩小为该第二尺寸。
本申请实施例中，电子设备可以根据用户手指在屏幕上的状态确定对该第一页面元素进行缩小和恢复，有助于增强电子设备对用户操作的反馈，从而增强了电子设备对用户操作的提示效果。
结合第一方面，在第一方面的某些实现方式中，该电子设备响应于该第一操作，将该第一页面元素由该第一尺寸缩小为第二尺寸，并从该第二尺寸恢复到该第一尺寸，包括：该电子设备响应于该第一操作，将该第一页面元素由该第一尺寸缩小为该第二尺寸；当该第一页面元素从该第二尺寸恢复到第三尺寸时，该电子设备检测到用户对该第一页面元素的第二操作，该第三尺寸大于该第二尺寸且小于该第一尺寸；该电子设备响应于该第二操作，将该第一页面元素从该第三尺寸缩小为该第二尺寸，并从该第二尺寸恢复到该第一尺寸。
本申请实施例中，电子设备针对用户多次快速对第一页面元素的操作，可以快速响应用户的操作，减少用户对操作的等待时延，增强了电子设备对用户操作的提示效果。同时，电子设备的快速响应可以让用户心手合一，符合用户心理操作的预期。
第二方面，提供了一种装置，该装置包含在电子设备中，该装置具有实现上述方面及上述方面的可能实现方式中电子设备行为的功能。功能可以通过硬件实现，也可以通过硬件执行相应的软件实现。硬件或软件包括一个或多个与上述功能相对应的模块或单元。
第三方面，提供了一种电子设备，包括：一个或多个处理器；存储器；一个或者多个应用程序；以及一个或多个计算机程序。其中，一个或多个计算机程序被存储在存储器中，一个或多个计算机程序包括指令。当指令被电子设备执行时，使得电子设备执行上述任一方面任一项可能的实现中的显示页面元素的方法。
第四方面，本技术方案提供了一种电子设备，包括一个或多个处理器和一个或多个存储器。该一个或多个存储器与一个或多个处理器耦合，一个或多个存储器用于存储计算机程序代码，计算机程序代码包括计算机指令，当一个或多个处理器执行计算机指令时，使得电子设备执行上述任一方面任一项可能的实现中的显示页面元素的方法。
第五方面，本技术方案提供了一种计算机存储介质，包括计算机指令，当计算机指令在电子设备上运行时，使得电子设备执行上述任一方面任一项可能的实现中的显示页面元素的方法。
第六方面，本技术方案提供了一种计算机程序产品，当计算机程序产品在电子设备上运行时，使得电子设备执行上述任一方面任一项可能的设计中的显示页面元素的方法。
第七方面，本技术方案提供了一种芯片系统，该芯片系统包括至少一个处理器，当程序指令在该至少一个处理器中执行时，使得上述第一方面任一项可能的方法在电子设备上的功能得以实现。
附图说明
图1是本申请实施例提供的一种电子设备的硬件结构示意图。
图2是本申请实施例提供的一种电子设备的软件结构示意图。
图3是本申请实施例提供的一组GUI的示意图。
图4是本申请实施例提供的另一组GUI的示意图。
图5是本申请实施例提供的另一组GUI的示意图。
图6是本申请实施例提供的另一组GUI的示意图。
图7是本申请实施例提供的另一组GUI的示意图。
图8是本申请实施例提供的另一组GUI的示意图。
图9是用户点击页面元素的过程的示意图。
图10是本申请实施例提供的不同页面元素按压时的模拟弹簧力学的示意图。
图11是本申请实施例提供的小面积页面元素按压时的模拟弹簧的变化示意图。
图12是本申请实施例提供的中面积页面元素按压时的模拟弹簧的变化示意图。
图13是本申请实施例提供的大面积页面元素按压时的模拟弹簧的变化示意图。
图14是本申请实施例提供的显示页面元素的方法的示意性流程图。
图15是本申请实施例提供的电子设备的示意性框图。
具体实施方式
以下实施例中所使用的术语只是为了描述特定实施例的目的，而并非旨在作为对本申请的限制。如在本申请的说明书和所附权利要求书中所使用的那样，单数表达形式“一个”、“一种”、“所述”、“上述”、“该”和“这一”旨在也包括例如“一个或多个”这种表达形式，除非其上下文中明确地有相反指示。还应当理解，在本申请以下各实施例中，“至少一个”、“一个或多个”是指一个、两个或两个以上。术语“和/或”，用于描述关联对象的关联关系，表示可以存在三种关系；例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B的情况，其中A、B可以是单数或者复数。字符“/”一般表示前后关联对象是一种“或”的关系。
在本说明书中描述的参考“一个实施例”或“一些实施例”等意味着在本申请的一个或多个实施例中包括结合该实施例描述的特定特征、结构或特点。由此，在本说明书中的不同之处出现的语句“在一个实施例中”、“在一些实施例中”、“在其他一些实施例中”、“在另外一些实施例中”等不是必然都参考相同的实施例，而是意味着“一个或多个但不是所有的实施例”，除非是以其他方式另外特别强调。术语“包括”、“包含”、“具有”及它们的变形都意味着“包括但不限于”，除非是以其他方式另外特别强调。
以下介绍电子设备、用于这样的电子设备的用户界面、和用于使用这样的电子设备的实施例。在一些实施例中，电子设备可以是还包含其它功能诸如个人数字助理和/或音乐播放器功能的便携式电子设备，诸如手机、平板电脑、具备无线通讯功能的可穿戴电子设备(如智能手表)等。便携式电子设备的示例性实施例包括但不限于搭载
Figure BDA0003199141640000051
Figure BDA0003199141640000052
或者其它操作系统的便携式电子设备。上述便携式电子设备也可以是其它便携式电子设备，诸如膝上型计算机(Laptop)等。还应当理解的是，在其他一些实施例中，上述电子设备也可以不是便携式电子设备，而是台式计算机。
示例性的，图1示出了电子设备100的结构示意图。电子设备100可以包括处理器110、外部存储器接口120、内部存储器121、通用串行总线(universal serial bus，USB)接口130、充电管理模块140、电源管理模块141、电池142、天线1、天线2、移动通信模块150、无线通信模块160、音频模块170、扬声器170A、受话器170B、麦克风170C、耳机接口170D、传感器模块180、指南针190、马达191、指示器192、摄像头193、显示屏194以及用户标识模块(subscriber identification module，SIM)卡接口195等。
可以理解的是，本申请实施例示意的结构并不构成对电子设备100的具体限定。在本申请另一些实施例中，电子设备100可以包括比图示更多或更少的部件，或者组合某些部件，或者拆分某些部件，或者不同的部件布置。图示的部件可以以硬件，软件或软件和硬件的组合实现。
处理器110可以包括一个或多个处理单元，例如：处理器110可以包括应用处理器(application processor，AP)，调制解调处理器，图形处理器(graphics processingunit，GPU)，图像信号处理器(image signal processor，ISP)，控制器，视频编解码器，数字信号处理器(digital signal processor，DSP)，基带处理器，和/或神经网络处理器(neural-network processing unit，NPU)等。其中，不同的处理单元可以是独立的部件，也可以集成在一个或多个处理器中。在一些实施例中，电子设备101也可以包括一个或多个处理器110。其中，控制器可以根据指令操作码和时序信号，产生操作控制信号，完成取指令和执行指令的控制。在其他一些实施例中，处理器110中还可以设置存储器，用于存储指令和数据。示例性地，处理器110中的存储器可以为高速缓冲存储器。该存储器可以保存处理器110刚用过或循环使用的指令或数据。如果处理器110需要再次使用该指令或数据，可从所述存储器中直接调用。这样就避免了重复存取，减少了处理器110的等待时间，因而提高了电子设备101处理数据或执行指令的效率。
在一些实施例中，处理器110可以包括一个或多个接口。接口可以包括集成电路间(inter-integrated circuit，I2C)接口、集成电路间音频(inter-integrated circuitsound，I2S)接口、脉冲编码调制(pulse code modulation，PCM)接口、通用异步收发传输器(universal asynchronous receiver/transmitter，UART)接口、移动产业处理器接口(mobile industry processor interface，MIPI)、用输入输出(general-purpose input/output，GPIO)接口、SIM卡接口和/或USB接口等。其中，USB接口130是符合USB标准规范的接口，具体可以是Mini USB接口、Micro USB接口、USB Type C接口等。USB接口130可以用于连接充电器为电子设备101充电，也可以用于电子设备101与外围设备之间传输数据。该USB接口130也可以用于连接耳机，通过耳机播放音频。
可以理解的是，本申请实施例示意的各模块间的接口连接关系，只是示意性说明，并不构成对电子设备100的结构限定。在本申请另一些实施例中，电子设备100也可以采用上述实施例中不同的接口连接方式，或多种接口连接方式的组合。
充电管理模块140用于从充电器接收充电输入。其中，充电器可以是无线充电器，也可以是有线充电器。在一些有线充电的实施例中，充电管理模块140可以通过USB接口130接收有线充电器的充电输入。在一些无线充电的实施例中，充电管理模块140可以通过电子设备100的无线充电线圈接收无线充电输入。充电管理模块140为电池142充电的同时，还可以通过电源管理模块141为电子设备供电。
电源管理模块141用于连接电池142，充电管理模块140与处理器110。电源管理模块141接收电池142和/或充电管理模块140的输入，为处理器110、内部存储器121、外部存储器、显示屏194、摄像头193和无线通信模块160等供电。电源管理模块141还可以用于监测电池容量、电池循环次数、电池健康状态(漏电，阻抗)等参数。在其他一些实施例中，电源管理模块141也可以设置于处理器110中。在另一些实施例中，电源管理模块141和充电管理模块140也可以设置于同一个器件中。
电子设备100的无线通信功能可以通过天线1、天线2、移动通信模块150、无线通信模块160、调制解调处理器以及基带处理器等实现。
天线1和天线2用于发射和接收电磁波信号。电子设备100中的每个天线可用于覆盖单个或多个通信频带。不同的天线还可以复用，以提高天线的利用率。例如：可以将天线1复用为无线局域网的分集天线。在另外一些实施例中，天线可以和调谐开关结合使用。
移动通信模块150可以提供应用在电子设备100上的包括2G/3G/4G/5G等无线通信的解决方案。移动通信模块150可以包括至少一个滤波器，开关，功率放大器，低噪声放大器(low noise amplifier，LNA)等。移动通信模块150可以由天线1接收电磁波，并对接收的电磁波进行滤波，放大等处理，传送至调制解调处理器进行解调。移动通信模块150还可以对经调制解调处理器调制后的信号放大，经天线1转为电磁波辐射出去。在一些实施例中，移动通信模块150的至少部分功能模块可以被设置于处理器110中。在一些实施例中，移动通信模块150的至少部分功能模块可以与处理器110的至少部分模块被设置在同一个器件中。
无线通信模块160可以提供应用在电子设备100上的包括无线局域网(wirelesslocal area networks，WLAN)(如无线保真(wireless fidelity，Wi-Fi)网络)、蓝牙(bluetooth，BT)，全球导航卫星系统(global navigation satellite system，GNSS)、调频(frequency modulation，FM)、近距离无线通信技术(near field communication，NFC)、红外技术(infrared，IR)等无线通信的解决方案。无线通信模块160可以是集成至少一个通信处理模块的一个或多个器件。无线通信模块160经由天线2接收电磁波，将电磁波信号调频以及滤波处理，将处理后的信号发送到处理器110。无线通信模块160还可以从处理器110接收待发送的信号，对其进行调频，放大，经天线2转为电磁波辐射出去。
电子设备100通过GPU，显示屏194，以及应用处理器等实现显示功能。GPU为图像处理的微处理器，连接显示屏194和应用处理器。GPU用于执行数学和几何计算，用于图形渲染。处理器110可包括一个或多个GPU，其执行程序指令以生成或改变显示信息。
显示屏194用于显示图像、视频等。显示屏194包括显示面板。显示面板可以采用液晶显示屏(liquid crystal display，LCD)、有机发光二极管(organic light-emittingdiode，OLED)、有源矩阵有机发光二极体或主动矩阵有机发光二极体(active-matrixorganic light emitting diode的，AMOLED)、柔性发光二极管(flex light-emittingdiode，FLED)、迷你发光二极管(mini light-emitting diode，miniled)、MicroLed、Micro-oLed、量子点发光二极管(quantum dot light emitting diodes，QLED)等。在一些实施例中，电子设备100可以包括1个或多个显示屏194。
在本申请的一些实施例中，当显示面板采用OLED、AMOLED、FLED等材料时，上述图1中的显示屏194可以被弯折。这里，上述显示屏194可以被弯折是指显示屏可以在任意部位被弯折到任意角度，并可以在该角度保持，例如，显示屏194可以从中部左右对折。也可以从中部上下对折。
电子设备100的显示屏194可以是一种柔性屏，目前，柔性屏以其独特的特性和巨大的潜力而备受关注。柔性屏相对于传统屏幕而言，具有柔韧性强和可弯曲的特点，可以给用户提供基于可弯折特性的新交互方式，可以满足用户对于电子设备的更多需求。对于配置有可折叠显示屏的电子设备而言，电子设备上的可折叠显示屏可以随时在折叠形态下的小屏和展开形态下大屏之间切换。因此，用户在配置有可折叠显示屏的电子设备上使用分屏功能，也越来越频繁。
电子设备100可以通过ISP、摄像头193、视频编解码器、GPU、显示屏194以及应用处理器等实现拍摄功能。
ISP用于处理摄像头193反馈的数据。例如，拍照时，打开快门，光线通过镜头被传递到摄像头感光元件上，光信号转换为电信号，摄像头感光元件将所述电信号传递给ISP处理，转化为肉眼可见的图像。ISP还可以对图像的噪点、亮度、肤色进行算法优化。ISP还可以对拍摄场景的曝光、色温等参数优化。在一些实施例中，ISP可以设置在摄像头193中。
摄像头193用于捕获静态图像或视频。物体通过镜头生成光学图像投射到感光元件。感光元件可以是电荷耦合器件(charge coupled device，CCD)或互补金属氧化物半导体(complementary metal-oxide-semiconductor，CMOS)光电晶体管。感光元件把光信号转换成电信号，之后将电信号传递给ISP转换成数字图像信号。ISP将数字图像信号输出到DSP加工处理。DSP将数字图像信号转换成标准的RGB，YUV等格式的图像信号。在一些实施例中，电子设备100可以包括1个或多个摄像头193。
数字信号处理器用于处理数字信号，除了可以处理数字图像信号，还可以处理其他数字信号。例如，当电子设备100在频点选择时，数字信号处理器用于对频点能量进行傅里叶变换等。
视频编解码器用于对数字视频压缩或解压缩。电子设备100可以支持一种或多种视频编解码器。这样，电子设备100可以播放或录制多种编码格式的视频，例如：动态图像专家组(moving picture experts group，MPEG)1、MPEG2、MPEG3、MPEG4等。
NPU为神经网络(neural-network，NN)计算处理器，通过借鉴生物神经网络结构，例如借鉴人脑神经元之间传递模式，对输入信息快速处理，还可以不断的自学习。通过NPU可以实现电子设备100的智能认知等应用，例如：图像识别、人脸识别、语音识别、文本理解等。
外部存储器接口120可以用于连接外部存储卡，例如Micro SD卡，实现扩展电子设备100的存储能力。外部存储卡通过外部存储器接口120与处理器110通信，实现数据存储功能。例如将音乐，视频等文件保存在外部存储卡中。
内部存储器121可以用于存储一个或多个计算机程序，该一个或多个计算机程序包括指令。处理器110可以通过运行存储在内部存储器121的上述指令，从而使得电子设备101执行本申请一些实施例中所提供的显示页面元素的方法，以及各种应用以及数据处理等。内部存储器121可以包括存储程序区和存储数据区。其中，存储程序区可存储操作系统；该存储程序区还可以存储一个或多个应用(比如图库、联系人等)等。存储数据区可存储电子设备101使用过程中所创建的数据(比如照片，联系人等)等。此外，内部存储器121可以包括高速随机存取存储器，还可以包括非易失性存储器，例如一个或多个磁盘存储部件，闪存部件，通用闪存存储器(universal flash storage，UFS)等。在一些实施例中，处理器110可以通过运行存储在内部存储器121的指令，和/或存储在设置于处理器110中的存储器的指令，来使得电子设备101执行本申请实施例中所提供的显示页面元素的方法，以及其他应用及数据处理。电子设备100可以通过音频模块170、扬声器170A、受话器170B、麦克风170C、耳机接口170D、以及应用处理器等实现音频功能。例如音乐播放、录音等。
传感器模块180可以包括压力传感器180A、陀螺仪传感器180B、气压传感器180C、磁传感器180D、加速度传感器180E、距离传感器180F、接近光传感器180G、指纹传感器180H、温度传感器180J、触摸传感器180K、环境光传感器180L、骨传导传感器180M等。
其中，压力传感器180A用于感受压力信号，可以将压力信号转换成电信号。在一些实施例中，压力传感器180A可以设置于显示屏194。压力传感器180A的种类很多，如电阻式压力传感器，电感式压力传感器，电容式压力传感器等。电容式压力传感器可以是包括至少两个具有导电材料的平行板。当有力作用于压力传感器180A，电极之间的电容改变。电子设备100根据电容的变化确定压力的强度。当有触摸操作作用于显示屏194，电子设备100根据压力传感器180A检测所述触摸操作强度。电子设备100也可以根据压力传感器180A的检测信号计算触摸的位置。在一些实施例中，作用于相同触摸位置，但不同触摸操作强度的触摸操作，可以对应不同的操作指令。例如：当有触摸操作强度小于第一压力阈值的触摸操作作用于短消息应用图标时，执行查看短消息的指令。当有触摸操作强度大于或等于第一压力阈值的触摸操作作用于短消息应用图标时，执行新建短消息的指令。
陀螺仪传感器180B可以用于确定电子设备100的运动姿态。在一些实施例中，可以通过陀螺仪传感器180B确定电子设备100围绕三个轴(即X、Y和Z轴)的角速度。陀螺仪传感器180B可以用于拍摄防抖。示例性的，当按下快门，陀螺仪传感器180B检测电子设备100抖动的角度，根据角度计算出镜头模组需要补偿的距离，让镜头通过反向运动抵消电子设备100的抖动，实现防抖。陀螺仪传感器180B还可以用于导航，体感游戏场景。
加速度传感器180E可检测电子设备100在各个方向上(一般为三轴)加速度的大小。当电子设备100静止时可检测出重力的大小及方向。还可以用于识别电子设备姿态，应用于横竖屏切换，计步器等应用。
环境光传感器180L用于感知环境光亮度。电子设备100可以根据感知的环境光亮度自适应调节显示屏194亮度。环境光传感器180L也可用于拍照时自动调节白平衡。环境光传感器180L还可以与接近光传感器180G配合，检测电子设备100是否在口袋里，以防误触。
指纹传感器180H用于采集指纹。电子设备100可以利用采集的指纹特性实现指纹解锁，访问应用锁，指纹拍照，指纹接听来电等。
温度传感器180J用于检测温度。在一些实施例中，电子设备100利用温度传感器180J检测的温度，执行温度处理策略。例如，当温度传感器180J上报的温度超过阈值，电子设备100执行降低位于温度传感器180J附近的处理器的性能，以便降低功耗实施热保护。在另一些实施例中，当温度低于另一阈值时，电子设备100对电池142加热，以避免低温导致电子设备100异常关机。在其他一些实施例中，当温度低于又一阈值时，电子设备100对电池142的输出电压执行升压，以避免低温导致的异常关机。
触摸传感器180K，也称“触控面板”。触摸传感器180K可以设置于显示屏194，由触摸传感器180K与显示屏194组成触摸屏，也称“触控屏”。触摸传感器180K用于检测作用于其上或附近的触摸操作。触摸传感器可以将检测到的触摸操作传递给应用处理器，以确定触摸事件类型。可以通过显示屏194提供与触摸操作相关的视觉输出。在另一些实施例中，触摸传感器180K也可以设置于电子设备100的表面，与显示屏194所处的位置不同。
图2是本申请实施例的电子设备100的软件结构框图。分层架构将软件分成若干个层，每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中，将Android系统分为四层，从上至下分别为应用程序层，应用程序框架层，安卓运行时(Android runtime)和系统库，以及内核层。应用程序层可以包括一系列应用程序包。
如图2所示，应用程序包可以包括相机，图库，日历，通话，地图，导航，WLAN，蓝牙，音乐，视频，短信息等应用程序。
应用程序框架层为应用程序层的应用程序提供应用编程接口(applicationprogramming interface，API)和编程框架。应用程序框架层包括一些预先定义的函数。
如图2所示，应用程序框架层可以包括窗口管理器，内容提供器，视图系统，电话管理器，资源管理器，通知管理器等。
窗口管理器用于管理窗口程序。窗口管理器可以获取显示屏大小，判断是否有状态栏，锁定屏幕，截取屏幕等。
内容提供器用来存放和获取数据，并使这些数据可以被应用程序访问。所述数据可以包括视频，图像，音频，拨打和接听的电话，浏览历史和书签，电话簿等。
视图系统包括可视控件，例如显示文字的控件，显示图片的控件等。视图系统可用于构建应用程序。显示界面可以由一个或多个视图组成的。例如，包括短信通知图标的显示界面，可以包括显示文字的视图以及显示图片的视图。
电话管理器用于提供电子设备100的通信功能。例如通话状态的管理(包括接通，挂断等)。
资源管理器为应用程序提供各种资源，比如本地化字符串，图标，图片，布局文件，视频文件等等。
通知管理器使应用程序可以在状态栏中显示通知信息，可以用于传达告知类型的消息，可以短暂停留后自动消失，无需用户交互。比如通知管理器被用于告知下载完成，消息提醒等。通知管理器还可以是以图表或者滚动条文本形式出现在系统顶部状态栏的通知，例如后台运行的应用程序的通知，还可以是以对话窗口形式出现在屏幕上的通知。例如在状态栏提示文本信息，发出提示音，电子设备振动，指示灯闪烁等。
系统库可以包括多个功能模块。例如：表面管理器(surface manager)，媒体库(media libraries)，三维图形处理库(例如：OpenGL ES)，2D图形引擎(例如：SGL)等。
表面管理器用于对显示子系统进行管理，并且为多个应用程序提供了2D和3D图层的融合。
媒体库支持多种常用的音频，视频格式回放和录制，以及静态图像文件等。媒体库可以支持多种音视频编码格式，例如:MPEG4，H.264，MP3，AAC，AMR，JPG，PNG等。
三维图形处理库用于实现三维图形绘图，图像渲染，合成，和图层处理等。
2D图形引擎是2D绘图的绘图引擎。
内核层是硬件和软件之间的层。内核层至少包含显示驱动，摄像头驱动，音频驱动，传感器驱动。
为了便于理解，本申请以下实施例将以具有图1和图2所示结构的手机为例，结合附图对本申请实施例提供的元素按压的方法进行具体阐述。
图3示出了手机的一组图形用户界面(graphical user interface，GUI)，其中，从图3中的(a)到图3中的(d)示出了用户点击桌面图标时，桌面图标像素值变化的过程。
参见图3中的(a)，该GUI为手机的桌面。其中手机的桌面包括3个桌面页面，每个桌面页面包括一个或者多个应用程序的图标。其中，当前手机的桌面显示的是第二个桌面页面，这个桌面页面上包括支付宝的图标、任务卡商店的图标、微博的图标、相册的图标、微信的图标、卡包的图标、设置的图标和主题的图标301。其中，示例性的，主题的图标的像素(pixel，px)值为长216px和宽216px。如图3中的(a)所示，用户的手指准备点击主题的图标301，在用户的手指接近但是还没有接触(down)到主题的图标301时，主题的图标301可以保持初始长和宽的像素值不变化。
应理解，图3中的(a)中，手机的桌面上的每个图标的像素可以相同。
还应理解，用户的手指接近但是还没有点击时还可以为用户的手指悬停(hover)。
参见图3中的(b)所示的GUI，该GUI为手机的桌面。当前手机的桌面显示的是第二个桌面页面，当手机在第二个桌面页面上检测到用户的手指点击图标301的操作后，第二个桌面页面上图标301的像素值发生变化。如图3中的(c)所示，示例性的，该图标301的长变为194px，宽变为194px。
应理解，用户的手指点击图标301可以包括用户的手指触摸到图标301，或者，也可以是用户的手指距离图标301的距离为小于0.5mm时也可以称为用户的手指触摸到图标301。
还应理解，本申请实施例中，用户的手指触摸页面元素时手指和页面元素的距离也可以由手机的触摸灵敏度决定。
一个实施例中，图标301的像素值从长216px、宽216px缩小为长194px、宽194px的过程可以是一个渐变的过程，图标301可以按照一定速率逐渐缩小到长194px、宽194px。
一个实施例中，当图标301的像素值从长216px、宽216px缩小为长194px、宽194px后，图标301的像素值可以保持194px和宽194px在不再缩小。
一个实施例中，图标301的像素值从长216px、宽216px变为长194px、宽194px的过程中，手机检测到用户的手指一直和图标301接触。
应理解，图标从长216px、宽216px变为长194px、宽194px的过程持续时长可以为100-150ms。
还应理解，当图标301的像素值还没有缩小到长194px、宽194px时，用户的手指可能已经离开屏幕，此时图标可以继续缩小到长194px、宽194px，然后再逐渐恢复到长216px、宽216px。还应理解，本申请实施例中，用户手指点击图标301也可以理解为用户的手指按压图标301。示例性的，当手机检测到用户按压的压力值大于或者等于预设压力值时，图标301可以按照一定速率进行缩小。
还应理解，本申请实施例中，用户手指点击图标301也可以理解为用户的手指触摸或者接触图标301，手机在检测到用户接触或者触摸图标301时，就可以对图标301进行缩放。也就是说，手机可以不用检测用户接触或者触摸时的压力值，只要检测到用户接触或者触摸即可。
还应理解，上述图3所示的GUI是以图标的像素值为216px和宽216px为例进行说明，手机的桌面上的图标的像素值也可以为其他值，本申请实施例对此并不作任何限定。
还应理解，上述图3所示的GUI是以手机检测到用户的手指点击图标时，图标的长的像素值缩小为初始长的像素的90％，图标的宽的像素值缩小为初始宽的像素的90％为例进行说明的，也可以按照其他比例进行缩小，本申请实施例对此并不作任何限定。
参见图3中的(c)所示的GUI，该GUI为手机的桌面的另一GUI。当手机检测到用户的手指从桌面上离开后，图标301的像素值恢复到初始长和宽的像素值，即图标301的像素值从长194px、宽1946px恢复为初始的长194px、宽194px。
一个实施例中，图标301的像素值从长194px、宽194px恢复为长216px、宽216px的过程可以是一个渐变的过程，图标301可以按照一定速率逐渐恢复到长216px、宽216px。
一个实施例中，图标从初始像素值缩小为初始像素值的90％的速率可以和图标从初始像素值的90％恢复到初始像素值的速率相同。
一个实施例中，当手机检测到用户的手指离开的触摸屏时，图标301的像素值开始从初始的像素值的90％恢复到初始的像素值。
应理解，本申请实施例中，用户的手指从桌面上离开也可以认为是用户离手(up)。
参见图3中的(d)所示的GUI，该GUI为“主题”应用的显示界面。该显示界面包括字体、壁纸、铃声和混搭等控件。用户可以从本地搜索相应的主题，或者也可以从服务器下载相应的主题。
应理解，从图3中的(c)到图3中的(d)可以是平滑过渡的。例如，从图3中的(c)到图3中的(d)可以没有时间间隔，手机可以在图标301恢复到初始像素值时显示该主题应用的显示界面。或者，从图3中的(c)到图3中的(d)也可以有时间间隔。示例性的，时间间隔可以为80-120ms。
本申请实施例中，由图3中的(c)可以平滑过渡到图3中的(d)，在给用户带来更好的反馈效果的同时打开相应的操作，有助于提升用户在开启某个应用程序时的用户体验。
应理解，图3中的图标301可以为手机中的小面积页面元素，手机中的小面积页面元素还可以包括图片缩略图等等。一个实施例中，手机在检测到用户点击其他小面积页面元素时，可以按照与图标相同的缩放比例对其他小面积页面元素进行缩小，也可以按照不同缩放比例进行缩放，本申请实施例对此并不作任何限定。
一个实施例中，小面积页面元素可以为长的像素值小于或者等于第一像素值的页面元素；或者，小面积页面元素可以为宽的像素值小于或者等于第二像素值的页面元素；或者，小面积页面元素还可以为长的像素值小于或者等于第一像素值，且宽的像素值小于或者等于第二像素值的页面元素。
应理解，第一像素值可以和第二像素值相同，也可以不同。
示例性的，第一像素值为300px，第二像素值为300px。
另一个实施例中，小面积页面元素可以为长小于或者等于第一距离的页面元素；或者，小面积页面元素可以为宽小于或者等于第二距离的页面元素；或者，小面积页面元素还可以为长小于或者等于第一距离，且宽小于或者等于第二距离的页面元素。
应理解，第一距离和第二距离可以相同，也可以不同。
另一个实施例中，小面积页面元素还可以为面积小于或者等于第一面积的页面元素。
另一个实施例中，小面积页面元素可以长小于或者等于屏幕的长度的第一百分比(例如，10％)的页面元素；或者，小面积页面元素也可以宽小于或者等于屏幕的宽度的第二百分比(例如，10％)的页面元素；或者，小面积页面元素可以长小于或者等于屏幕的长度的第一百分比，且宽小于或者等于屏幕的宽度的第二百分比的页面元素。
本申请实施例中，手机在检测到用户点击图标的操作后，手机可以控制图标按照一定比例缩小，通过检测到用户的操作改变页面元素的形状，增强了手机对用户操作的反馈，从而增强了手机对用户操作的提示效果。
图4示出了手机的另一组GUI，其中，从图4中的(a)到图4中的(h)示出了用户点击未接来电的通知卡片时，通知卡片像素值变化的过程。
参见图4中的(a)所示的GUI，该GUI为手机的来电显示界面。该来电显示界面包括多个控件，其中该多个控件中包括控件401。当手机检测到用户点击控件401的操作后，显示如图4中的(b)所示的GUI。
应理解，该来电显示界面还包括控件402、控件403和控件404。
示例性的，当手机检测到用户点击控件402的操作时，手机可以自动挂断该来电并回复短信，其中，手机可以给用户多个短信内容的建议。例如，“稍后给您回电话。”、“抱歉，现在不方便接电话。”、“正在开会，稍后联系”、“稍等，马上到”等等。
示例性的，当手机检测到用户点击控件403的操作后，手机可以挂断该来电。
示例性的，当手机检测到用户点击控件404的操作后，手机可以接通该来电，被叫用户可以和主叫用户进行通话。
应理解，控件401至控件404也可以属于手机的小面积页面元素，当手机检测到用户点击控件401时，控件401的像素值也可以按照一定比例进行缩小。
参见图4中的(b)所示的GUI，该GUI为手机的另一来电显示界面。该来单显示界面包括回拨提醒窗口405，其中，手机可以提醒用户在30分钟后、1个小时后或者2个小时后对主叫方进行回拨。当手机检测到用户点击控件406的操作后，手机可以自动挂断来单并且显示如图4中的(c)所示的GUI。
参见图4中的(c)所示的GUI，该GUI为手机的桌面。当手机自动挂断该来电后，手机可以生成未接来电回拨提醒的信息，用户可以在负一屏查看该信息。当手机检测到用户在屏幕的任意位置向右滑动的操作时，手机可以显示如图4中的(d)所示的GUI。
应理解，本申请实施例中，负一屏是指用户在手机的桌面(如图4中的(c)所示的手机的桌面)上检测到用户向右滑动的操作后显示的界面。图4中的(c)所示的手机的桌面可以为手机的桌面上的第二个桌面页面，负一屏可以为手机的桌面上的第一个桌面页面，如图4中的(d)所示。负一屏可以为用户提供搜索、应用建议、快捷服务、未接来电通知卡片、情景智能等等服务。其中，负一屏可以显示一些用户经常使用的APP。
示例性的，对于以Android为操作系统的手机，手机的桌面也可以包括多个桌面页面，其中，第一个桌面页面可以为其主桌面页面。
若当前的桌面页面为第三个桌面页面，则当手机在屏幕的底部检测到用户向上滑动的操作后，可以显示主桌面页面。
或者，若当前手机屏幕正在显示某一个应用程序，当手机在屏幕的底部检测到用户向上滑动的操作后，可以显示包含该应用程序的图标的桌面页面(例如，第二个桌面页面)，当手机再一次在屏幕的底部检测到用户向上滑动的操作后，可以显示主桌面页面。
当手机的屏幕显示主桌面页面时，当手机检测到用户向右滑动的操作后，可以显示负一屏的界面。
示例性的，对于以IOS为操作系统的手机，手机的桌面也可以包括多个桌面页面，其中，第一个桌面页面也可以为其主桌面页面。
若当前的桌面页面为第三个桌面页面，则当手机检测到用户按压home键的操作时，可以显示主桌面页面。
或者，若当前手机屏幕正在显示某一个应用程序，当手机检测到用户按压home键的操作后，可以显示包含该应用程序的图标的桌面页面(例如，第二个桌面页面)，当手机再一次检测到用户按压home键的操作后，可以显示主桌面页面。
当手机的屏幕显示主桌面页面时，当手机检测到用户向右滑动的操作后，可以显示负一屏的界面。
应理解，主桌面页面可以是出厂时就设置好的，也可以是用户根据自己的喜好设备的，本申请实施例对此并不作任何限定。
参见图4中的(d)所示的GUI，该GUI为手机的负一屏界面。该负一屏界面可以包括未接来电回拨提醒的通知卡片407。
参见图4中的(e)所示的GUI，该GUI为用户的手指靠近但还没有的点击通知卡片407时的负一屏的显示界面。此时，通知卡片407的像素值为初始像素值，初始像素值为长1376px，宽640px。
参见图4中的(f)所示的GUI，该GUI为用户的手指点击通知卡片407时负一屏的显示界面。此时，通知卡片407的像素值缩小为长1307px，宽608px。
一个实施例中，通知卡片407的像素值从长1376px、宽640px缩小为长1307px、宽608px的过程可以是一个渐变的过程，通知卡片407可以按照一定速率逐渐缩小到长1307px、宽608px。
应理解，通知卡片从长1376px、宽640px变为长1307px、宽608px的过程持续时长可以为150-200ms。
一个实施例中，当通知卡片407的像素值从长1376px、宽640px缩小到长1307px、宽608px时，通知卡片407的像素值可以保持在长1307px和宽608px在不再缩小。
应理解，本申请实施例中，用户手指接点击知卡片407也可以理解为用户的手指按压通知卡片407。
还应理解，上述图4所示的GUI是以未接来电回拨的通知卡片的像素值为1376px和宽640px为例进行说明，手机的通知卡片的像素值也可以为其他值，不同类型的通知卡片的像素值也可以不同，本申请实施例对此并不作任何限定。
参见图4中的(g)所示的GUI，该GUI为用户的手指离开负一屏时的显示界面。此时，通知卡片407的像素值恢复为长1376px，宽640px。
一个实施例中，通知卡片407的像素值从长1307px、宽608px缩小为长1376px、宽640px的过程可以是一个渐变的过程，通知卡片407可以按照一定速率逐渐恢复到长1376px、宽640px。
参见图4中的(h)所示的GUI，该GUI为用户的手指点击通知卡片407后的显示界面。该显示界面包括呼叫提醒窗口408，其中，呼叫提醒窗口408中包括用于提醒用户采用卡1(运营商为中国移动)回拨、采用卡2(运营商为中国联通)回拨和呼叫前编辑的控件。
应理解，从图4中的(g)到图4中的(h)可以没有时间间隔，手机可以在将通知卡片407恢复到初始像素值时显示该窗口408。
示例性的，当手机检测到用户点击采用卡1回拨的控件后，手机可以使用卡1对手机号为18792929676的用户进行呼叫。
应理解，上述图4所示的GUI是以手机检测到用户的手指点击通知卡片时，通知卡片的长的像素值缩小为初始长的像素值的95％，通知卡片的宽的像素值缩小为初始宽的像素值的95％为例进行说明的，也可以按照其他比例进行缩小，本申请实施例对此并不作任何限定。
还应理解，图4中的通知卡片407可以为手机中的中面积页面元素，手机中的中面积页面元素还可以包括下拉菜单中的通知卡片等等。一个实施例中，手机在检测到用户点击其他中面积页面元素时，可以按照与图标相同的缩放比例对其他中面积页面元素进行缩小，也可以按照不同的缩放比例进行缩小，本申请实施例对此并不作任何限定。
一个实施例中，中面积页面元素可以为长的像素值大于第一像素值且小于或者等于第三像素值的页面元素；或者，中面积页面元素可以为宽的像素值大于第二像素值且小于或者等于第四像素值的页面元素；或者，中面积页面元素还可以为长的像素值大于第一像素值且小于或者等于第三像素值，且宽的像素值大于第二像素值且小于或者等于第四像素值的页面元素。其中，第一像素值小于第三像素值，第二像素值小于第四像素值。
应理解，第三像素值可以和第四像素值相同，也可以不同。
示例性的，第三像素值为1800px，第四像素值为800px。
另一个实施例中，中面积页面元素可以为长大于第一距离且小于第三距离的页面元素；或者，中面积页面元素可以为宽大于第二距离且小于第四距离的页面元素；或者，中面积页面元素还可以为长大于第一距离且小于或者等于第三距离，且宽大于第二距离且小于或者等于第四距离的页面元素。其中，第一距离小于第三距离，第二距离小于第四距离。
应理解，第三距离和第四距离可以相同，也可以不同。
另一个实施例中，中面积页面元素还可以为面积大于第一面积且小于或者等于第二面积的页面元素，其中，第一面积小于第二面积。
另一个实施例中，中面积页面元素可以长大于屏幕的长度的第一百分比且小于或者等于第三百分比(例如，50％)的页面元素；或者，中面积页面元素也可以宽大于屏幕的宽度的第二百分比且小于或者等于第四百分比(例如，20％)的页面元素；或者，中面积页面元素还可以长大于屏幕的长度的第一百分比且小于或者等于第三百分比，且宽大于屏幕的宽度的第二百分比且小于或者等于第四百分比的页面元素。其中，第三百分比大于第一百分比，第四百分比大于第二百分比。
本申请实施例中，手机在检测到用户点击通知卡片的操作后，手机可以控制通知卡片按照一定比例缩小，通过检测到用户的操作改变页面元素的形状，增强了手机对用户操作的反馈，从而增强了手机对用户操作的提示效果。
图5示出了手机的另一组GUI，其中，从图5中的(a)到图5中的(f)示出了用户通过语音助手生成闹钟卡片并点击生成的闹钟卡片时，闹钟卡片像素值变化的过程。
参见图5中的(a)所示的GUI，该GUI为手机与用户交互时的显示界面。当手机检测到用户的语音唤醒词“小艺小艺”后，手机可以在桌面显示语音助手的文字显示窗口501，手机可以通过窗口501提醒用户“嗨，我在听”。应理解，手机在通过窗口501显示文字提醒用户的同时，也可以向用户语音播报“嗨，我在听”。
参见图5中的(b)所示的GUI，该GUI为手机与用户交互时的另一显示界面。当手机检测到用户的语音指令“我要定闹钟”时，手机可以通过语音助手的文字显示窗口502显示用户的语音指令对应的文字信息。
参见图5中的(c)所示的GUI，该GUI为用户的手指靠近但是还没有点击闹钟卡片503时的显示界面。该显示界面包括闹钟卡片503，同时，手机还可以通过文字和语音提醒用户“闹钟已创建”。该显示界面中的闹钟卡片503可以为初始像素值，其中，闹钟卡片503的初始像素值为长1090px，宽240px。
应理解，手机通过显示窗口502的文字信息后可以自动生成对应的闹钟卡片503。
还应理解，用户发出“我要定闹钟”的语音指令后，由于该语音指令包括用户的意图(定闹钟)，但是并不包括相应的槽位(定几点的闹钟)信息，此时手机可以直接为用户确定该意图相应的槽位信息，即手机可以直接将早上8点默认为用户的意图对应的槽位信息。则手机可以显示该闹钟卡片503，并通过文字和语音提醒用户“闹钟已创建”。
一个实施例中，当手机接收到用户的语音指令“我要定闹钟”后，可以确定对应的用户的意图。但是当手机发现该语音指令中缺少相应的槽位信息后，手机可以向用户发出用于获取槽位信息的语音信息。例如，手机可以通过语音助手向用户进行语音播报“你希望定几点的闹钟呢？”；当手机再一次接收到用户的语音信息后，可以确定相应的槽位信息。比如用户发出“定早上9点的闹钟”的语音指令后，手机可以自动生成早上9点的闹钟。
参见图5中的(d)所示的GUI，该GUI为用户的手指点击闹钟卡片503时的显示界面。当手机检测到用户的手指点击闹钟卡片503时，该闹钟卡片的像素值缩小为长1036px、宽228px。
一个实施例中，闹钟卡片503的像素值从长1090px，宽240px缩小为长1036px、宽228px的过程可以是一个渐变的过程，闹钟卡片503可以按照一定速率逐渐缩小到长1036px、宽228px。
应理解，闹钟卡片从长1376px、宽640px变为长1307px、宽608px的过程持续时长可以为150-200ms。
一个实施例中，当闹钟卡片503的像素值从长1090px，宽240px缩小到长1036px、宽228px时，闹钟卡片503的像素值可以保持在长1036px和宽228px不再缩小。
应理解，本申请实施例中，用户手指点击闹钟卡片503也可以理解为用户的手指按压闹钟卡片503。
还应理解，上述图5所示的GUI是以闹钟卡片的初始像素值为1090px和宽240px为例进行说明，手机的闹钟卡片的像素值也可以为其他值，本申请实施例对此并不作任何限定。
参见图5中的(e)所示的GUI，该GUI为用户手指离开屏幕时的显示界面。当手机检测到用户的手指离开屏幕时，闹钟卡片503的像素值从长1036px、宽228px恢复到长1090px，宽240px。
一个实施例中，闹钟卡片503的像素值从长1036px、宽228px恢复到长1090px，宽240px的过程可以是一个渐变的过程，闹钟卡片503可以按照一定速率逐渐恢复到长1090px，宽240px。
参见图5中的(f)所示的GUI，该GUI为闹钟的编辑界面。用户可以在该闹钟的编辑界面对通过语音助手设置的闹钟进行编辑。
应理解，上述图5所示的GUI是以手机检测到用户的手指点击闹钟卡片时，闹钟卡片的长的像素值缩小为初始长的像素值的95％，通知卡片的宽的像素值缩小为初始宽的像素值的95％为例进行说明的，也可以按照其他比例进行缩小，本申请实施例对此并不作任何限定。
还应理解，闹钟卡片也可以属于中面积页面元素。
本申请实施例中，手机在检测到用户点击闹钟卡片的操作后，手机可以控制闹钟卡片按照一定比例缩小，通过检测到用户的操作改变页面元素的形状，增强了手机对用户操作的反馈，从而提高了手机对用户操作的提示效果。
图6示出了手机的另一组GUI界面，其中，从图6中的(a)到图6中的(f)示出了用户通过下拉菜单点击未读短信通知卡片时，未读短信通知卡片像素值变化的过程。
参见图6中的(a)所示，该GUI为手机的桌面。用户可以通过下拉菜单查看未读的短信。当手机检测到用户在接近屏幕上方的位置向下滑动的操作时，手机可以显示如图6中的(b)所示的GUI。
应理解，本申请实施例中，用户可以在接近屏幕上方的位置向下滑动，从而手机可以显示下拉菜单的界面。其中，下拉菜单中包括多个功能的快捷入口，如飞行模式、Wi-Fi、手电筒、免打扰以及文件分享(“HUAWEI Share”)功能。用户可以在下拉菜单中调整各个功能的排序，或者，也可以增加或者减少下拉菜单中的内容。下拉菜单中还可以包括一些对用户提醒的通知卡片，例如，用户的未读短信，用户刚刚通话录音保存的位置等等。
参见图6中的(b)所示，该GUI为手机的下拉菜单显示界面。才下拉菜单界面可以包括未读短信通知卡片601、通话录音通知卡片602和功能菜单显示窗口603。其中，读短信通知卡片601中显示了用户刚刚接收到但是还没有读取的短信的内容；通话录音通知卡片602中显示用户刚刚通话录音的保存位置；功能菜单显示窗口603中包括多个功能选项，其中多个功能选项包括飞行模式选择功能、Wi-Fi开启或者关闭功能、手电筒开启或者广播功能、免打扰模式开启或者关闭功能以及华为分享(Huawei Share)开启或者关闭功能，功能菜单显示窗口603还包括用于调节屏幕亮度的功能。
参见图6中的(c)所示，该GUI为用户的手指靠近但是还没有点击未读短信通知卡片601时的下拉菜单显示界面。该显示界面中的未读短信通知卡片601可以为初始像素值，其中，未读短信通知卡片601的初始像素值为长1090px，宽300px。
参见图6中的(d)所示，该GUI为用户的手指点击未读短信通知卡片601时的下拉菜单显示界面。当手机检测到用户的手指点击未读短信通知卡片601时，该闹钟卡片的像素值缩小为长1036px、宽285px。
一个实施例中，未读短信通知卡片601的像素值从长1090px，宽300px缩小为长1036px、宽285px的过程可以是一个渐变的过程，未读短信通知卡片601可以按照一定速率逐渐缩小到长1036px、宽285px。
应理解，未读短信通知卡片从长1090px，宽300px变为长1036px、宽285px的过程持续时长可以为150-200ms。
一个实施例中，当未读短信通知卡片601的像素值从长1090px，宽300px缩小到长1036px、宽285px时，未读短信通知卡片601的像素值可以保持在长1036px和宽285px不再缩小。
应理解，本申请实施例中，用户手指点击未读短信通知卡片601也可以理解为用户的手指按压未读短信通知卡片601。
参见图6中的(e)所示的GUI，该GUI为手机检测到用户的手指离开屏幕时的下拉菜单显示界面。当手机检测到用户的手指离开屏幕时，未读短信通知卡片601的像素值从长1036px、宽285px恢复到长1090px，宽300px。
一个实施例中，未读短信通知卡片601的像素值从长1036px、宽285px恢复到长1090px，宽300px的过程可以是一个渐变的过程，未读短信通知卡片601可以按照一定速率逐渐恢复到长1090px，宽300px。
参见图6中的(f)所示的GUI，该GUI为短信应用的显示界面。该显示界面包括文字输入窗口604，用户可以在文字输入窗口604中输出要回复的信息并点击控件605后将该回复的信息发送给手机号为18792929676的用户。
应理解，上述图6所示的GUI是以未读短信通知卡片的初始像素值为1090px和宽300px为例进行说明，手机的未读短信通知卡片的像素值也可以为其他值，本申请实施例对此并不作任何限定。
还应理解，上述未读短信通知卡片也可以属于中面积页面元素。
以上结合图4至图6对本申请中用户在点击中面积页面元素的过程中页面元素的变化进行了描述，手机在检测到用户点击中面积页面元素的操作后，手机可以控制中面积页面元素按照一定比例缩小，通过检测到用户的操作改变中面积页面元素的形状，有助于增强了手机对用户操作的反馈，从而提高了手机对用户操作的提示效果。
图7示出了手机的另一组GUI界面，其中，从图7中的(a)到图7中的(g)示出了用户通过点击多任务卡片中的一个任务卡片进入对应的应用程序时，任务卡片的像素值变化的过程。
参见图7中的(a)所示的GUI，该GUI为手机的桌面。当手机检测到用户点击控件701的操作后，显示如图7中的(b)所示的GUI。
参见图7中的(b)所示的GUI，该GUI为手机的多任务卡片的显示界面。其中，多任务卡片可以包括一个或者多个应用进程的缩略图。用户可以通过左右滑动选择选择需要显示的应用程序。当手机在该多任务卡片的显示界面检测到用户向右滑动的操作后，可以显示如图7中的(c)所示的GUI。
应理解，本申请实施例中，多任务卡片的显示界面的入口可以有多个，当手机检测到用户点击控件701的操作后，手机可以显示该多任务卡片的显示界面；或者，当手机检测到用户在屏幕的下方向上滑动的操作后，也可以显示该多任务卡片的显示界面。
还应理解，如图7中的(b)所示，该多任务卡片中每个应用程序的缩略图可以是按照用户将对应的应用程序切换至后台的时间排列，用户最后切换到后台的应用程序的缩略图可以最先显示，例如图7中的(b)所示的任务卡片702，该任务卡片702对应的应用程序为唤醒词训练应用，图标704为唤醒词训练应用的图标。该显示界面还可以包括任务卡片703，用户可以通过在该界面上向右滑动显示对应的任务卡片703。
参见图7中的(c)所示的GUI，该GUI为手机的多任务卡片的另一显示界面。该显示界面包括任务卡片702、任务卡片703和任务卡片704。其中，图标706为任务卡片703对应的相册应用的图标。该显示界面还包括控件707，当手机检测到用户点击控件707的操作后，手机可以对进行分屏操作，例如，在手机屏幕的上半部分显示相册应用，下半部分显示手机的桌面。
参见图7中的(d)所示的GUI，该GUI为用户的手指即将点击但是还没有接触到任务卡片703时的显示界面。该显示界面中的任务卡片703可以为初始像素值，其中，任务卡片703的初始像素值为长1872px，宽864px。
参见图7中的(e)所示的GUI，该GUI为用户的手机点击任务卡片703时的显示界面。当手机检测到用户的手指点击任务卡片703时，该任务卡片703的像素值缩小为长1778px、宽821px。
一个实施例中，任务卡片703的像素值从长1872px，宽864px缩小为长1778px、宽821px的过程可以是一个渐变的过程，任务卡片703可以按照一定速率逐渐缩小到长1778px、宽821px。
应理解，任务卡片从长1872px，宽864px变为长1778px、宽821px的过程持续时长可以为200-250ms。
一个实施例中，当任务卡片703的像素值从长1872px，宽864px缩小到长1778px、宽821px时，任务卡片703的像素值可以保持在长1778px和宽864px不再缩小。
应理解，本申请实施例中，用户手指点击任务卡片703可以理解为用户的手指按压任务卡片703。
参见图7中的(f)所示的GUI，该GUI为手机检测到用户的手指离开屏幕时的多任务卡片的显示界面。当手机检测到用户的手指离开屏幕时，任务卡片703的像素值从长1778px、宽821px恢复到长1872px，宽864px。
一个实施例中，任务卡片703的像素值从长1778px、宽821px恢复到长1872px，宽864px的过程可以是一个渐变的过程，任务卡片703可以按照一定速率逐渐恢复到长1872px，宽864px。
参见图7中的(g)所示的GUI，该GUI为相册应用的显示界面。当手机检测到用户点击任务卡片703的操作后，手机可以显示该相册应用的界面。
应理解，该相册应用的界面可以是用户之前退出相册应用时相册应用的显示界面。
还应理解，任务卡片可以属于电子设备中的大面积页面元素。
一个实施例中，大面积页面元素可以为长的像素值大于第三像素值的页面元素；或者，大面积页面元素可以为宽的像素值大于第四像素值的页面元素；或者，大面积页面元素还可以为长的像素值大于第三像素值，且宽的像素值大于第四像素值的页面元素。
另一个实施例中，大面积页面元素可以为长大于第三距离的页面元素；或者，大面积页面元素可以为宽大于第四距离的页面元素；或者，大面积页面元素还可以为长大于第三距离，且宽大于第四距离的页面元素。
另一个实施例中，大面积页面元素还可以为面积大于第二面积的页面元素。
另一个实施例中，大面积页面元素可以长大于屏幕的长度的第三百分比的页面元素；或者，大面积页面元素也可以宽大于屏幕的宽度的第四百分比的页面元素；或者，大面积页面元素可以长大于屏幕的长度的第三百分比，且宽大于屏幕的宽度的第四百分比的页面元素。
本申请实施例中，手机在检测到用户点击任务卡片的操作后，手机可以控制任务卡片按照一定比例缩小，通过检测到用户的操作改变页面元素的形状，增强了手机对用户操作的反馈，从而提高了手机对用户操作的提示效果。
图8示出了本申请实施例的另一组GUI。其中，从图8的(a)至图8中的(f)示出了用户在相机应用中双击抓拍时拍摄控件的像素值的变化的过程。
参见图8中的(a)，该GUI为手机的桌面801。当手机检测到用户点击桌面801上的相机应用的图标802的操作后，可以启动相机应用，显示如图8中的(b)所示的GUI，该GUI可以称为拍摄界面。该拍摄界面上可以包括取景框803。在预览状态下，该取景框803内可以实时显示预览图像，当手机检测到用户点击拍摄控件804后，手机执行拍照操作，并将拍摄的照片保存下来。当用户的手指即将点击但是还没有接触到控件804时，该控件804可以保持初始像素值，其中，初始像素值为长216px，宽216px。
应理解，该拍摄界面号可以包括相册的图标805。当手机检测到用户点击相册的图标805后，可以在屏幕上显示已经拍摄的照片或者视频等。该拍摄界面还可以包括前置摄像头和后置摄像头的切换控件806，用户可以通过点击控件806实现前置摄像头和后置摄像头的切换。
还应理解，该拍摄控件804的像素值可以桌面图标的像素值相同，也可以和桌面的图标的像素值不同，本申请实施例对此并不作任何限定。
参见图8中的(c)所示的GUI，该GUI为手机检测到用户点击控件804时的拍摄界面。其中，拍摄控件804的像素值缩小为长194px，宽194px。
一个实施例中拍摄控件804的像素值从长216px，宽216px缩小为长194px，宽194px的过程可以是一个渐变的过程，任务卡片703可以按照一定速率逐渐缩小到长194px，宽194px。
一个实施例中，当拍摄控件804的像素值从长216px，宽216px缩小到长194px，宽194px时，拍摄控件804的像素值可以保持在长194px，宽194px不再缩小。
参见图8中的(d)所示的GUI，该GUI为手机检测到用户的手指离开控件804时的拍摄界面。当手机检测到用户的手指离开拍摄控件804时，拍摄控件804从长194px，宽194px向初始像素值逐渐恢复。在拍摄控件的像素值恢复到长205px，宽205px时(即还没有恢复到初始像素值)，手机再一次检测到用户点击控件804的操作。应理解，该过程可以是用户用手指快速抓拍照片的过程。
参见图8中的(e)所示的GUI，该GUI为手机短时间内第二次检测到用户点击控件804时的拍摄界面。此时，拍摄控件804从检测到用户的手指第二次点击时的像素值(长205px，宽205px)再一次缩小到长194px，宽194px。
参见图8中的(f)所示的GUI，该GUI为手机检测到用户的手指离开控件时的拍摄界面。该拍摄控件804的像素值可以从长194px，宽194px逐渐恢复为初始像素值。应理解，该拍摄控件804的像素值可以从长194px，宽194px逐渐恢复为初始像素值的过程中，手机没有检测到用户的手指点击控件804的而操作。
本申请实施例中，手机在检测到用户点击控件的操作后，手机可以控制任务卡片按照一定比例缩小，通过检测到用户的操作改变页面元素的形状，增强了手机对用户操作的反馈，从而提高了手机对用户操作的提示效果。同时，当手机检测到用户的手指离开控件时，控件的像素值可以进行逐渐恢复，当在恢复过程中手机再一次检测到用户点击控件的操作时，手机可以控制该控件再一次缩小。该过程可以称为可中断机制，可中断机制可以让用户的心眼合一，符合用户对该操作的心理预期。
以上结合图3至图8介绍了本申请实施例的几组GUI，这几组GUI中介绍了用户点击相应的页面元素时，页面元素可以进行相应的变化，从而增强了电子设备对用户的反馈，提高了电子设备对用户操作的提示效果。
其中，对于图3中(b)所示的图标、图8中的(c)所示的拍摄控件，用户在点击时可以感觉到图标弹得比较轻盈；对于图4中(f)所示的未接来电通知卡片、图5中的(d)所示的闹铃卡片、图6中的(d)所示的未读短信通知卡片，用户在点击时可以感觉到通知卡片或者闹钟卡片弹得比较厚重；对于图7中的(e)所示的任务卡片，用户在点击时可以感觉到相比于通知卡片或者闹钟卡片弹得更加厚重。
下面介绍本申请实施例中页面元素的变化过程的描述。
图9示出了用户点击页面元素的过程的示意图。其中用户点击页面元素的过程可以分为手指悬停(hover)、手指接触(down)和离手(up)三个过程。其中，点击过程的平均时长可以为460ms，从手指接触到离手大致为100-130ms。本申请实施例中，主要是利用从手指接触到离手的100-130ms对用户进行动画效果反馈(animation)。本申请实施例中，电子设备可以利用从手指接触到离手的时间间隔对用户点击页面元素的操作进行动画效果反馈，有助于提高了手机对用户操作的提示效果。
图10示出了本申请实施例提供的不同页面元素按压时的模拟弹簧力学的示意图。本申请实施例中，电子设备可以根据页面元素不同尺寸面积的大小，塑造不同的反弹效果。通过增加点击弹簧的初速度、刚性值和阻尼值来调节不同面积页面元素点击的反馈效果，塑造给用户不同的感受。其中，对于小面积页面元素的按压塑造轻盈感觉；对于中面积页面元素的按压塑造稳重的重量感；对于大面积页面元素的按压塑造厚重的重量感。
示例性的，表1示出了电子设备中不同面积的页面元素对应的应用场景。
表1
页面元素的类型 应用场景
小面积页面元素 桌面图标、照片缩略图、控件等
中面积页面元素 闹钟卡片、通知卡片、负一屏卡片等
大面积页面元素 多任务卡片等
对于不同的面积的页面元素可以模拟不同弹簧的力学参数。
示例性的，表2示出了对于不同的面积的页面元素对应的弹簧的力学参数。
表2
Figure BDA0003199141640000211
应理解，对于表2所示的参数中，小面积页面元素、中面积页面元素和大面积页面元素对应的弹簧振子的质量可以是相同的。
其中，阻尼系统运动时的微分方程为公式(1)所示：
Figure BDA0003199141640000212
其中，k表示弹性系数，g表示摩擦系数，m表示弹簧振子的质量，x表示弹簧振子距离平衡位置的距离，
Figure BDA0003199141640000213
表示弹簧振子的速度，
Figure BDA0003199141640000214
表示弹簧振子的加速度。
图11示出了小面积页面元素按压时的模拟弹簧的变化示意图。小面积页面元素对应的弹簧振子的质量、中面积页面元素对应的弹簧振子的质量和大面积页面元素对应的弹簧振子的质量可以不同。其中，小面积页面元素对应的弹簧振子的质量可以为0.3kg，，B表示弹簧振子距离平衡位置的距离h，C表示弹簧振子的刚度；当弹簧受到外力按压时，B的值变为h1。
图12示出了中面积页面元素按压时的模拟弹簧的变化示意图。当弹簧受到外力按压时，B的值变为h2。
图13示出了大面积页面元素按压时的模拟弹簧的变化示意图。当弹簧受到外力按压时，B的值变为h3。
其中，h1＜h2＜h3。
应理解上述表2仅仅是示意性的，对于不同的面积的页面元素对应的弹簧的力学参数也可以如表3所示，其中，小面积页面元素、中面积页面元素和大面积页面元素对应的弹簧振子的质量和刚度可以相同。
表3
Figure BDA0003199141640000215
应理解，上述表2和表3中的参数值仅仅是示意性的，本申请实施例对此并不作任何限定。
结合上述实施例及相关附图，本申请实施例提供了一种显示页面元素的方法，该方法可以在如图1、图2所示的具有触摸屏的电子设备(例如手机、平板电脑等)中实现。如图14所示，该方法可以包括以下步骤：
S1401，电子设备显示第一界面，该第一界面包括第一页面元素，该第一页面元素的尺寸为第一尺寸。
示例性的，如图3中的(a)所示，该第一界面为手机的桌面，该第一页面元素为“主题”应用程序的图标301，该图标301的像素值为长216px、宽216px。
示例性的，如图4中的(e)所示，该第一界面为手机的负一屏界面，该第一页面元素为未接来电通知卡片407，未接来电通知卡片407的像素值为长1376px、宽640px。
示例性的，如图5中的(c)所示，该第一界面为手机的桌面，该第一页面元素为闹钟卡片503，闹钟卡片503的像素值为长1090px、宽240px。
示例性的，如图6中的(c)所示，该第一界面为手机的下拉菜单显示界面，该第一页面元素为未读短信通知卡片601，未读短信通知卡片601的像素值为长1090px、300px。
示例性的，如图7中的(d)所示，该第一界面为多个任务卡片的显示界面，该第一页面元素为任务卡片703，任务卡片703的像素值为长1872px，宽864px。
示例性的，如图8中的(b)所示，该第一界面为手机的拍摄界面，该第一页面元素为拍摄控件804，拍摄控件804的像素值为长216px、宽216px。
S1402，该电子设备检测到用户对该第一页面元素的第一操作。
示例性的，如图3中的(b)所示，该第一操作为用户点击图标301的操作。
示例性的，如图4中的(f)所示，该第一操作为用户点击未接来电通知卡片407的操作。
示例性的，如图5中的(d)所示，该第一操作为用户点击闹钟卡片503的操作。
示例性的，如图6中的(d)所示，该第一操作为用户点击未读短信通知卡片601的操作。
示例性的，如图7中的(e)所示，该第一操作为用户点击任务卡片703的操作。
S1403，该电子设备响应于该第一操作，对该第一页面元素的尺寸进行调整。
一个实施例中，该电子设备对该第一页面元素的尺寸进行调整，包括：该电子设备将该第一页面元素的尺寸从第一尺寸缩小为第二尺寸，并由第二尺寸恢复到第一尺寸。
示例性的，如图3中的(a)至(c)所示，该电子设备控制该图标301从长216px、宽216px缩小为长194px、宽194px，并从长194px、宽194px恢复到长216px、宽216px。
示例性的，如图4中的(e)至(g)所示，该电子设备控制未接来电通知卡片407从长1376px、宽640px缩小为长1307px、宽608px，并从长1307px、宽608px恢复到长1376px、宽640px。
示例性的，如图5中的(c)至(e)所示，该电子设备控制闹钟卡片503从长1090px、宽240px缩小为长1036px、宽228px，并从长1036px、宽228px恢复到长1090px、宽240px。
示例性的，如图6中的(c)至(e)所示，该电子设备控制未读短信通知卡片601从长1090px、300px缩小为长1036px、宽285px，并从长1036px、宽285px恢复到长1090px、300px。
示例性的，如图7中的(d)至(f)所示，该电子设备控制任务卡片703从长1872px，宽864px缩小为长1778px、宽821px，并从长1778px、宽821px恢复到长1872px，宽864px。
一个实施例中，该电子设备对该第一页面元素的尺寸进行调整，包括：该电子设备将该第一页面元素的尺寸从第一尺寸缩小为第二尺寸。
一个实施例中，该电子设备对该第一页面元素的尺寸进行调整，包括：该电子设备将该第一页面元素的尺寸先放大后缩小到第一尺寸。
S1404，该电子设备在调整该第一页面元素的尺寸后，自动显示第二界面，该第二界面与该第一页面元素相关联。
示例性的，如图3中的(d)所示，第二界面为“主题”应用程序的显示界面。电子设备在检测到用户点击图标301的操作后，可以先对图标301的尺寸进行调整，然后打开该“主题”应用程序，显示“主题”应用程序的显示界面。
本申请实施例中，该第一页面元素为应用程序的图标时，该第二界面与该第一页面元素相关联可以理解为该第二界面为该图标对应的应用程序的显示界面。
示例性的，如图4中的(h)所示，第二界面为负一屏的另一显示界面。该另一显示界面上包括提醒窗口408。电子设备在检测到用户点击未接来电通知卡片407的操作后，可以先对未接来电通知卡片407的尺寸进行调整，然后在负一屏界面上显示窗口408。
示例性的，如图5中的(f)所示，第二界面为闹钟编辑界面。电子设备在检测到用户点击闹钟卡片503的操作后，可以先对闹钟卡片503的尺寸进行调整，然后打开闹钟编辑界面，用户可以在该编辑界面对闹钟进行编辑。
示例性的，如图6中的(f)所示，第二界面为短信应用的显示界面。电子设备在检测到用户点击未读短信通知卡片601的操作后，可以先对未读短信通知卡片601的尺寸进行调整，然后打开短信应用，用户可以在短信应用界面回复短消息。
本申请实施例中，该第一页面元素为通知卡片时，该第二界面与该第一页面元素相关联可以理解为该第二界面为该通知卡片对应的应用程序的显示界面；或者，该第二界面包括响应于该第一操作后在该第一界面上新增的页面元素，用户可以在新增的页面元素上执行对于该通知卡片相关的操作。
示例性的，如图7中的(g)所示，第二界面为相册应用的界面。电子设备在检测到用户点击任务卡片703的操作后，可以先对任务卡片703的尺寸进行调整，然后打开相册应用。应理解，电子设备打开相册应用的界面可以是用户之前退出相册应用时的显示界面。
本申请实施例中，该第一页面元素为任务卡片时，该第二界面与该第一页面元素相关联可以理解为该第二界面为该任务卡片对应的应用程序的显示界面。其中，该显示界面可以是用户之前退出该应用程序时的显示界面。
本申请实施例中，电子设备在检测到用户点击页面元素的操作后，电子设备可以通过检测到用户的操作改变页面元素的尺寸，有助于增强电子设备对用户操作的反馈，从而增强了电子设备对用户操作的提示效果。
可选地，该第一页面元素包括应用程序的图标、通知卡片和任务卡片中的任意一个。
可选地，该通知卡片包括下拉菜单中的通知卡片和负一屏的通知卡片中的任意一个。
可选地，该将该第一页面元素由该第一尺寸缩小为第二尺寸，并从该第二尺寸恢复到该第一尺寸，包括：通过模拟弹簧，将该第一页面元素由该第一尺寸缩小为第二尺寸，并从该第二尺寸恢复到该第一尺寸。
示例性的，如图10所示，电子设备可以通过模拟弹簧，实现对不同面积的页面元素的缩小和恢复。
本申请实施例中，电子设备在检测到用户对第一页面元素的第一操作时，可以模拟弹簧的特性，该第一操作(例如，按压)可以模拟自然力学，有助于增强用户的自然感受。
可选地，当该第一页面元素为应用程序的图标时模拟第一弹簧振子；或者，当该第一页面元素为通知卡片时模拟第二弹簧振子；或者，当该第一页面元素为任务卡片时模拟第三弹簧振子；其中，该第一弹簧振子、第二弹簧振子和第三弹簧振子的质量相同、刚度依次降低、阻尼依次降低。
本申请实施例中，对于不同的页面元素可以模拟不同力学参数的弹簧。
示例性的，对于图3中(b)所示的图标、图8中的(c)所示的拍摄控件，用户在点击时可以感觉到图标弹得比较轻盈。
示例性的，对于图4中(f)所示的未接来电通知卡片、图5中的(d)所示的闹铃卡片、图6中的(d)所示的未读短信通知卡片，用户在点击时可以感觉到通知卡片或者闹钟卡片弹得比较厚重。
示例性的，对于图7中的(e)所示的任务卡片，用户在点击时可以感觉到相比于通知卡片或者闹钟卡片弹得更加厚重。
本申请实施例中，电子设备通过模拟自然力学，通过对不同的页面元素定义不同的点击效果，有助于增强用户的自然感受，增强电子设备对用户操作的反馈，从而增强了电子设备对用户操作的提示效果。
可选地，该第一页面元素为图标时，该第二尺寸为该第一尺寸的K倍；或者，当该第一页面元素为通知卡片时，该第二尺寸为该第一尺寸的L倍；或者，当该第一页面元素为任务卡片时，该第二尺寸为该第一尺寸的M倍；其中，0＜K≤L≤M＜1。
示例性的，对于图标和控件，第二尺寸为第一尺寸的90％。
示例性的，对于通知卡片，第二尺寸为第一尺寸的95％。
示例性的，对于任务卡片，第二尺寸为第一尺寸的95％。
本申请实施例中，电子设备在检测到用户点击页面元素的操作后，电子设备可以控制不同的页面元素按照不同的比例进行缩小，对不同页面元素会给用户带来不同的视觉体验，有助于增强电子设备对用户操作的反馈，从而增强了电子设备对用户操作的提示效果。
可选地，当该第一页面元素为图标时，从该第一尺寸缩小为该第二尺寸的时长为第一时长N；当该第一页面元素为通知卡片时，从该第一尺寸缩小为该第二尺寸的时长为第二时长P；当该第一页面元素为任务卡片时，从该第一尺寸缩小为该第二尺寸的时长为第三时长Q；其中，100ms≤N≤P≤Q≤250ms。
示例性的，对于图标和控件，N为100-150ms。
示例性的，对于通知卡片，P为150ms-200ms。
示例性的，对于任务卡片，Q为200-250ms。
本申请实施例中，电子设备在检测到用户点击页面元素的操作后，电子设备可以控制不同的页面元素缩小到第二尺寸的时间不同，对不同页面元素会给用户带来不同的视觉体验，有助于增强电子设备对用户操作的反馈，从而增强了电子设备对用户操作的提示效果。
可选地，该自动显示第二界面，包括：当该第一页面元素从该第二尺寸恢复到该第一尺寸时，该电子设备的显示界面由该第一界面平滑过渡到该第二界面。
本申请实施例中，电子设备在将第一页面元素恢复到初始尺寸时，将显示界面由第一界面平滑过渡到第二界面，在增强了电子设备对用户操作的提示效果的同时也可以提高用户的视觉感受。
可选地，该电子设备的显示界面由该第一界面平滑过渡到该第二界面，包括：当该第一页面元素从该第二尺寸恢复到该第一尺寸时，该电子设备显示该第二界面；或者，当该第一页面元素从该第二尺寸恢复到该第一尺寸并间隔第一时间段时，该电子设备显示该第二界面。
示例性的，该第一时间段为80-120ms。
可选地，该第一操作为用户的手指触摸该第一页面元素的操作，该将该第一页面元素由该第一尺寸缩小为第二尺寸，包括：当检测到用户的手指触摸该第一页面元素时，开始将该第一页面元素由该第一尺寸缩小为该第二尺寸；或者，当检测到用户的手指离开该第一页面元素时，开始将该第一页面元素由该第一尺寸缩小为该第二尺寸。
可选地，该电子设备响应于该第一操作，将该第一页面元素由该第一尺寸缩小为第二尺寸，并从该第二尺寸恢复到该第一尺寸，包括：该电子设备响应于该第一操作，将该第一页面元素由该第一尺寸缩小为该第二尺寸；当该第一页面元素从该第二尺寸恢复到第三尺寸时，该电子设备检测到用户对该第一页面元素的第二操作，该第三尺寸大于该第二尺寸且小于该第一尺寸；该电子设备响应于该第二操作，将该第一页面元素从该第三尺寸缩小为该第二尺寸，并从该第二尺寸恢复到该第一尺寸。
示例性的，如图8中的(c)所示，当手机检测到用户点击控件804的操作时，手机可以控制控件804的尺寸从长216px、宽216px缩小为长194px、宽194px；如图8中的(d)和(e)所示，在手机控制控件804的尺寸从长194px、宽194px恢复到长205px、宽205px时，手机检测到用户第二次点击控件804的操作时，手机控制控件804的尺寸从长205px、宽205px缩小到长194px、宽194px；如图8中的(f)所示，当手机检测到用户离手时，手机控制控件804的尺寸从长194px、宽194px恢复到长216px、宽216px。
本申请实施例中，电子设备针对用户多次快速对第一页面元素的操作，可以快速响应用户的操作，减少用户对操作的等待时延，增强了电子设备对用户操作的提示效果。同时，电子设备的快速响应可以让用户心手合一，符合用户心理操作的预期。
可以理解的是，电子设备为了实现上述功能，其包含了执行各个功能相应的硬件和/或软件模块。结合本文中所公开的实施例描述的各示例的算法步骤，本申请能够以硬件或硬件和计算机软件的结合形式来实现。某个功能究竟以硬件还是计算机软件驱动硬件的方式来执行，取决于技术方案的特定应用和设计约束条件。本领域技术人员可以结合实施例对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。
本实施例可以根据上述方法示例对电子设备进行功能模块的划分，例如，可以对应各个功能划分各个功能模块，也可以将两个或两个以上的功能集成在一个处理模块中。上述集成的模块可以采用硬件的形式实现。需要说明的是，本实施例中对模块的划分是示意性的，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。
在采用对应各个功能划分各个功能模块的情况下，图15示出了上述实施例中涉及的电子设备1500的一种可能的组成示意图，如图15所示，该电子设备1500可以包括：显示单元1501，检测单元1502和调整单元1503。
其中，显示单元1501可以用于支持电子设备1500执行上述步骤1401、步骤1404等，和/或用于本文所描述的技术的其他过程。
检测单元1502可以用于支持电子设备1500执行上述步骤1402等，和/或用于本文所描述的技术的其他过程。
调整单元1503可以用于支持电子设备1500执行上述步骤1403中对页面元素缩小和/或恢复等，和/或用于本文所描述的技术的其他过程。
需要说明的是，上述方法实施例涉及的各步骤的所有相关内容均可以援引到对应功能模块的功能描述，在此不再赘述。
本实施例提供的电子设备，用于执行上述显示页面元素的方法，因此可以达到与上述实现方法相同的效果。
在采用集成的单元的情况下，电子设备可以包括处理模块、存储模块和通信模块。其中，处理模块可以用于对电子设备的动作进行控制管理，例如，可以用于支持电子设备执行上述各个单元执行的步骤。存储模块可以用于支持电子设备执行存储程序代码和数据等。通信模块，可以用于支持电子设备与其他设备的通信。
其中，处理模块可以是处理器或控制器。其可以实现或执行结合本申请公开内容所描述的各种示例性的逻辑方框，模块和电路。处理器也可以是实现计算功能的组合，例如包含一个或多个微处理器组合，数字信号处理(digital signal processing，DSP)和微处理器的组合等等。存储模块可以是存储器。通信模块具体可以为射频电路、蓝牙芯片、Wi-Fi芯片等与其他电子设备交互的设备。
在一个实施例中，当处理模块为处理器，存储模块为存储器时，本实施例所涉及的电子设备可以为具有图1所示结构的设备。
本实施例还提供一种计算机存储介质，该计算机存储介质中存储有计算机指令，当该计算机指令在电子设备上运行时，使得电子设备执行上述相关方法步骤实现上述实施例中的显示页面元素的方法。
本实施例还提供了一种计算机程序产品，当该计算机程序产品在计算机上运行时，使得计算机执行上述相关步骤，以实现上述实施例中的显示页面元素的方法。
另外，本申请的实施例还提供一种装置，这个装置具体可以是芯片，组件或模块，该装置可包括相连的处理器和存储器；其中，存储器用于存储计算机执行指令，当装置运行时，处理器可执行存储器存储的计算机执行指令，以使芯片执行上述各方法实施例中的显示页面元素的方法。
其中，本实施例提供的电子设备、计算机存储介质、计算机程序产品或芯片均用于执行上文所提供的对应的方法，因此，其所能达到的有益效果可参考上文所提供的对应的方法中的有益效果，此处不再赘述。
通过以上实施方式的描述，所属领域的技术人员可以了解到，为描述的方便和简洁，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将装置的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。
在本申请所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，模块或单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个装置，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是一个物理单元或多个物理单元，即可以位于一个地方，或者也可以分布到多个不同地方。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个可读取存储介质中。基于这样的理解，本申请实施例的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该软件产品存储在一个存储介质中，包括若干指令用以使得一个设备(可以是单片机，芯片等)或处理器(processor)执行本申请各个实施例方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(read only memory，ROM)、随机存取存储器(random access memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
以上内容，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以权利要求的保护范围为准。

Claims (25)

1.一种电子设备，其特征在于，包括：
一个或多个处理器；
一个或多个存储器；
所述一个或多个存储器存储有一个或多个计算机程序，所述一个或多个计算机程序包括指令，当所述指令被所述一个或多个处理器执行时，使得所述电子设备执行以下步骤：
显示第一界面，所述第一界面包括第一页面元素，所述第一页面元素的尺寸为第一尺寸；
检测到用户对所述第一页面元素的第一操作；
响应于所述第一操作，将所述第一页面元素由所述第一尺寸缩小为第二尺寸，并从所述第二尺寸恢复到所述第一尺寸；
在由所述第二尺寸恢复到所述第一尺寸之后，自动显示第二界面，所述第二界面与所述第一页面元素相关联，所述第二界面为所述第一页面元素对应的应用程序的显示界面。
2.根据权利要求1所述的电子设备，其特征在于，所述第一页面元素包括应用程序的图标、通知卡片和任务卡片中的任意一个。
3.根据权利要求2所述的电子设备，其特征在于，所述通知卡片包括下拉菜单中的通知卡片和负一屏的通知卡片中的任意一个。
4.根据权利要求2或3所述的电子设备，其特征在于，当所述指令被所述一个或多个处理器执行时，使得所述电子设备执行以下步骤：
通过模拟弹簧振子，将所述第一页面元素由所述第一尺寸逐渐缩小为所述第二尺寸，并从所述第二尺寸逐渐恢复到所述第一尺寸。
5.根据权利要求4所述的电子设备，其特征在于，当所述第一页面元素为应用程序的图标时模拟第一弹簧振子；或者，
当所述第一页面元素为通知卡片时模拟第二弹簧振子；或者，
当所述第一页面元素为任务卡片时模拟第三弹簧振子；
其中，所述第一弹簧振子、第二弹簧振子和第三弹簧振子的质量相同、刚度依次降低、阻尼依次降低。
6.根据权利要求2至5中任一项所述的电子设备，其特征在于，所述第一页面元素为图标时，所述第二尺寸为所述第一尺寸的K倍；或者，
当所述第一页面元素为通知卡片时，所述第二尺寸为所述第一尺寸的L倍；或者，
当所述第一页面元素为任务卡片时，所述第二尺寸为所述第一尺寸的M倍；
其中，0＜K≤L≤M＜1。
7.根据权利要求2至6中任一项所述的电子设备，其特征在于，当所述第一页面元素为图标时，从所述第一尺寸缩小为所述第二尺寸的时长为第一时长N；
当所述第一页面元素为通知卡片时，从所述第一尺寸缩小为所述第二尺寸的时长为第二时长P；
当所述第一页面元素为任务卡片时，从所述第一尺寸缩小为所述第二尺寸的时长为第三时长Q；
其中，100ms≤N≤P≤Q≤250ms。
8.根据权利要求1至7中任一项所述的电子设备，其特征在于，当所述指令被所述一个或多个处理器执行时，使得所述电子设备执行以下步骤：
当所述第一页面元素从所述第二尺寸恢复到所述第一尺寸时，所述电子设备的显示界面由所述第一界面平滑过渡到所述第二界面。
9.根据权利要求8所述的电子设备，其特征在于，当所述指令被所述一个或多个处理器执行时，使得所述电子设备执行以下步骤：
当所述第一页面元素从所述第二尺寸恢复到所述第一尺寸时，所述电子设备显示所述第二界面；或者，
当所述第一页面元素从所述第二尺寸恢复到所述第一尺寸并间隔第一时间段时，所述电子设备显示所述第二界面。
10.根据权利要求1至9中任一项所述的电子设备，其特征在于，所述第一操作为用户的手指触摸所述第一页面元素的操作，当所述指令被所述一个或多个处理器执行时，使得所述电子设备执行以下步骤：
当检测到用户的手指触摸所述第一页面元素时，开始将所述第一页面元素由所述第一尺寸缩小为所述第二尺寸；或者，
当检测到用户的手指离开所述第一页面元素时，开始将所述第一页面元素由所述第一尺寸缩小为所述第二尺寸。
11.根据权利要求1至10中任一项所述的电子设备，其特征在于，当所述指令被所述一个或多个处理器执行时，使得所述电子设备执行以下步骤：
响应于所述第一操作，将所述第一页面元素由所述第一尺寸缩小为所述第二尺寸；
当所述第一页面元素从所述第二尺寸恢复到第三尺寸时，检测到用户对所述第一页面元素的第二操作，所述第三尺寸大于所述第二尺寸且小于所述第一尺寸；
响应于所述第二操作，将所述第一页面元素从所述第三尺寸缩小为所述第二尺寸，并从所述第二尺寸恢复到所述第一尺寸。
12.一种显示页面元素的方法，所述方法应用于电子设备，其特征在于，包括：
所述电子设备显示第一界面，所述第一界面包括第一页面元素，所述第一页面元素的尺寸为第一尺寸；
所述电子设备检测到用户对所述第一页面元素的第一操作；
所述电子设备响应于所述第一操作，将所述第一页面元素由所述第一尺寸缩小为第二尺寸，并从所述第二尺寸恢复到所述第一尺寸；
所述电子设备在由所述第二尺寸恢复到所述第一尺寸之后，自动显示第二界面，所述第二界面与所述第一页面元素相关联，所述第二界面为所述第一页面元素对应的应用程序的显示界面。
13.根据权利要求12所述的方法，其特征在于，所述第一页面元素包括应用程序的图标、通知卡片和任务卡片中的任意一个。
14.根据权利要求13所述的方法，其特征在于，所述通知卡片包括下拉菜单中的通知卡片和负一屏的通知卡片中的任意一个。
15.根据权利要求13或14所述的方法，其特征在于，所述将所述第一页面元素由所述第一尺寸缩小为第二尺寸，并从所述第二尺寸恢复到所述第一尺寸，包括：
通过模拟弹簧，将所述第一页面元素由所述第一尺寸缩小为第二尺寸，并从所述第二尺寸恢复到所述第一尺寸。
16.根据权利要求15所述的方法，其特征在于，当所述第一页面元素为应用程序的图标时模拟第一弹簧振子；或者，
当所述第一页面元素为通知卡片时模拟第二弹簧振子；或者，
当所述第一页面元素为任务卡片时模拟第三弹簧振子；
其中，所述第一弹簧振子、第二弹簧振子和第三弹簧振子的质量相同、刚度依次降低、阻尼依次降低。
17.根据权利要求13至16中任一项所述的方法，其特征在于，所述第一页面元素为图标时，所述第二尺寸为所述第一尺寸的K倍；或者，
当所述第一页面元素为通知卡片时，所述第二尺寸为所述第一尺寸的L倍；或者，
当所述第一页面元素为任务卡片时，所述第二尺寸为所述第一尺寸的M倍；
其中，0＜K≤L≤M＜1。
18.根据权利要求13至17中任一项所述的方法，其特征在于，当所述第一页面元素为图标时，从所述第一尺寸缩小为所述第二尺寸的时长为第一时长N；
当所述第一页面元素为通知卡片时，从所述第一尺寸缩小为所述第二尺寸的时长为第二时长P；
当所述第一页面元素为任务卡片时，从所述第一尺寸缩小为所述第二尺寸的时长为第三时长Q；
其中，100ms≤N≤P≤Q≤250ms。
19.根据权利要求12至18中任一项所述的方法，其特征在于，所述自动显示第二界面，包括：
当所述第一页面元素从所述第二尺寸恢复到所述第一尺寸时，所述电子设备的显示界面由所述第一界面平滑过渡到所述第二界面。
20.根据权利要求19所述的方法，其特征在于，所述电子设备的显示界面由所述第一界面平滑过渡到所述第二界面，包括：
当所述第一页面元素从所述第二尺寸恢复到所述第一尺寸时，所述电子设备显示所述第二界面；或者，
当所述第一页面元素从所述第二尺寸恢复到所述第一尺寸并间隔第一时间段时，所述电子设备显示所述第二界面。
21.根据权利要求12至20中任一项所述的方法，其特征在于，所述第一操作为用户的手指触摸所述第一页面元素的操作，所述将所述第一页面元素由所述第一尺寸缩小为第二尺寸，包括：
当检测到用户的手指触摸所述第一页面元素时，开始将所述第一页面元素由所述第一尺寸缩小为所述第二尺寸；或者，
当检测到用户的手指离开所述第一页面元素时，开始将所述第一页面元素由所述第一尺寸缩小为所述第二尺寸。
22.根据权利要求12至21中任一项所述的方法，其特征在于，所述电子设备响应于所述第一操作，将所述第一页面元素由所述第一尺寸缩小为第二尺寸，并从所述第二尺寸恢复到所述第一尺寸，包括：
所述电子设备响应于所述第一操作，将所述第一页面元素由所述第一尺寸缩小为所述第二尺寸；
当所述第一页面元素从所述第二尺寸恢复到第三尺寸时，所述电子设备检测到用户对所述第一页面元素的第二操作，所述第三尺寸大于所述第二尺寸且小于所述第一尺寸；
所述电子设备响应于所述第二操作，将所述第一页面元素从所述第三尺寸缩小为所述第二尺寸，并从所述第二尺寸恢复到所述第一尺寸。
23.一种芯片系统，其特征在于，所述芯片系统包括至少一个处理器，当程序指令在所述至少一个处理器中执行时，使得如权利要求12-22中任一所述的方法在所述电子设备上的功能得以实现。
24.一种计算机存储介质，其特征在于，包括计算机指令，当所述计算机指令在电子设备上运行时，使得所述电子设备执行如权利要求12-22中任一项所述的显示页面元素的方法。
25.一种计算机程序产品，其特征在于，当所述计算机程序产品在计算机上运行时，使得所述计算机执行如权利要求12-22中任一项所述的显示页面元素的方法。
CN202110899628.XA 2019-08-09 2019-08-09 显示页面元素的方法和电子设备 Active CN113760427B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110899628.XA CN113760427B (zh) 2019-08-09 2019-08-09 显示页面元素的方法和电子设备

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201910736105.6A CN110569095B (zh) 2019-08-09 2019-08-09 显示页面元素的方法和电子设备
CN202110899628.XA CN113760427B (zh) 2019-08-09 2019-08-09 显示页面元素的方法和电子设备

Related Parent Applications (1)

Application Number Title Priority Date Filing Date
CN201910736105.6A Division CN110569095B (zh) 2019-08-09 2019-08-09 显示页面元素的方法和电子设备

Publications (2)

Publication Number Publication Date
CN113760427A true CN113760427A (zh) 2021-12-07
CN113760427B CN113760427B (zh) 2022-12-16

Family

ID=68775036

Family Applications (3)

Application Number Title Priority Date Filing Date
CN202110899628.XA Active CN113760427B (zh) 2019-08-09 2019-08-09 显示页面元素的方法和电子设备
CN201910736105.6A Active CN110569095B (zh) 2019-08-09 2019-08-09 显示页面元素的方法和电子设备
CN202080071585.XA Pending CN114586008A (zh) 2019-08-09 2020-08-07 显示页面元素的方法和电子设备

Family Applications After (2)

Application Number Title Priority Date Filing Date
CN201910736105.6A Active CN110569095B (zh) 2019-08-09 2019-08-09 显示页面元素的方法和电子设备
CN202080071585.XA Pending CN114586008A (zh) 2019-08-09 2020-08-07 显示页面元素的方法和电子设备

Country Status (5)

Country Link
US (2) US11675478B2 (zh)
EP (1) EP4012558A4 (zh)
CN (3) CN113760427B (zh)
DE (1) DE202020005847U1 (zh)
WO (1) WO2021027725A1 (zh)

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2023130977A1 (zh) * 2022-01-04 2023-07-13 华为技术有限公司 用户界面显示方法、电子设备、介质以及程序产品
CN117130516A (zh) * 2023-03-31 2023-11-28 荣耀终端有限公司 一种显示方法及电子设备
WO2024041023A1 (zh) * 2022-08-26 2024-02-29 荣耀终端有限公司 应用卡片调整方法、装置、终端设备和存储介质

Families Citing this family (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113760427B (zh) 2019-08-09 2022-12-16 荣耀终端有限公司 显示页面元素的方法和电子设备
CN113838550A (zh) * 2020-06-08 2021-12-24 华为技术有限公司 一种健康数据展示方法和电子设备
USD946018S1 (en) 2020-06-18 2022-03-15 Apple Inc. Display screen or portion thereof with graphical user interface
CN111833868A (zh) * 2020-06-30 2020-10-27 北京小米松果电子有限公司 语音助手控制方法、装置及计算机可读存储介质
CN112099690A (zh) * 2020-09-15 2020-12-18 深圳市欢太科技有限公司 页面缩放方法、装置、终端及存储介质
CN112148166A (zh) * 2020-09-28 2020-12-29 维沃移动通信有限公司 桌面组件管理方法及装置
CN113552987B (zh) * 2021-04-20 2022-09-16 华为技术有限公司 图形界面显示方法、电子设备、介质以及程序产品
CN114327195B (zh) * 2022-02-15 2022-08-16 荣耀终端有限公司 卡片管理方法、设备及存储介质
CN117111823A (zh) * 2023-07-12 2023-11-24 荣耀终端有限公司 缩放方法及相关装置

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20110138309A1 (en) * 2009-12-04 2011-06-09 Nellcor Puritan Bennett Llc Visual Indication Of Settings Changes On A Ventilator Graphical User Interface
CN103842952A (zh) * 2011-10-01 2014-06-04 甲骨文国际公司 结合经典运动力学关于显示框移动对象
CN106055210A (zh) * 2016-06-24 2016-10-26 宇龙计算机通信科技(深圳)有限公司 一种图标的处理方法以及装置
CN106371692A (zh) * 2016-08-22 2017-02-01 暴风集团股份有限公司 对系统启动图标进行互动展现的方法
CN106569708A (zh) * 2016-10-24 2017-04-19 珠海市魅族科技有限公司 一种按压拟真显示的实现方法及终端
CN107315516A (zh) * 2017-06-26 2017-11-03 努比亚技术有限公司 一种图标播放方法、移动终端以及计算机可读存储介质
CN110569095B (zh) * 2019-08-09 2021-08-13 荣耀终端有限公司 显示页面元素的方法和电子设备

Family Cites Families (27)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6825861B2 (en) * 2001-01-08 2004-11-30 Apple Computer, Inc. Three state icons for operation
KR20050112300A (ko) * 2004-05-25 2005-11-30 삼성전자주식회사 다단 눌림 버튼을 갖는 복합기
EP1933229A1 (de) 2006-12-14 2008-06-18 BrainLAB AG Verfahren und Vorrichtung zum Darstellen und Bedienen einer Bedienoberfläche auf einer Anzeige
EP2431870B1 (en) 2010-09-17 2019-11-27 LG Electronics Inc. Mobile terminal and control method thereof
CA2821093C (en) 2010-12-10 2018-01-16 Sergey Karmanenko Mobile device with user interface
KR20120064756A (ko) 2010-12-10 2012-06-20 삼성전자주식회사 터치스크린을 구비한 휴대 단말기의 화면 표시 방법 및 장치
US9269178B2 (en) * 2012-06-05 2016-02-23 Apple Inc. Virtual camera for 3D maps
EP2872980B1 (en) * 2012-07-15 2018-10-17 Apple Inc. Disambiguation of multitouch gesture recognition for 3d interaction
JP6053500B2 (ja) 2012-12-21 2016-12-27 京セラ株式会社 携帯端末ならびにユーザインターフェース制御プログラムおよび方法
GB201300031D0 (en) 2013-01-02 2013-02-13 Canonical Ltd Ubuntu UX innovations
CN104216548B (zh) 2013-06-04 2020-06-23 联想(北京)有限公司 触控反馈方法、装置及电子设备
CN103309564A (zh) * 2013-07-01 2013-09-18 贝壳网际（北京）安全技术有限公司 元素信息的显示方法及装置
US10001817B2 (en) * 2013-09-03 2018-06-19 Apple Inc. User interface for manipulating user interface objects with magnetic properties
KR20150032093A (ko) * 2013-09-17 2015-03-25 주식회사 팬택 사용자 인터페이스를 편집하는 단말기 및 방법
CN105373328A (zh) * 2014-09-02 2016-03-02 中兴通讯股份有限公司 应用处理方法及装置
CN104574483A (zh) * 2014-12-31 2015-04-29 北京奇虎科技有限公司 一种生成可定制动态图的方法和装置
CN104598112B (zh) * 2015-01-23 2019-01-18 小米科技有限责任公司 按钮交互方法和装置
US9632664B2 (en) * 2015-03-08 2017-04-25 Apple Inc. Devices, methods, and graphical user interfaces for manipulating user interface objects with visual and/or haptic feedback
US9880735B2 (en) * 2015-08-10 2018-01-30 Apple Inc. Devices, methods, and graphical user interfaces for manipulating user interface objects with visual and/or haptic feedback
CN105912312A (zh) * 2015-12-11 2016-08-31 乐视移动智能信息技术（北京）有限公司 一种控件滑动控制方法及其装置
CN105607857B (zh) 2015-12-29 2018-11-23 小米科技有限责任公司 页面选择方法和装置
US10222960B2 (en) * 2016-04-26 2019-03-05 Google Llc Animation of user interface elements
CN106569985B (zh) * 2016-11-14 2020-06-02 北京小米移动软件有限公司 信息编辑方法及装置
CN107272992A (zh) * 2017-06-26 2017-10-20 深圳天珑无线科技有限公司 一种应用图标的处理方法、装置及终端
US11054988B2 (en) 2017-06-30 2021-07-06 Huawei Technologies Co., Ltd. Graphical user interface display method and electronic device
CN107632874B (zh) 2017-09-05 2023-11-03 Oppo广东移动通信有限公司 界面显示方法、装置及终端
CN110096662A (zh) * 2019-04-22 2019-08-06 华为技术有限公司 一种网页显示方法及相关装置

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20110138309A1 (en) * 2009-12-04 2011-06-09 Nellcor Puritan Bennett Llc Visual Indication Of Settings Changes On A Ventilator Graphical User Interface
CN103842952A (zh) * 2011-10-01 2014-06-04 甲骨文国际公司 结合经典运动力学关于显示框移动对象
CN106055210A (zh) * 2016-06-24 2016-10-26 宇龙计算机通信科技(深圳)有限公司 一种图标的处理方法以及装置
CN106371692A (zh) * 2016-08-22 2017-02-01 暴风集团股份有限公司 对系统启动图标进行互动展现的方法
CN106569708A (zh) * 2016-10-24 2017-04-19 珠海市魅族科技有限公司 一种按压拟真显示的实现方法及终端
CN107315516A (zh) * 2017-06-26 2017-11-03 努比亚技术有限公司 一种图标播放方法、移动终端以及计算机可读存储介质
CN110569095B (zh) * 2019-08-09 2021-08-13 荣耀终端有限公司 显示页面元素的方法和电子设备

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2023130977A1 (zh) * 2022-01-04 2023-07-13 华为技术有限公司 用户界面显示方法、电子设备、介质以及程序产品
WO2024041023A1 (zh) * 2022-08-26 2024-02-29 荣耀终端有限公司 应用卡片调整方法、装置、终端设备和存储介质
CN117130516A (zh) * 2023-03-31 2023-11-28 荣耀终端有限公司 一种显示方法及电子设备

Also Published As

Publication number Publication date
EP4012558A4 (en) 2022-10-19
DE202020005847U1 (de) 2022-10-27
CN110569095A (zh) 2019-12-13
WO2021027725A1 (zh) 2021-02-18
EP4012558A1 (en) 2022-06-15
US11989388B2 (en) 2024-05-21
CN110569095B (zh) 2021-08-13
US20230341994A1 (en) 2023-10-26
US20220365661A1 (en) 2022-11-17
US11675478B2 (en) 2023-06-13
CN113760427B (zh) 2022-12-16
CN114586008A (zh) 2022-06-03

Similar Documents

Publication Publication Date Title
CN110569095B (zh) 显示页面元素的方法和电子设备
CN110045908B (zh) 一种控制方法和电子设备
CN109814766B (zh) 一种应用显示方法及电子设备
CN114816210B (zh) 一种移动终端的全屏显示方法及设备
CN112714901B (zh) 系统导航栏的显示控制方法、图形用户界面及电子设备
CN110543289B (zh) 控制音量的方法和电子设备
WO2021213164A1 (zh) 应用界面交互方法、电子设备和计算机可读存储介质
WO2021000881A1 (zh) 一种分屏方法及电子设备
WO2021000841A1 (zh) 一种生成用户头像的方法及电子设备
CN113994317A (zh) 一种用户界面布局方法及电子设备
CN110830645B (zh) 一种操作方法和电子设备及计算机存储介质
CN110633043A (zh) 一种分屏处理方法及终端设备
CN113986070B (zh) 一种应用卡片的快速查看方法及电子设备
WO2020155875A1 (zh) 电子设备的显示方法、图形用户界面及电子设备
CN113010076A (zh) 一种显示要素的显示方法和电子设备
WO2022156473A1 (zh) 一种播放视频的方法及电子设备
CN115115679A (zh) 一种图像配准方法及相关设备
EP4365722A1 (en) Method for displaying dock bar in launcher and electronic device
WO2022228042A1 (zh) 显示方法、电子设备、存储介质和程序产品
WO2021196980A1 (zh) 多屏交互方法、电子设备及计算机可读存储介质
RU2809207C2 (ru) Способ обеспечения эффекта обратной связи для пользовательской операции и электронное устройство
CN114244951B (zh) 应用程序打开页面的方法及其介质和电子设备
CN117519854A (zh) 显示方法及电子设备
CN114816171A (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
REG Reference to a national code

Ref country code: HK

Ref legal event code: DE

Ref document number: 40061814

Country of ref document: HK

GR01 Patent grant
GR01 Patent grant