3D Thumbnail Gallery Layout for Seamless Image Zoom Navigation
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing image viewing methods on mobile terminals require cumbersome navigation between thumbnail and zoomed-in images, lacking a seamless transition and efficient display of multiple images.
Innovation Solution
A method and mobile terminal that displays a thumbnail image interface with a three-dimensional perspective effect, allowing a zoomed-in image to be displayed alongside other thumbnails, maintaining their relative positions and heights, and enabling direct switching between images.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Measurement precision
If a user clicks a thumbnail image to zoom in for detailed viewing, then the image detail visibility is improved, but the ability to view other images is lost and navigation becomes cumbersome
Solution Approach 1:
The patent implements a nested display structure where a zoomed-in image view is embedded within the thumbnail grid interface. When a user zooms into a thumbnail, the enlarged image is displayed in a popup or overlay that contains the thumbnail interface in its background, allowing users to navigate back to the thumbnail grid without completely leaving the current view context.
Solution Approach 2:
The patent introduces a spatial dimension to the interface by displaying the zoomed-in image in a layered overlay structure rather than replacing the thumbnail grid. This creates a multi-dimensional display where both the detailed view and the thumbnail overview coexist in different spatial layers, enabling seamless navigation between views.
2Adaptability or versatility
If multiple images are displayed in thumbnail form for overview, then the image selection capability is improved, but the image detail visibility deteriorates
Solution Approach 1:
The patent implements a dynamic display mode that automatically transitions between thumbnail overview and zoomed-in detailed view based on user interaction. The interface can dynamically adjust its state: displaying multiple thumbnails for browsing, and upon user selection, dynamically expanding to show the selected image in high detail while maintaining contextual awareness of other images.
Solution Approach 2:
The patent creates a multi-functional display interface that serves multiple purposes simultaneously: it functions as both a thumbnail gallery for image selection and a detailed image viewer. The same display area adapts to show either multiple small thumbnails or one large detailed image, eliminating the need for separate interfaces for browsing and viewing.
3Device complexity
If the thumbnail image interface uses a two-dimensional layout for simplicity, then the interface simplicity is improved, but the visual distinction and user engagement deteriorate
Solution Approach 1:
The patent enhances the thumbnail interface by introducing three-dimensional visual effects to the otherwise two-dimensional layout. Thumbnails are displayed with depth perception, shadow effects, and spatial layering that create visual interest and improve user engagement while maintaining the simplicity of the grid-based navigation structure.
Data Source
Figure 1
Figure 2
Figure 3
AI summary
Embodiments of the present disclosure provide an image display method and a mobile terminal. The method includes: displaying a thumbnail image interface including at least two thumbnail images; when a first touch operation on a first thumbnail image in the at least two thumbnail images is detected, displaying a three-dimensional perspective image interface including a zoomed-in image of the first thumbnail image and remaining thumbnail images except for the first thumbnail image. The zoomed-in image is a raised image in perspective on the three-dimensional perspective image interface. Positional relationship between the remaining thumbnail images except for the first thumbnail image and the zoomed-in image on the three-dimensional perspective image interface is the same as positional relationship in the thumbnail image interface. The thumbnail image closer to the raised image in perspective, has a higher raised height in perspective on the three-dimensional perspective image interface.