Shop information visualization method based on mobile AR

Abstract

A shop information visualization method based on mobile AR belongs to the field of information visualization, and comprises the following steps: dividing home page recommendation, collection, personal information, bullet screen function, real-time recommendation, map, bad evaluation label, characteristic label, help and label setting according to user requirements and APP function design principles; label design and visual channels are mapped, different information of the shop is converted into different visual channels, and then the information is divided into different levels according to user requirements; word sizes suitable for different devices are calculated; and establishing a geofence, calculating the distance between the user equipment and the shop, judging whether the shop is located in a preset radius, and presenting a label according to the distance between the shop and the user equipment. According to the method, the user demand and the label visualization in the mobile augmented reality are effectively mapped, the readability and intuition of the information are enhanced, the shielding and redundancy of the information are reduced, the information acquisition efficiency and convenience are improved, and the data display is more intuitive and easy to understand.

Description

Technical Field

[0001] The present invention belongs to the technical field of information visualization, and in particular relates to a store information visualization method based on mobile AR. Background Art

[0002] Mobile augmented reality is an interactive experience that combines mobile technology and augmented reality technology. It uses augmented reality technology on devices such as smartphones or tablets to enable users to enter the virtual world anywhere and at any time to achieve an immersive visual and auditory experience. Using augmented reality to combine the geographic environment with AR information can help users reduce cognitive load and improve information acquisition efficiency (Zhu Ying. Research on the readability of text styles in optical head-mounted displays based on augmented reality [D]. Zhejiang University of Technology, 2023.). Therefore, it can be used in traditional commercial street scenes to help users obtain environmental information.

[0003] Grasset et al. proposed an image-driven view management method (Rokhsaritalemi S, Ko BS, Sadeghi-Niaraki A, et al. Geospatial Augmented Reality Tourist System [C] / / 2023 IEEE Conference on Virtual Reality and 3D User Interfaces Abstracts and Workshops (VRW). IEEE, 2023: 611-612.), combining visual saliency algorithms with edge analysis to identify potential important image areas and geometric constraints for placing labels, thereby improving the visual quality of annotated AR environments. Leykin et al. used pattern recognition methods to automatically divide background images into readable and unreadable areas, and selected readable areas as the background for text annotations, thereby improving the readability of text content (Leykin A, Tuceryan M. Automatic determination of text readability over textured backgrounds for augmented reality systems [C] / / Third IEEE and ACM International Symposium on Mixed and Augmented Reality. IEEE, 2004: 224-230.). Zhang Bo et al. proposed an annotation system to enhance tourist videos by adding them to 3D models, demonstrating how to adjust the visibility of annotations in videos without too many cluttered images while maximizing the number of annotations (Zhang B, Li Q, Chao H, et al. Annotating and navigating tourist videos [C] / / Proceedings of the 18th SIGSPATIAL International Conference on Advances in Geographic Information Systems. 2010: 260-269.).Grasset et al. proposed a framework that combines visual saliency with edge analysis to identify potentially important image regions and geometric constraints for placing labels to improve the display of various annotations with historical or landmark information in urban environments (Grasset R, Langlotz T, Kalkofen D, et al. Image-driven view management for augmented reality browsers [C] / / 2012 IEEE International Symposium on Mixed and Augmented Reality (ISMAR). IEEE, 2012: 177-186.). Orlosky et al. conducted user experiments and asked users to overlay text onto videos in real time. The experiment found that walls, roads, leaves, shadows, gray variants, vertical direction and uniformity were the most targeted scene features for overlay (Orlosky J, Kiyokawa K, Takemura H. Towards intelligent view management: A study of manual text placement tendencies in mobile environments using video see-through displays [C] / / 2013 IEEE International Symposium on Mixed and Augmented Reality (ISMAR). IEEE, 2013: 281-282.).

[0004] The above method conducts technical research on the label display position, aiming to enhance the readability of the label content and minimize its masking effect on the real background. However, there is still insufficient research on the visualization design of labels. In the traditional commercial street scene, users need to obtain rich and diverse information. Simply improving the readability of labels cannot meet user needs. At the same time, the display screen of mobile devices is small and cannot present too much information. Therefore, it is necessary to design the visualization of the label itself and determine the mapping relationship between data and visualization to improve the user's information acquisition efficiency and help users obtain information conveniently. Summary of the invention

[0005] In view of the fact that the existing methods do not consider the visual effect of the label itself and only solve the problem of occlusion between the placement of the label and the real background, the present invention provides a store information visualization method based on mobile AR. The present invention studies the visualization of labels in augmented reality and proposes a mapping method between user demand data and function settings and label visualization in mobile augmented reality, and particularly relates to a method for visualizing store information using mobile augmented reality in traditional commercial street scenes.

[0006] The technical solution adopted by the present invention to solve the technical problem is as follows:

[0007] The present invention provides a method for visualizing store information based on mobile AR, which mainly includes the following steps:

[0008] Step S1: Functional division;

[0009] The system is divided into two parts: the home page and the AR interface. According to user needs and the functional design principles of the APP, it is divided into home page recommendations x1, collections x2, personal information x3, barrage function x4, real-time recommendations x5, maps x6, negative review tags x7, featured tags x8, help x9 and tag settings x1. 10 ;

[0010] Step S2: information level division;

[0011] Map label design to visual channels, divide information into different levels according to user needs, and then convert different store information into different visual channels;

[0012] Step S3: Calculate the font size suitable for different devices;

[0013] The calculation formula for the minimum font size that adapts to different device screen sizes is as follows:

[0014] p=0.0365×(D 1.43 / S 0.083 )

[0015] Where D represents the device screen usage distance in centimeters; S represents the device screen size in inches;

[0016] Step S4: Establish a geographic fence, calculate the distance between the user device and the store, determine whether the store is within a preset radius around the user device, and present a certain number of tags based on the distance between the store and the user device.

[0017] Furthermore, in step S1, the user needs include preference recommendation y1, strategy planning y2, companionship needs y3, suggestion provision y4, location distance y5, lightning avoidance guide y6 and characteristic cultural needs y7.

[0018] Furthermore, in step S1, the functional design principles of the APP include user cognition 1, user information 2, user support 3, user use 4 and user interaction 5.

[0019] Furthermore, in step S2, the information hierarchy is divided into a primary label, a secondary label and a tertiary interface; the primary label presents the store name z1, store popularity z2, store rating z3, store type z4, and evaluation label z5; the secondary label presents the store name z1, store rating z3, number of evaluations z6, average price z7, and detailed rating z8; the tertiary interface includes the store name z1, store rating z3, number of evaluations z6, average price z7, detailed rating z8, detailed evaluation label z9, and detailed evaluation z10. 10 、Store discounts 11 、Recommended dishes 12 .

[0020] Furthermore, the store popularity z2: uses a color coding method: 1 is red, 2 is yellow, and 3 is blue. The color coding method includes setting the popularity order represented by the color code, and setting the popular, unpopular, and ordinary stores to red 1, yellow 2, and blue 3 respectively; the store rating z3: uses numbers to represent the store rating, with less background obstruction. Small labels with the same background color as the store name z1 represent selected good reviews, and gray labels represent selected bad reviews; the store type z4: is represented by dark patterns, and five store types are divided according to the survey results: gift shop, clothing store, beverage store, food store, and beauty shop; the evaluation label z5: presents a certain number of small labels of good and bad reviews, the color of the good review label follows the color of the store popularity, and the color of the bad review label uses gray.

[0021] Furthermore, the three-level interface is not added to the real environment in the form of labels, but is directly displayed on the mobile phone screen.

[0022] Furthermore, in step S3, for all devices, the font size of the basic content is at least 40% larger than the recommended minimum font size, and the font size of the enhanced content is at least 80% larger than the recommended minimum font size.

[0023] Furthermore, in step S4, three fixed radii r1, r2, and r3 are set, corresponding to the three distances of near, medium, and far, respectively, and the location of the user device is used as the center of the circle to form a geographic fence with r1, r2, and r3 as the radius.

[0024] Furthermore, in step S4, the location of each store is determined by longitude and latitude (lat i ,lon i ), where i represents the index of the store, lat i Indicates the current latitude of store i, loni Represents the current longitude of store i; the distance between the user device and the store is: R represents the radius of the earth (about 6371 km), Δlat = lat i -lat represents the latitude difference between the store and the user device location, Δlon = lon i -lon represents the longitude difference between the store and the user device location, lat represents the current latitude of the user device, and lon represents the current longitude of the user device.

[0025] Further, in step S4, when the store is in the range of d ≤ r1, r1 < d ≤ r2, r2 < d ≤ r3, one layer of labels is displayed and at most two are displayed.

[0026] The beneficial effects of the present invention are:

[0027] The present invention effectively maps user needs to the visualization of labels in mobile augmented reality, and at the same time sets the information that different levels of labels should present according to the user's cognitive process of the store, greatly improving the efficiency and experience of users in obtaining store information in traditional commercial streets. Compared with the prior art, the present invention has the following advantages:

[0028] 1. The present invention optimizes information display using visual elements such as color coding and digital scoring, enhancing the readability and intuitiveness of information.

[0029] 2. The present invention ensures the readability of information on various devices through a design that adapts to the screen sizes and usage distances of different devices.

[0030] 3. The geofencing technology adopted in the present invention intelligently displays information according to the relative position between the user and the store, reducing information occlusion and redundancy.

[0031] 4. The present invention improves the efficiency and convenience of information acquisition. The visualization effect of the labels conforms to the user's cognition, and through technological innovation, it enhances the user interaction experience, making the display of data more intuitive and easy to understand. Description of the Drawings

[0032] Figure 1 Is the corresponding relationship between requirements, functions, and the usability principles of the mobile augmented reality system.

[0033] Figure 2 Is the corresponding identification design for each store type in the present invention.

[0034] Figure 3 Is the visual effect of the overall label and the specific content presented.

[0035] Figure 4This is a demonstration of the actual interface effect. In the figure, (a) AR homepage; (b) label interaction; (c) store details. DETAILED DESCRIPTION

[0036] The present invention is further described in detail below in conjunction with the accompanying drawings.

[0037] The present invention provides a store information visualization method based on mobile AR, and its specific implementation process is as follows:

[0038] Step S1: Functional division;

[0039] First, it is necessary to conduct a user demand survey, which includes literature research based on consumer shopping behavior, in-depth interviews and field surveys, and crawling evaluation data from Dianping.com. Through these methods, we can understand the user's behavior patterns and information needs in the commercial street, so as to provide a basis for subsequent label design; label design is carried out based on the survey results, which involves the design of visual styles, such as color, shape, size, etc., to ensure that the visual effect of the label is effectively mapped with the relevant content. At the same time, attention should be paid to the user's cognitive habits to ensure that the data display is intuitive and easy to understand.

[0040] like Figure 1 As shown in the figure, the system is divided into two parts: the home page and the AR interface. According to user needs including favorite recommendation y1, strategy planning y2, companionship needs y3, suggestion provision y4, location distance y5, lightning avoidance guide y6, characteristic cultural needs y7 and the functional design principles of APP including user cognition 1, user information 2, user support 3, user use 4, and user interaction 5, the home page recommendation x1, collection x2, personal information x3, barrage function x4, real-time recommendation x5, map x6, bad review label x7, characteristic label x8, help x9, label setting x1 are divided into: 10 And other functions.

[0041] Step S2: information level division;

[0042] Map label design to visual channels, divide information into different levels according to user needs, and then convert different store information into different visual channels. The specific information level division is as follows:

[0043] (a) Primary label

[0044] The first-level label is a conceptual level, providing the most basic and critical information. The first-level label includes the store name z1, store popularity z2, store rating z3, store type z4, and evaluation label z5.

[0045] ① Store popularity z2: Use a color coding method: 1 is red, 2 is yellow, and 3 is blue. This color coding method includes setting the popularity order represented by the color coding to set the popular, unpopular, and ordinary stores to red 1, yellow 2, and blue 3 respectively.

[0046] ② Store rating z3: Use numbers to represent the store rating, instead of the star logo in traditional evaluation software, which blocks less background. The small label with the same background color as the store name z1 represents the selected good reviews, and the gray label represents the selected bad reviews.

[0047] ③ Store Type z4: Use dark patterns to represent store types. According to the survey results, five types of stores are divided, namely gift stores, clothing stores, beverage stores, food stores, and beauty stores. Each store type has a corresponding logo, such as Figure 2 shown.

[0048] ④ Evaluation label z5: presents a certain number of small labels of good and bad reviews. The color of the good review label follows the color of the store popularity, and the color of the bad review label is gray.

[0049] (b) Secondary label

[0050] The secondary label is the detail level. When a user is interested in a store in the primary label, the secondary label provides more detailed information, but it still needs to be kept concise to avoid information overload. The secondary label presents the store name z1, store rating z3, number of reviews z6, average price per person z7, ​​and detailed rating z8.

[0051] like Figure 3 As shown, the secondary label shows more detailed information about the store, including the number of reviews z6 (popularity) of the store, which corresponds to the color in the primary label. It also presents the average price z7 and detailed rating z8, showing more detailed information about the store. At the same time, the system's theme color is used to identify the large ratings and unify the theme color.

[0052] (c) Level 3 interface

[0053] The third level interface is the detailed information level, which is displayed when the user chooses to drill down. The third level interface includes store name z1, store rating z3, number of reviews z6, average price per person z7, ​​detailed rating z8, detailed review label z9, detailed review z10, and detailed review z11. 10 、Store discounts 11 、Recommended dishes 12 .

[0054] The final three-level interface is not added to the real environment in the form of labels, but is displayed directly on the mobile phone screen. Figure 3 As shown, the last three-level interface summarizes the above information in text, and also displays the store's detailed evaluation label z9, detailed evaluation z10 , Store discounts z 11 , Recommended dishes z 12 Other store information that the platform can provide, such as the above, and other online functions that the store can provide, reflect the overall basic information of the store and unify the theme color at the same time.

[0055] Step S3: Calculate the font size suitable for different devices;

[0056] To adapt to different devices and screen sizes, according to ergonomics, combining the screen size, viewing distance, and angular resolution of different devices, calculate the minimum font size suitable for different device screen sizes: p = 0.0365×(D 1.43 / S 0.083 ), where D represents the viewing distance of the device screen in centimeters, S represents the screen size of the device in inches, to ensure good readability on different devices. Regardless of the device, the font size of the basic content needs to be at least 40% larger than the recommended minimum font size, and the font size of the enhanced content is 80% larger than the recommended minimum font size.

[0057] Step S4: Establish a geofence, calculate the distance between the user's device and the store, determine whether the store is within a preset radius around the user's device, and present a certain number of tags according to the distance between the store and the user's device.

[0058] To solve the problem of label occlusion, set three fixed radii r1, r2, and r3, corresponding to near, medium, and far distances respectively, and use the position of the user's device as the center to form a geofence with r1, r2, and r3 as the radii. The position of each store is represented by longitude and latitude (lat i , lon i ), where i represents the index of the store, lat i represents the current latitude of store i, and lon i represents the current longitude of store i; the distance between the user's device and the store is: where R represents the radius of the earth (about 6371 km), Δlat = lat i -lat represents the latitude difference between the store and the user's device position, Δlon = lon i -lon represents the longitude difference between the store and the user's device position, lat represents the current latitude of the user's device, and lon represents the current longitude of the user's device. Present a certain number of tags within the limited screen space to avoid information redundancy: when the store is within the range of d ≤ r1, display one layer of tags and at most only two, and when the store is within the range of r1 < d ≤ r2 and within the range of r2 < d ≤ r3, also display one layer of tags and at most only two.

[0059] After the label design is completed, the feasibility of these label designs in actual use is verified, and user feedback is collected to understand whether the designed labels are intuitive and easy to understand and whether they meet the user's information needs. Figure 4 As shown in the figure, (a) AR homepage; (b) label interaction; (c) store details. Based on this, the interface was designed and volunteers were invited to test it in reality, observe the user's operation behavior and conduct interviews after the experiment. Interview questions were set from the aspects of interface beauty, convenient interaction, information readability, comparison with competing products, and willingness to use.

[0060] The above is only a preferred embodiment of the present invention. It should be pointed out that for ordinary technicians in this technical field, several improvements and modifications can be made without departing from the principle of the present invention. These improvements and modifications should also be regarded as the scope of protection of the present invention.

Claims

1. A store information visualization method based on mobile AR, characterized in that: The following steps are involved: Step S1: Functional division; The system is divided into two parts: the home page and the AR interface. According to user needs and the functional design principles of the APP, the home page recommendation, favorites, personal information, bullet screen function, real-time recommendation, map, negative review label, featured label, help and label setting are divided; Step S2: information level division; Map label design to visual channels, divide information into different levels according to user needs, and then convert different store information into different visual channels; Step S3: Calculate the font size suitable for different devices; The calculation formula for the minimum font size that adapts to different device screen sizes is as follows: p=0.0365×(D 1.43 / S 0.083 ) Where D represents the device screen usage distance in centimeters; S represents the device screen size in inches; Step S4: Establish a geographic fence, calculate the distance between the user device and the store, determine whether the store is within a preset radius around the user device, and present a certain number of tags based on the distance between the store and the user device.

2. A mobile AR-based store information visualization method according to claim 1, characterized in that: In step S1, the user needs include preference recommendations, strategy planning, companionship needs, suggestion provision, location distance, mine avoidance guide and characteristic cultural needs.

3. The method for visualizing store information based on mobile AR according to claim 1, characterized in that: In step S1, the functional design principles of the APP include user cognition, user information, user support, user use and user interaction.

4. The method for visualizing store information based on mobile AR according to claim 1, characterized in that: In step S2, the information hierarchy is divided into a first-level label, a second-level label and a third-level interface; the first-level label presents the store name, store popularity, store rating, store type, and evaluation label; the second-level label presents the store name, store rating, number of evaluations, average price per person, and detailed rating; the third-level interface includes the store name, store rating, number of evaluations, average price per person, detailed rating, detailed evaluation label, detailed evaluation, store discounts, and recommended dishes.

5. The method for visualizing store information based on mobile AR according to claim 4, characterized in that: The store popularity: uses a color coding method: 1 is red, 2 is yellow, and 3 is blue. The color coding method includes setting the popularity order represented by the color code, and setting the popular, unpopular, and ordinary stores to red 1, yellow 2, and blue 3 respectively; the store rating: uses numbers to represent the store rating, which blocks the background less. Small labels with the same background color as the store name represent selected good reviews, and gray labels represent selected bad reviews; the store types: are represented by dark patterns, and five store types are divided according to the survey results: gift shops, clothing stores, beverage stores, food stores, and beauty stores; the evaluation labels: present a certain number of small labels of good and bad reviews. The color of the good review label follows the color of the store popularity, and the color of the bad review label uses gray.

6. The method for visualizing store information based on mobile AR according to claim 4, characterized in that: The three-level interface is not added in the real environment in the form of labels, but is directly displayed on the mobile phone screen.

7. The method for visualizing store information based on mobile AR according to claim 1, characterized in that: In step S3, for all devices, the font size of the basic content is at least 40% larger than the recommended minimum font size, and the font size of the enhanced content is at least 80% larger than the recommended minimum font size.

8. The method for visualizing store information based on mobile AR according to claim 1, characterized in that: In step S4, three fixed radii r1, r2, and r3 are set, corresponding to the three distances of near, medium, and far, respectively, and the location of the user device is used as the center of the circle to form a geographic fence with r1, r2, and r3 as the radius.

9. The method for visualizing store information based on mobile AR according to claim 8, characterized in that: In step S4, the location of each store is calculated by longitude and latitude (lat i ,lon i ), where i represents the index of the store, lat i Indicates the current latitude of store i, lon i represents the current longitude of store i; the distance between the user device and the store is: R represents the radius of the earth (about 6371 kilometers), Δlat = lat i -lat represents the latitude difference between the store and the user's device location, Δlon = lon i -lon represents the longitude difference between the store and the user's device location, lat represents the current latitude of the user's device, and lon represents the current longitude of the user's device.

10. The method for visualizing store information based on mobile AR according to claim 9, characterized in that: In step S4, when the store is within the ranges of d ≤ r1, r1 < d ≤ r2, and r2 < d ≤ r3, one layer of labels is displayed and at most two labels are displayed.

Images