WO2019127158A1 - 终端设备及其图形用户界面以及图形用户界面的控制方法 - Google Patents

终端设备及其图形用户界面以及图形用户界面的控制方法 Download PDF

Info

Publication number
WO2019127158A1
WO2019127158A1 PCT/CN2017/119142 CN2017119142W WO2019127158A1 WO 2019127158 A1 WO2019127158 A1 WO 2019127158A1 CN 2017119142 W CN2017119142 W CN 2017119142W WO 2019127158 A1 WO2019127158 A1 WO 2019127158A1
Authority
WO
WIPO (PCT)
Prior art keywords
user interface
graphical user
display
icon
area
Prior art date
Application number
PCT/CN2017/119142
Other languages
English (en)
French (fr)
Inventor
潘英强
Original Assignee
深圳市柔宇科技有限公司
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 深圳市柔宇科技有限公司 filed Critical 深圳市柔宇科技有限公司
Priority to PCT/CN2017/119142 priority Critical patent/WO2019127158A1/zh
Priority to CN201780097425.0A priority patent/CN111448534B/zh
Publication of WO2019127158A1 publication Critical patent/WO2019127158A1/zh

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

Definitions

  • the present application relates to the field of graphical user interface control, and in particular, to a terminal device based on a flexible touch display screen and a graphical user interface thereof and a control method of the graphical user interface.
  • the flexible touch display is made of soft material and can be deformed and bended to give users a novel experience.
  • the embodiment of the present application discloses a terminal device based on a flexible touch display screen and a graphical user interface thereof and a control method of the graphical user interface to solve the above problem.
  • a terminal device disclosed in the embodiment of the present application includes a flexible touch display screen and a rotation sensor, wherein the rotation sensor senses a real-time rotation angle and a real-time rotation direction of the flexible touch display screen, and the flexibility
  • the touch display screen displays a graphical user interface, the graphical user interface displaying a plurality of icons, each icon being displayed by a corresponding display attribute;
  • the terminal device further comprising a memory, a processor, and being stored in the memory and a computer program running on the processor, the processor executing the computer program: acquiring the rotation angle and a rotation direction sensed by the rotation sensor; controlling a user interface coordinate system according to the rotation direction Rotating the rotation angle and controlling the graphical user interface to follow the user interface coordinate system rotation to maintain the layout of the graphical user interface in the user interface coordinate system unchanged, and control all icon relative icons of the graphical user interface
  • the coordinates of the coordinate system and the display direction of the content on each icon are unchanged; the graphical user interface is as described The user interface during the rotation of the coordinate
  • a graphical user interface on a terminal device with a flexible touch display screen disclosed in the embodiment of the present application
  • the terminal device includes a rotation sensor, and the rotation sensor senses real time of the flexible touch display screen a flexible touch display screen displaying a graphical user interface, the graphical user interface displaying a plurality of icons, each icon being displayed by a corresponding display attribute; the graphical user interface being by the terminal device
  • the processor controls and implements: when the rotation sensor senses the rotation of the flexible touch display screen, the user interface coordinate of the graphical user interface is based on the rotation angle and the rotation direction sensed by the rotation sensor.
  • the display attributes of each icon of the graphical user interface are also adjusted according to the real-time display position on the rotated graphical user interface.
  • a graphical user interface adjustment method is applied to a terminal device having a flexible touch display screen, the terminal device including a rotation sensor, the rotation sensor sensing the flexible touch Controlling a real-time rotation angle of the display screen and a real-time rotation direction, the flexible touch display screen displaying a graphical user interface, the graphical user interface displaying a plurality of icons, each icon being displayed by a corresponding display attribute; the graphical user interface
  • the adjusting method includes: acquiring the rotation angle and the rotation direction sensed by the rotation sensor; controlling a user interface coordinate system to rotate the rotation angle according to the rotation direction, and controlling the graphic user interface to follow a user interface coordinate system Rotating to maintain the layout of the graphical user interface in the user interface coordinate system unchanged, and controlling the coordinates of all icons of the graphical user interface relative to the icon coordinate system and the display direction of the content on each icon; Determining, in the process of rotating the graphical user interface with the user interface coordinate system, determining each icon in the Real-time display on the rotational position of a graphical
  • the flexible touch display screen of the terminal device of the present application displays a graphical user interface having a plurality of icons, each of which is displayed by a corresponding display attribute.
  • the processor thereby acquiring a real-time rotation angle and a rotation direction sensed by the rotation sensor; controlling the user interface coordinate system to rotate around the rotation angle and the rotation direction and maintaining the graphical user interface in the
  • the layout in the user interface coordinate system is unchanged, and the coordinates of all icons in the icon coordinate system and the display direction of the content on each icon are controlled.
  • FIG. 1 is a schematic block diagram of a terminal device in an embodiment of the present application.
  • FIG. 2 is a front elevational view of the terminal device after being fully deployed according to an embodiment of the present application.
  • FIG. 3 is a schematic perspective view of a folding process of a terminal device according to an embodiment of the present application.
  • FIG. 4 is a schematic perspective view of the terminal device after being completely folded according to an embodiment of the present application.
  • FIG. 5 is a schematic side view of the terminal device after being completely folded according to an embodiment of the present application.
  • FIG. 6 is a schematic rear view of the terminal device after being completely folded according to an embodiment of the present application.
  • FIG. 7 is a schematic diagram of a first rotation state of a terminal device in a fully folded state according to an embodiment of the present application.
  • FIG. 8 is a schematic diagram of a second rotation state of the terminal device in a fully folded state according to an embodiment of the present application.
  • FIG. 9 is a schematic diagram of a third rotation state of the terminal device in a fully folded state according to an embodiment of the present application.
  • FIG. 10 is a schematic diagram of a fourth rotation state of the terminal device in a fully folded state according to an embodiment of the present application.
  • FIG. 11 is a flowchart of a method for controlling a graphical user interface of a terminal device according to an embodiment of the present application.
  • FIG. 1 is a structural block diagram of a terminal device 100 according to an embodiment of the present application.
  • the terminal device 100 may be, but not limited to, a mobile phone, a tablet computer, an e-reader, a wearable electronic device, etc., and is not limited herein.
  • the terminal device 100 includes, but is not limited to, a processor 10, and a memory 20, a flexible touch display screen 30, and a rotation sensor 40 that are electrically connected to the processor 10, respectively.
  • FIG. 1 is only an example of the terminal device 100 and does not constitute a limitation on the terminal device 100.
  • the terminal device 100 may include more than that shown in FIG. 1 or Fewer components, or combinations of certain components, or different components, such as the terminal device 100 may also include input and output devices, network access devices, data buses, and the like.
  • the processor 10 may be a central processing unit (CPU), or may be another general-purpose processor, a digital signal processor (DSP), an application specific integrated circuit (ASIC), A field-programmable gate array (FPGA) or other programmable logic device, discrete gate or transistor logic device, discrete hardware components, and the like.
  • the general purpose processor may be a microprocessor or the processor may be any conventional processor or the like, which is a control center of the terminal device 100, and connects the entire terminal device 100 by using various interfaces and lines. Various parts.
  • the memory 20 can be used to store the computer program and/or module, the processor 10 by running or executing a computer program and/or module stored in the memory 20, and recalling data stored in the memory 20, Various functions of the terminal device 100 are implemented.
  • the memory 20 may mainly include a storage program area and a storage data area, wherein the storage program area may store an operating system, an application required for a plurality of functions (such as a sound playing function, an image playing function, etc.); and the storage data area may be Stores data created based on the use of the phone (such as audio data, phone book, etc.).
  • the memory 20 may include a high-speed random access memory, and may also include a non-volatile memory such as a hard disk, a memory, a plug-in hard disk, a smart memory card (SMC), and a secure digital (Secure Digital, SD) ) cards, flash cards, multiple disk storage devices, flash memory devices, or other volatile solid-state storage devices.
  • a non-volatile memory such as a hard disk, a memory, a plug-in hard disk, a smart memory card (SMC), and a secure digital (Secure Digital, SD) cards, flash cards, multiple disk storage devices, flash memory devices, or other volatile solid-state storage devices.
  • the flexible touch display screen 30 has a folding area 31.
  • the flexible touch display screen 30 can be folded along a fold line 37 within the fold zone 31. It can be understood that, in this embodiment, the folding area 31 is two.
  • the two folding regions 31 are disposed on both sides of the touch display screen 30.
  • the flexible touch display screen 30 is divided into a main screen 33 and two auxiliary screens 35 along the folding area 31.
  • the two auxiliary screens 35 are respectively located at two sides of the main screen 33.
  • FIG. 4 together when the two auxiliary screens 35 are completely folded along the respective corresponding folding regions 31, the two auxiliary screens 35 are located on the back of the main screen 33.
  • the position of the folding area 31 can be set according to actual needs, but needs to be set before leaving the factory.
  • the folding area 31 has a semicircular shape. It will be appreciated that in other embodiments, the fold region 31 can take other suitable shapes.
  • the number of the folding zones 31 may be one or more, and the flexible touch display screen 30 is correspondingly divided into a main screen 33 and one or more auxiliary screens 35. There are no restrictions here.
  • the two auxiliary screens 35 cannot respond to the touch operation of the user, and only the main screen 33 responds to the user's touch operation on it.
  • the flexible touch display screen 30 is in a folded state, and the two auxiliary screens 35 are also responsive to a touch operation on the user.
  • the “folded state” refers to that the folding angle of the auxiliary screen 35 relative to the main screen 33 is greater than 0 degrees, wherein when the folding angle is 0 degrees, the auxiliary screen 35 and the main screen 33 are completely separated.
  • the folding angle is 180 degrees
  • the auxiliary screen 35 completely covers the main screen 33, and when the folding angle is greater than 0 degrees and less than 180 degrees, the folding state belongs to the above-mentioned folded state.
  • the folding angle can be obtained according to an angle sensor (not shown) disposed in the folding area 31.
  • the processor 10 controls the flexible touch display 30 to display a graphical user interface 50 by running or executing a computer program and/or module stored in the memory 20.
  • the graphical user interface 50 is a window through which the user interacts with the terminal device 100.
  • the graphical user interface 50 has a plurality of icons 51 thereon. Specifically, please refer to FIG. 3, FIG. 4, FIG. 5 and FIG. 6.
  • the graphical user interface 50 corresponds to the area of the main screen 33 as the main screen area 501, and the graphical user interface 50 corresponds to each auxiliary screen 35.
  • the area is the auxiliary screen area 503, and the area of the graphical user interface 50 corresponding to each folding area 31 is a folded area 505.
  • FIG. 1 the processor 10 controls the flexible touch display 30 to display a graphical user interface 50 by running or executing a computer program and/or module stored in the memory 20.
  • the graphical user interface 50 is a window through which the user interacts with the terminal device 100.
  • the graphical user interface 50 has a
  • the graphical user interface 50 has a display strip 53.
  • the display strip 53 extends through the graphical user interface 50 along the length of the graphical user interface 50, and the width of the display strip 53 is less than the width of the graphical user interface 50. Further preferably, for a better visual experience, the display strip 53 is disposed in a generally centrally upper position of the graphical user interface 50 along the width of the graphical user interface 50.
  • the plurality of icons 51 are disposed within the display belt 53, and, in any case, the plurality of icons 51 are located within the display belt 53.
  • the shapes of the plurality of icons 51 are respectively circular shapes of different sizes.
  • the plurality of icons 51 may be in other suitable shapes, such as an ellipse, a polygon, a square, etc., which are not limited herein, and are specifically set according to actual needs.
  • the icons 51 having a smaller size are surrounded by the icons 51 having a larger size, and the "small size" means that the area of the icons is smaller than the area of the icons having a larger size.
  • the plurality of icons 51 are disposed substantially uniformly within the display strip 53.
  • the plurality of icons 51 are display icons of the application program installed in the terminal device 100, and the user selects any one of the icons 51 through the flexible touch display screen 30, and the application corresponding to the icon 51 is activated. program.
  • the plurality of icons 51 may be various application icons, such as communication application icons, and may include, but are not limited to, a call application icon, a short message application icon, and an instant information application icon, and the instant information application icon may include, but is not limited to, a QQ application. Icons, WeChat app icons, Weibo app icons, etc.
  • Each icon 51 is displayed by a corresponding display attribute.
  • the display attributes include, but are not limited to, at least one of display size, transparency, and icon arrangement density.
  • the “display size” refers to a display area displayed by the icon 51 on the graphic user interface 50, and includes a fixed size and a relative size after being scaled relative to the fixed size, wherein the relative size is comparable to the fixed size.
  • the size is large or small, depending on the ratio of the zoom size to the fixed size, the ratio of the zoom or zoom and zoom. For example, the relative size of the enlargement ratio of 20% is smaller than the relative size of the enlargement ratio of 50%.
  • the "transparency” refers to the transparency displayed by the icon 51 in the graphical user interface 50.
  • the "icon arrangement density” refers to the number of icons arranged in a unit area in a certain area on the graphic user interface 50, including the icon arrangement density in the main screen area 501, and the auxiliary screen area 503. The icons are arranged in density.
  • the display attribute includes a first display attribute and a second display attribute.
  • the first display attribute and the second display attribute respectively include, but are not limited to, at least one of display size, transparency, and icon arrangement density.
  • the processor 10 controls an icon 51 located in the home screen area 501 of the graphical user interface 50 to be displayed using the first display attribute.
  • the processor 10 controls the icon 51 located in the auxiliary screen area 503 of the graphical user interface 50 to be displayed using the second display attribute.
  • the first display attribute substantially maintains a constant value.
  • the second display attribute changes as the secondary screen 35 is folded toward the home screen 33. When the main screen 33 and the auxiliary screen 35 are completely folded, the difference between the first display attribute and the second display attribute is the largest and larger than a preset value.
  • the specific difference is: display size, transparency, and icon arrangement density.
  • the first display attribute has a large display size, a small transparency, and a small icon arrangement density.
  • the display attribute of the second display attribute is small, the transparency is large, and the icon arrangement density is large.
  • the attribute value of the second display attribute approaches the attribute value of the first display attribute.
  • the main screen 33 includes two opposite long sides and two opposite short sides.
  • the main screen 33 In the normal holding state, when the two long sides are located on the left and right sides of the main screen 33, the main screen 33 is in a vertical state, as shown in FIG. 7; when the two long sides are in the upper and lower sides of the main screen 33 On both sides, the main screen 33 is in a landscape state, as shown in FIG.
  • the icon coordinate system 200 and the user interface coordinate system 300 are defined.
  • the icon coordinate system 200 takes a center point of the display strip 53 as a coordinate origin, and extends from the center point to the right to form an X axis of the icon coordinate system 200, and extends upward to form a Y of the icon coordinate system 200. axis.
  • the user interface coordinate system 300 takes the lower left corner of the flexible touch display screen 30 as a coordinate origin, and extends from the coordinate origin to the lateral side to form an X axis, and extends to the vertical side to form a Y axis.
  • the rotation sensor 40 senses a real-time rotation angle and a rotation direction of the flexible terminal device 100.
  • the rotation sensor 40 senses the rotational speed of the terminal device 100.
  • the rotation sensor 40 is a gyroscope. It will be appreciated that in other embodiments, the rotational sensor 40 is another suitable measuring device that can measure the angle of rotation, the direction of rotation, and the speed of rotation.
  • the processor 10 acquires the rotation angle and the rotation direction sensed by the rotation sensor 40, and controls the user interface coordinate system 300 around its coordinate origin according to the rotation angle and the rotation direction.
  • the rotation angle is rotated in accordance with the direction of rotation, and the graphical user interface 50 is controlled to rotate following the user interface coordinate system 300 to maintain the layout of the graphical user interface 50 within the user interface coordinate system 300.
  • the layout refers to coordinate values of points on the boundary of the graphical user interface 50 in the user interface coordinate system 300.
  • the processor 10 acquires the rotational speed and controls the rotational speed of the user interface coordinate system 300 about its coordinate origin.
  • the flexible touch display screen 30 can be rotated from the portrait state to the landscape state, or from the landscape state to the portrait state.
  • the processor 10 controls the graphical user interface 50 to switch from the portrait display to the landscape display.
  • the processor 10 controls the graphical user interface 50 to switch from the landscape display to the portrait display.
  • the processor 10 controls the icon coordinate system 200 not to rotate, and controls all the icons 51 of the display strip 53 and the graphical user interface 50 at the icon
  • the coordinates in the coordinate system 200 and the display direction of the content on each icon are unchanged.
  • the processor 10 controls the user interface coordinate system 300 to rotate the rotation angle according to the rotation direction about its coordinate origin, and controls the graphic user interface 50 to rotate following the user interface coordinate system 300 to maintain the graphic
  • the layout of the user interface 50 within the user interface coordinate system 300 does not change.
  • the processor 10 also determines a real-time display location on the rotated graphical user interface 50 for each icon 51 on the graphical user interface 50 as the graphical user interface 50 rotates, and based on the real-time display The display adjusts the display attributes of each of the icons 51.
  • the flexible touch display screen 30 when the flexible touch display screen 30 is in a fully folded state and a vertical screen state, the plurality of icons 51 on the graphical user interface 50 are respectively distributed in the main screen area 501 and the auxiliary screen. Area 503 and folding area 505.
  • the coordinates of the display strip 53 in the icon coordinate system 200 during the rotation of the graphical user interface 50 remain unchanged when the flexible touch display is displayed.
  • the overlapping area of the main screen area 501 and the display belt 53 is increased, and when the flexible display screen 30 is in the horizontal screen state, the main screen area is The overlap area of 501 and the display strip 53 is the largest.
  • the overlapping area of the main screen area 501 and the display belt 53 is the lowest.
  • the icons on the graphical user interface 50 are all displayed in the display strip 53, when the flexible touch display screen 30 is gradually rotated from the portrait screen state to the landscape screen state, the original screen is located in the auxiliary screen region.
  • the icon 51 on the folding area 503 and the folding area 505 gradually enters the main screen area 501 as the overlapping area of the main screen area 501 and the display belt 53 increases.
  • the flexible touch display screen 30 is in the landscape state, all the icons 51 on the graphical user interface 50 are displayed on the main screen area 503.
  • the processor 10 predetermines that the icon 51 whose real-time display position is still in the main screen area 501 is the first target icon after the graphic user interface 50 is rotated by a predetermined angle in the main screen area 501, For example, an E icon, and controlling the first target icon to be displayed according to the first display attribute.
  • the predetermined angle can be 5 degrees, 10 degrees, etc., and can be set according to actual needs, and no limitation is made here.
  • the processor 10 determines that the real-time display position in the auxiliary screen area 503 after the graphical user interface 50 is rotated by a predetermined angle is not the icon 51 of the auxiliary screen area 503 is the second target icon. , such as the B icon.
  • the processor 10 controls the second target icon to flow from the secondary screen region 503 to the folded region 505 or through the folded region 505 to the Main screen area 501.
  • the processor 10 adjusts its display attribute according to the real-time display position of the second target icon.
  • the processor 10 changes the real-time display position in the process of flowing the second target icon to the main screen area 501 in real time. Adjusting its display attribute such that its attribute value approaches the first display attribute until the second target icon flows to the home screen area 501, the display attribute of the second target icon and the first display attribute Consistent.
  • the flexible touch display screen 30 When the flexible touch display screen 30 is rotated from the horizontal screen state to the vertical screen state, the plurality of icons 51 on the graphical user interface 50 flow from the main screen area 501 to the main screen area 501, and the auxiliary Screen area 503 and said folded area 505.
  • the processor 10 determines that the icon 51 in the home screen area 501 and the graphical user interface 50 is not in the home screen area 501 as a third target icon after the predetermined position is rotated by a predetermined angle, such as B icon. During the continuous rotation of the graphical user interface 50, the processor 10 controls the third target icon to flow from the home screen area 501 to the folding area 505 or to the auxiliary area via the folding area 505 Screen area 503. When the third target icon flows from the main screen area 501 to the folding area 505, the processor 10 adjusts its display attribute according to the real-time display position of the third target icon.
  • the processor 10 changes the real-time display position during the flow to the auxiliary screen area 503 according to the third target icon. And adjusting its display attribute in real time such that its attribute value approaches the second display attribute until the third target icon flows to the auxiliary screen area 503, the display attribute of the third target icon and the first The second display attribute is consistent.
  • the above flow to the folding area 505 may be that the circumferential edge of the icon 51 coincides with a certain point in the folding area 505, or may be the center of the icon 51 and a certain point in the folding area 505.
  • the above flow to the folding area 505 may be that the circumferential edge of the icon 51 coincides with a certain point in the folding area 505, or may be the center of the icon 51 and a certain point in the folding area 505.
  • Coincident can be set according to actual needs, no restrictions here.
  • FIG. 11 is a flowchart of a method for controlling a graphical user interface according to an embodiment of the present application.
  • the graphical user interface control method is applied to the aforementioned terminal device 100, and the order of execution is not limited to the order shown in FIG.
  • the terminal device 100 includes a processor 10, a flexible touch display screen 30, and a rotation sensor 40.
  • the processor 10 controls the flexible touch display screen 30 to display a graphical user interface 50 on the graphical user interface 50.
  • a plurality of icons 51 are displayed, each of which is displayed by a corresponding display attribute.
  • the display attributes include, but are not limited to, at least one of display size, transparency, and icon arrangement density.
  • the rotation sensor 40 senses a real-time rotation angle and a rotation direction of the flexible touch display screen.
  • the rotation sensor 40 senses a rotation speed of the flexible touch display screen.
  • the method includes the steps of:
  • Step 1101 Acquire a real-time rotation angle and a rotation direction sensed by the rotation sensor 40.
  • the processor 10 acquires the rotation angle and the rotation direction sensed by the rotation sensor 40.
  • the processor 10 further acquires the rotation sensor 40 to sense the rotation speed of the flexible touch display screen.
  • Step 1102 controlling the user interface coordinate system 300 to rotate according to the rotation angle and the rotation direction and controlling the graphic user interface 50 to rotate following the user interface coordinate system 300 to keep the graphic user interface 50 in place.
  • the layout in the user interface coordinate system 300 is unchanged, and the coordinates of all the icons 51 of the graphical user interface 50 in the icon coordinate system 200 and the display direction of the content on each icon are controlled.
  • the processor 10 controls the user interface coordinate system 300 to rotate the rotation angle according to the rotation direction according to the rotation angle and the rotation direction, and keep the graphic user interface 50 at The layout in the user interface coordinate system 300 is unchanged, and the display belt 53 and the coordinates of the plurality of icons 51 relative to the icon coordinate system 200 and the display direction of the content on each icon are controlled.
  • Step 1103 in the process of rotating the user interface coordinate system 300, the graphical user interface 50 determines a real-time display position of each icon 51 on the rotated graphical user interface 50, and adjusts according to the real-time display position.
  • the display attributes of each of the icons 51 are included in Step 1103, in the process of rotating the user interface coordinate system 300.
  • the processor 10 determines that the icon 51 whose real-time display position is still in the main screen area 501 is the first target icon in the home screen area 501 and after the graphic user interface 50 is rotated by a predetermined angle, for example, An icon, and controlling the first target icon to be displayed according to the first display attribute.
  • a predetermined angle for example, An icon
  • the processor 10 determines that the real-time display position in the auxiliary screen area 503 after the graphical user interface 50 is rotated by a predetermined angle is not the icon 51 of the auxiliary screen area 503 is the second target icon. , such as the B icon.
  • the processor 10 controls the second target icon to flow from the secondary screen region 503 to the folded region 505 or through the folded region 505 to the Main screen area 501.
  • the processor 10 adjusts its display attribute according to the real-time display position of the second target icon.
  • the processor 10 changes the real-time display position during the flow of the second target icon to the home screen area 501, in real time. Adjusting its display attribute such that its attribute value approaches the first display attribute until the second target icon flows to the home screen area 501, the display attribute of the second target icon and the first display attribute Consistent.
  • the processor 10 determines that the icon 51 in the home screen area 501 and the graphical user interface 50 is not in the home screen area 501 as a third target icon after the predetermined position is rotated by a predetermined angle, such as B icon. During the continuous rotation of the graphical user interface 50, the processor 10 controls the third target icon to flow from the home screen area 501 to the folding area 505 or to the auxiliary area via the folding area 505 Screen area 503. When the third target icon flows from the main screen area 501 to the folding area 505, the processor 10 adjusts its display attribute according to the real-time display position of the third target icon.
  • the processor 10 changes the real-time display position during the flow to the auxiliary screen area 503 according to the third target icon. And adjusting its display attribute in real time such that its attribute value approaches the second display attribute until the third target icon flows to the auxiliary screen area 503, the display attribute of the third target icon and the first The second display attribute is consistent.
  • the present application further provides a computer readable storage medium having stored therein a plurality of program instructions, the program instructions being executed by the processor 10, and executing FIG. 11 Any method step of obtaining a real-time rotation angle and a rotation direction sensed by the rotation sensor 40; controlling the user interface coordinate system 300 to rotate and hold the graphic according to the rotation angle and the rotation direction
  • Any method step of obtaining a real-time rotation angle and a rotation direction sensed by the rotation sensor 40 controlling the user interface coordinate system 300 to rotate and hold the graphic according to the rotation angle and the rotation direction
  • the layout of the user interface 50 within the user interface coordinate system 300 is unchanged, and the coordinates of all icons 51 within the icon coordinate system 200 and the display direction of the content on each icon are controlled.
  • the graphical user interface 50 determines a real-time display position of each icon 51 on the rotated graphical user interface 50, and adjusts each of the icons according to the real-time display position.
  • the computer storage medium is the memory 20, and may be any storage device that can store information such as a memory card, a solid state memory, a micro hard disk, an optical disk, or the like.
  • the flexible touch display screen 30 of the terminal device 100 of the present application displays a graphical user interface 50 having a plurality of icons 51, each of which is displayed by a corresponding display attribute.
  • the processor 10 thereby acquires a real-time rotation angle and a rotation direction sensed by the rotation sensor 40; and controls the user interface coordinate system 300 to rotate and maintain the graphic user according to the rotation angle and the rotation direction.
  • the layout of the interface 50 within the user interface coordinate system 300 is unchanged, and the coordinates of all the icons 51 in the icon coordinate system 200 and the display direction of the content on each icon are controlled.
  • the graphical user interface 50 determines a real-time display position of each icon 51 on the rotated graphical user interface 50, and adjusts each of the icons according to the real-time display position.
  • the display properties of the icon 51 Thereby, the icon 51 becomes smaller and becomes transparent when the icon 51 approaches the edge of the folding area 505 on the main screen area 501, and when the edge of the folding area 505 is approached on the auxiliary screen area 503, The icon 51 becomes larger and more opaque, giving the user a more dynamic interactive experience.
  • the storage medium may be a magnetic disk, an optical disk, a read-only memory (ROM), or a random access memory (RAM).

Landscapes

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

Abstract

一种终端设备以及图形用户界面及其控制方法，终端设备（100）包括柔性触控显示屏（30）和旋转感测器（40），柔性触控显示屏（30）显示图形用户界面，其具有多个图标，每个图标通过相应的显示属性进行显示；终端设备（100）还包括存储器（20）、处理器（10），处理器（10）执行存储器（20）存储的计算机程序时实现：获取旋转感测器（40）感测的实时旋转角度和旋转方向（1101）；根据旋转角度和旋转方向控制第二坐标系旋转且保持图形用户界面在第二坐标系内的布局不变，并控制图标在第一坐标系内的布局及方向不变（1102）；图形用户界面随第二坐标系旋转的过程中，确定每个图标在旋转的图形用户界面上的实时显示位置，并根据实时显示位置调整图标的显示属性（1103）。该方法能够根据旋转角度实时调整图标显示属性，用户体验好。

Description

终端设备及其图形用户界面以及图形用户界面的控制方法 技术领域
本申请涉及一种图形用户界面控制领域，尤其涉及一种基于柔性触控显示屏的终端设备及其图形用户界面以及图形用户界面的控制方法。
背景技术
柔性触控显示屏作为液晶显示屏之后的新生代显示屏，其通过柔软的材料制成，可变形可弯曲，给用户带来新奇的使用体验。然而，现在仍缺乏基于柔性触控显示屏的图形用户界面控制方法。
发明内容
本申请实施例公开一种基于柔性触控显示屏的终端设备及其图形用户界面以及图形用户界面的控制方法，以解决上述问题。
本申请实施例公开的一种终端设备，包括柔性触控显示屏和旋转感测器，所述旋转感测器感测所述柔性触控显示屏的实时旋转角度和实时旋转方向，所述柔性触控显示屏显示图形用户界面，所述图形用户界面显示多个图标，每个图标通过相应的显示属性进行显示；所述终端设备还包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现：获取所述旋转感测器感测的所述旋转角度和旋转方向；控制用户界面坐标系按照所述旋转方向旋转所述旋转角度，并控制所述图形用户界面跟随用户界面坐标系旋转而保持所述图形用户界面在所述用户界面坐标系的布局不变，并控制所述图形用户界面的所有图标相对图标坐标系的坐标及每一图标上的内容的显示方向不变；在所述图形用户界面随所述用户界面坐标系旋转的过程中，确定每个图标在所述旋转的图形用户界面上的实时显示位置，并根据所述实时显示位置调整所述图标的显示属性。
本申请实施例公开的一种具有柔性触控显示屏的终端设备上的图形用户界面，所述终端设备包括旋转感测器，所述旋转感测器感测所述柔性触控显示屏的实时旋转角度和实时旋转方向，所述柔性触控显示屏显示图形用户界面， 所述图形用户界面显示多个图标，每个图标通过相应的显示属性进行显示；所述图形用户界面由所述终端设备的处理器控制并实现：在所述旋转感测器感测到柔性触控显示屏旋转时，所述图形用户界面的用户界面坐标系根据旋转感测器感测到的旋转角度和旋转方向，按照所述旋转方向旋转所述旋转角度，并控制所述图形用户界面跟随所述用户界面坐标系旋转而保持所述图形用户界面在所述用户界面坐标系的布局不变，并控制所述图形用户界面的所有图标相对图标坐标系的坐标及每一图标上的内容的显示方向不变；在所述图形用户界面随所述用户界面坐标系旋转的过程中，所述图形用户界面的每个图标的显示属性还根据在所述旋转的图形用户界面上的实时显示位置进行调整。
一种图形用户界面调整方法，所述图形用户界面调整方法应用在具有柔性触控显示屏的终端设备上，所述终端设备包括旋转感测器，所述旋转感测器感测所述柔性触控显示屏的实时旋转角度和实时旋转方向，所述柔性触控显示屏显示图形用户界面，所述图形用户界面显示多个图标，每个图标通过相应的显示属性进行显示；所述图形用户界面调整方法包括：获取所述旋转感测器感测的所述旋转角度和旋转方向；控制用户界面坐标系按照所述旋转方向旋转所述旋转角度，并控制所述图形用户界面跟随用户界面坐标系旋转而保持所述图形用户界面在所述用户界面坐标系的布局不变，并控制所述图形用户界面的所有图标相对图标坐标系的坐标及每一图标上的内容的显示方向不变；在所述图形用户界面随所述用户界面坐标系旋转的过程中，确定每个图标在所述旋转的图形用户界面上的实时显示位置，并根据所述实时显示位置调整所述图标的显示属性。
本申请的终端设备的柔性触控显示屏显示一图形用户界面，所述图形用户界面上具有多个图标，每个图标通过相应的显示属性显示。所述处理器从而获取所述旋转感测器感测的实时旋转角度和旋转方向；根据所述旋转角度和所述旋转方向控制所述用户界面坐标系绕旋转且保持所述图形用户界面在所述用户界面坐标系内的布局不变，并控制所有图标在所述图标坐标系内的坐标及每一图标上的内容的显示方向不变。所述图形用户界面随所述用户界面坐标系旋转的过程中，确定每个图标在所述旋转的图形用户界面上的实时显示位置，并根据所述实时显示位置调整所述每个图标的显示属性，具有更动感的交互体 验。
附图说明
为了更清楚地说明本申请实施例中的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本申请一实施例中的终端设备的模块示意框图。
图2为本申请一实施例中的终端设备在完全展开后的正面示意图。
图3为本申请一实施例中的终端设备的折叠过程的立体示意图。
图4为本申请一实施例中的终端设备在完全折叠后的立体示意图。
图5为本申请一实施例中的终端设备在完全折叠后的侧面示意图。
图6为本申请一实施例中的终端设备在完全折叠后的背面示意图。
图7为本申请一实施例中的终端设备在完全折叠状态的第一旋转状态示意图。
图8为本申请一实施例中的终端设备在完全折叠状态的第二旋转状态示意图。
图9为本申请一实施例中的终端设备在完全折叠状态的第三旋转状态示意图。
图10为本申请一实施例中的终端设备在完全折叠状态的第四旋转状态示意图。
图11为本申请一实施例中的终端设备的图形用户界面控制方法的流程图。
具体实施方式
下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性 劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
请参阅图1，为本申请一实施例中的终端设备100的结构框图。所述终端设备100可以是但不限于手机、平板电脑、电子阅读器、穿戴式电子设备等，此处不做限定。所述终端设备100包括但不限于处理器10，以及分别与所述处理器10电性连接的存储器20、柔性触控显示屏30和旋转感测器40。本领域技术人员应当理解的是，所述图1仅是所述终端设备100的示例，并不构成对所述终端设备100的限定，所述终端设备100可以包括比图1所示更多或更少的部件，或者组合某些部件，或者不同的部件，例如所述终端设备100还可以包括输入输出设备、网络接入设备、数据总线等。
所述处理器10可以是中央处理单元(Central Processing Unit，CPU)，还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable GateArray，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等，所述处理器是所述终端设备100的控制中心，利用各种接口和线路连接整个所述终端设备100的各个部分。
所述存储器20可用于存储所述计算机程序和/或模块，所述处理器10通过运行或执行存储在所述存储器20内的计算机程序和/或模块，以及调用存储在存储器20内的数据，实现所述终端设备100的各种功能。所述存储器20可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、多个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据手机的使用所创建的数据(比如音频数据、电话本等)等。此外，所述存储器20可以包括高速随机存取存储器，还可以包括非易失性存储器，例如硬盘、内存、插接式硬盘，智能存储卡(SmartMedia Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)、多个磁盘存储器件、闪存器件、或其他易失性固态存储器件。
请一并参考图2，所述柔性触控显示屏30具有折叠区31。所述柔性触控显示屏30能够沿所述折叠区31内的折叠线37折叠。可理解，本实施例中，所述折叠区31为两个。所述两个折叠区31设置在所述触控显示屏30的两侧 上。请一并参考图3，所述柔性触控显示屏30沿着所述折叠区31划分为主屏33和两个辅屏35。所述两个辅屏35分别位于所述主屏33的两侧。请一并参考图4，当将所述两个辅屏35分别沿各自对应的所述折叠区31完全折叠后，所述两个辅屏35位于所述主屏33的背面。可理解，所述折叠区31的位置可根据实际需要设置，但需在出厂前设置好。所述两个辅屏35分别各自对应的所述折叠区31折叠至完全折叠状态时，所述折叠区31呈半圆形状。可理解，在其它实施例中，所述折叠区31可呈其它适合的形状。所述折叠区31的数量可以是一个或者多个，所述柔性触控显示屏30被相应的划分为主屏33和一个或者多个辅屏35。此处不做限制。
请一并参考图3和图4，本实施例中，所述柔性触控显示屏30在折叠状态下，所述两个辅屏35不能响应用户在其上的触控操作，只有所述主屏33响应用户在其上的触控操作。可理解，在其它实施例中，所述柔性触控显示屏30在折叠状态下，所述两个辅屏35也能响应用户在其上的触控操作。可理解，所述“折叠状态”是指所述辅屏35相对所述主屏33的折叠角度大于0度，其中，折叠角度为0度时，所述辅屏35和所述主屏33之间完全展开，折叠角度为180度时，所述辅屏35完全盖在所述主屏33上，折叠角度在大于0度小于180度的区间内时，均属于上述的折叠状态。其中，所述折叠角度可根据设置在所述折叠区31的角度感测器(图未示)获得。
请再次参考图1和图2，所述处理器10通过运行或执行存储在所述存储器20内的计算机程序和/或模块而控制所述柔性触控显示屏30显示一图形用户界面50。所述图形用户界面50是用户与所述终端设备100进行各种交互的窗口。所述图形用户界面50上具有多个图标51。具体地，请一并参考图3、图4、图5和图6，所述图形用户界面50对应所述主屏33的区域为主屏区域501，所述图形用户界面50对应每个辅屏35的区域为辅屏区域503，所述图形用户界面50对应每个折叠区31的区域为折叠区域505。优选地，请再次参考图2，所述图形用户界面50具有一显示带53。所述显示带53沿所述图形用户界面50的长度方向贯穿所述图形用户界面50，且所述显示带53的宽度小于所述图形用户界面50的宽度。进一步优选地，为了更好的视觉体验，所述显示带53沿所述图形用户界面50的宽度方向设置在所述图形用户界面50的 大致中部靠上位置。具体地，所述多个图标51设置在所述显示带53内，并且，在任何情况下，所述多个图标51均位于所述显示带53内。所述多个图标51的形状分别为不同尺寸的圆形。可理解，在其它实施例中，所述多个图标51可呈其它适合的形状，例如，椭圆形，多边形，方形等，此处不做限制，具体根据实际需要设置。所述多个图标51中，尺寸较小的图标51簇拥在尺寸较大的图标51周围，所谓“尺寸较小”是指该图标的面积小于尺寸较大的图标的面积。所述多个图标51间隔大致均匀地设置在所述显示带53内。所述多个图标51均为安装在所述终端设备100的应用程序的显示图标，用户通过所述柔性触控显示屏30点选任意一个所述图标51，将启动所述图标51对应的应用程序。所述多个图标51可以是各种应用图标，例如通信应用图标，可以包括但不限于通话应用图标、短信应用图标和即时信息应用图标，所述即时信息应用图标可以包括但不限于：QQ应用图标、微信应用图标、微博应用图标等。
每个图标51通过相应的显示属性进行显示。所述显示属性包括但不限于显示大小、透明度和图标排列密度中的至少一种。其中，所述“显示大小”是指所述图标51在所述图形用户界面50上显示的显示面积，包括一固定尺寸及相对该固定尺寸缩放之后的相对尺寸，其中，该相对尺寸可比该固定尺寸大或小，取决于缩放尺寸相对固定尺寸是缩或放及缩/放的比率。例如，放大比率为20％的相对尺寸小于放大比率为50％的相对尺寸。所述“透明度”是指所述图标51在所述图形用户界面50显示的透明度，所述透明度为0％时，表明所述图标51没有透明，所述透明度为100％时，表明所述图标51完全透明。所述“图标排列密度”是指所述图形用户界面50上的某一区域内单位面积内排列的图标数，包括，所述主屏区域501内的图标排列密度，及所述辅屏区域503内的图标排列密度。
所述显示属性包括第一显示属性和第二显示属性。所述第一显示属性和第二显示属性分别包括但不限于显示大小、透明度和图标排列密度中的至少一种。所述处理器10控制位于所述图形用户界面50的所述主屏区域501内的图标51采用所述第一显示属性显示。所述处理器10控制位于所述图形用户界面50的所述辅屏区域503内的图标51采用所述第二显示属性显示。其中，所述第一显示属性基本保持一个恒定值。所述第二显示属性随着所述辅屏35向所 述主屏33折叠的过程而变化。所述主屏33与所述辅屏35完全折叠时，所述第一显示属性和所述第二显示属性之间的差别最大且大于预设值。具体差别为：显示大小、透明度和图标排列密度不同。其中，所述第一显示属性的显示尺寸大、透明度小、图标排列密度小。所述第二显示属性的显示尺寸小、透明度大、图标排列密度大。所述柔性触控显示屏30展开的过程中，所述第二显示属性的属性值趋近于所述第一显示属性的属性值。所述柔性触控显示屏30完全展开时，所述第一显示属性和第二显示属性的属性值完全相同。
请一并参考图7，所述柔性触控显示屏30处于完全折叠状态。所述主屏33包括两个相对的长边和两个相对的短边。正常握持状态下，当两个长边位于所述主屏33的左右两侧时，所述主屏33处于竖屏状态，如图7所示状态；当两个长边处于所述主屏33的上下两侧时，所述主屏33处于横屏状态，如图10所示状态。为方便描述，定义图标坐标系200和用户界面坐标系300。所述图标坐标系200以所述显示带53的中心点为坐标原点，并从所述中心点向右延伸形成所述图标坐标系200的X轴，向上延伸形成所述图标坐标系200的Y轴。所述用户界面坐标系300以所述柔性触控显示屏30的左下角为坐标原点，并从所述坐标原点向横边延伸形成X轴，向竖边延伸形成Y轴。
所述终端设备100按照预定方向旋转时，所述旋转感测器40感测所述柔性终端设备100的实时旋转角度和旋转方向。可选择地，所述旋转感测器40感测所述终端设备100的旋转速度。具体地，在本实施例中，所述旋转感测器40为陀螺仪。可理解，在其它实施例中，所述旋转感测器40为其它适合的可以测量旋转角度、旋转方向和旋转速度的测量设备。
所述处理器10获取所述旋转感测器40感测的所述旋转角度和所述旋转方向，并根据所述旋转角度和所述旋转方向，控制所述用户界面坐标系300绕其坐标原点按照所述旋转方向旋转所述旋转角度，且控制所述图形用户界面50跟随所述用户界面坐标系300旋转而保持所述图形用户界面50在所述用户界面坐标系300内的布局不变。所述布局指所述图形用户界面50的边界上的各点在该用户界面坐标系300中的坐标值。可选择地，所述处理器10获取所述旋转速度，控制所述用户界面坐标系300绕其坐标原点的旋转速度。随着终端设备100的旋转，柔性触控显示屏30可由竖屏状态旋转至横屏状态，或由横 屏状态旋转至竖屏状态。当所述柔性触控显示屏30由竖屏状态旋转至横屏状态时，所述处理器10控制所述图形用户界面50由竖屏显示切换为横屏显示。当所述柔性触控显示屏30从横屏状态旋转至竖屏状态时，所述处理器10控制所述图形用户界面50由横屏显示切换为竖屏显示。
所述处理器10控制所述用户界面坐标系300旋转的过程中，控制所述图标坐标系200不旋转，并控制所述显示带53和所述图形用户界面50的所有图标51在所述图标坐标系200中的坐标及每一图标上的内容的显示方向不变。
所述处理器10控制所述用户界面坐标系300绕其坐标原点按照所述旋转方向旋转所述旋转角度，且控制所述图形用户界面50跟随所述用户界面坐标系300旋转而保持所述图形用户界面50在所述用户界面坐标系300内的布局不变。此外，所述处理器10还确定所述图形用户界面50上的每个图标51在所述图形用户界面50旋转时在该旋转的图形用户界面50上的实时显示位置，并根据所述实时显示位置调整所述每个图标51的显示属性。
如图7所示，当所述柔性触控显示屏30处于完全折叠状态且竖屏状态时，所述图形用户界面50上的所述多个图标51分别分布在所述主屏区域501、辅屏区域503和折叠区域505上。
请一并参考图8、图9和图10，所述显示带53在所述图形用户界面50旋转的过程中在所述图标坐标系200中的坐标保持不变，当所述柔性触控显示屏30从竖屏状态逐渐旋转至横屏状态的过程中，所述主屏区域501与所述显示带53的重合面积增大，当所述柔性显示屏30处于横屏状态时，所述主屏区域501与所述显示带53的重合面积最大。当所述柔性显示屏30处于竖屏状态时，所述主屏区域501与所述显示带53的重合面积最低。由于所述图形用户界面50上的图标均显示在所述显示带53内，当所述柔性触控显示屏30从竖屏状态逐渐旋转至横屏状态的过程中，原来位于所述辅屏区域503和折叠区域505上的图标51随着所述主屏区域501与所述显示带53的重合面积的增加而逐渐进入所述主屏区域501内。待所述柔性触控显示屏30处于横屏状态时，所述图形用户界面50上的所有图标51均显示在所述主屏区域503上。
具体地，所述处理器10预先确定在所述主屏区域501内且所述图形用户界面50旋转预定角度后其实时显示位置仍在所述主屏区域501的所述图标51 为第一目标图标，例如E图标，并控制所述第一目标图标按照所述第一显示属性显示。预定角度可以是5度，10度等，具有可根据实际需要设置，此处不做限制。
具体地，所述处理器10确定在所述辅屏区域503内且所述图形用户界面50旋转预定角度后其实时显示位置将不在所述辅屏区域503的所述图标51为第二目标图标，如B图标。在所述图形用户界面50继续旋转的过程中，所述处理器10控制所述第二目标图标从所述辅屏区域503流动至所述折叠区域505或者经所述折叠区域505流动至所述主屏区域501。在所述第二目标图标从所述辅屏区域503流动至所述折叠区域505时，所述处理器10根据所述第二目标图标的实时显示位置调整其显示属性。在所述第二目标图标继续从所述折叠区域505流向所述主屏区域501时，所述处理器10根据所述第二目标图标流向所述主屏区域501过程中的实时显示位置的变化，实时调整其显示属性，使其属性值趋近所述第一显示属性，直到所述第二目标图标流动到所述主屏区域501时，所述第二目标图标的显示属性与所述第一显示属性一致。
所述柔性触控显示屏30由横屏状态转动到竖屏状态时，所述图形用户界面50上的所述多个图标51由所述主屏区域501分别流向所述主屏区域501、所述辅屏区域503和所述折叠区域505上。
具体地，所述处理器10确定在所述主屏区域501内且所述图形用户界面50旋转预定角度后其实时显示位置将不在所述主屏区域501的所述图标51为第三目标图标，如B图标。在所述图形用户界面50继续旋转的过程中，所述处理器10控制所述第三目标图标从所述主屏区域501流动至所述折叠区域505或者经所述折叠区域505流动至所述辅屏区域503。在所述第三目标图标从所述主屏区域501流动至所述折叠区域505时，所述处理器10根据所述第三目标图标的实时显示位置调整其显示属性。在所述第三目标图标继续从所述折叠区域505流向所述辅屏区域503时，所述处理器10根据所述第三目标图标流向所述辅屏区域503过程中的实时显示位置的变化，实时调整其显示属性，使其属性值趋近所述第二显示属性，直到所述第三目标图标流动到所述辅屏区域503时，所述第三目标图标的显示属性与所述第二显示属性一致。
可理解，上述流动至折叠区域505，可以是所述图标51的圆周边缘与折 叠区域505内的某个点重合，也可以是所述图标51的中心与所述折叠区域505内的某个点重合，具体可根据实际需要设置，此处不做限制。
可理解，在其它实施例中，所述柔性触控显示屏30在完全展开状态下做旋转时，所述图形用户界面50上的所述多个图标51的流动过程和显示属性与上述所述柔性触控显示屏30在折叠状态下的变化过程相同。
请参阅图11，为本申请一实施例中的图形用户界面控制方法的流程图。所述图形用户界面控制方法应用于前述的终端设备100中，执行顺序并不限于图11所示的顺序。所述终端设备100包括处理器10、柔性触控显示屏30和旋转感测器40，所述处理器10控制所述柔性触控显示屏30显示图形用户界面50，所述图形用户界面50上显示多个图标51，每个图标51通过相应的显示属性进行显示。所述显示属性包括但不限于显示大小、透明度和图标排列密度中的至少一种。所述旋转感测器40感测所述柔性触控显示屏的实时旋转角度和旋转方向。可选择地，所述旋转感测器40感测所述柔性触控显示屏的旋转速度。所述方法包括步骤：
步骤1101，获取所述旋转感测器40感测的实时旋转角度和旋转方向。具体地，所述处理器10获取所述旋转感测器40感测的所述旋转角度和旋转方向。可选择地，所述处理器10还获取所述旋转感测器40感测所述柔性触控显示屏的旋转速度。
步骤1102，根据所述旋转角度和所述旋转方向控制所述用户界面坐标系300绕旋转且控制所述图形用户界面50跟随所述用户界面坐标系300旋转而保持所述图形用户界面50在所述用户界面坐标系300内的布局不变，并控制所述图形用户界面50的所有图标51在所述图标坐标系200内的坐标及每一图标上的内容的显示方向不变。
具体地，所述处理器10根据所述旋转角度和所述旋转方向，控制所述用户界面坐标系300绕其坐标原点按照所述旋转方向旋转所述旋转角度，保持所述图形用户界面50在所述用户界面坐标系300内的布局不变，并控制所述显示带53和所述多个图标51相对所述图标坐标系200的坐标及每一图标上的内容的显示方向不变。
步骤1103，所述图形用户界面50随所述用户界面坐标系300旋转的过程 中，确定每个图标51在所述旋转的图形用户界面50上的实时显示位置，并根据所述实时显示位置调整所述每个图标51的显示属性。
具体地，所述处理器10确定在所述主屏区域501内且所述图形用户界面50旋转预定角度后其实时显示位置仍在所述主屏区域501的所述图标51为第一目标图标，例如E图标，并控制所述第一目标图标按照所述第一显示属性显示。
具体地，所述处理器10确定在所述辅屏区域503内且所述图形用户界面50旋转预定角度后其实时显示位置将不在所述辅屏区域503的所述图标51为第二目标图标，如B图标。在所述图形用户界面50继续旋转的过程中，所述处理器10控制所述第二目标图标从所述辅屏区域503流动至所述折叠区域505或者经所述折叠区域505流动至所述主屏区域501。在所述第二目标图标从所述辅屏区域503流动至所述折叠区域505时，所述处理器10根据所述第二目标图标的实时显示位置调整其显示属性。在所述第二目标图标继续从所述折叠区域505流向所述主屏区域501时，所述处理器10在所述第二目标图标流向所述主屏区域501过程中的实时显示位置的变化，实时调整其显示属性，使其属性值趋近所述第一显示属性，直到所述第二目标图标流动到所述主屏区域501时，所述第二目标图标的显示属性与所述第一显示属性一致。
具体地，所述处理器10确定在所述主屏区域501内且所述图形用户界面50旋转预定角度后其实时显示位置将不在所述主屏区域501的所述图标51为第三目标图标，如B图标。在所述图形用户界面50继续旋转的过程中，所述处理器10控制所述第三目标图标从所述主屏区域501流动至所述折叠区域505或者经所述折叠区域505流动至所述辅屏区域503。在所述第三目标图标从所述主屏区域501流动至所述折叠区域505时，所述处理器10根据所述第三目标图标的实时显示位置调整其显示属性。在所述第三目标图标继续从所述折叠区域505流向所述辅屏区域503时，所述处理器10根据所述第三目标图标流向所述辅屏区域503过程中的实时显示位置的变化，实时调整其显示属性，使其属性值趋近所述第二显示属性，直到所述第三目标图标流动到所述辅屏区域503时，所述第三目标图标的显示属性与所述第二显示属性一致。
在一些实施例中，本申请还提供一种计算机可读存储介质，所述计算机可 读存储介质中存储有若干程序指令，所述若干程序指令供所述处理器10调用执行后，执行图11的任一方法步骤，从而获取所述旋转感测器40感测的实时旋转角度和旋转方向；根据所述旋转角度和所述旋转方向控制所述用户界面坐标系300绕旋转且保持所述图形用户界面50在所述用户界面坐标系300内的布局不变，并控制所有图标51在所述图标坐标系200内的坐标及每一图标上的内容的显示方向不变。所述图形用户界面50随所述用户界面坐标系300旋转的过程中，确定每个图标51在所述旋转的图形用户界面50上的实时显示位置，并根据所述实时显示位置调整所述每个图标51的显示属性。在一些实施例中，所述计算机存储介质即为所述存储器20，可为存储卡、固态存储器、微硬盘、光盘等任意可存储信息的存储设备。
本申请的终端设备100的柔性触控显示屏30显示一图形用户界面50，所述图形用户界面50上具有多个图标51，每个图标51通过相应的显示属性显示。所述处理器10从而获取所述旋转感测器40感测的实时旋转角度和旋转方向；根据所述旋转角度和所述旋转方向控制所述用户界面坐标系300绕旋转且保持所述图形用户界面50在所述用户界面坐标系300内的布局不变，并控制所有图标51在所述图标坐标系200内的坐标及每一图标上的内容的显示方向不变。所述图形用户界面50随所述用户界面坐标系300旋转的过程中，确定每个图标51在所述旋转的图形用户界面50上的实时显示位置，并根据所述实时显示位置调整所述每个图标51的显示属性。从而使得所述图标51在所述主屏区域501上接近所述折叠区域505的边缘时其图标51变小变密变透明，在所述辅屏区域503上接近所述折叠区域505的边缘时其图标51变大变疏变不透明，给用户一种更动感的交互体验。
需要说明的是，对于前述的各个方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请并不受所描述的动作顺序的限制，因为依据本申请，某一些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本申请所必须的。
在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详细描述的部分，可以参见其他实施例的相关描述。
本申请实施例方法中的步骤可以根据实际需要进行顺序调整、合并和删减。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存取存储器(Random Access Memory，简称RAM)等。
以上对本申请实施例进行了详细介绍，本文中应用了具体个例对本申请的原理及实施例进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施例及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

Claims (21)

  1. 一种终端设备，包括柔性触控显示屏和旋转感测器，所述旋转感测器感测所述移动终端的实时旋转角度和实时旋转方向，所述柔性触控显示屏显示图形用户界面，所述图形用户界面显示多个图标，每个图标通过相应的显示属性进行显示；所述终端设备还包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现：
    获取所述旋转感测器感测的所述旋转角度和旋转方向；
    控制用户界面坐标系按照所述旋转方向旋转所述旋转角度，并控制所述图形用户界面跟随用户界面坐标系旋转而保持所述图形用户界面在所述用户界面坐标系的布局不变，并控制所述图形用户界面的所有图标相对图标坐标系的坐标及每一图标上的内容的显示方向不变；
    在所述图形用户界面随所述用户界面坐标系旋转的过程中，确定每个图标在所述旋转的图形用户界面上的实时显示位置，并根据所述实时显示位置调整所述图标的显示属性。
  2. 如权利要求1所述的终端设备，其特征在于，所述柔性触控显示屏具有折叠区，所述折叠区将所述柔性触控显示屏划分为主屏和辅屏，所述图形用户界面对应所述主屏的区域为主屏区域，所述图形用户界面对应所述辅屏的区域为辅屏区域，所述图形用户界面对应所述折叠区的区域为折叠区域，所述显示属性包括第一显示属性和第二显示属性，所述处理器执行所述计算机程序时实现：控制位于所述主屏区域内的图标采用所述第一显示属性显示，所述处理器控制位于所述辅屏区域内的图标采用所述第二显示属性显示。
  3. 如权利要求2所述的终端设备，其特征在于，所述处理器执行所述计算机程序时实现：确定在所述主屏区域内且所述图形用户界面旋转预定角度后的实时显示位置仍在所述主屏区域的图标为第一目标图标，并控制所述第一目标图标按照所述第一显示属性显示。
  4. 如权利要求2所述的终端设备，其特征在于，所述处理器执行所述计算机程序时实现：确定在所述辅屏区域内且所述图形用户界面旋转预定角度后的实时显示位置将不在所述辅屏区域的所述图标为第二目标图标，并在所述第二 目标图标从所述辅屏区域流动至所述折叠区域时，根据所述第二目标图标的实时显示位置调整其显示属性。
  5. 如权利要求4所述的终端设备，其特征在于，所述处理器执行所述计算机程序时实现：在所述第二目标图标流向所述主屏区域流动过程中根据所述第二目标图标的实时显示位置的变化，实时调整其显示属性，使其属性值趋近所述第一显示属性，直到所述第二目标图标流动到所述主屏区域时，所述第二目标图标的显示属性与所述第一显示属性一致。
  6. 如权利要求2所述的终端设备，其特征在于，所述处理器执行所述计算机程序时实现：确定在所述主屏区域内且所述图形用户界面旋转预定角度后其实时显示位置将不在所述主屏区域的所述图标为第三目标图标，并控制所述第三目标图标从所述主屏区域流动至所述折叠区域时，根据所述第三目标图标的实时显示位置调整其显示属性。
  7. 如权利要求6所述的终端设备，其特征在于，所述处理器执行所述计算机程序时实现：根据所述第三目标图标在向所述辅屏区域流动过程中根据所述第三目标图标的实时显示位置的变化，实时调整其显示属性，使其属性值趋近所述第二显示属性，直到所述第三目标图标流动到所述辅屏区域时，所述第三目标图标的显示属性与所述第二显示属性一致。
  8. 一种具有柔性触控显示屏的终端设备上的图形用户界面，所述终端设备包括旋转感测器，所述旋转感测器感测所述柔性触控显示屏的实时旋转角度和实时旋转方向，所述柔性触控显示屏显示图形用户界面，所述图形用户界面显示多个图标，每个图标通过相应的显示属性进行显示；所述图形用户界面由所述终端设备的处理器控制并实现：
    在所述旋转感测器感测到柔性触控显示屏旋转时，所述图形用户界面的用户界面坐标系根据旋转感测器感测到的旋转角度和旋转方向，按照所述旋转方向旋转所述旋转角度，并控制所述图形用户界面跟随所述用户界面坐标系旋转而保持所述图形用户界面在所述用户界面坐标系的布局不变，并控制所述图形用户界面的所有图标相对图标坐标系的坐标及每一图标上的内容的显示方向不变；
    在所述图形用户界面随所述用户界面坐标系旋转的过程中，所述图形用户 界面的每个图标的显示属性还根据在所述旋转的图形用户界面上的实时显示位置进行调整。
  9. 如权利要求8所述的图形用户界面，其特征在于，所述柔性触控显示屏具有折叠区，所述折叠区将所述柔性触控显示屏划分为主屏和辅屏，所述图形用户界面对应所述主屏的区域为主屏区域，所述图形用户界面对应所述辅屏的区域为辅屏区域，所述图形用户界面对应所述折叠区的区域为折叠区域，所述显示属性包括第一显示属性和第二显示属性，所述图形用户界面由所述终端设备的处理器控制并实现：控制位于所述主屏区域内的图标采用所述第一显示属性显示，控制位于所述辅屏区域内的图标采用所述第二显示属性显示。
  10. 如权利要求9所述的图形用户界面，所述图形用户界面由所述终端设备的处理器控制并实现：确定在所述主屏区域内且所述图形用户界面旋转预定角度后的实时显示位置仍在所述主屏区域的所述图标为第一目标图标，并控制所述第一目标图标按照所述第一显示属性显示。
  11. 如权利要求9所述的图形用户界面，其特征在于，所述图形用户界面由所述终端设备的处理器控制并实现：确定在所述辅屏区域内且所述图形用户界面旋转预定角度后的实时显示位置将不在所述辅屏区域的所述图标为第二目标图标，并在所述第二目标图标从所述辅屏区域流动至所述折叠区域时，根据所述第二目标图标的实时显示位置调整其显示属性。
  12. 如权利要求11所述的图形用户界面，其特征在于，所述图形用户界面由所述终端设备的处理器控制并实现：在所述第二目标图标流向所述主屏区域流动过程中根据所述第二目标图标的实时显示位置的变化，实时调整其显示属性，使其属性值趋近所述第一显示属性，直到所述第二目标图标流动到所述主屏区域时，所述第二目标图标的显示属性与所述第一显示属性一致。
  13. 如权利要求9所述的图形用户界面，其特征在于，所述图形用户界面由所述终端设备的处理器控制并实现：确定在所述主屏区域内且所述图形用户界面旋转预定角度后其实时显示位置将不在所述主屏区域的所述图标为第三目标图标，并控制所述第三目标图标从所述主屏区域流动至所述折叠区域时，根据所述第三目标图标的实时显示位置调整其显示属性。
  14. 如权利要求13所述的图形用户界面，其特征在于，所述图形用户界面 由所述终端设备的处理器控制并实现：根据所述第三目标图标在向所述辅屏区域流动过程中根据所述第三目标图标的实时显示位置的变化，实时调整其显示属性，使其属性值趋近所述第二显示属性，直到所述第三目标图标流动到所述辅屏区域时，所述第三目标图标的显示属性与所述第二显示属性一致。
  15. 一种图形用户界面调整方法，所述图形用户界面调整方法应用在具有柔性触控显示屏的终端设备上，所述终端设备包括旋转感测器，所述旋转感测器感测所述柔性触控显示屏的实时旋转角度和实时旋转方向，所述柔性触控显示屏显示图形用户界面，所述图形用户界面显示多个图标，每个图标通过相应的显示属性进行显示；所述图形用户界面调整方法包括：
    获取所述旋转感测器感测的所述旋转角度和旋转方向；
    控制用户界面坐标系按照所述旋转方向旋转所述旋转角度，并控制所述图形用户界面跟随用户界面坐标系旋转而保持所述图形用户界面在所述用户界面坐标系的布局不变，并控制所述图形用户界面的所有图标相对图标坐标系的布局及每一图标上的内容的显示方向不变；
    在所述图形用户界面随所述用户界面坐标系旋转的过程中，确定每个图标在所述旋转的图形用户界面上的实时显示位置，并根据所述实时显示位置调整所述图标的显示属性。
  16. 如权利要求15所述的图形用户界面调整方法，其特征在于，所述柔性触控显示屏具有折叠区，所述折叠区将所述柔性触控显示屏划分为主屏和辅屏，所述图形用户界面对应所述主屏的区域为主屏区域，所述图形用户界面对应所述辅屏的区域为辅屏区域，所述图形用户界面对应所述折叠区的区域为折叠区域，所述显示属性包括第一显示属性和第二显示属性，所述图形用户界面调整方法包括：控制位于所述主屏区域内的图标采用所述第一显示属性显示，控制位于所述辅屏区域内的图标采用所述第二显示属性显示。
  17. 如权利要求16所述的图形用户界面调整方法，其特征在于，所述图形用户界面调整方法包括：确定在所述主屏区域内且所述图形用户界面旋转预定角度后的实时显示位置仍在所述主屏区域的所述图标为第一目标图标，并控制所述第一目标图标按照所述第一显示属性显示。
  18. 如权利要求16所述的图形用户界面调整方法，其特征在于，所述图形 用户界面调整方法包括：确定在所述辅屏区域内且所述图形用户界面旋转预定角度后的实时显示位置将不在所述辅屏区域的所述图标为第二目标图标，并在所述第二目标图标从所述辅屏区域流动至所述折叠区域时，根据所述第二目标图标的实时显示位置调整其显示属性。
  19. 如权利要求18所述的图形用户界面调整方法，其特征在于，所述图形用户界面调整方法包括：在所述第二目标图标流向所述主屏区域流动过程中根据所述第二目标图标的实时显示位置的变化，实时调整其显示属性，使其属性值趋近所述第一显示属性，直到所述第二目标图标流动到所述主屏区域时，所述第二目标图标的显示属性与所述第一显示属性一致。
  20. 如权利要求16所述的图形用户界面调整方法，其特征在于，所述图形用户界面调整方法包括：确定在所述主屏区域内且所述图形用户界面旋转预定角度后其实时显示位置将不在所述主屏区域的所述图标为第三目标图标，并控制所述第三目标图标从所述主屏区域流动至所述折叠区域时，根据所述第三目标图标的实时显示位置调整其显示属性。
  21. 如权利要求20所述的图形用户界面调整方法，其特征在于，所述图形用户界面调整方法包括：根据所述第三目标图标在向所述辅屏区域流动过程中根据所述第三目标图标的实时显示位置的变化，实时调整其显示属性，使其属性值趋近所述第二显示属性，直到所述第三目标图标流动到所述辅屏区域时，所述第三目标图标的显示属性与所述第二显示属性一致。
PCT/CN2017/119142 2017-12-27 2017-12-27 终端设备及其图形用户界面以及图形用户界面的控制方法 WO2019127158A1 (zh)

Priority Applications (2)

Application Number Priority Date Filing Date Title
PCT/CN2017/119142 WO2019127158A1 (zh) 2017-12-27 2017-12-27 终端设备及其图形用户界面以及图形用户界面的控制方法
CN201780097425.0A CN111448534B (zh) 2017-12-27 2017-12-27 终端设备及其图形用户界面以及图形用户界面的控制方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
PCT/CN2017/119142 WO2019127158A1 (zh) 2017-12-27 2017-12-27 终端设备及其图形用户界面以及图形用户界面的控制方法

Publications (1)

Publication Number Publication Date
WO2019127158A1 true WO2019127158A1 (zh) 2019-07-04

Family

ID=67062831

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2017/119142 WO2019127158A1 (zh) 2017-12-27 2017-12-27 终端设备及其图形用户界面以及图形用户界面的控制方法

Country Status (2)

Country Link
CN (1) CN111448534B (zh)
WO (1) WO2019127158A1 (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113383291A (zh) * 2019-08-15 2021-09-10 深圳市柔宇科技股份有限公司 屏幕控制方法、柔性电子设备及计算机可读存储介质
CN115167616A (zh) * 2022-06-07 2022-10-11 荣耀终端有限公司 显示控制方法及装置

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101369210A (zh) * 2008-08-22 2009-02-18 深圳华为通信技术有限公司 一种调整用户界面元素的方法及装置
CN104823134A (zh) * 2012-10-05 2015-08-05 三星电子株式会社 柔性显示装置及柔性显示装置控制方法
US20150253884A1 (en) * 2014-03-04 2015-09-10 Sung Jae Hwang Determination of bezel area on flexible display
CN105302238A (zh) * 2014-07-28 2016-02-03 Lg电子株式会社 便携式电子装置及其控制方法
CN105843464A (zh) * 2014-09-18 2016-08-10 Lg电子株式会社 移动终端及其控制方法

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR102308645B1 (ko) * 2014-12-29 2021-10-05 삼성전자주식회사 사용자 단말 장치 및 그의 제어 방법

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101369210A (zh) * 2008-08-22 2009-02-18 深圳华为通信技术有限公司 一种调整用户界面元素的方法及装置
CN104823134A (zh) * 2012-10-05 2015-08-05 三星电子株式会社 柔性显示装置及柔性显示装置控制方法
US20150253884A1 (en) * 2014-03-04 2015-09-10 Sung Jae Hwang Determination of bezel area on flexible display
CN105302238A (zh) * 2014-07-28 2016-02-03 Lg电子株式会社 便携式电子装置及其控制方法
CN105843464A (zh) * 2014-09-18 2016-08-10 Lg电子株式会社 移动终端及其控制方法

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113383291A (zh) * 2019-08-15 2021-09-10 深圳市柔宇科技股份有限公司 屏幕控制方法、柔性电子设备及计算机可读存储介质
CN115167616A (zh) * 2022-06-07 2022-10-11 荣耀终端有限公司 显示控制方法及装置

Also Published As

Publication number Publication date
CN111448534B (zh) 2022-03-29
CN111448534A (zh) 2020-07-24

Similar Documents

Publication Publication Date Title
US11366490B2 (en) User terminal device and displaying method thereof
US11706521B2 (en) User interfaces for capturing and managing visual media
US11770601B2 (en) User interfaces for capturing and managing visual media
US20200380936A1 (en) System, apparatus, and method for optimizing viewing experience on an intelligent terminal
KR102039172B1 (ko) 사용자 단말 장치 및 이의 디스플레이 방법
US10067648B2 (en) User terminal device and method for displaying thereof
US20180011818A1 (en) Webpage Update Method And Apparatus
US20150227166A1 (en) User terminal device and displaying method thereof
EP2950196B1 (en) Electronic device and method for operating display
TW201401150A (zh) 手持移動系統之動態桌布
US20150063785A1 (en) Method of overlappingly displaying visual object on video, storage medium, and electronic device
WO2020061783A1 (zh) 可弯折电子设备及其界面适配方法
AU2014201249A1 (en) Method for controlling display function and an electronic device thereof
WO2019127158A1 (zh) 终端设备及其图形用户界面以及图形用户界面的控制方法
KR20170053273A (ko) 컨텐츠 표시 방법 및 이를 구현한 전자 장치
WO2019037351A1 (zh) 操作不同层级图片的方法、装置、终端设备及存储介质
WO2019237746A1 (zh) 图像合并的方法和装置
WO2020206655A1 (zh) 交互方法、柔性电子装置及可读存储介质
WO2019127156A1 (zh) 终端设备及其图形用户界面以及图形用户界面的控制方法
WO2020206652A1 (zh) 交互方法、柔性电子装置及可读存储介质
EP3139260A1 (en) Electronic device and method for controlling the same
WO2020097799A1 (zh) 终端设备及其触摸响应控制方法
WO2020082389A1 (zh) 镜像显示方法、柔性显示装置及计算机可读存储介质
WO2020232653A1 (zh) 交互方法、显示装置及计算机可读存储介质
US10204397B2 (en) Bowtie view representing a 360-degree image

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 17936869

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 17936869

Country of ref document: EP

Kind code of ref document: A1