TWI466009B - Information displaying method of user interface - Google Patents

Description

User interface information display method

The present invention relates to a user interface (UI) information display method, and more particularly to an information display method for a user interface having a dynamic tile.

In order to make the operation of human-computer interaction more intuitive and more human, the graphical interface has evolved. Due to advances in technology, a variety of consumer electronic products are constantly being updated and improved, such as smart phones that can be manipulated by touch, so the operating interface must be improved to make it easier for people to understand information and reduce The operation used by the interface is incorrect.

Microsoft's upcoming new Windows operating system (Windows 8) supports two graphical interfaces, one is the traditional desktop mode of the Windows operating system; the other is designed with the logo and style of a modern subway system. Subway mode user interface (hereinafter referred to as Metro UI).

FIG. 1 is a schematic diagram of a display screen of a Metro UI of a Microsoft Windows operating system. In the display screen 100 of the Metro UI shown in FIG. 1, there are a plurality of rectangular squares arranged side by side and having different sizes, which are referred to herein as illustrated tiles. Each of the illustrated tiles can be arbitrarily selected, dragged, and placed by the user at a user-defined location. Among them, the illustrated bricks can be divided into shortcut tiles and dynamic tiles according to their functions. The shortcut graphic brick is a conventional application shortcut. After clicking through the user, the application represented by the thumbnail can be accessed or opened for the user to operate. In addition to the functions of the shortcut graphic brick, the dynamic graphic brick can also dynamically update the image/text message displayed in the graphic brick, so that the user can pay attention to the content that he cares about. However, whether it is a dynamic graphic brick or a shortcut graphic brick, each of the graphic bricks shown in FIG. 1 is operated separately and has no correlation with each other.

In view of this, the present invention provides a user interface information display method, thereby increasing the information correlation between dynamic graphic tiles.

The invention provides a user interface information display method, which comprises the following steps. First, a user interface with a plurality of dynamic graphic tiles is provided, and the functional attributes of each dynamic graphic brick and its associated fields are defined. Then, the user selects a selection operation of dragging the first dynamic graphic brick in the dynamic graphic brick from the first position to the second position. Thereafter, it is determined whether the first dynamic graphic tile moving to the second location and the second dynamic graphic brick of the adjacent region have an associated subsidiary field. If the first dynamic graphic brick and the second dynamic graphic brick have an associated auxiliary field, the linkage information associated with the second dynamic graphic brick is correspondingly displayed in the first dynamic graphic brick.

In an embodiment of the present invention, the displaying the linkage information associated with the second dynamic graphic brick in the first dynamic graphic brick includes the following steps. The content of the auxiliary field in the first dynamic graphic brick is changed to be the same as the content of the auxiliary field of the second dynamic graphic brick. And the linkage information is generated by using the function attribute of the first dynamic graphic brick and the content of the changed subsidiary field, and the linkage information is displayed in the first dynamic graphic brick.

In an embodiment of the present invention, the step of determining whether the first dynamic graphic tile moving to the second location and the second dynamic graphic brick of the adjacent region have an associated subsidiary field comprises searching for A plurality of second dynamic graphic tiles centered on the center of the cross-shaped area and adjacent to the first dynamic graphic brick. It is determined whether the first dynamic graphic brick and the adjacent second dynamic graphic brick have an associated subsidiary field.

In an embodiment of the present invention, if the first dynamic graphic brick and the adjacent second dynamic graphic brick have an associated subsidiary field, the method further includes rotating display in the first dynamic graphic brick. A plurality of linkage information associated with adjacent second dynamic graphic tiles.

In an embodiment of the present invention, the information display method of the user interface further includes dynamically updating, in the first dynamic graphic brick, each linkage information associated with the adjacent second dynamic graphic tile and according to the pre- Set the time interval to display each linkage information.

In an embodiment of the present invention, the information display method of the user interface further includes determining whether the user detects that the first dynamic graphic brick is dragged from the second position to the third position within a preset time. Selection operation. If yes, the linkage information displayed in the first dynamic graphic brick is deleted.

In an embodiment of the present invention, after deleting the linkage information displayed in the first dynamic graphic brick, the method further includes: restoring displaying the preset information content of the first dynamic graphic brick.

In an embodiment of the invention, the step of defining the functional attributes of each of the dynamic graphic tiles and their associated fields includes determining whether each of the dynamic graphic tiles changes the displayed information content over time. If yes, the functional attributes of each dynamic graphic brick and its dependent fields are defined according to the displayed information content.

In an embodiment of the invention, the functional attributes include weather, time, news, stock market, exchange rate, music or photo attributes.

In an embodiment of the invention, the auxiliary field includes a place name, country, city or latitude and longitude information to assist in expressing location information.

Based on the above, the information display method of the user interface provided by the present invention can automatically generate the linkage of information association between adjacent dynamic graphic tiles by distinguishing the functional attributes of the dynamic graphic brick and the auxiliary fields. News.

The above described features and advantages of the present invention will be more apparent from the following description.

The display screen 100 of the Metro UI shown in FIG. 1 has a plurality of shortcut graphic tiles and dynamic graphic tiles arranged side by side. The shortcut graphic brick (for example, the graphic brick 110 in FIG. 1) is convenient for the user to select and directly enter the application to be operated. However, the shortcut graphic brick displays a thumbnail of the corresponding application, and does not Update the contents of the graphic brick. The graphic brick 120 is a dynamic graphic brick corresponding to a weather forecast application. After being set by the user, the image/text message displayed in the graphic brick 120 can be updated regularly; the graphic brick 130 is also dynamic. The graphic brick, which corresponds to an application for stock market investment status, can update the latest ups and downs at any time.

However, each of the illustrated tiles of the existing user interface is operated separately, and there is no correlation between the dynamic graphic tiles or the shortcut graphic tiles. However, if the user can easily generate an associated information interaction relationship between different dynamic graphic tiles through simple operation of the user, and display linkage information with information relevance, the management will be more humanized, User interface operations are smoother and more consistent. The present invention is an information display method of a user interface developed based on the above viewpoint. In order to clarify the content of the present invention, the following examples are given as examples in which the present invention can be implemented.

2 is a flow chart of a method for displaying information of a user interface according to an embodiment of the invention. FIG. 3 is a schematic diagram of an application scenario of an information display method of a user interface according to an embodiment of the invention. Please refer to FIG. 2 and FIG. 3 at the same time.

First, in step S210, a user interface having a plurality of dynamic graphic tiles is provided, and functional attributes of each dynamic graphic brick and its subsidiary fields are defined. In order to facilitate the description of the technique of the present invention, FIG. 3(a) to FIG. 3(f) show only the display screen of a part of the illustrated brick in the user interface. As shown in FIG. 3(a), the display screen 300 includes dynamic graphic tiles t1, t3 and a shortcut graphic tile 0. The functional attributes are mainly based on the information that the application corresponding to the dynamic graphic brick can provide. In an embodiment, the functional attributes may include attributes such as weather, time, news, stock market, exchange rate, music, or photos; the auxiliary fields may include place names, countries, cities, or latitude and longitude information, etc. Location information.

As shown in Figure 3(a), the main information displayed by the dynamic graphic brick t1 is "22:50" and the subsidiary field is "New York City". In other words, the dynamic graphic brick t1 represents "the time of New York City". It is 22:50". The main function of the dynamic graphic brick t1 is to provide time information, so its function attribute can be defined as time, and the auxiliary field is city. For the same reason, the main information displayed in the dynamic graphic brick t3 is "28 ° C, sunny", the subsidiary field is "Taipei City", and the dynamic graphic brick t3 stands for "the weather in Taipei is 28 ° C, sunny". Therefore, the main function of the dynamic graphic brick t3 is to provide weather information, and the auxiliary field is the city.

It should be noted that the user interface of the dynamic graphic tile in this embodiment can be displayed on various electronic products, such as display interfaces of electronic products such as computers, notebook computers, tablet computers, smart phones, navigation devices, televisions, and the like. For example, the user can interact with the electronic product through an output/input device such as a mouse, a keyboard, or a screen. If the electronic product provides a touch function (for example, a touch screen), the user can also touch or touch the user. The touch pen controls the touch screen for interactive operation.

Next, in step S220, the user selects a selection operation of dragging the first dynamic graphic brick in the dynamic graphic brick from the first position to the second position. As shown in FIG. 3(b), in the embodiment, the first dynamic graphic brick is a dynamic graphic brick t1, and when the user drags the dynamic graphic brick t1 from the first position L1 to the shortcut graphic brick Between t2 and the dynamic graphic brick t3, the user interface automatically adjusts the position between the illustrated tiles, as shown in Figure 3(c).

In step S230, it is determined whether the first dynamic graphic tile moving to the second location and the second dynamic graphic brick located in the adjacent region have an associated subsidiary field. If it is determined that there is an associated subsidiary field between the first dynamic graphic tile and the second dynamic graphic brick, then step S240 is followed; otherwise, if there is no associated subsidiary field between the two, the subsequent step S250. As shown in FIG. 3(c), the second dynamic graphic brick located adjacent to the dynamic graphic brick t1 is a dynamic graphic brick t3. The auxiliary display fields of the dynamic graphic brick t1 and the dynamic graphic brick t3 are all cities that can be used to assist in expressing the location information. Therefore, it is determined that there is an association between the two, and the process proceeds to step S240.

In step S240, the linkage information associated with the second dynamic graphic brick is correspondingly displayed in the first dynamic graphic brick. In detail, the content of the auxiliary field in the first dynamic graphic brick must be changed to be the same as the content of the auxiliary field of the second dynamic graphic brick. The linkage information is generated by using the function attribute of the first dynamic graphic brick and the changed subsidiary field, and the linkage information is displayed in the first dynamic graphic brick. As shown in Figure 3(d), the dynamic graphic brick t1 changes the content of its subsidiary field from "New York City" to "Taipei City", and the dynamic graphic brick t1 has the function attribute time, so combined with the function attribute and "Taipei City" can generate the linkage information of "Times in Taipei City at 11:50", and display the linkage information in the dynamic graphic brick t1. According to this, the dynamic graphic bricks t1 and t3 all display the same subsidiary. The most recent information about the field.

On the other hand, in step S250, if there is no associated affiliate field between the first dynamic graphic brick and the second dynamic graphic brick, and the associated linkage information cannot be generated, no change is made. Each dynamic graphic tile displays its own information.

4 is a flow chart of a method for displaying information of a user interface according to another embodiment of the present invention. This embodiment is also used in conjunction with the application scenario diagram of FIG. 3 as an auxiliary description. Please refer to FIG. 3 and FIG. 4 at the same time.

First, a user interface having a plurality of dynamic graphic tiles is provided, and the functional attributes of the respective dynamic graphic tiles and their associated fields are defined (step S410). The detecting operation of the user to drag the first dynamic graphic brick in the dynamic graphic brick from the first position to the second position is detected (step S420). It is judged whether the first dynamic graphic brick moving to the second position and the second dynamic graphic brick located in the adjacent area have an associated subsidiary field (step S430). The linkage information associated with the second dynamic graphic tile is correspondingly displayed in the first dynamic graphic tile (step S440). If there is no associated subsidiary field between the first dynamic graphic tile and the second dynamic graphic brick, each dynamic graphic brick displays its own information (step S450). Since the steps S410 to S450 of the embodiment are the same or similar to the steps S210 to S250 shown in FIG. 2, the detailed process thereof will not be described herein.

Next, in step S460, it is determined whether a user selects a selection operation of dragging the first dynamic graphic brick from the second position to the third position within a preset time. The preset time can be customized by the user, for example, 30 seconds, 1 minute, 3 minutes, etc., and is not limited herein. As shown in FIG. 3(e), if the user drags the dynamic graphic brick t1 from the second position L2 to another place within a predetermined time, the step S470 can be continued.

In step S470, the linkage information displayed in the first dynamic graphic brick is deleted, and the preset information content of the first dynamic graphic brick is restored. As shown in FIG. 3(f), since the dynamic graphic brick t1 is dragged to the left of the shortcut graphic tile 0, the user interface automatically adjusts the position between the illustrated tiles, and is originally in the dynamic graphic brick t1. The linkage information "Times in Taipei City at 11:50" has been deleted, and the content of the affiliated fields has been restored to the original "New York City". Therefore, the dynamic graphic brick of Figure 3(f) shows the information as "New York City". The time is 22:52". It should be noted that the time shown in the dynamic graphic brick t1 of FIG. 3( a ) and FIG. 3 ( f ) is different by 2 minutes because the dynamic graphic brick itself periodically updates the image displayed in the graphic brick / Text message to allow users to get the latest news content.

Based on the above, in the original Metro UI design, the time attribute dynamic graphic brick and the weather attribute dynamic graphic brick each display their respective information, and do not affect each other and have no correlation. However, the present invention allows the interaction between the dynamic graphic tiles having the common subsidiary fields and the information correlation between the dynamic graphic tiles by the user's simple selection operation.

Another embodiment will be described as an example. FIG. 5 is a flowchart of a method for displaying information of a user interface according to another embodiment of the present invention. Please refer to Figure 5.

First, a user interface having a plurality of dynamic graphic tiles is provided, and the functional attributes of the respective dynamic graphic tiles and their associated fields are defined (step S510). The detecting operation of the user to drag the first dynamic graphic brick in the dynamic graphic brick from the first position to the second position is detected (step S520).

Next, in step S530, a plurality of second dynamic graphic tiles adjacent to the first dynamic graphic brick are searched for the cross-shaped area centered on the second position. FIG. 6 is a schematic diagram of a user interface having a plurality of dynamic graphic tiles according to still another embodiment of the present invention. Please refer to FIG. 5 and FIG. 6 at the same time. In this embodiment, the first dynamic graphic brick is a dynamic graphic brick t4, and the dynamic graphic brick t4 is moved from an external position to a current position, and therefore, the range of the cross-shaped area A centered on the current position. The second dynamic graphic bricks inside and adjacent to the dynamic graphic brick t4 are dynamic graphic bricks t5, t6.

In step S540, it is determined whether there is an associated subsidiary field between the first dynamic graphic brick and the adjacent second dynamic graphic brick. If yes, then in step S550, a plurality of linkage information associated with the adjacent second dynamic graphic tiles are alternately displayed in the first dynamic graphic tile. If not, proceed to step S560, and each dynamic graphic brick displays its own dynamic information.

Taking Figure 6 as an example, suppose the function attribute of the dynamic graphic brick t4 is to provide time information, and the content of the auxiliary field is "Taipei"; the function attribute of the dynamic graphic brick t5 is to provide news information, and the content of the auxiliary field is " "Tokyo"; the function attribute of the dynamic graphic brick t6 is to provide weather information, and the content of the subsidiary field is "New York". Therefore, between the dynamic graphic brick t4 and the dynamic graphic bricks t5 and t6, there are auxiliary fields that can be used to express position information. Therefore, the dynamic graphic brick t4 will automatically generate two different linkage information of "Tokyo time" and "New York time". In an embodiment, the dynamic graphic brick t4 can display each linkage information in turn by using a peek animation, or can be set by the user for a preset time interval, for example, the brick t4 will be dynamically displayed every 5 seconds. Automatically flip to display each linkage information in turn.

In summary, the functional attributes and the categories of the auxiliary fields to which the dynamic graphic tiles of the present invention belong are not limited to the above, and the information is automatically generated between adjacent dynamic graphic tiles by the user's selection operation. Relevant linkage information is the spirit of the invention. The invention increases the function of information display of the user interface, makes the management more humanized, and increases the fluency and consistency of the user's graphical interface operation.

Although the present invention has been disclosed in the above embodiments, it is not intended to limit the invention, and any one of ordinary skill in the art can make some modifications and refinements without departing from the spirit and scope of the invention. The scope of the invention is defined by the scope of the appended claims.

100, 300, 302, 304, 306, 308, 310, 600. . . Display

110, 120, 130, t1~t6. . . Graphic brick

A. . . Cross-shaped area

L1. . . First position

L2. . . Second position

S210~S250. . . Steps of the information display method of the user interface of an embodiment

S410~S470. . . Steps of the information display method of the user interface of another embodiment

S510~S560. . . Steps of the information display method of the user interface of still another embodiment

FIG. 1 is a schematic diagram of a display screen of a Metro UI of a Microsoft Windows operating system.

2 is a flow chart of a method for displaying information of a user interface according to an embodiment of the invention.

3(a) to 3(f) are schematic diagrams showing an application scenario of an information display method of a user interface according to an embodiment of the invention.

4 is a flow chart of a method for displaying information of a user interface according to another embodiment of the present invention.

FIG. 5 is a flowchart of a method for displaying information of a user interface according to another embodiment of the present invention.

FIG. 6 is a schematic diagram of a user interface having a plurality of dynamic graphic tiles according to still another embodiment of the present invention.

S210~S250. . . User interface information display method steps

Claims (10)

A user interface information display method includes the following steps: providing a user interface having a plurality of dynamic graphic tiles, and defining a functional attribute and an auxiliary field of each of the dynamic graphic tiles; detecting a user Determining a movement of a first dynamic graphic brick in the dynamic graphic brick from a first position to a second position; determining that the first dynamic graphic brick moving to the second position is adjacent to the second Whether at least one second dynamic graphic brick of the area has an associated auxiliary field; and if the first dynamic graphic brick has the auxiliary field associated with the at least one second dynamic graphic brick, The first dynamic graphic brick correspondingly displays a linkage information associated with the at least one second dynamic graphic brick. The method for displaying the information of the user interface as described in claim 1, wherein the step of displaying the linkage information associated with the at least one second dynamic graphic tile in the first dynamic graphic tile comprises: Changing the content of the auxiliary field in the first dynamic graphic brick to be the same as the content of the auxiliary field of the at least one second dynamic graphic brick; and utilizing the functional attribute of the first dynamic graphic brick The linkage information is generated by the content of the modified subsidiary field, and the linkage information is displayed in the first dynamic graphic brick. The method for displaying a user interface according to claim 1, wherein the first dynamic graphic brick moving to the second position and the at least one second dynamic graphic brick in the adjacent area are determined to have The step of associating the auxiliary field includes: searching for a plurality of second dynamic graphic tiles adjacent to the first dynamic graphic brick and a cross-shaped area centered on the second position; and determining the first dynamic Whether the illustrated brick and the adjacent second dynamic graphic tiles have associated subsidiary fields. The information display method of the user interface according to claim 3, wherein if the first dynamic graphic brick has an associated subsidiary field associated with the adjacent second dynamic graphic bricks, the method further includes And displaying, in the first dynamic graphic brick, a plurality of linkage information associated with the adjacent second dynamic graphic tiles. The information display method of the user interface of claim 4, further comprising: dynamically updating, in the first dynamic graphic brick, each linkage associated with the adjacent second dynamic graphic tiles The information is displayed in turn according to a preset time interval. The method for displaying the information of the user interface according to the first aspect of the patent application includes: determining whether the user is dragging the first dynamic graphic brick from the second position within a preset time. a selection operation to a third position; and if so, deleting the linkage information displayed in the first dynamic graphic tile. The information display method of the user interface of claim 6, wherein after deleting the linkage information displayed in the first dynamic graphic brick, the method further comprises: restoring display of the first dynamic graphic brick Preset news content. The method for displaying a user interface according to claim 1, wherein the step of defining the functional attribute of the dynamic graphic brick and the auxiliary field comprises: respectively determining whether each dynamic graphic brick will follow The time content changes to change the displayed information content; and if so, the function attribute of the dynamic graphic brick and the auxiliary field are defined according to the displayed information content. The information display method of the user interface as described in claim 1, wherein: the function attribute includes weather, time, news, stock market, exchange rate, music or photo attribute. The information display method of the user interface as described in claim 1, wherein the auxiliary field includes a place name, a country, a city, or a latitude and longitude information to assist in expressing the location information.