WO2015180433A1 - 自适应调整的界面流式布局显示的方法和系统 - Google Patents

自适应调整的界面流式布局显示的方法和系统 Download PDF

Info

Publication number
WO2015180433A1
WO2015180433A1 PCT/CN2014/092092 CN2014092092W WO2015180433A1 WO 2015180433 A1 WO2015180433 A1 WO 2015180433A1 CN 2014092092 W CN2014092092 W CN 2014092092W WO 2015180433 A1 WO2015180433 A1 WO 2015180433A1
Authority
WO
WIPO (PCT)
Prior art keywords
video
grid
thumbnail
size
display
Prior art date
Application number
PCT/CN2014/092092
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 合一网络技术(北京)有限公司
Publication of WO2015180433A1 publication Critical patent/WO2015180433A1/zh

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents

Definitions

  • the present application relates to the field of interface layout display, and more particularly to a method and system for adaptively adjusted interface flow layout display.
  • the current website is responsible for providing users with rich video resources.
  • the user can access the on-demand page of the video website through the browser on the terminal to watch various videos that the user wants to watch.
  • the arrangement of the video thumbnails in the on-demand page is arranged according to different categories (for example, according to movies, television dramas, news, sports, etc.), but the attribution of the arrangement is not strong, and the whole is scattered. .
  • the screen resolution of the terminal used by the user when visiting the website is different.
  • the higher the resolution, the higher the display precision, and the higher resolution screen can be displayed.
  • the corresponding display effect is the reduction of the size of the display content, resulting in video thumbnails densely displayed in the page, causing viewing discomfort, seriously affecting the user's browsing experience.
  • the technical problem to be solved by the present application is to provide an adaptively adjusted interface flow layout display method and system, to solve the problem that the video thumbnail layout in the page is scattered and the video thumbnail size is at a higher resolution. There is a problem of shrinking.
  • an adaptively adjusted interface flow layout display method which is characterized in that it comprises:
  • the adjusted video classification label and the video thumbnail are arranged on the grid to form a plurality of horizontally parallel set video classification lines in a horizontal arrangement for display.
  • the correspondence between the number of reference display columns of the preset video thumbnails and the total pixel values of the horizontal direction of the grid is further: a resolution value of 1024 pixels with a length of different screen size values a reference value, which defines a number of reference display columns of the video thumbnails in the page, and obtains a size ratio of the video thumbnails at different resolution values by using the reference display column number as a fixed value, and establishes the video reduction
  • the reference of the thumbnail displays the correspondence between the number of columns and the total pixel value of the horizontal direction of the grid.
  • the size of the thumbnail and the video classification label is further: reading the total pixel value of the horizontal direction of the grid, keeping the number of reference display columns of the video thumbnail unchanged, and acquiring the video thumbnail of the total pixel value. a horizontal length pixel size, and adjusting a size of the video thumbnail according to a fixed aspect ratio of the video thumbnail, and adjusting the video according to a size correspondence between the video classification tag and the video thumbnail The size of the classification label.
  • the adjusted actual size of the video classification tag and the video thumbnail is greater than the actual size of the video classification tag and the video thumbnail before adjustment.
  • the adjusted video classification label and the video thumbnail are arranged in a horizontal arrangement on the grid to form a plurality of horizontally parallel set video classification lines for display, further: on the grid
  • the adjusted video classification label is placed on the leftmost side, and the adjusted video thumbnails corresponding to the video label are arranged horizontally on the right side of the video label in a left-to-right manner to form a plurality of The video classification lines in the form of train flows arranged in parallel are displayed.
  • the present application further discloses an adaptively adjusted interface flow layout display system, which is coupled to a browser, and is characterized in that the system comprises: a detecting unit, a grid unit, an adjusting unit, and Layout unit, where
  • the detecting unit is configured to detect a resolution value of a terminal system running the browser
  • the grid unit is configured to construct, according to the resolution value, a cell in which a pixel value is preset in the page into a grid vertically arranged and full of the page;
  • the adjusting unit is configured to read a total pixel value of the horizontal direction of the grid, and adjust the corresponding relationship between the number of columns of the preset video thumbnail and the total pixel value of the horizontal direction of the grid, and adjust the The size of the video thumbnail and video classification tag;
  • the layout unit is configured to display, on the grid, the adjusted video classification labels and video thumbnails in a horizontal arrangement to form a plurality of horizontally parallel set video classification lines for display.
  • the correspondence between the number of reference display columns of the preset video thumbnails and the total pixel values of the horizontal direction of the grid is further: a resolution value of 1024 pixels with a length of different screen size values a reference value, which defines a number of reference display columns of the video thumbnails in the page, and obtains a size ratio of the video thumbnails at different resolution values by using the reference display column number as a fixed value, and establishes the video reduction
  • the reference of the thumbnail displays the correspondence between the number of columns and the total pixel value of the horizontal direction of the grid.
  • the adjusting unit is further configured to: read a total pixel value of the horizontal direction of the grid, keep the number of reference display columns of the video thumbnail unchanged, and obtain the video under the total pixel value. a horizontal length pixel size of the thumbnail, and adjusting a size of the video thumbnail according to a fixed aspect ratio of the video thumbnail, and adjusting according to a size correspondence between the video classification label and the video thumbnail The pixel size of the video classification tag.
  • the adjusted actual size of the video classification tag and the video thumbnail is greater than the actual size of the video classification tag and the video thumbnail before adjustment.
  • the layout unit is further configured to: on the grid, place the adjusted video classification label on the leftmost side, and adjust the adjusted video thumbnail corresponding to the video label according to The left-to-right manner is arranged laterally on the right side of the video label, and a plurality of video classification lines in the form of train streams arranged in parallel are displayed for display.
  • an adaptively adjusted interface flow layout display method and system described in the present application achieves the following effects:
  • the present application forms a video classification label and a video thumbnail of different sizes according to the current resolution according to the resolution of the screen detected before the page is displayed, and performs the train streaming.
  • the arrangement display shows that even when the resolution changes, the composed video classification label and video thumbnail can be adjusted according to the changed resolution.
  • the video classification label and the video thumbnail will not be Because the increase of the resolution leads to the reduction of the size, the problem that the layout of the video thumbnails in the page is scattered and the video thumbnail size is reduced at a higher resolution is effectively solved.
  • the width pixel value of the cell in the application can enhance the display effect of the page, and the grid formed by the cell can be well divided into different display areas, and the display content set on the grid (including: video) Classification labels and video thumbnails are sized for optimal viewing comfort.
  • the content displayed in this application (including: video classification tags and video thumbnails) are arranged horizontally according to different types, which increases the attribution of display content and enhances the browsing experience of users.
  • Embodiment 1 is a flow chart of a method for adaptively adjusting interface flow layout display according to Embodiment 1 of the present application.
  • FIG. 2 is a flow chart of a method for adaptively adjusting interface flow layout display according to Embodiment 2 of the present application.
  • FIG. 3 is a schematic diagram of a cell of the first and second embodiments of the present application and a grid thereof.
  • FIGS. 4 to 7 are schematic diagrams showing display of video thumbnails and video classification tags at different resolutions in the method of adaptively adjusted interface stream layout display according to the third embodiment of the present application.
  • FIG. 8 is a structural block diagram of a system for adaptively adjusted interface flow layout display according to Embodiment 4 of the present application.
  • first device if a first device is coupled to a second device, the first device can be directly electrically coupled to the second device, or electrically coupled indirectly through other devices or coupling means. Connected to the second device.
  • the description of the specification is intended to be illustrative of the preferred embodiments of the invention. The scope of protection of the application is subject to the definition of the appended claims.
  • a method for adaptively adjusting an interface flow layout display includes:
  • Step 101 Detect a resolution value of a terminal system running the browser.
  • the resolution of the screen used by the user is different.
  • the resolution indicates the pixel value in the length and width direction of the screen.
  • the content displayed on the screen (including: text, image, etc.) is composed of pixels, and thus, the resolution It reflects the amount of content displayed on the screen and the accuracy of the display: the lower the resolution, the less the display content, and the lower the corresponding display accuracy; conversely, the display content is large and the display accuracy is high.
  • the browser When a user accesses a corresponding website (specifically, a video website) through a browser on a terminal (including a computer terminal, a mobile terminal, etc., which is not specifically limited herein), the browser may be used in a browser or a terminal system running the browser.
  • the detection thread obtains the resolution value of the current screen.
  • the obtained resolution value can be recorded in an HTML (HyperText Mark-up Language) file or a browser information conforming to the network transmission communication standard. In the file. It will not be specifically limited herein for those skilled in the art.
  • Step 102 Construct, according to the resolution value, a cell in which a pixel value is preset in the page into a grid vertically arranged and filled with the page.
  • the content displayed in the browser page depends on the layout design of the grid, and the formed grid is a vertically arranged strip structure.
  • the grid is not displayed in the browser page, only As a reference for page layout adjustment before the browser page is displayed.
  • the grid is composed of the cells, and since the grid extends in the vertical direction, the pixel value of the grid in the vertical direction is not limited, and the length of the grid extending in the vertical direction depends on the page content in the actual application. How much, so in step 102, the pixel value of the predetermined cell is the pixel value of the cell in the horizontal direction. According to the resolution value, the specific pixel value of the screen in the horizontal direction can be known, and according to the cell whose pixel value is known in the horizontal direction, the grid in the page can be formed.
  • Step 103 Read a total pixel value of the horizontal direction of the grid, and adjust a correspondence between the number of columns of the preset video thumbnail and the total pixel value of the horizontal direction of the grid to adjust the video thumbnail and The size of the video classification label.
  • the total pixel value for the horizontal direction (horizontal direction) of the grid in step 103 represents The actual display range of the page in the horizontal direction, then, after the total pixel value in the horizontal direction of the grid is determined, the video thumbnail, the video classification label, etc. can be set horizontally in the page. The amount of capacity is also determined.
  • Step 104 On the grid, the adjusted video classification label and the video thumbnail are arranged in a horizontal arrangement to form a plurality of horizontally parallel set video classification lines for display.
  • the video classification label represents the type of the video content, and the different types of videos are gathered together to enhance the user's experience.
  • the video classification label may be a graphic or text label in the form of a picture or an icon.
  • the size of the video classification label is usually set smaller than the size of the video thumbnail.
  • the ratio of the length of the video classification label to the width is 1:1, and the ratio of the length of the video thumbnail to the width is 16:9.
  • the aspect ratio of the video classification label and the video thumbnail may be adjusted according to the needs of the actual application, and does not constitute a limitation on the present application.
  • the display content in the page may be based on the resolution value of the terminal system used by the current user. Make adjustments to adapt the display content on the page to different resolution values.
  • the displayed content (such as video thumbnails) is arranged horizontally according to different types, which increases the attribution of the display content and enhances the browsing experience of the user. That is, in the case of high resolution, the content displayed on the page does not appear too narrow and affects the browsing effect.
  • a method for adaptively adjusting an interface flow layout display according to Embodiment 2 of the present application includes:
  • Step 201 When the page is displayed by the browser, the resolution value of the terminal system running the browser and the pixel value of the current browser window when the size is maximized are detected.
  • the detection process can start at the moment when the browser is started.
  • the pixel value of the browser window when the size is maximized can be recorded in the HTML file, and the resolution value of the terminal system can be obtained by the display process in the system accessing the current terminal.
  • the pixel value of the browser window when maximizing the size specifically the image of the horizontal direction (horizontal direction) of the browser window when the size is maximized. Prime value.
  • Step 202 Build a cell A with a preset pixel value in the page into a vertical arrangement and fill the page according to the resolution value and a pixel value of the current browser window at the maximum size. Grid.
  • the grid is composed of the cells, and since the grid extends in the vertical direction, the pixel value of the grid in the vertical direction need not be limited, and the length of the grid extending in the vertical direction depends on the actual application.
  • the content of the page content is not related to the resolution value.
  • the pixel value corresponding to the resolution direction is the horizontal direction (horizontal direction), so the pixel value of the preset cell is the cell.
  • the pixel value in the horizontal direction As shown in FIG.
  • cell A (which may also be referred to as a grid cell in this embodiment) is composed of a portion having a pixel width of 35 px (pixel) and an i portion having a pixel width of 10 px, and the i portion is located at a. On both sides, the pixel width of cell A is 55px.
  • cells A can be arranged to form a grid with different pixel widths. For example, in the horizontal direction of the resolution value of 1366px or less, the pixel width of the grid is 990px; in the horizontal direction of the resolution value of 1366px or more, the pixel width of the grid is 990px.
  • the screen resolution is greatly increased, for example, when the resolution is increased to a resolution of 4K (4096px ⁇ 2160px), as shown in FIG. 3, a of the cell A Both i and i increased by a factor of three.
  • the multiple change of the cell A can also be other ways, and is not intended to limit the application.
  • the pixel width of the cell A in this embodiment can optimize the effect of the page.
  • the grid is not directly displayed in the page, but is used as a reference for subsequent display content adjustment.
  • Step 203 reading the total pixel value of the grid formed by the cell A in the lateral direction, and combining the reference number of the preset video thumbnail to display the corresponding relationship between the number of columns and the total pixel value of the horizontal direction of the grid. Adjust the size of the video thumbnail and video category label.
  • the correspondence between the number of reference display columns of the preset video thumbnails and the total pixel values of the horizontal direction of the grid is specifically: a resolution value of 1024 pixels with a length value is a reference value under different screen size values. Defining a number of reference display columns of the video thumbnails in the page, and obtaining a size ratio of the video thumbnails at different resolution values by using the reference display column number as a fixed value The reference display number of the video thumbnails corresponds to the total pixel value of the horizontal direction of the grid.
  • the display is performed at a resolution lower than the resolution of 1024 pixels, the display effect is poor, so in the present embodiment, the length is 1024 pixels.
  • the resolution value (which can be called a reference pixel) is the reference value (ie, the lowest value), and the number of display columns of the video thumbnail in the page is defined as the number of reference columns (for example, 6 columns, that is, horizontally arranged in the current page) 6 different video thumbnails), then horizontally arrange 6 video thumbnails at the current resolution to basically guarantee the user's browsing experience.
  • step 203 once it is determined that the number of display columns of the video thumbnails in the page is the number of reference columns, then when the resolution is changed (the resolution is increased, greater than 1024 pixels), by adjusting the size of the video thumbnail and the video classification label. To ensure that six different video thumbnails are still arranged horizontally in the page, that is, the number of reference columns of the video thumbnail does not change.
  • step 203 the total pixel value in the horizontal direction of the grid is read, and the correspondence between the number of display columns of the preset video thumbnail and the total pixel value of the horizontal direction of the grid is adjusted, and the The size of the video thumbnail and the video classification label is specifically: reading a total pixel value of the horizontal direction of the grid, keeping the number of reference display columns of the video thumbnail unchanged, and acquiring the video reduction under the total pixel value.
  • a horizontal length pixel size of the thumbnail, and adjusting a size of the video thumbnail according to a fixed aspect ratio of the video thumbnail, and adjusting the location according to a size correspondence between the video classification label and the video thumbnail The size of the video classification tag.
  • the adjusted video classification label and video thumbnail are substantially the same as the physical display size of the video classification label and video thumbnail before adjustment.
  • the physical display size refers to the size of the video classification label or video thumbnail displayed under the same screen (different resolution), that is, for the user, the size of the video classification label or the video thumbnail is hardly seen. change. Almost invisible, because the actual situation is not able to achieve the perfect physical size, can only approximate
  • Step 204 Place the adjusted video classification label on the leftmost side on the grid formed by the cell A, and adjust the adjusted video thumbnail corresponding to the video label in a left-to-right manner.
  • the video classification lines in the form of a plurality of trains arranged in a horizontally parallel manner are displayed for display on the right side of the video label.
  • the video classification label located at the leftmost side can also adopt a floating display side.
  • the video classification label when there are too many video thumbnails corresponding to a certain video classification label (for example, multiple lines of video thumbnails are arranged), the user performs a scroll operation on the page, and the video classification label remains suspended (relative to the position of the page) ), the corresponding video thumbnail follows the page for scrolling, so that the user can fully browse the content in the video classification label, and the floating video classification label also ensures that the user's browsing position is not lost.
  • the video category tag also scrolls out of the browsing window so that the user can continue to browse the rest of the content in the page.
  • the category label When the video content of a category label is too much, the user scrolls the video content, and the category label can be suspended, so that the user position is not lost. When the video content scrolls out of the browser, the category label also scrolls out of the browser.
  • Step 1 When the user displays the page through the browser, detecting that the resolution value of the terminal system running the browser is 1024px in the horizontal direction, and detecting the pixel in the horizontal direction when the current browser window is maximized. The value is 1003px.
  • Step 2 as shown in FIG. 4, according to the resolution value of 1024px and the pixel value 1003px of the current browser window at the maximum size, the cell A having the preset pixel width of 55px is constructed as a reference size as a vertical dimension. A grid that aligns and fills the page.
  • the total pixel value of the grid formed in the page is 990px in the horizontal direction
  • the width of the actual visible area S3 is 970px.
  • the grid in FIG. 4 is not directly displayed in the page, that is, the user does not visible.
  • the shaded portion of the region S1 having a width pixel value of 640px is a display region of a video thumbnail and a video classification label
  • the shaded portion of the region S2 having a width pixel value of 310px is a related video (may include: a thumbnail or The display area of the recommended video, hotspot video, and related video information in the form of text.
  • the pixel values of the above S1 to S3 will be changed according to different screen resolution values, which are not illustrated in the present application.
  • Step 3 as shown in Figure 5, at the current 1024 resolution, the video thumbnail in the grid is delineated.
  • the reference of the graph and the video classification label displays the number of columns, reads the total pixel value of the grid formed by the cell A of the pixel width of 55px in the lateral direction, and adjusts the size of the video thumbnail and the video classification label.
  • the video classification label in FIG. 5 has a size ratio of length to width of 1:1, a video thumbnail has a length to width ratio of 16:9, and in the horizontal direction, six video thumbnails can be arranged.
  • Step 4 placing the adjusted video classification label on the leftmost side on the grid formed by the cell A having a pixel width of 55px, as shown in FIG. 5, and simultaneously adjusting the corresponding video label.
  • the video thumbnails are arranged horizontally on the right side of the video label in a left-to-right manner, and a plurality of video classification lines in the form of train streams arranged in parallel are displayed for display.
  • Step I detecting that the resolution value of the terminal system running the browser is 1280px in the horizontal direction, and detecting that the pixel value in the horizontal direction of the current browser window is 1259px when the maximum size is maximized.
  • Step II according to the resolution value of 1280px and the pixel value of the current browser window at the maximum size of 1259px, the cell A having the preset pixel width of 55px is constructed as a reference size and vertically arranged and covered. The grid of the page.
  • the total pixel value of the grid formed in the page is 1210px in the horizontal direction, the actual visible width is 1190px, and the shaded portion with the width pixel value of 860px is the display area of the video thumbnail and the video classification label, and the width pixel value.
  • the shaded portion of 310px is the display area of the associated video.
  • Step 3 as shown in FIG. 6, at the current 1280 resolution, the number of reference columns of the video thumbnail and the video classification label in the grid is delineated, and the grid composed of the cell A having the pixel width of 55px is read. The total pixel value in the horizontal direction, adjusting the size of the video thumbnail and video classification label.
  • Step 4 Adjusted on a grid consisting of cells A with a pixel width of 55px
  • the video classification label is placed on the leftmost side, as shown in FIG. 6.
  • the adjusted video thumbnails corresponding to the video label are arranged horizontally on the right side of the video label in a left-to-right manner.
  • the video classification lines in the form of a plurality of trains arranged in parallel and arranged in parallel are displayed.
  • the aspect ratio of the video classification label and the video thumbnail in FIG. 6 is the same as that in FIG. 5, but in fact, the size of the video classification label and the video thumbnail has changed, and both become larger, thereby offsetting the resolution.
  • the increase in the rate of display reduces the effect of the display content, that is, the physical display size remains substantially unchanged, and the size of the video classification tag and the video thumbnail is hardly changed relative to the user.
  • the final display effect is as shown in FIG. 7.
  • the video thumbnails of different categories are followed by the corresponding video classification labels to form a train layout arrangement, and the right side of each train flow arrangement is displayed.
  • Recommended video or ranking which increases the categorization of the video and increases the browsing experience of the user.
  • the video label on the leftmost side can also be displayed in a floating manner.
  • the corresponding video thumbnail follows the page for scrolling, so that the user can fully browse the content in the video classification label, and the floating video classification label also ensures that the user's browsing position is not lost.
  • the video classification tag also scrolls out of the browsing window, so that the user continues to browse the rest of the content in the page, which increases the browsing experience of the user.
  • the system for adaptively adjusting the interface flow layout display according to the fourth embodiment of the present invention is coupled to a browser, and the system includes: a detecting unit 801, a grid unit 802, and an adjustment.
  • the detecting unit 801 is configured to detect a resolution value of a terminal system that runs the browser.
  • the grid unit 802 is configured to construct, according to the resolution value, a cell that presets a pixel value in the page into a grid that is vertically arranged and fills the page.
  • the pixel width of the cell in this embodiment can achieve the effect of the page. Best, of course, the grid is not directly displayed on the page, but is used as a reference for subsequent display content adjustments.
  • the adjusting unit 803 is configured to read a total pixel value of the horizontal direction of the grid, and combine the reference display number of the preset video thumbnails with the total pixel value of the horizontal direction of the grid, and adjust the corresponding The size of the video thumbnail and video classification tag.
  • the layout unit 804 is configured to display, on the grid, the adjusted video classification labels and video thumbnails in a horizontal arrangement to form a plurality of horizontally parallel set video classification lines for display.
  • the grid is composed of cells. Since the grid extends in the vertical direction, the pixel value of the grid in the vertical direction need not be limited, and the length of the grid extending in the vertical direction depends on the actual The amount of page content in the application is not related to the resolution value.
  • the pixel value corresponding to the resolution value is the horizontal direction (horizontal direction), so the pixel value of the preset cell is the The pixel value of the cell in the horizontal direction.
  • cell A (which may also be referred to as a grid cell in this embodiment) is composed of a portion having a pixel width of 35 px (pixel) and an i portion having a pixel width of 10 px, and the i portion is located at a.
  • the pixel width of cell A is 55px.
  • cells A can be arranged to form a grid with different pixel widths.
  • the pixel width of the grid is 990 px at a resolution value of 1366 px or less in the horizontal direction, and 990 px in the resolution value of 1366 px or more in the horizontal direction.
  • the correspondence between the number of reference display columns of the preset video thumbnails and the total pixel value of the horizontal direction of the grid is specifically: a resolution of 1024 pixels in length under different screen size values.
  • the value is a reference value
  • the number of reference display columns of the video thumbnails in the page is demarcated
  • the size of the video thumbnails at different resolution values is obtained by using the reference display column number as a fixed value
  • the The reference of the video thumbnail displays the correspondence between the number of columns and the total pixel value of the horizontal direction of the grid.
  • the adjusted video classification label and video thumbnail are substantially identical to the physical display size of the video classification label and video thumbnail before adjustment.
  • the physical display size refers to the size of the video classification label or video thumbnail displayed under the same screen (different resolution), that is, for the user, the size of the video classification label or the video thumbnail is hardly seen. change.
  • the adjusting unit 803 is configured to: read a total pixel value of the horizontal direction of the grid, keep the number of reference display columns of the video thumbnail unchanged, and obtain a horizontal length pixel of the video thumbnail under the total pixel value. Resizing, and adjusting a size of the video thumbnail according to a fixed aspect ratio of the video thumbnail, and adjusting a size of the video classification label according to a size correspondence between the video classification label and the video thumbnail size.
  • the video classification label represents a type of the video content, and the different types of videos are aggregated together to enhance the user experience.
  • the video classification label may be a graphic or a graphic or the like. Text label.
  • the size of the video classification label is usually set smaller than the size of the video thumbnail. As a way, the ratio of the length of the video classification label to the width is 1:1, and the ratio of the length of the video thumbnail to the width is 16:9.
  • the aspect ratio of the video classification label and the video thumbnail may be adjusted according to the needs of the actual application, and does not constitute a limitation on the present application.
  • the layout unit 804 is specifically configured to: place the adjusted video classification label on the leftmost side on the grid, and adjust the adjusted video thumbnail corresponding to the video label from left to right.
  • the manner is arranged horizontally on the right side of the video label, and a plurality of video classification lines in the form of train streams arranged in parallel are displayed for display.
  • the display content in the page can be adjusted according to the resolution value of the terminal system used by the current user.
  • the display content in the page is adapted to different resolution values, and the displayed content (such as video thumbnails) is arranged horizontally according to different types, which increases the attribution of the display content and enhances the browsing experience of the user, that is, In the case of high resolution, the content displayed on the page will not appear too narrow and affect the browsing effect.
  • an adaptively adjusted interface flow layout display method and system described in the present application achieves the following effects:
  • This application will be on the page by the resolution of the screen detected before the page is displayed.
  • the preset cells form video classification labels and video thumbnails of different sizes according to the current resolution, and are arranged in a train stream, even when the resolution changes, the video classification labels and video thumbnails are also configured.
  • the size can be adjusted according to the changed resolution.
  • the video classification label and the video thumbnail will not be reduced in size due to the increase of the resolution, which effectively solves the layout of the video thumbnail in the page.
  • the video thumbnail size has a problem of shrinking at higher resolutions.
  • the width pixel value of the cell in the application can enhance the display effect of the page, and the grid formed by the cell can be well divided into different display areas, and the display content set on the grid (including: video) Classification labels and video thumbnails are sized for optimal viewing comfort.
  • the content displayed in this application (including: video classification tags and video thumbnails) are arranged horizontally according to different types, which increases the attribution of display content and enhances the browsing experience of users.
  • embodiments of the present application can be provided as a method, system, or computer program product.
  • the present application can take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment in combination of software and hardware.
  • the application can take the form of a computer program product embodied on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) including computer usable program code.

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)
  • Controls And Circuits For Display Device (AREA)
  • Two-Way Televisions, Distribution Of Moving Picture Or The Like (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本申请公开了自适应调整的界面流式布局显示的方法和系统，方法包括：检测运行该浏览器的终端系统的分辨率值；根据分辨率值，将在页面中预先设定像素值的单元格构建成竖向排列且布满页面的栅格；读取栅格横向方向的总像素值，并结合预置的视频缩略图的基准显示列数与栅格横向方向总像素值的对应关系，调整视频缩略图和视频分类标签的尺寸；在栅格上将调整后的视频分类标签和视频缩略图以横向排列方式构成多个横向平行设置的视频分类行进行显示。本发明解决了页面中视频缩略的布局散乱且视频缩略图尺寸在较高分辨率下产生缩减的问题。

Description

自适应调整的界面流式布局显示的方法和系统 技术领域
本申请涉及界面布局显示领域，更具体地，涉及一种自适应调整的界面流式布局显示的方法和系统。
背景技术
随着互联网技术的快速发展，人们获取信息的方式已经发生改变：从传统的书籍、报纸、电视、广播等方式，继而变成通过互联网获取。尤其是互联网将影视节目、新闻、广告、聊天视频、游戏视频和监控视频等等丰富的综合性网络视频资源进行共享，从而网络视频已经成为人们学习、社交以及休闲娱乐而不可替代的重要方式。
目前的网站，尤其是视频网站负责为用户提供丰富的视频资源，用户可以通过终端上的浏览器进行访问视频网站的点播页面，观看用户想要观看的各类视频。
通常，点播页面上的大量视频资源都以具有代表性的视频截图形成视频缩略图的方式进行展现，这样，用户通过视频缩略图可以直观、清楚的了解相应的视频资源的大致内容，从而增加了用户的浏览体验感受。
现有技术中，点播页面中的视频缩略图的排列方式虽然会按照不同的分类进行排列(如按照电影、电视剧、新闻、体育等方式排列分类)，但是排列的归属性不强，整体较散乱。
而且，重要的是，用户访问网站时所使用的终端的屏幕分辨率各不相同，在终端屏幕固定的情况下，其分辨率越高，显示的精度就越高，分辨率高的屏幕可以显示更多内容，相应带来的显示效果是显示内容尺寸大小的缩减，导致视频缩略图密集显示在页面中，造成观看不适，严重影响用户的浏览体验。
发明内容
有鉴于此，本申请所要解决的技术问题是提供了一种自适应调整的界面流式布局显示的方法和系统，以解决页面中视频缩略的布局散乱且视频缩略图尺寸在较高分辨率下产生缩减的问题。
为了解决上述技术问题，本申请公开了一种自适应调整的界面流式布局显示的方法，其特征在于，包括：
检测运行该浏览器的终端系统的分辨率值；
根据所述分辨率值，将在所述页面中预先设定像素值的单元格构建成竖向排列且布满所述页面的栅格；
读取所述栅格横向方向的总像素值，并结合预置的视频缩略图的基准显示列数与所述栅格横向方向总像素值的对应关系，调整所述视频缩略图和视频分类标签的尺寸；
在所述栅格上将调整后的所述视频分类标签和视频缩略图以横向排列方式构成多个横向平行设置的视频分类行进行显示。
优选地，其中，预置的视频缩略图的基准显示列数与所述栅格横向方向总像素值的对应关系，进一步为：在不同的屏幕尺寸数值下以长度为1024像素的分辨率值为基准值，划定所述页面中所述视频缩略图的基准显示列数，并以该基准显示列数为定值获取不同分辨率值下所述视频缩略图的尺寸比例，建立所述视频缩略图的该基准显示列数与所述栅格横向方向总像素值的对应关系。
优选地，其中，读取所述栅格横向方向的总像素值，并结合预置的视频缩略图的基准显示列数与所述栅格横向方向总像素值的对应关系，调整所述视频缩略图和视频分类标签的尺寸，进一步为：读取所述栅格横向方向的总像素值，保持所述视频缩略图的基准显示列数不变，获取该总像素值下所述视频缩略图的横向长度像素尺寸，并根据所述视频缩略图固定的长宽像素比例，调整所述视频缩略图的尺寸，以及根据所述视频分类标签与所述视频缩略图的尺寸对应关系，调整所述视频分类标签的尺寸。
优选地，其中，调整后的所述视频分类标签和视频缩略图的实际尺寸大于调整前的所述视频分类标签和视频缩略图的实际尺寸。
优选地，其中，在所述栅格上将调整后的所述视频分类标签和视频缩略图以横向排列方式构成多个横向平行设置的视频分类行进行显示，进一步为：在所述栅格上将调整后的所述视频分类标签置于最左侧，将对应该视频标签的调整后的所述视频缩略图按照从左至右的方式依次横向排列于所述视频标签右侧，构成多个横向平行设置的火车流形式的视频分类行进行显示。
为了解决上述技术问题，本申请还公开了一种自适应调整的界面流式布局显示的系统，与浏览器相耦接，其特征在于，该系统包括：检测单元、栅格单元、调整单元以及布局单元，其中，
所述检测单元，用于检测运行该浏览器的终端系统的分辨率值；
所述栅格单元，用于根据所述分辨率值，将在所述页面中预先设定像素值的单元格构建成竖向排列且布满所述页面的栅格；
所述调整单元，用于读取所述栅格横向方向的总像素值，并结合预置的视频缩略图的基准显示列数与所述栅格横向方向总像素值的对应关系，调整所述视频缩略图和视频分类标签的尺寸；
所述布局单元，用于在所述栅格上将调整后的所述视频分类标签和视频缩略图以横向排列方式构成多个横向平行设置的视频分类行进行显示。
优选地，其中，预置的视频缩略图的基准显示列数与所述栅格横向方向总像素值的对应关系，进一步为：在不同的屏幕尺寸数值下以长度为1024像素的分辨率值为基准值，划定所述页面中所述视频缩略图的基准显示列数，并以该基准显示列数为定值获取不同分辨率值下所述视频缩略图的尺寸比例，建立所述视频缩略图的该基准显示列数与所述栅格横向方向总像素值的对应关系。
优选地，其中，所述调整单元，进一步用于：读取所述栅格横向方向的总像素值，保持所述视频缩略图的基准显示列数不变，获取该总像素值下所述视频缩略图的横向长度像素尺寸，并根据所述视频缩略图固定的长宽像素比例，调整所述视频缩略图的尺寸，以及根据所述视频分类标签与所述视频缩略图的尺寸对应关系，调整所述视频分类标签的像素尺寸尺寸。
优选地，其中，调整后的所述视频分类标签和视频缩略图的实际尺寸大于调整前的所述视频分类标签和视频缩略图的实际尺寸。
优选地，其中，所述布局单元，进一步用于：在所述栅格上将调整后的所述视频分类标签置于最左侧，将对应该视频标签的调整后的所述视频缩略图按照从左至右的方式依次横向排列于所述视频标签右侧，构成多个横向平行设置的火车流形式的视频分类行进行显示。
与现有技术相比，本申请所述的一种自适应调整的界面流式布局显示的方法和系统，达到了如下效果：
1)本申请通过根据在页面显示前所检测到的屏幕的分辨率，将在页面中预置的单元格构成符合当前分辨率的不同尺寸的视频分类标签及视频缩略图，并进行火车流式的排列显示，即使在分辨率发生变化时，构成的视频分类标签及视频缩略图也可以根据变化后的分辨率进行尺寸大小的调整，当用户浏览观看时，视频分类标签及视频缩略图不会因为分辨率的增加导致尺寸大小的缩减，有效解决了页面中视频缩略的布局散乱且视频缩略图尺寸在较高分辨率下产生缩减的问题。
2)本申请中的单元格的宽度像素值可以增强页面的显示效果，由该单元格构成的栅格上可以良好的划分成不同的显示区域，在栅格上设置的显示内容(包括：视频分类标签及视频缩略图)的尺寸大小可以达到最佳的浏览舒适度。
3)本申请所显示的内容(包括：视频分类标签及视频缩略图)按照不同类型横向排列，增加了显示内容的归属性，也增强用户的浏览体验。
当然，实施本申请的任一产品必不一定需要同时达到以上所述的所有技术效果。
附图说明
此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：
图1是本申请实施例一所述的自适应调整的界面流式布局显示的方法的流程框图。
图2是本申请实施例二所述的自适应调整的界面流式布局显示的方法的流程框图。
图3是本申请实施例一、二中单元格及其构成的栅格的示意图。
图4至7是本申请实施例三中所述的自适应调整的界面流式布局显示的方法中视频缩略图和视频分类标签在不同分辨率下的显示示意图。
图8是本申请实施例四所述的自适应调整的界面流式布局显示的系统的结构框图。
具体实施方式
如在说明书及权利要求当中使用了某些词汇来指称特定组件。本领域技术人员应可理解，硬件制造商可能会用不同名词来称呼同一个组件。本说明书及权利要求并不以名称的差异来作为区分组件的方式，而是以组件在功能上的差异来作为区分的准则。如在通篇说明书及权利要求当中所提及的“包含”为一开放式用语，故应解释成“包含但不限定于”。“大致”是指在可接收的误差范围内，本领域技术人员能够在一定误差范围内解决所述技术问题，基本达到所述技术效果。此外，“耦接”一词在此包含任何直接及间接的电性耦接手段。因此，若文中描述一第一装置耦接于一第二装置，则代表所述第一装置可直接电性耦接于所述第二装置，或通过其他装置或耦接手段间接地电性耦接至所述第二装置。说明书后续描述为实施本申请的较佳实施方式，然所述描述乃以说明本申请的一般原则为目的，并非用以限定本申请的范围。本申请的保护范围当视所附权利要求所界定者为准。
实施例一
如图1所示，为本申请实施例一所述的一种自适应调整的界面流式布局显示的方法，该方法包括：
步骤101，检测运行浏览器的终端系统的分辨率值。
用户所使用的屏幕的分辨率大小各不相同，分辨率表示屏幕长度和宽度方向上的像素值，显示于屏幕中的内容(包括：文字、图像等)均由像素点构成，从而，分辨率就反映了在屏幕中显示内容的多少和显示的精度：分辨率越低，显示内容就越少，相应的显示精度越低；反之，显示内容多，显示精度高。
在用户通过终端(包括：计算机终端、移动终端等，在此不作具体限定)上的浏览器访问相应的网站(具体可以是视频网站)时，可以通过浏览器或运行该浏览器的终端系统中的检测线程，获取当前屏幕的分辨率值，在本申请中，获取的分辨率值可以记录于HTML(HyperText Mark-up Language，超文本标记语言)文件或者是符合网络传输通信标准的浏览器信息文件中。对于本领域技术人员来说，这里不作具体限定。
步骤102，根据所述分辨率值，将在所述页面中预先设定像素值的单元格构建成竖向排列且布满所述页面的栅格。
在浏览器页面中所显示的内容，依赖于栅格进行布局设计，形成的栅格为竖直排列的条形结构，如图3所示，栅格并不会在浏览器页面中显示，只作为在浏览器页面显示前进行页面布局调整的参照。栅格由所述单元格构成，由于栅格在竖直方向延伸，所以对栅格在竖直方向上的像素值不作出限定，其在竖直方向上延伸的长度取决于实际应用中页面内容的多少，因此在步骤102中，预先设定的单元格的像素值就是该单元格在水平方向的像素值。根据分辨率值，可获知屏幕在水平方向的具体像素值，再根据水平方向像素值已知的单元格，便可以构成页面中的栅格。
步骤103，读取所述栅格横向方向的总像素值，并结合预置的视频缩略图的基准显示列数与所述栅格横向方向总像素值的对应关系，调整所述视频缩略图和视频分类标签的尺寸。
由于页面中的显示内容(可以包括：图片、视频分类标签、视频缩略图、文字等)均由栅格构成，所述对于步骤103中的栅格横向方向(水平方向)的总像素值，代表了页面在水平方向的实际显示范围，那么，在栅格横向方向的总像素值确定后，页面中可以横向设置视频缩略图、视频分类标签等内 容的数量也就确定了。在步骤103中，只需调整视频缩略图和视频分类标签的尺寸即可，如：在横向像素值为1024的分辨率下，调整页面中横向设置的视频缩略图的数量为6个。
步骤104，在所述栅格上将调整后的所述视频分类标签和视频缩略图以横向排列方式构成多个横向平行设置的视频分类行进行显示。
视频分类标签代表了视频内容的所划分的类型，将不同类型的视频汇聚在一起，可以增强用户的体验感，在本实施例中，视频分类标签可以是图片、图标等形式的图形或文字标签。视频分类标签的尺寸通常设置为小于视频缩略图的尺寸，作为一种方式，视频分类标签的长度与宽度的尺寸比例为1:1，视频缩略图的长度与宽度的尺寸比例为16:9。当然上述视频分类标签和视频缩略图的长宽比例可以根据实际应用的需要进行调整，并不构成对本申请的限定。
通过本实施例中的上述步骤101至104，在用户启动浏览器访问相应的网站页面时(在页面显示前)，可以根据当前用户所使用的终端系统的分辨率值，对页面中的显示内容进行调整，使页面中的显示内容适应于不同的分辨率值，而且，所显示的内容(如：视频缩略图)按照不同类型横向排列，增加了显示内容的归属性，也增强用户的浏览体验，即在高分辨率的情况下，页面中所显示的内容也不会出现过于缩小而影响浏览效果的情况。
实施例二
如图2所示，为本申请实施例二所述的一种自适应调整的界面流式布局显示的方法，该方法包括：
步骤201，通过浏览器对页面进行显示时，检测运行该浏览器的终端系统的分辨率值以及当前浏览器窗口在最大化尺寸时的像素值。
检测的过程可以开始于启动浏览器的瞬间，浏览器窗口在最大化尺寸时的像素值可以记录于HTML文件中，终端系统的分辨率值可以通过访问当前终端的系统中的显示进程获取得到。对于浏览器窗口在最大化尺寸时的像素值而言，具体是该浏览器窗口在最大化尺寸时横向方向(水平方向的)的像 素值。
步骤202，根据所述分辨率值和当前浏览器窗口在最大化尺寸时的像素值，将在所述页面中预先设定像素值的单元格A构建成竖向排列且布满所述页面的栅格。
其中，栅格由所述单元格构成，由于栅格在竖直方向延伸，所以对栅格在竖直方向上的像素值不需作出限定，其在竖直方向上延伸的长度取决于实际应用中页面内容的多少，与分辨率值不相关，那么在步骤202中，与分辨率值相关的是横向方向(水平方向)的像素值，所以预先设定的单元格的像素值就是该单元格在水平方向的像素值。如图3所示，单元格A(在本实施例中，也可称为栅格单元格)由像素宽度为35px(像素)的a部分和像素宽度为10px的i部分构成，i部分位于a部分两侧，单元格A的像素宽度为55px，在图3中，在不同的分辨率下，由该单元格A可以排列构成具有不同像素宽度的栅格。例如，在水平方向为1366px以下的分辨率值下，栅格的像素宽度为990px；在水平方向为1366px以上的分辨率值下，栅格的像素宽度为990px。
作为本实施例中的另一种方式，当屏幕分辨率出现大幅度增加时，如：分辨率提升至4K级(4096px×2160px)的分辨率时，如图3所示，单元格A的a和i两部分均增加3倍。当然，对于单元格A的倍数改变还可以是其他方式，并不作为对本申请的限定。
需要说明的是，本实施例中的单元格A的像素宽度可以使页面的效果达到最佳，当然，栅格并不直接显示于页面中，而是作为后续显示内容调整的基准参照。
步骤203，读取由单元格A所构成的栅格在横向方向上的总像素值，并结合预置的视频缩略图的基准显示列数与所述栅格横向方向总像素值的对应关系，调整所述视频缩略图和视频分类标签的尺寸。
其中，预置的视频缩略图的基准显示列数与所述栅格横向方向总像素值的对应关系，具体为：在不同的屏幕尺寸数值下以长度为1024像素的分辨率值为基准值，划定所述页面中所述视频缩略图的基准显示列数，并以该基准显示列数为定值获取不同分辨率值下所述视频缩略图的尺寸比例，建立所 述视频缩略图的该基准显示列数与所述栅格横向方向总像素值的对应关系。
对于不同的屏幕尺寸而言，尤其是较大尺寸的屏幕中，若以长度为1024像素的分辨率以下的分辨率进行显示，其显示效果较差，所以在本实施例中以长度为1024像素(可以称为基准像素)的分辨率值为基准值(即最低值)，划定页面中视频缩略图的显示列数为基准列数(如：6列，即在当前页面中可以横向排列设置6个不同的视频缩略图)，那么在当前分辨率下横向排列6个视屏缩略图，可以基本保证用户的浏览体验。
对于步骤203而言，一旦确定了页面中视频缩略图的显示列数为基准列数，那么在分辨率改变时(分辨率增加，大于1024像素)，通过调整视频缩略图和视频分类标签的尺寸，保证页面中仍横向排列设置6个不同的视频缩略图，即视频缩略图的基准显示列数不变。
另外，在步骤203中，读取所述栅格横向方向的总像素值，并结合预置的视频缩略图的基准显示列数与所述栅格横向方向总像素值的对应关系，调整所述视频缩略图和视频分类标签的尺寸，具体为：读取所述栅格横向方向的总像素值，保持所述视频缩略图的基准显示列数不变，获取该总像素值下所述视频缩略图的横向长度像素尺寸，并根据所述视频缩略图固定的长宽像素比例，调整所述视频缩略图的尺寸，以及根据所述视频分类标签与所述视频缩略图的尺寸对应关系，调整所述视频分类标签的尺寸。
在分辨率改变的情况下(尤其在分辨率增加，大于1024像素时)，调整后的视频分类标签和视频缩略图与调整前的所述视频分类标签和视频缩略图的物理显示尺寸基本保持一致。其中的物理显示尺寸，是指视频分类标签或视频缩略图，在同一屏幕下(不同分辨率)显示的尺寸大小，即对用户而言，几乎看不出视频分类标签或视频缩略图的尺寸的改变。几乎看不出，因为实际情况是不能达到完美的物理尺寸的一直，只能近似
步骤204，在由单元格A所构成的栅格上将调整后的所述视频分类标签置于最左侧，将对应该视频标签的调整后的所述视频缩略图按照从左至右的方式依次横向排列于所述视频标签右侧，构成多个横向平行设置的火车流形式的视频分类行进行显示。
在本实施例中，位于最左侧的视频分类标签也可以采用悬浮式的显示方 式，即当某一视频分类标签对应的视频缩略图过多时(如：视频缩略图排列了多行)，用户在页面中进行滚动操作，该视频分类标签保持悬浮(相对于页面的位置不变)，其对应的视频缩略图跟随页面进行滚动，这样，用户便可以充分浏览在该视频分类标签中的内容，同时，悬浮式的视频分类标签也保证了用户的浏览位置不丢失。用户继续滚动页面使该视频分类标签中的视频缩略图滚动至浏览窗口外时，该视频分类标签也跟随滚动至浏览窗口外，以便用户继续浏览页面中的其余内容。
当一个分类标签的视频内容过多时，用户在滚动页面是视频内容移动，分类标签可悬浮，这样用户位置不会丢失，当视频内容滚动出浏览器外分类标签也滚动出浏览器外。
实施例三
下面结合图4-8，对所述自适应调整的界面流式布局显示的方法的具体应用进行详细说明：
步骤一，当用户通过浏览器对页面进行显示时，检测运行该浏览器的终端系统的分辨率值在横向方向的像素值为1024px，同时检测当前浏览器窗口在最大化尺寸时横向方向的像素值为1003px。
步骤二，如图4所示，根据1024px的分辨率值和当前浏览器窗口在最大化尺寸时的像素值1003px，将预先设定的像素宽度为55px的单元格A作为基准尺寸构建成竖向排列且布满所述页面的栅格。
其中，在页面中构成的栅格在横向方向上的总像素值为990px，实际可视区域S3的宽度为970px，当然，图4中的栅格并不会直接显示与页面中，即用户不可见。在图4中，区域S1的宽度像素值为640px的阴影部分为视频缩略图和视频分类标签的显示区域，区域S2的宽度像素值为310px的阴影部分为相关视频(可以包括：以缩略图或文字形式的推荐视频、热点视频、排行旁等相关视频信息)的显示区域。当然，上述S1至S3的像素值将根据不同的屏幕分辨率值而改变，在本申请中不再另作图示出。
步骤三，如图5所示，在当前1024分辨率下，划定栅格中的视频缩略 图和视频分类标签的基准显示列数，读取由像素宽度为55px的单元格A所构成的栅格在横向方向上的总像素值，调整视频缩略图和视频分类标签的尺寸。
图5中的视频分类标签的长度与宽度的尺寸比例为1:1，视频缩略图的长度与宽度的尺寸比例为16:9，在横向方向上，可以排列设置6个视频缩略图。
步骤四，在由像素宽度为55px的单元格A所构成的栅格上将调整后的所述视频分类标签置于最左侧，如图5所示，同时，将对应该视频标签的调整后的所述视频缩略图按照从左至右的方式依次横向排列于所述视频标签右侧，构成多个横向平行设置的火车流形式的视频分类行进行显示。
如果，此时用户调整其屏幕的分辨率或使用不同的终端浏览网页(但该终端上的分辨率发生了改变)，假设分辨率从1024改变至1280，此时，浏览器将重复执行上述步骤：
步骤I，检测运行该浏览器的终端系统的分辨率值在横向方向的像素值为1280px，同时检测当前浏览器窗口在最大化尺寸时横向方向的像素值为1259px。
步骤II，根据1280px的分辨率值和当前浏览器窗口在最大化尺寸时的像素值1259px，将预先设定的像素宽度为55px的单元格A作为基准尺寸构建成竖向排列且布满所述页面的栅格。
其中，在页面中构成的栅格在横向方向上的总像素值为1210px，实际可视宽度为1190px，宽度像素值为860px的阴影部分为视频缩略图和视频分类标签的显示区域，宽度像素值为310px的阴影部分为相关视频的显示区域。
步骤三，如图6所示，在当前1280分辨率下，划定栅格中的视频缩略图和视频分类标签的基准显示列数，读取由像素宽度为55px的单元格A所构成的栅格在横向方向上的总像素值，调整视频缩略图和视频分类标签的尺寸。
步骤四，在由像素宽度为55px的单元格A所构成的栅格上将调整后的 所述视频分类标签置于最左侧，如图6所示，同时，将对应该视频标签的调整后的所述视频缩略图按照从左至右的方式依次横向排列于所述视频标签右侧，构成多个横向平行设置的火车流形式的视频分类行进行显示。
图6中的视频分类标签和视频缩略图的长宽尺寸比例与图5中一致，但实际上，视频分类标签和视频缩略图的尺寸大小发生了改变，均变大，以此来抵消由于分辨率的增加所产生的显示内容缩减效应，即保持了物理显示尺寸基本不变，相对于用户，视频分类标签和视频缩略图的尺寸几乎未发生变化。
在本实施例中，最终的显示效果如图7所示，不同类别的视频缩略图跟随在相应的视频分类标签之后，形成火车流式的排列布局，每一行火车流排列的右侧显示相关的推荐视频或排行，增加了视频的归类性，增加了用户的浏览体验，如上述实施例二中的记载，作为一种实现方式，位于最左侧的视频分类标签也可以采用悬浮式的显示方式，即当某一视频分类标签对应的视频缩略图过多时(如：视频缩略图排列了多行)，用户在页面中进行滚动操作，该视频分类标签保持悬浮(相对于页面的位置不变)，其对应的视频缩略图跟随页面进行滚动，这样，用户便可以充分浏览在该视频分类标签中的内容，同时，悬浮式的视频分类标签也保证了用户的浏览位置不丢失。用户继续滚动页面使该视频分类标签中的视频缩略图滚动至浏览窗口外时，该视频分类标签也跟随滚动至浏览窗口外，以便用户继续浏览页面中的其余内容，增加了用户的浏览体验。
实施例四
如图8所示，为本申请实施例四所述的一种自适应调整的界面流式布局显示的系统，与浏览器相耦接，该系统包括：检测单元801、栅格单元802、调整单元803以及布局单元804，其中，
所述检测单元801，用于检测运行该浏览器的终端系统的分辨率值。
所述栅格单元802，用于根据所述分辨率值，将在所述页面中预先设定像素值的单元格构建成竖向排列且布满所述页面的栅格。
需要说明的是，本实施例中的单元格的像素宽度可以使页面的效果达到 最佳，当然，栅格并不直接显示于页面中，而是作为后续显示内容调整的基准参照。
所述调整单元803，用于读取所述栅格横向方向的总像素值，并结合预置的视频缩略图的基准显示列数与所述栅格横向方向总像素值的对应关系，调整所述视频缩略图和视频分类标签的尺寸。
所述布局单元804，用于在所述栅格上将调整后的所述视频分类标签和视频缩略图以横向排列方式构成多个横向平行设置的视频分类行进行显示。
本实施例中，栅格由单元格构成，由于栅格在竖直方向延伸，所以对栅格在竖直方向上的像素值不需作出限定，其在竖直方向上延伸的长度取决于实际应用中页面内容的多少，与分辨率值不相关，那么对于栅格单元802，与分辨率值相关的是横向方向(水平方向)的像素值，所以预先设定的单元格的像素值就是该单元格在水平方向的像素值。如图3所示，单元格A(在本实施例中，也可称为栅格单元格)由像素宽度为35px(像素)的a部分和像素宽度为10px的i部分构成，i部分位于a部分两侧，单元格A的像素宽度为55px，在图3中，在不同的分辨率下，由该单元格A可以排列构成具有不同像素宽度的栅格。例如，在图3中，在水平方向为1366px以下的分辨率值下，栅格的像素宽度为990px；在水平方向为1366px以上的分辨率值下，栅格的像素宽度为990px。
对于调整单元803而言，预置的视频缩略图的基准显示列数与所述栅格横向方向总像素值的对应关系，具体为：在不同的屏幕尺寸数值下以长度为1024像素的分辨率值为基准值，划定所述页面中所述视频缩略图的基准显示列数，并以该基准显示列数为定值获取不同分辨率值下所述视频缩略图的尺寸比例，建立所述视频缩略图的该基准显示列数与所述栅格横向方向总像素值的对应关系。
在分辨率改变的情况下(尤其在分辨率增加，大于1024像素时)，调整后的视频分类标签和视频缩略图与调整前的所述视频分类标签和视频缩略图的物理显示尺寸基本一致。其中的物理显示尺寸，是指视频分类标签或视频缩略图，在同一屏幕下(不同分辨率)显示的尺寸大小，即对用户而言，几乎看不出视频分类标签或视频缩略图的尺寸的改变。
调整单元803，具体用于：读取所述栅格横向方向的总像素值，保持所述视频缩略图的基准显示列数不变，获取该总像素值下所述视频缩略图的横向长度像素尺寸，并根据所述视频缩略图固定的长宽像素比例，调整所述视频缩略图的尺寸，以及根据所述视频分类标签与所述视频缩略图的尺寸对应关系，调整所述视频分类标签的尺寸。
其中，视频分类标签代表了视频内容的所划分的类型，将不同类型的视频汇聚在一起，可以增强用户的体验感，在本实施例中，视频分类标签可以是图片、图标等形式的图形或文字标签。视频分类标签的尺寸通常设置为小于视频缩略图的尺寸，作为一种方式，视频分类标签的长度与宽度的尺寸比例为1:1，视频缩略图的长度与宽度的尺寸比例为16:9。当然上述视频分类标签和视频缩略图的长宽比例可以根据实际应用的需要进行调整，并不构成对本申请的限定。
所述布局单元804，具体用于：在所述栅格上将调整后的所述视频分类标签置于最左侧，将对应该视频标签的调整后的所述视频缩略图按照从左至右的方式依次横向排列于所述视频标签右侧，构成多个横向平行设置的火车流形式的视频分类行进行显示。
通过本实施例中的上述系统，在用户启动浏览器访问相应的网站页面时(在页面显示前)，可以根据当前用户所使用的终端系统的分辨率值，对页面中的显示内容进行调整，使页面中的显示内容适应于不同的分辨率值，而且，所显示的内容(如：视频缩略图)按照不同类型横向排列，增加了显示内容的归属性，也增强用户的浏览体验，即在高分辨率的情况下，页面中所显示的内容也不会出现过于缩小而影响浏览效果的情况。
由于方法部分已经对本申请实施例进行了详细描述，这里对实施例中涉及的系统与方法对应部分的展开描述省略，不再赘述。对于系统中具体内容的描述可参考方法实施例的内容，这里不再具体限定。
与现有技术相比，本申请所述的一种自适应调整的界面流式布局显示的方法和系统，达到了如下效果：
1)本申请通过根据在页面显示前所检测到的屏幕的分辨率，将在页面 中预置的单元格构成符合当前分辨率的不同尺寸的视频分类标签及视频缩略图，并进行火车流式的排列显示，即使在分辨率发生变化时，构成的视频分类标签及视频缩略图也可以根据变化后的分辨率进行尺寸大小的调整，当用户浏览观看时，视频分类标签及视频缩略图不会因为分辨率的增加导致尺寸大小的缩减，有效解决了页面中视频缩略的布局散乱且视频缩略图尺寸在较高分辨率下产生缩减的问题。
2)本申请中的单元格的宽度像素值可以增强页面的显示效果，由该单元格构成的栅格上可以良好的划分成不同的显示区域，在栅格上设置的显示内容(包括：视频分类标签及视频缩略图)的尺寸大小可以达到最佳的浏览舒适度。
3)本申请所显示的内容(包括：视频分类标签及视频缩略图)按照不同类型横向排列，增加了显示内容的归属性，也增强用户的浏览体验。
还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者系统不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者系统所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者系统中还存在另外的相同要素。
本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
以上所述仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (10)

  1. 一种自适应调整的界面流式布局显示的方法，其特征在于，包括：
    检测运行该浏览器的终端系统的分辨率值；
    根据所述分辨率值，将在所述页面中预先设定像素值的单元格构建成竖向排列且布满所述页面的栅格；
    读取所述栅格横向方向的总像素值，并结合预置的视频缩略图的基准显示列数与所述栅格横向方向总像素值的对应关系，调整所述视频缩略图和视频分类标签的尺寸；
    在所述栅格上将调整后的所述视频分类标签和视频缩略图以横向排列方式构成多个横向平行设置的视频分类行进行显示。
  2. 如权利要求1所述的自适应调整的界面流式布局显示的方法，其特征在于，
    预置的视频缩略图的基准显示列数与所述栅格横向方向总像素值的对应关系，进一步为：在不同的屏幕尺寸数值下以长度为1024像素的分辨率值为基准值，划定所述页面中所述视频缩略图的基准显示列数，并以该基准显示列数为定值获取不同分辨率值下所述视频缩略图的尺寸比例，建立所述视频缩略图的该基准显示列数与所述栅格横向方向总像素值的对应关系。
  3. 如权利要求2所述的自适应调整的界面流式布局显示的方法，其特征在于，
    读取所述栅格横向方向的总像素值，并结合预置的视频缩略图的基准显示列数与所述栅格横向方向总像素值的对应关系，调整所述视频缩略图和视频分类标签的尺寸，进一步为：读取所述栅格横向方向的总像素值，保持所述视频缩略图的基准显示列数不变，获取该总像素值下所述视频缩略图的横向长度像素尺寸，并根据所述视频缩略图固定的长宽像素比例，调整所述视频缩略图的尺寸，以及根据所述视频分类标签与所述视频缩略图的尺寸对应关系，调整所述视频分类标签的尺寸。
  4. 如权利要求3中所述的自适应调整的界面流式布局显示的方法，其特征在于，
    调整后的所述视频分类标签和视频缩略图的实际尺寸大于调整前的所述视频分类标签和视频缩略图的实际尺寸。
  5. 如权利要求1所述的自适应调整的界面流式布局显示的方法，其特征在于，
    在所述栅格上将调整后的所述视频分类标签和视频缩略图以横向排列方式构成多个横向平行设置的视频分类行进行显示，进一步为：在所述栅格上将调整后的所述视频分类标签置于最左侧，将对应该视频标签的调整后的所述视频缩略图按照从左至右的方式依次横向排列于所述视频标签右侧，构成多个横向平行设置的火车流形式的视频分类行进行显示。
  6. 一种自适应调整的界面流式布局显示的系统，与浏览器相耦接，其特征在于，该系统包括：检测单元、栅格单元、调整单元以及布局单元，其中，
    所述检测单元，用于检测运行该浏览器的终端系统的分辨率值；
    所述栅格单元，用于根据所述分辨率值，将在所述页面中预先设定像素值的单元格构建成竖向排列且布满所述页面的栅格；
    所述调整单元，用于读取所述栅格横向方向的总像素值，并结合预置的视频缩略图的基准显示列数与所述栅格横向方向总像素值的对应关系，调整所述视频缩略图和视频分类标签的尺寸；
    所述布局单元，用于在所述栅格上将调整后的所述视频分类标签和视频缩略图以横向排列方式构成多个横向平行设置的视频分类行进行显示。
  7. 如权利要求6所述的自适应调整的界面流式布局显示的系统，其特征在于，
    预置的视频缩略图的基准显示列数与所述栅格横向方向总像素值的对应关系，进一步为：在不同的屏幕尺寸数值下以长度为1024像素的分辨率值 为基准值，划定所述页面中所述视频缩略图的基准显示列数，并以该基准显示列数为定值获取不同分辨率值下所述视频缩略图的尺寸比例，建立所述视频缩略图的该基准显示列数与所述栅格横向方向总像素值的对应关系。
  8. 如权利要求7所述的自适应调整的界面流式布局显示的系统，其特征在于，
    所述调整单元，进一步用于：读取所述栅格横向方向的总像素值，保持所述视频缩略图的基准显示列数不变，获取该总像素值下所述视频缩略图的横向长度像素尺寸，并根据所述视频缩略图固定的长宽像素比例，调整所述视频缩略图的尺寸，以及根据所述视频分类标签与所述视频缩略图的尺寸对应关系，调整所述视频分类标签的像素尺寸尺寸。
  9. 如权利要求8中所述的自适应调整的界面流式布局显示的系统，其特征在于，
    调整后的所述视频分类标签和视频缩略图的实际尺寸大于调整前的所述视频分类标签和视频缩略图的实际尺寸。
  10. 如权利要求9所述的自适应调整的界面流式布局显示的系统，其特征在于，
    所述布局单元，进一步用于：在所述栅格上将调整后的所述视频分类标签置于最左侧，将对应该视频标签的调整后的所述视频缩略图按照从左至右的方式依次横向排列于所述视频标签右侧，构成多个横向平行设置的火车流形式的视频分类行进行显示。
PCT/CN2014/092092 2014-05-27 2014-11-24 自适应调整的界面流式布局显示的方法和系统 WO2015180433A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201410224496.0A CN103970894B (zh) 2014-05-27 2014-05-27 自适应调整的界面流式布局显示的方法和系统
CN201410224496.0 2014-05-27

Publications (1)

Publication Number Publication Date
WO2015180433A1 true WO2015180433A1 (zh) 2015-12-03

Family

ID=51240392

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2014/092092 WO2015180433A1 (zh) 2014-05-27 2014-11-24 自适应调整的界面流式布局显示的方法和系统

Country Status (2)

Country Link
CN (1) CN103970894B (zh)
WO (1) WO2015180433A1 (zh)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111741349A (zh) * 2020-07-14 2020-10-02 北京简元科技有限公司 多媒体信息异形屏发布方法和装置及设备
CN114329255A (zh) * 2021-12-31 2022-04-12 北京字节跳动网络技术有限公司 一种搜索结果展示方法、装置、计算机设备及存储介质

Families Citing this family (20)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103970894B (zh) * 2014-05-27 2017-04-05 合一网络技术(北京)有限公司 自适应调整的界面流式布局显示的方法和系统
CN104461514A (zh) * 2014-11-21 2015-03-25 山东中创软件工程股份有限公司 一种页面布局调整方法、装置和数字终端
CN104537002B (zh) * 2014-12-15 2018-04-17 山东中创软件商用中间件股份有限公司 一种css兼容性调优的方法及系统
CN105159645B (zh) * 2015-10-19 2017-12-12 华中师范大学 一种移动端唐诗自适应布局方法
CN106020831A (zh) * 2016-05-25 2016-10-12 乐视控股（北京）有限公司 一种设置窗口的方法和装置
CN106658199B (zh) * 2016-12-28 2020-05-22 网易传媒科技（北京）有限公司 一种视频内容的展示方法及装置
CN109240774B (zh) * 2017-07-04 2022-08-09 武汉安天信息技术有限责任公司 一种web页面的布局方法和布局系统
CN109375887B (zh) * 2017-08-03 2022-04-26 富泰华工业（深圳）有限公司 电子设备及视讯框排列方法
CN109511004B (zh) * 2017-09-14 2023-09-01 中兴通讯股份有限公司 一种视频处理方法及装置
CN109189533A (zh) * 2018-08-29 2019-01-11 万帮充电设备有限公司 一种屏幕尺寸适配方法和系统
CN110955819A (zh) * 2018-09-21 2020-04-03 北京字节跳动网络技术有限公司 推荐内容的展示方法、生成方法、展示装置及生成装置
CN109714620A (zh) * 2018-12-27 2019-05-03 山东浪潮商用系统有限公司 一种基于机顶盒的界面可视化编辑及显示方法及系统
CN110647369B (zh) * 2019-06-04 2023-10-13 北京有竹居网络技术有限公司 页面动态显示的方法、装置、移动终端及存储介质
CN110263281B (zh) * 2019-06-17 2021-03-02 北京亚鸿世纪科技发展有限公司 一种数据可视化开发中页面分辨率自适应的装置及方法
CN110597510B (zh) * 2019-08-09 2021-08-20 华为技术有限公司 一种界面的动态布局方法及设备
CN111986601B (zh) * 2020-07-13 2024-03-29 视联动力信息技术股份有限公司 屏幕显示方法、装置、终端设备和存储介质
CN112235603B (zh) 2020-10-15 2022-04-05 脸萌有限公司 视频分发系统、方法、计算设备、用户设备及视频播放方法
CN114442872B (zh) * 2020-10-19 2023-10-27 聚好看科技股份有限公司 一种虚拟用户界面的布局、交互方法及三维显示设备
CN113762380B (zh) * 2021-09-07 2023-05-23 成都理工大学 一种基于自适应分组的零件排样优化方法
CN116719597B (zh) * 2023-08-10 2024-01-26 北京冠群信息技术股份有限公司 基于格栅布局的自适应视图渲染方法及创建方法

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1746843A (zh) * 2004-09-08 2006-03-15 英业达股份有限公司 视窗及其图标设定系统及方法
CN103218195A (zh) * 2013-04-10 2013-07-24 广东欧珀移动通信有限公司 应用程序的显示调整方法及装置
CN103678497A (zh) * 2013-11-18 2014-03-26 乐视网信息技术（北京）股份有限公司 提供调整检索页浏览显示的方法和系统
CN103970894A (zh) * 2014-05-27 2014-08-06 合一网络技术(北京)有限公司 自适应调整的界面流式布局显示的方法和系统

Family Cites Families (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102073650A (zh) * 2009-11-25 2011-05-25 阿里巴巴集团控股有限公司 一种网页自适应调节的方法和设备
CN101908076B (zh) * 2010-08-24 2012-09-12 北京世纪高通科技有限公司 页面布局自适应方法及装置
CN102053795B (zh) * 2011-01-11 2012-10-24 华平信息技术股份有限公司 自由布局视频显示窗口的方法及系统
CN103744595B (zh) * 2013-12-30 2017-03-22 广州华多网络科技有限公司 自适应显示方法和装置
CN103761315B (zh) * 2014-01-27 2018-07-27 乐视网信息技术（北京）股份有限公司 一种显示网页内容的方法及系统

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN1746843A (zh) * 2004-09-08 2006-03-15 英业达股份有限公司 视窗及其图标设定系统及方法
CN103218195A (zh) * 2013-04-10 2013-07-24 广东欧珀移动通信有限公司 应用程序的显示调整方法及装置
CN103678497A (zh) * 2013-11-18 2014-03-26 乐视网信息技术（北京）股份有限公司 提供调整检索页浏览显示的方法和系统
CN103970894A (zh) * 2014-05-27 2014-08-06 合一网络技术(北京)有限公司 自适应调整的界面流式布局显示的方法和系统

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111741349A (zh) * 2020-07-14 2020-10-02 北京简元科技有限公司 多媒体信息异形屏发布方法和装置及设备
CN111741349B (zh) * 2020-07-14 2022-08-02 北京简元科技有限公司 多媒体信息异形屏发布方法和装置及设备
CN114329255A (zh) * 2021-12-31 2022-04-12 北京字节跳动网络技术有限公司 一种搜索结果展示方法、装置、计算机设备及存储介质
CN114329255B (zh) * 2021-12-31 2024-02-27 抖音视界有限公司 一种搜索结果展示方法、装置、计算机设备及存储介质

Also Published As

Publication number Publication date
CN103970894B (zh) 2017-04-05
CN103970894A (zh) 2014-08-06

Similar Documents

Publication Publication Date Title
WO2015180433A1 (zh) 自适应调整的界面流式布局显示的方法和系统
US11580175B2 (en) Transcoding and serving resources
US20130198641A1 (en) Predictive methods for presenting web content on mobile devices
CN103678496B (zh) 提供调整检索页筛选显示的方法和系统
US9658758B1 (en) Online information system with continuous scrolling and position correction
US9672539B2 (en) Advertisement generation apparatus and terminal device
KR20140012664A (ko) 웹페이지 재배치 방법
WO2015184745A1 (zh) 显示悬浮式播放窗口的方法和系统
US11861908B2 (en) Methods, systems, and media for adaptive presentation of a video content item based on an area of interest
CN103678622A (zh) 瀑布流式图片动态呈现的方法及装置
CN103678497A (zh) 提供调整检索页浏览显示的方法和系统
CN102073650A (zh) 一种网页自适应调节的方法和设备
TW200935298A (en) System and method of automatically sizing and adapting a widget to available space
US20130275878A1 (en) Method, device, server, and mobile terminal for browsing web pages
US20140258816A1 (en) Methodology to dynamically rearrange web content for consumer devices
US9158743B1 (en) Grid layout control for network site design
US20200219148A1 (en) Systems and methods for view-based advertisement selection
WO2016177281A1 (zh) 图片展示方法和装置
CN112153459A (zh) 用于投屏显示的方法和装置
WO2017163805A1 (ja) 画像提供装置、画像表示システム、画像提供方法、および、プログラム
CN102663075A (zh) 浏览网页的方法、浏览器及浏览器插件
US10628629B2 (en) Method, device, and client terminal apparatus for displaying page
CN103957466B (zh) 基于机顶盒进行网页展示的方法、服务器及系统
WO2014055890A2 (en) Transcoding and serving resources
CN106599306A (zh) 网络页面中css样式的兼容显示方法

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: 14893068

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: 14893068

Country of ref document: EP

Kind code of ref document: A1