KR101911947B1 - Screen design method and screen design system for improving information readability and harmonizing background image - Google Patents

Abstract

A screen design method and system for enhancing information readability and harmonizing a background image are disclosed. The screen design method may include designing a background screen corresponding to information to be displayed on the screen, selecting a background color for screen composition from an image related to the information, And constructing a background screen using the image to construct a background screen to which a gradation screen layer of the background color is applied, wherein the selecting includes: selecting a color within a predetermined range of spectra The background color can be selected.

Description

BACKGROUND OF THE INVENTION 1. Field of the Invention The present invention relates to a screen design method and system for enhancing information readability and harmonizing a background image,

The following description relates to a technology for designing a screen of an information device.

Generally, an information device refers to a device having at least one of a voice / video call function, an information input / output function, and a data storage function. The information device can be divided into a mobile / portable terminal and a stationary terminal according to whether the information device can be moved or not.

In recent years, in addition to the above-described functions, the information device can perform various functions such as image capture of a still image or a moving image, reproduction of a multimedia file such as a music file or a moving image file, game, broadcast reception / As a result, it is implemented as a comprehensive multimedia player.

Such a multimedia device provides a user interface environment implemented in various forms in order to allow a user to use functions and understand information more easily and conveniently.

For example, Korean Patent Laid-Open No. 10-2010-0074765 (published on Jul. 02, 2010) discloses that the color of the text and its background is automatically changed to the color of the complementary color relation, And changing the color contrast to a color contrast of the most similar color and displaying the same.

And a screen design method and system capable of achieving harmony with a background image while enhancing the readability of information.

A screen design method and system capable of securing text legibility across a color area based on a single text color are provided.

There is provided a screen design method and system capable of constructing a gradation background image that is applied to an entire screen area using an image related to information on the screen.

Provided are a screen design method and a system capable of enhancing information readability by adjusting the transparency of each area according to the amount of information displayed in each area, thereby harmonizing the overall atmosphere of the screen.

A computer-implemented method of designing a screen, the screen design method comprising: designing a background screen corresponding to information to be displayed on a screen; selecting a background color for a screen configuration from an image related to the information; And constructing a background screen using the image to construct a background screen to which a gradation screen layer of the background color is applied, wherein the selecting includes: selecting a color within a predetermined range of spectra The background color is selected from the background color.

According to an aspect of the present invention, the selecting step may select a color value closest to a color value extracted from the image in the spectrum by limiting a color spectrum that can be selected by the background color.

According to another aspect of the present invention, in the selecting step, a color having a highest degree of distribution in a remaining peripheral region excluding a predetermined region with respect to a center point of the image may be selected as the background color.

According to another aspect of the present invention, in the selecting, the color having the highest degree of distribution in the remaining peripheral regions excluding the object region detected in the image may be selected as the background color.

According to another aspect of the present invention, in the selecting step, the background color may be selected using an image of the state in which the image filter is applied after applying the image filter to the image according to the size and resolution of the image.

According to another aspect of the present invention, the configuring step configures the background screen by overlaying the gradation screen layer on the screen displaying the image.

According to another aspect, the configuring may perform color calibration for the gradient screen layer according to the background color.

According to another aspect, the screen design method may further include adjusting a transparency of the background screen according to a text display area on the screen.

According to another aspect of the present invention, the adjusting step may lower the transparency of the text display area than the other areas when the text display area is distinguished from other areas.

According to another aspect of the present invention, the adjusting step may lower the transparency of the remaining area excluding the predetermined area based on the center point of the image, than the predetermined area.

A computer program recorded on a computer-readable recording medium for executing a screen design method, the screen design method comprising: designing a background screen corresponding to information to be displayed on a screen; Selecting a background color; And constructing a background screen using the image to construct a background screen to which a gradation screen layer of the background color is applied, wherein the selecting includes: selecting a color within a predetermined range of spectra And the background color is selected from among the background colors.

A computer-implemented screen design system, comprising: at least one processor configured to execute computer-readable instructions, the at least one processor designing a background screen corresponding to information to be displayed on the screen A background color selection unit for selecting a background color for a screen configuration from an image related to the information; And a background image forming unit configured to form a background image using the image, wherein the background image forming unit forms a background image to which a gradation image layer of the background color is applied, wherein the background color selecting unit selects a spectrum of a specific section, And the background color is selected in the screen designing system.

According to embodiments of the present invention, it is possible to implement a screen design that can be harmonized with a background image while enhancing the readability of information.

According to embodiments of the present invention, the text is readable in a single color, regardless of the background image, and the text is readable across the color area by applying a spectrum that can increase the visibility of the text color.

According to embodiments of the present invention, it is possible to construct a more natural gradation background image that is applied to the entire screen area using an image related to information on the screen.

According to the embodiments of the present invention, transparency can be adjusted for each region according to the amount of information displayed in each region, so that the information readability can be further improved while harmonizing the overall atmosphere of the screen.

1 is a block diagram for explaining an example of the internal configuration of an information device implemented by a computer system in an embodiment of the present invention.
2 is a diagram illustrating an example of a component that a processor of an information device according to an embodiment of the present invention can include.
3 is a flowchart illustrating an example of a screen design method that can be performed by an information device according to an embodiment of the present invention.
4 is a view for explaining an example of a process of configuring a background screen in an embodiment of the present invention.
5 to 6 are views for explaining an example of a process of selecting a background color to be applied to a background screen in an embodiment of the present invention.
FIG. 7 is an exemplary diagram for explaining a gradation background layer to which a background color is applied according to an embodiment of the present invention.
8 to 9 are views for explaining an example of a process of adjusting transparency of a background screen in an embodiment of the present invention.
FIG. 10 is an exemplary diagram for explaining screen design in which image harmonization and information readability are enhanced in an embodiment of the present invention.

DETAILED DESCRIPTION OF THE PREFERRED EMBODIMENTS Hereinafter, embodiments of the present invention will be described in detail with reference to the accompanying drawings.

Embodiments of the present invention relate to a technology for designing a screen of an information device, and more particularly, to a screen design method and system for improving readability of information and background image harmonization.

Embodiments including those specifically disclosed in the present specification can implement a screen design capable of harmonizing with a background image while enhancing the readability of information, and can provide information visibility, convenience of technology development, efficiency, cost reduction ≪ / RTI >

1 is a block diagram for explaining an example of the internal configuration of an information device implemented by a computer system in an embodiment of the present invention. For example, a screen design system according to embodiments of the present invention may be implemented through the information device 100 of FIG. 1, the information device 100 includes a processor 110, a memory 120, a persistent storage device 130, a bus 140, an input / output interface 150 And a network interface 160. [0029]

Processor 110 may include or be part of any device capable of processing a sequence of instructions. The processor 110 may comprise, for example, a processor and / or a digital processor within a computer processor, a mobile device, or other electronic device. The processor 110 may be, for example, a server computing device, a server computer, a series of server computers, a server farm, a cloud computer, a content platform, a mobile computing device, a smart phone, a tablet, a set top box, The processor 110 may be connected to the memory 120 via a bus 140.

The memory 120 may include volatile memory, permanent, virtual, or other memory for storing information used by or output by the information appliance 100. Memory 120 may include, for example, random access memory (RAM) and / or dynamic RAM (DRAM). The memory 120 may be used to store any information, such as the status information of the information device 100. [ The memory 120 may also be used to store instructions of the information appliance 100 including, for example, instructions for controlling the screen configuration. The information appliance 100 may include one or more processors 110 as needed or where appropriate.

The bus 140 may include a communication infrastructure to enable interaction between the various components of the information appliance 100. The bus 140 may carry data between components of the information appliance 100, for example, between the processor 110 and the memory 120. The bus 140 may comprise a wireless and / or wired communication medium between the components of the information appliance 100 and may include parallel, serial or other topology arrangements.

The persistent storage device 130 may be a component such as a memory or other persistent storage device as used by the information appliance 100 to store data for a predetermined extended period of time (e.g., as compared to the memory 120) Lt; / RTI > The persistent storage device 130 may include a nonvolatile main memory as used by the processor 110 in the information device 100. The persistent storage device 130 may include, for example, flash memory, hard disk, optical disk, or other computer readable medium.

The input / output interface 150 may include a keyboard, a mouse, voice command inputs, displays, or interfaces to other input or output devices. Configuration commands and / or input associated with the screen configuration may be received via the input / output interface 150.

The network interface 160 may include one or more interfaces to networks such as a local area network or the Internet. The network interface 160 may include interfaces for wired or wireless connections. Configuration commands may be received via the network interface 160. Information related to the screen configuration may be received or transmitted via the network interface 160. [

Also, in other embodiments, the information appliance 100 may include more components than the components of FIG. However, there is no need to clearly illustrate most prior art components. For example, the information device 100 may be implemented to include at least some of the input / output devices connected to the input / output interface 150, or may include a transceiver, a Global Positioning System (GPS) module, Databases, and the like. More specifically, when the information device 100 is implemented in the form of a mobile device such as a smart phone, an acceleration sensor, a gyro sensor, a camera, various physical buttons, buttons using a touch panel, An input / output port, a vibrator for vibration, and the like may be further included in the information device 100. [

Generally, when a screen of an information device is composed, a method of matching and correcting the text color according to the color of the background screen is applied.

In this embodiment, the text color is applied in a single color irrespective of the color of the background screen, and a specific category spectrum capable of enhancing the text visibility of a single color can be applied to the background color.

FIG. 2 is a diagram illustrating an example of components that a processor of an information device according to an exemplary embodiment of the present invention can include; FIG. 3 is a diagram illustrating a screen design Which is a flowchart showing an example of a method.

As shown in FIG. 2, the processor 110 may include a background color selecting unit 210, a background image forming unit 220, and a transparency adjusting unit 230. The components of such a processor 110 may be representations of different functions performed by the processor 110 in accordance with control commands provided by at least one program code. For example, the background color selection unit 210 may be used as a functional expression that the processor 110 operates to control the information device 100 to select a background color to apply to the background screen. The components of the processor 110 and the processor 110 may perform the steps S310 through S340 included in the screen design method of FIG. For example, the components of processor 110 and processor 110 may be implemented to execute instructions in accordance with the at least one program code described above and the code of the operating system that memory 120 contains. Here, at least one program code may correspond to a code of a program implemented to process a screen design method.

The screen design method may not occur in the order shown, and some of the steps may be omitted or an additional process may be further included.

In step S310, the processor 110 may load the program code stored in the program file for the screen design method into the memory 120. [ For example, a program file for a screen design method may be stored in the persistent storage device 130 described with reference to FIG. 1, and the processor 110 may receive a program file from the program file stored in the persistent storage device 130 via the bus, The information device 100 can be controlled so that the code is loaded into the memory 120. [ At this time, the background color selecting unit 210, the background image forming unit 220, and the transparency adjusting unit 230 included in the processor 110 and the processor 110 respectively correspond to the corresponding part of the program code loaded into the memory 120 And may be different functional representations of the processor 110 for executing subsequent steps S320 through S340. For execution of steps S320 through S340, the processor 110 and the components of the processor 110 may process an operation according to a direct control command or control the information device 100. [

The processor 110 may design a background screen corresponding to the information to be displayed on the screen. Referring to FIG. 4, the processor 110 may display information 410 related to a corresponding function on the screen 400 of the information device 100 by performing a predetermined function. At this time, A predetermined image 420 related to the information 410 may be displayed as a background image. The image 420 used for constructing the background image may be determined by information specified by the user's operation among the information 410 displayed on the screen, information automatically specified during the function execution, and the like.

In particular, the processor 110 may design a wallpaper that enhances the visibility of the information 410 and may be more in tune with the image 420 associated with the information 410.

Referring back to FIG. 3, in step S320, the background color selecting unit 210 may select a background color for the screen configuration from the image related to the information on the screen. For example, the background color selecting unit 210 may extract the color having the highest degree of distribution in the remaining peripheral regions excluding the predetermined size region based on the center point of the image, and select the corresponding color as the background color. As another example, the background color selecting unit 210 may extract the color having the highest degree of distribution in the entire area of the image and select the corresponding color as the background color. As another example, the background color selecting unit 210 may extract the color having the highest degree of distribution in the remaining peripheral regions excluding the object region detected in the image, and select the corresponding color as the background color.

5, the background color selecting unit 210 selects a background color, which is an area excluding the predetermined area 521, based on the center point of the image 520, The most widely distributed color values can be selected. The size and shape of the predetermined area 521 in which the area of the peripheral part 522 is determined may be set to a default value in advance or the size and shape of the predetermined area 521 may be determined according to the object detection result in the image 520 have.

In particular, the background color selecting unit 210 can select a background color in a spectrum of a specific period determined for a color (hereinafter, referred to as 'text color') applied to text, which is information displayed on the screen. In this embodiment, the color applied to the text is not changed depending on the case, but a fixed single color (for example, white) may be used. The color spectrum that can be selected as the background color may be a specific section It can be constrained. The spectrum used to select the background color can be determined and defined in advance through text visibility experiments or analysis. Referring to FIG. 6, a brightness spectrum 602 and a chroma spectrum 603 are provided for each hue 601. At this time, a predetermined specific period of the entire spectrum 602 or 603, that is, The background color can be selected within the spectrum of FIG. For example, an interval corresponding to brightness 8 or saturation 8 per 15 representative colors can be designated as an area in which the visibility of a text color (e.g., white) can be increased. Accordingly, the background color selecting unit 210 can select a color value closest to the color value extracted from the image in the spectrum of the predetermined section of the text color as the background color.

The background color selection unit 210 may apply a predetermined image filter to the image according to the size and resolution of the image related to the information on the screen, and then select a background color using an image in which the image filter is applied. For example, the background color selecting unit 210 may extract a background color from an image in a blur state after blur processing in the case of a low-resolution image at a certain level or lower.

Referring back to FIG. 3, in step S330, the background screen configuration unit 220 may configure a gradation background screen using the background color selected in step S320. The background image forming unit 220 may configure a background image by using an image related to information on the image, and may configure a gradation image layer of a background color selected from the image. 7, when the background image is formed using the image 720 related to the information on the screen, the background image forming unit 220 extracts a background color (for example, For example, the gradient screen layer 700 can be configured with a background color similar to the periphery of the image 720).

The background image forming unit 220 may correct the background color applied to the gradation screen layer 700 as necessary. For example, color calibration may be performed for some specific colors (e.g., white, yellow, etc.) of the selected background color from the image 720. At this time, the color correction method adjusts the color value (RGB), so that the color correction can be performed within a range of increasing the visibility of the text color.

3, in step S340, the transparency adjusting unit 230 may adjust the transparency of the gradation background image with respect to the text display area. A gradation screen layer having a predetermined background color selected from images related to information on the screen is overlaid on a screen on which the corresponding image is displayed so that a natural gradation background screen can be formed over the entire screen. The transparency of the gradient background can be adjusted according to the display area.

For example, referring to FIG. 8, the transparency adjuster 230 lowers the transparency of the portion corresponding to the main information display region in the gradation screen layer 800 when the region in which the main information such as text is distinguished from the other region In other regions, transparency can be increased. In other words, the main information display area where the main information such as the text is displayed in the gradient screen layer 800 is reduced in transparency to improve the readability of information, . 9, the transparency adjusting unit 230 may increase the transparency of a portion corresponding to a predetermined size region based on the center position of the image 920 in the gradient screen layer 900, And the transparency of the corresponding region can be lowered.

Accordingly, the processor 110 may design a background image corresponding to the information displayed on the screen, and may use a predetermined image 1020 related to the information 1010 on the screen 1000, as shown in FIG. 10 A background image can be formed. In particular, the processor 110 may configure a background screen to which a gradation screen layer of a predetermined background color is applied from the image 1020 associated with the information 1010 on the screen 1000, and the main information 1010 such as text By reducing the transparency of the displayed area and increasing the transparency of the area where the image 1020 is displayed, it is possible to simultaneously enhance the readability of the atmosphere of the image 1020 and the information 1010. For example, when the information device 100 executes a media player with a computer system having a widescreen, a background screen of a wide screen can be configured using the album jacket image of music currently being played. At this time, By configuring the gradation background of color similar to the color, it is possible to design a more natural background screen to be applied to the full screen of the wide screen. Further, in the area where the main information according to the execution of the media player is displayed, And the other area can be adjusted so that the image on the background screen can be clearly seen by increasing the transparency.

As described above, according to the embodiments of the present invention, it is possible to implement a screen design that can be harmonized with the background image while enhancing the readability of the information. Especially, the text is readable in a single color regardless of the background image, and the text is readable across the color area by applying a spectrum that can increase the visibility of the text color. Further, according to embodiments of the present invention, it is possible to construct a more natural gradation background image applied to the entire area of the screen by using an image related to the information on the screen, The transparency can be adjusted so that the overall atmosphere of the screen is harmonized and the information readability can be further improved.

The apparatus described above may be implemented as a hardware component, a software component, and / or a combination of hardware components and software components. For example, the apparatus and components described in the embodiments may be implemented as a processor, a controller, an arithmetic logic unit (ALU), a digital signal processor, a microcomputer, a field programmable gate array (FPGA), a programmable logic unit, a microprocessor, or any other device capable of executing and responding to instructions. The processing device may execute an operating system (OS) and one or more software applications running on the operating system. The processing device may also access, store, manipulate, process, and generate data in response to execution of the software. For ease of understanding, the processing apparatus may be described as being used singly, but those skilled in the art will recognize that the processing apparatus may have a plurality of processing elements and / As shown in FIG. For example, the processing unit may comprise a plurality of processors or one processor and one controller. Other processing configurations are also possible, such as a parallel processor.

The software may include a computer program, code, instructions, or a combination of one or more of the foregoing, and may be configured to configure the processing device to operate as desired or to process it collectively or collectively Device can be commanded. The software and / or data may be embodied in any type of machine, component, physical device, computer storage media, or device for interpretation by a processing device or to provide instructions or data to the processing device have. The software may be distributed over a networked computer system and stored or executed in a distributed manner. The software and data may be stored on one or more computer readable recording media.

The method according to an embodiment may be implemented in the form of a program command that can be executed through various computer means and recorded in a computer-readable medium. At this time, the medium may be a program that continuously stores a computer executable program, or temporarily stores the program for execution or downloading. Further, the medium may be a variety of recording means or storage means in the form of a combination of a single hardware or a plurality of hardware, but is not limited to a medium directly connected to any computer system, but may be dispersed on a network. Examples of the medium include a magnetic medium such as a hard disk, a floppy disk and a magnetic tape, an optical recording medium such as CD-ROM and DVD, a magneto-optical medium such as a floptical disk, And program instructions including ROM, RAM, flash memory, and the like. As another example of the medium, a recording medium or a storage medium that is managed by a site or a server that supplies or distributes an application store or various other software is also enumerated.

While the present invention has been particularly shown and described with reference to exemplary embodiments thereof, it is to be understood that the invention is not limited to the disclosed exemplary embodiments. For example, it is to be understood that the techniques described may be performed in a different order than the described methods, and / or that components of the described systems, structures, devices, circuits, Lt; / RTI > or equivalents, even if it is replaced or replaced.

Therefore, other implementations, other embodiments, and equivalents to the claims are also within the scope of the following claims.

Claims (17)

In a computer-implemented screen design method,
The screen design method is to design a background screen corresponding to information on the screen when information related to a function being performed is displayed on the screen,
Selecting a background color for screen composition from an image related to the information; And
Constructing a background screen by using the image, and configuring a background screen to which a gradient screen layer of the background color is applied
Lt; / RTI >
Wherein the selecting comprises:
Selecting the background color within a spectrum of a specific section for a single color applied to text that is information displayed on the screen,
Wherein the image used for constructing the background screen is determined by information specified by a user operation among information displayed on the screen or information automatically specified during execution of the function,
Wherein the color applied to the text is a fixed color which is unchanged,
Wherein the selecting comprises:
Selecting a background color in a remaining peripheral region excluding a predetermined region based on a center point of the image,
Wherein the configuring comprises:
Constructing the gradation screen layer with a predetermined background color in the remaining peripheral area, and then constructing the background screen by overlaying the gradation screen layer on the screen displaying the image
Wherein the screen design method comprises the steps of: The method according to claim 1,
Wherein the selecting comprises:
Selecting a color value closest to the color value extracted from the image in the spectrum by limiting the color spectrum selectable by the background color as the background color
Wherein the screen design method comprises the steps of: The method according to claim 1,
Wherein the selecting comprises:
Selecting a color having the highest degree of distribution in the remaining peripheral region excluding the predetermined region based on the center point of the image as the background color
Wherein the screen design method comprises the steps of: The method according to claim 1,
Wherein the selecting comprises:
Selecting the color having the highest degree of distribution in the remaining peripheral regions excluding the object region detected in the image as the background color
Wherein the screen design method comprises the steps of: The method according to claim 1,
Wherein the selecting comprises:
The image filter is applied to the image according to the size and resolution of the image, and then the background color is selected using the image in a state in which the image filter is applied
Wherein the screen design method comprises the steps of: delete The method according to claim 1,
Wherein the configuring comprises:
And performing color calibration on the gradation screen layer according to the background color
Wherein the screen design method comprises the steps of: The method according to claim 1,
The screen design method includes:
Adjusting a transparency of the background screen according to a text display area on the screen
And a screen design method. 9. The method of claim 8,
Wherein the adjusting comprises:
And lowering the transparency of the text display area from the other area when the text display area is distinguished from other areas
Wherein the screen design method comprises the steps of: 9. The method of claim 8,
Wherein the adjusting comprises:
And lowering the transparency of the remaining region excluding the predetermined region with respect to the center point of the image to be lower than the predetermined region
Wherein the screen design method comprises the steps of: A computer program recorded on a computer-readable recording medium for executing a screen design method,
The screen design method includes:
Designing a background screen corresponding to the information on the screen when information related to a function being performed is displayed on the screen,
Selecting a background color for screen composition from an image related to the information; And
Constructing a background screen by using the image, and configuring a background screen to which a gradient screen layer of the background color is applied
Lt; / RTI >
Wherein the selecting comprises:
Selecting the background color within a spectrum of a specific section for a single color applied to text that is information displayed on the screen,
Wherein the image used for constructing the background screen is determined by information specified by a user operation among information displayed on the screen or information automatically specified during execution of the function,
Wherein the color applied to the text is a fixed color which is unchanged,
Wherein the selecting comprises:
Selecting a background color in a remaining peripheral region excluding a predetermined region based on a center point of the image,
Wherein the configuring comprises:
Constructing the gradation screen layer with a predetermined background color in the remaining peripheral area, and then constructing the background screen by overlaying the gradation screen layer on the screen displaying the image
The computer program being recorded on a computer-readable recording medium. In a computer-implemented screen design system,
At least one processor configured to execute computer readable instructions,
Lt; / RTI >
Wherein the at least one processor comprises:
Designing a background screen corresponding to the information on the screen when information related to a function being performed is displayed on the screen,
A background color selecting unit for selecting a background color for screen composition from images related to the information; And
A background screen constituting part of the background screen to which the gradient screen layer of the background color is applied,
Lt; / RTI >
Wherein the background color selecting unit comprises:
Selecting the background color within a spectrum of a specific section for a single color applied to text that is information displayed on the screen,
Wherein the image used for constructing the background screen is determined by information specified by a user operation among information displayed on the screen or information automatically specified during execution of the function,
Wherein the color applied to the text is a fixed color which is unchanged,
Wherein the background color selecting unit comprises:
Selecting a background color in a remaining peripheral region excluding a predetermined region based on a center point of the image,
The background-
Constructing the gradation screen layer with a predetermined background color in the remaining peripheral area, and then constructing the background screen by overlaying the gradation screen layer on the screen displaying the image
Screen design system. 13. The method of claim 12,
Wherein the background color selecting unit comprises:
Selecting a color value closest to the color value extracted from the image in the spectrum by limiting the color spectrum selectable by the background color as the background color
Screen design system. 13. The method of claim 12,
Wherein the background color selecting unit comprises:
Selecting a color having the highest degree of distribution in the remaining peripheral region excluding the predetermined region based on the center point of the image as the background color
Screen design system. delete 13. The method of claim 12,
Wherein the at least one processor comprises:
A transparency adjusting unit for adjusting transparency of the background screen according to a text display area on the screen,
The screen design system further comprising: 17. The method of claim 16,
Wherein the transparency adjusting unit comprises:
And lowering the transparency of the text display area from the other area when the text display area is distinguished from other areas
Screen design system.

Images