Method for presenting three-state floating window on market information touch screen terminal and user interface
By adopting a three-state floating window design on the touch screen terminal, the problems of screen resource occupation and cumbersome operation in displaying market information are solved, realizing convenient, flexible and intuitive market information tracking and improving user experience.
Patent Information
- Application Number
- CN202511159099.4
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-08-18
- Publication Date
- 2025-10-28
AI Technical Summary
Existing touchscreen terminal devices display market information in a large amount of data, occupy a lot of screen resources, and are cumbersome to operate, making it difficult to keep up with market changes in a timely manner during work or entertainment and affecting user experience.
It adopts a three-state floating window design, including two display states: hidden, small floating window, and large floating window. Combined with dynamic color changes, transparency adjustment, and position association, it provides a variety of information presentation formats and supports user interaction and automatic operation settings.
It enables users to conveniently, flexibly, and intuitively track market information without occupying a large amount of screen space, reducing the frequency of application switching and improving operational efficiency and user experience.
Smart Images

Figure CN120848764A_ABST
Abstract
Description
Technical Field
[0001] This invention relates to the field of touch screen terminal application technology, specifically to a method for presenting external market information in a three-state floating window on a touch screen terminal and the user interface generated by this method, aiming to provide users with a convenient, intuitive, and easily concealed way to view market information. Background Art
[0002] Currently, obtaining and viewing market information on existing touchscreen terminals presents numerous inconveniences. There are also no applications using a three-state floating window interaction to display market information on touchscreen terminals, nor are there any related documents documenting such an application.
[0003] Currently, there are many apps on touchscreen terminals used to display market information, especially financial information, such as stock apps like Great Wisdom, Qianlong, and Tongdaxin, as well as various stock trading software launched by securities companies. These apps typically contain a large amount of information, causing confusion for users. They often occupy the entire screen, have long loading times, and the information is not presented intuitively, lacking dynamic visual feedback (such as color changes and graphical symbols). Users struggle to quickly perceive market fluctuations. If a user is using other work or entertainment apps and wants to see the market information they care about most, they need to switch from their current work or entertainment app to these market apps, glance at it, and then switch back to continue their work or entertainment. During stock trading hours, users need to frequently switch between these two apps to closely track market changes and make timely buying and selling decisions. This switching is not only slow and cumbersome, but also easily leads to being distracted by one app, causing delays and interruptions in work, entertainment, or market tracking. For office workers, viewing stocks on a full-screen monitor during work can also give the impression of being unprofessional.
[0004] In the traditional Windows environment, some clients of Zhongyuan Securities and some individual enthusiasts have implemented the method of displaying market data in floating windows. However, the floating window has a limited functionality and lacks concealment, which cannot take advantage of touch screen terminals.
[0005] In summary, current technology cannot adequately meet the needs of touchscreen end-users who want to work and play while simultaneously tracking key market information and conducting trading operations. Providing an innovative three-state floating window method for presenting market information can effectively solve the aforementioned problems and user pain points, achieving a clear and concise view, allowing users to trade stocks without interfering with their work. Summary of the Invention
[0006] The purpose of this invention is to provide a method for presenting external market information in a three-state floating window on a touch screen terminal and its user interface, so as to solve the problem in the prior art that users need to switch or interrupt the currently running APP task to track market changes, and it is not easy to hide the use of mobile phones to track market information from those around them. This invention eliminates the conflict between stock trading and work and entertainment, realizes timely tracking and flexible processing of market information, and centrally meets the needs of users who want to both view information quickly and keep their behavior private when trading stocks and foreign exchange.
[0007] The overall process of the method for presenting market information on a touch screen terminal according to the present invention is as follows: First, market information is retrieved from the market data server. Then, a floating window is opened on the screen, which has three interchangeable display states: Hidden small floating window The small floating window that appears The large floating window appears; or, There are at least two states: a hidden small floating window and another visible floating window. or, Create two or three floating windows that correspond to the above-mentioned performance states; When displayed as one of the two types of small floating windows mentioned above, its size is roughly the same as that of common icons. When displayed as one of the two types of floating windows mentioned above, market information will be presented on the floating window.
[0008] The three states of a floating window can be transformed in various ways, including but not limited to: When the hidden small floating window is touched, it can be transformed into a visible small floating window or a visible large floating window; When the small floating window that appears is touched, it can be transformed into a hidden small floating window or into a large floating window that appears. When the large floating window is touched, it can be transformed into a hidden small floating window, or it can be transformed into a visible small floating window. When the large floating window is touched, it can be transformed into a hidden small floating window, or it can be transformed into a visible small floating window.
[0009] The result is that a floating window can be hidden in a certain position on the screen. It can be touched, and users can see a small or large floating window displaying market information on the screen. Users can then switch between these windows according to preset actions.
[0010] In terms of technical implementation, this method includes the following basic modules: ① Data acquisition module: pulls data from the market data server in real time (such as stock prices, exchange rates, and futures indices). ② Floating window control module: manages the opening, state switching, position adjustment, and information rendering of floating windows; ③ User interaction module: Responds to touch events, triggers state transitions, or calls external applications.
[0011] There are several ways to display market information in a floating window: The market information displayed in the floating window uses a common format for expressing market data, including numbers, text, charts, market curves, or graphic symbols from a set of graphic symbols agreed upon by the user that correspond to the market information.
[0012] This diverse display method can meet the different users' needs for viewing market information. For example, general market information can be expressed in numbers as the current price and percentage change, in words as "up" and "down", in up and down arrows, in real-time market curves for a direct view of the market, and even in emojis such as smiley and sad faces to express the change, and in words such as "buy" and "sell", "B" and "S" to indicate decision suggestions, etc.
[0013] The market information here includes various information derived from the market information.
[0014] The floating window can be configured with color change features: The floating window displaying the status is filled with a predetermined color, and the intensity of this color can change according to the fluctuations in market prices. This color includes red and green. Through these color changes, users can intuitively perceive the rise and fall of market prices.
[0015] This refers to dynamic color mapping, where the background color of the floating window gradually changes according to the fluctuations in market prices.
[0016] Small floating window position settings: The position of the hidden floating window can be set by the user.
[0017] The position of the displayed floating window on the screen can also be freely placed and set by the user.
[0018] To provide a more intuitive understanding of market changes, the small floating window can be positioned on the screen according to market conditions.
[0019] For example, the height of the small floating window corresponds to market fluctuations. In particular, Link the position of the small floating window to the market coordinates. Treat the screen as a coordinate area of the intraday market chart, and place the small floating window at the current market coordinate position.
[0020] The coordinate scale and time-sharing curve are generally designed to be hidden, but the option to display the coordinate scale is also available. The horizontal axis of the coordinate system corresponds to the trading time, and the length of the vertical axis is determined based on the market's typical (statistically consistent) performance to facilitate an intuitive understanding of market fluctuations. For example, the vertical axis is designed to be 2%, and when the market fluctuation exceeds 2%, it automatically converts to 5%, when the market fluctuation exceeds 5%, it automatically converts to 10%, and when the market fluctuation exceeds 10%, it automatically converts to 20%. In particular, the maximum daily fluctuation at the current moment is used as the vertical axis. Notably, the coordinate system does not use the status bar portion of the screen.
[0021] This design allows users to quickly grasp the corresponding market trends when they see the small floating window, making it clear at a glance while maintaining the simplicity of the interface.
[0022] Adjust the transparency of the floating window: The transparency of the displayed floating window is adjustable. Users can adjust the transparency of the floating window according to their needs and preferences to achieve the best visual effect without affecting the viewing of other interface content.
[0023] Interaction between the floating window and other software: The floating window that appears during operation allows users to access the trading interface or other trading software installed on their device. This feature provides users with a convenient entry point, enabling them to quickly trade or gain in-depth insights into market data while viewing market information.
[0024] Automatic operation settings for floating windows: The floating window can be automatically set to start or stop operating, including automatically starting during market trading hours and automatically stopping during non-trading hours. This intelligent setting not only allows users to obtain market information in a timely manner when needed, but also saves device resources when not needed.
[0025] user interface: Floating Window Shape: The displayed floating window is usually round or square. Users can choose different shapes according to their preferences to enhance the personalized experience.
[0026] The user interface developed in this invention uses a floating window as its core element, combined with the various functionalities described above, to provide users with an intuitive, convenient, and flexible interface for viewing and operating market information. The overall style of the user interface is simple and clear; the status changes, color display, and position of the floating window are presented to the user in an intuitive way, enabling users to easily obtain and track market information and perform corresponding operations.
[0027] The beneficial effects of this invention are: Convenience: The floating window design allows market information to be viewed at any time without taking up a lot of screen space. Users do not need to frequently switch applications or open new windows, which improves operating efficiency.
[0028] Flexibility: The floating window has multiple state transition methods, multiple information presentation formats, color changes, transparency adjustments and other functions. Users can personalize the settings according to their needs and preferences to meet different usage scenarios.
[0029] Intuitive: By changing colors and showing the correspondence between the position of the small floating window and the coordinates of the market data, users can intuitively understand the rise and fall of the market and its development trend.
[0030] Interactivity: The interactive function between the floating window and the trading software provides users with a convenient entry point, enabling them to quickly perform trading and other related operations while viewing market information, thus improving the user experience. Attached Figure Description
[0031] Figure 1 The illustrations of this invention include three display states of the floating window and their transformations, as well as a schematic diagram of the market information displayed in the floating window.
[0032] 1 in the image is a hidden small floating window; 2 in the image shows the small floating window; In the image, 3 represents the large floating window that is displayed. Figure 4 shows external market information.
[0033] The double-headed arrows between them indicate that they can be transformed into each other through certain touch actions.
[0034] For example, clicking from 1→2, from 2→3, or from 3→1; For example, when 1 is closed, clicking 2 and clicking 3 can switch between 2 and 3; For example, when 3 is turned off, clicking 1 and clicking 2 can switch between 1 and 2; For example, visible floating windows are set with touch areas and touch methods, while hidden floating windows are set with touch methods, and they can switch between each other when the touch action meets the requirements.
[0035] Market information 4 is displayed on top of floating windows 2 and 3.
[0036] Figure 2 A schematic diagram of the program module relationship of an embodiment of the present invention.
[0037] In the diagram, 0 represents the APP startup module; 1 in the image is a hidden small floating window module; In the image, 2 shows the small floating window module; In the image, 3 represents the large floating window module that is displayed. 4 in the figure represents the external market information management module; 5 in the diagram represents the transaction operation module; 6 in the diagram is the APP closing module.
[0038] Figure 3 The position of the small floating window on the screen can be adjusted according to market changes. This image shows the latest coordinate position of the small floating window relative to the market curve. In the figure, 2 is the small floating window that is currently at the latest position on the market trend curve; 7 in the image represents the phone screen; In the figure, 8 is a hidden time-sharing chart coordinate system that can be designed to be brought up. Taking China's A-shares as an example, this coordinate system uses the entire screen as a plane space. The horizontal axis of the coordinate corresponds to the trading time from 9:30 to 15:00, and the vertical axis of the coordinate represents the price change of 10%. Detailed Implementation
[0039] Market information acquisition and the initial state of the floating window: When a user opens an application that displays market information, the application first retrieves market information from the market data server. Simultaneously, a small, hidden floating window is placed on the screen by default. This floating window is about the same size as a common icon, located in a corner of the screen, and does not interfere with the user's operation of other interfaces.
[0040] Transitioning of floating window state: If a user clicks on the hidden floating window and chooses to convert it into a visible floating window, the floating window will appear with an animation effect, be about the same size as a common icon, and begin to display some market information, such as the price and price change of a market product that the user is interested in.
[0041] Continuing, users can click on the small floating window that appears at this time and turn it into a large floating window. The floating window occupies a relatively large area on the screen and displays more market information, including numbers, text, charts, and market curves.
[0042] When a user clicks on the small floating window that appears, they can also choose to convert it into a hidden small floating window state, where the floating window will shrink and hide.
[0043] When a user clicks on the large floating window, it can be converted into a hidden small floating window or a visible small floating window; when a user touches the outside of the large floating window, it can also be converted into a hidden small floating window or a visible small floating window.
[0044] Example of state transition logic: Hidden floating window → Click → Floating window appears Hidden small floating window → Long press → Large floating window appears Small floating window appears → Click → Large floating window appears The large floating window appears → Click → The hidden small floating window The large floating window appears → External touch → Hidden small floating window Color change display: As market prices fluctuate, the fill color of the floating window displaying the status changes accordingly. For example, when prices rise, the color gradually shifts towards red, and the red intensity deepens; when prices fall, the color gradually shifts towards green, and the green intensity deepens. This intuitive color change allows users to quickly grasp market trends without having to look at specific numbers.
[0045] This is dynamic color mapping, where the background color of the floating window gradually changes according to the rise and fall of the market, with the red becoming deeper as the rise and fall increases.
[0046] For visual impact, the increase can be transitioned from red to purple, and the decrease from green to blue (taking the Chinese market as an example).
[0047] The relationship between the position of the small floating window and the market coordinates: The small floating window on the screen corresponds to the current market coordinates when the screen is used as the coordinate area of the intraday chart. Although the coordinate ruler and intraday curve can be hidden, users can roughly judge the current market position within the entire intraday chart by the position of the small floating window. When users need to view more detailed coordinate information, they can bring up the hidden coordinate ruler and intraday curve by clicking the floating window. The horizontal axis of the coordinate corresponds to the trading time, and the vertical axis represents 10% of the price change.
[0048] Transparency adjustment operation: Users can adjust the transparency of the floating window by touching specific areas or using preset transparency values. For example, a two-finger pinch gesture dynamically adjusts the floating window's transparency (0%~100%) to adapt to different background content. Increasing the transparency makes the floating window more transparent without affecting the viewing of other interface content; decreasing the transparency makes the floating window clearer and easier to view market information.
[0049] Interaction with other software: When a user long-presses the menu area of the floating window, a menu will pop up, allowing for quick access to the trading interface or to launch the trading software, facilitating a convenient transition from viewing market data to trading operations. For example, to quickly launch the trading software, long-pressing the floating window will bring up a shortcut menu, allowing for one-click navigation to the preset trading app's order placement interface.
[0050] Automatic operation settings for floating windows: Users can enable the automatic operation function in the application's settings and set market trading hours and non-market trading hours. During the set market trading hours, the floating window will automatically start and display market information; during market non-trading hours, the floating window will automatically stop running to save device resources. For example, intelligent start / stop can be used to automatically activate based on market trading hours (e.g., 9:30-15:00 for A-shares) and automatically hide during non-trading hours or when market data is stagnant for more than 5 minutes.
[0051] User interface design: Floating Window Shape Selection: Users can choose the shape of the displayed floating window in the application settings, including round or square. Different shapes of floating windows can meet users' personalized needs and enhance the user experience.
[0052] Layout design: By default, the hidden floating window is placed in the lower left corner of the screen, and the small floating window that is displayed is also placed in the same position as the starting position. The large floating window follows the position of the small floating window that is displayed.
[0053] Their locations can be set by the user.
[0054] The small floating window that appears can be dragged and placed on the screen at any time.
[0055] Hidden small floating window: The size is the same as the system icon, a blank window or only displaying basic identifiers (such as stock codes). Clicking it expands it into a "small floating window" or directly jumps to a "large floating window".
[0056] The small floating window displays concise market data (such as current price and percentage change). You can click to switch to a large window or return to the hidden state. Click the center area to switch to a large window; click the edge area to return to the hidden state; long press to exit.
[0057] The large floating window displays full data (candlestick chart, intraday trading volume) and supports gesture operations (zoom, drag, etc.). Clicking the close button returns to the small window; touching the outer area of the large window directly hides or switches to the small window.
[0058] Motion design: Smooth scaling animations are used during state transitions to enhance the user experience.
[0059] The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions and improvements made within the spirit and principles of the present invention should be included in the scope of protection of the present invention.
Claims
1. A method for presenting market information on a touchscreen terminal, characterized in that: Retrieve market information from the market data server. Create a floating window on the screen with three interchangeable display states: Hidden small floating window The small floating window that appears The large floating window appears; or, There are at least two states: a hidden small floating window and another visible floating window. or, Create two or three floating windows that correspond to the above-mentioned performance states; When displayed as one of the two types of small floating windows mentioned above, its size is roughly the same as that of common icons. When displayed as one of the two types of floating windows mentioned above, market information will be presented on the floating window.
2. The method for presenting market information on a touchscreen terminal according to claim 1, wherein the conversion of the display states of the three floating windows includes one of the following: The hidden floating window transforms into a visible floating window when touched. The hidden small floating window transforms into a large floating window when touched; The visible floating window transforms into a hidden floating window when touched. The small floating window that appears transforms into a large floating window when touched. The large floating window that appears to be visible transforms into a hidden small floating window when touched. The large floating window that appears transforms into a smaller floating window when touched. The large floating window on the outer screen transforms into a hidden small floating window when touched. When the large floating window on the outer screen is touched, it transforms into a smaller floating window.
3. The method for presenting market information on a touchscreen terminal according to claim 1, characterized in that: The market information presented on the floating window is a set of graphic symbols from a commonly used system that expresses market information, including numbers, text, charts, market curves, or a set of graphic symbols agreed upon by the user.
4. The method for presenting market information on a touchscreen terminal according to claim 1, characterized in that: The floating window in the described display state is filled with a predetermined color in all or part of its area. Furthermore, the chromaticity of the color can change with the rise and fall of the market price, and the color includes red and green.
5. The method for presenting market information on a touchscreen terminal according to claim 1, characterized in that: The small floating window that appears on the screen is the current market coordinate position when the screen is viewed as the coordinate area of the intraday chart, and the coordinate ruler and intraday curve can be hidden.
6. The method for presenting market information on a touchscreen terminal according to claim 1, characterized in that: The transparency of the floating window that it displays can be adjusted.
7. The method for presenting market information on a touchscreen terminal according to claim 1, characterized in that: By operating the aforementioned floating window, you can bring up the buy / sell trading interface or other market data and trading software installed on your computer.
8. The method for presenting market information on a touchscreen terminal according to claim 5, characterized in that: The horizontal axis of the coordinate system corresponds to trading time, while the vertical axis is determined based on typical market statistics to facilitate a direct understanding of market fluctuations. This includes a design where the vertical axis length is 2%, automatically converting to 5% when the market fluctuation exceeds 2%, 10% when the market fluctuation exceeds 5%, and 20% when the market fluctuation exceeds 10%. Alternatively, use the maximum daily price change at the current moment as the vertical axis. In particular, the coordinate system does not use the status bar portion of the screen.
9. The user interface system generated by the method for presenting market information on a touch screen terminal according to claims 1, 2, 3, 4, 5, 6, 7, and 8.
10. An electronic device comprising a memory and a processor, wherein the memory stores a computer program, characterized in that... When the program is executed by a processor, it implements the steps of the method according to any one of claims 1-8.