CN114942817A - Design interface display method and device, electronic equipment, storage medium and product - Google Patents
Design interface display method and device, electronic equipment, storage medium and product Download PDFInfo
- Publication number
- CN114942817A CN114942817A CN202210676299.7A CN202210676299A CN114942817A CN 114942817 A CN114942817 A CN 114942817A CN 202210676299 A CN202210676299 A CN 202210676299A CN 114942817 A CN114942817 A CN 114942817A
- Authority
- CN
- China
- Prior art keywords
- width
- design object
- width range
- design
- display data
- Prior art date
- Legal status (The legal status 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 status listed.)
- Granted
Links
- 238000013461 design Methods 0.000 title claims abstract description 257
- 238000000034 method Methods 0.000 title claims abstract description 63
- 230000004044 response Effects 0.000 claims abstract description 11
- 238000004590 computer program Methods 0.000 claims description 9
- 239000002131 composite material Substances 0.000 claims description 3
- 238000004891 communication Methods 0.000 description 8
- 238000010586 diagram Methods 0.000 description 7
- 238000012545 processing Methods 0.000 description 7
- 239000003550 marker Substances 0.000 description 5
- 230000004048 modification Effects 0.000 description 5
- 238000012986 modification Methods 0.000 description 5
- 230000006870 function Effects 0.000 description 3
- 230000002452 interceptive effect Effects 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 230000008569 process Effects 0.000 description 3
- 230000008859 change Effects 0.000 description 2
- 238000001514 detection method Methods 0.000 description 2
- 238000011161 development Methods 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 238000012827 research and development Methods 0.000 description 2
- 230000000007 visual effect Effects 0.000 description 2
- 230000003044 adaptive effect Effects 0.000 description 1
- 238000003491 array Methods 0.000 description 1
- 238000013473 artificial intelligence Methods 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 230000001413 cellular effect Effects 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 238000010801 machine learning Methods 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 238000003672 processing method Methods 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 230000001953 sensory effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/14—Digital output to display device ; Cooperation and interconnection of the display device with other functional units
- G06F3/1407—General aspects irrespective of display type, e.g. determination of decimal point position, display with fixed or driving decimal point, suppression of non-significant zeros
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The disclosure provides a design interface display method and device, electronic equipment, a storage medium and a product, and relates to the field of application interfaces, in particular to the field of application display interface design. The specific implementation scheme is as follows: acquiring a design object and a first width range corresponding to first display data currently displayed on a design interface; in response to detecting an adjustment operation on the first width value of the design object, determining an adjusted second width value, and determining a second width range in which the second width value is located; and determining second display data corresponding to the design object in the second width range, and switching the first display data currently displayed on the design interface into the second display data. According to the method and the device, the display data of the design object with the associated width range can be obtained by switching the display response through adjusting the width value of the design object.
Description
Technical Field
The disclosure relates to the field of application interfaces, in particular to the field of application display interface design, and specifically relates to a display method and device of a design interface, electronic equipment, a storage medium and a product.
Background
When designing a user interface, corresponding display interfaces need to be designed for different terminals based on the corresponding screen widths of the different terminals. Therefore, the designed display interface has different display interface styles under the screen widths corresponding to different terminals.
In the related art, if different style presentation schemes exist, a plurality of drawing boards need to be created and are independently designed in different drawing boards.
Disclosure of Invention
The disclosure provides a design interface display method and device, electronic equipment, storage medium and product.
According to a first aspect of the present disclosure, there is provided a method for displaying a design interface, the method including:
acquiring a design object and a first width range corresponding to first display data currently displayed on a design interface; in response to the detection of the adjustment operation of the first width value of the design object, determining an adjusted second width value, and determining a second width range in which the second width value is located; and determining second display data corresponding to the design object in the second width range, and switching the first display data currently displayed on the design interface into the second display data.
According to a second aspect of the present disclosure, there is provided a display apparatus for a design interface, the apparatus comprising:
the system comprises an acquisition module, a display module and a display module, wherein the acquisition module is used for acquiring a design object and a first width range corresponding to first display data currently displayed by a design interface; the determining module is used for responding to the detected adjustment operation of the first width value of the design object, determining an adjusted second width value and determining a second width range where the second width value is located; and the display module is used for determining second display data corresponding to the design object in the second width range and switching the first display data currently displayed on the design interface into the second display data.
According to a third aspect of the present disclosure, there is provided an electronic device comprising:
at least one processor; and a memory communicatively coupled to the at least one processor; wherein the memory stores instructions executable by the at least one processor to enable the at least one processor to perform the method of the first aspect.
According to a fourth aspect of the present disclosure, there is provided a non-transitory computer readable storage medium having stored thereon computer instructions for causing the computer to perform the method according to the first aspect.
According to a fifth aspect of the present disclosure, there is provided a computer product comprising a computer program which, when executed by a processor, implements the method according to the first aspect.
It should be understood that the statements in this section are not intended to identify key or critical features of the embodiments of the present disclosure, nor are they intended to limit the scope of the present disclosure. Other features of the present disclosure will become apparent from the following description.
Drawings
The drawings are included to provide a better understanding of the present solution and are not to be construed as limiting the present disclosure. Wherein:
FIG. 1 is a diagram illustrating a process of designing an interface in the related art;
FIG. 2 is a flowchart illustrating a method for displaying a design interface according to an embodiment of the present disclosure;
FIG. 3 is a flow chart illustrating a method for processing data of a design object according to an embodiment of the present disclosure;
FIG. 4 is a flow chart illustrating a method for defining at least one width range according to an embodiment of the present disclosure;
FIG. 5 is a flow chart illustrating a method for defining at least one width range according to an embodiment of the disclosure
FIG. 6 is a flow chart illustrating a method for merging breadth ranges provided by embodiments of the present disclosure;
FIG. 7 is a flowchart illustrating a method for displaying a design interface according to an embodiment of the present disclosure;
FIG. 8 is a structural diagram illustrating a presentation of a design interface provided by an embodiment of the present disclosure;
FIG. 9 illustrates a schematic block diagram of an example electronic device 900 that can be used to implement embodiments of the present disclosure.
Detailed Description
Exemplary embodiments of the present disclosure are described below with reference to the accompanying drawings, in which various details of the embodiments of the disclosure are included to assist understanding, and which are to be considered as merely exemplary. Accordingly, those of ordinary skill in the art will recognize that various changes and modifications of the embodiments described herein can be made without departing from the scope and spirit of the present disclosure. Also, descriptions of well-known functions and constructions are omitted in the following description for clarity and conciseness.
When designing a user interface, corresponding display interfaces need to be designed for different terminals based on the corresponding screen widths of the different terminals. Therefore, the designed display interface has different display interface styles under the screen widths corresponding to different terminals.
In the related art, if different style presentation schemes exist, a plurality of drawing boards need to be created and are independently designed in different drawing boards. Fig. 1 shows a schematic diagram of a process of designing an interface in the related art, as shown in fig. 1, a design object is edited on different drawing boards, the edited design object is sent to a research and development module, and research and development personnel encode the design object to implement binding display of the design object. And different drawing boards can not be linked according to the size, the width of the drawing board is changed, and design contents under different widths can not be switched and checked.
Based on the technical problems in the related art, the present disclosure provides a method and an apparatus for displaying a design interface. In the design stage of the interface, different design objects are bound to associate different width ranges of the combination through establishing a binding relationship, and the switching display response is realized to obtain the design objects associated with the width ranges through further adjusting the combination width.
The following embodiments will explain the method and apparatus for displaying the design interface provided by the present disclosure with reference to the drawings.
Fig. 2 shows a flowchart of a method for displaying a design interface according to an embodiment of the present disclosure, and as shown in fig. 2, the method may include:
in step S210, a first design object and a first width range corresponding to first display data currently displayed by the design interface are determined.
In the embodiment of the present disclosure, when the display data of the design object is processed, one design object may be selected, or a plurality of design objects may be selected. Each design object corresponds to one or more associated presentation data, e.g., presentation data 1, presentation data 2 … …. The different presentation data for each design object is also associated with different width ranges.
In the present disclosure, a design object corresponding to a currently presented first presentation data is determined, and a first width range associated with the first presentation data is further determined. For convenience of description, the display data currently displayed on the design interface is referred to as first display data, and the width range corresponding to the first display data is referred to as a first width range.
In step S220, in response to detecting the adjustment operation on the first width value of the design object, an adjusted second width value is determined, and a second width range in which the second width value is located is determined.
In the embodiment of the present disclosure, an interface designer may operate a design object based on a design interface, and when an adjustment operation of the interface designer on a current width value of any design object is detected, further determine an adjusted width value of the design object. For convenience of description, the present disclosure refers to a current width value of the design object as a first width value, the adjusted width value of the design object as a second width value, and the width range corresponding to the second width value as a second width range.
In step S230, second display data corresponding to the design object in the second width range is determined, and the first display data currently displayed on the design interface is switched to the second display data.
In an embodiment of the present disclosure, a currently adjusted design object is determined, and second exhibition data for the design object within the determined second width range is determined. And further switching the first display data currently displayed by the design interface into second display data. For convenience of description, the display data in the second width range is referred to as second display data.
In the embodiment of the present disclosure, the first presentation data may be one or a plurality of.
In the embodiment of the disclosure, after the display data displayed on the design interface is switched to the second display data, the designer may visually edit the first data based on the second data currently displayed on the design interface to obtain the display interface of the design object on the design interface in the second width range. The edited design interface takes effect in the second width range, and other width ranges are not affected, so that the design customization requirements of different width ranges can be realized. The data of the design object is displayed through the display interface, and high-fidelity interactive effect demonstration can be achieved.
In the present disclosure, the data related to the visual editing of the design object may be display/hiding of the data related to the design object, appearance style, content data, position layout change, or the like. And the design objects can be added, deleted, modified and the like.
In the present disclosure, the display data of the same design content in different width ranges includes: presentation data 1, presentation data 2 and presentation data 3. And editing, deleting and adding the display data, namely deleting and adding the display data 1, the display data 2 and the display data 3 under the design object at the same time. And editing and modifying, namely modifying the display data of the design object content in the current display interval.
By the design interface display method, the display data of the design object under the width value can be determined according to the width value of the design object, so that the corresponding display data can be freely switched according to the width range of the different width values of the design object, the design customization requirements of interface designers on different width intervals of the interface in the design stage are met, and the design content editing efficiency of the designers is improved.
Before determining the first design object and the first width range corresponding to the first display data currently displayed by the design interface, the design object, the display data related to the design object, and the width ranges corresponding to different display data of the design object need to be associated and processed, and the implementation manner is as in the following embodiments.
Fig. 3 is a flowchart illustrating a data processing method for designing an object according to an embodiment of the present disclosure, where as shown in fig. 3, the method may include:
in step S310, at least one design object, presentation data associated with each design object, and a width value for each design object are obtained.
In step S320, a binding relationship between at least one design object is established, and at least one width range is defined according to the width value of the design object.
In the embodiment of the present disclosure, one or more design objects may be provided. If the number of the design objects is multiple, the binding relationship can be established for the multiple design objects, so that the multiple design objects can be freely switched.
In the embodiment of the present disclosure, if there is one display data of a design object, the design object is defined to default to a display interface, and the width of the display interface ranges from zero to positive infinity.
If the display data of the design object is multiple, multiple width ranges can be defined according to different width values of the multiple design objects. Thus, a plurality of width ranges are associated with corresponding presentation data.
In step S330, a width range corresponding to the width value of the design object is determined, and the display data related to the design object is associated with the corresponding width range.
In the disclosed embodiments, a width value of a design object is determined, and a width range in which the width value is located is determined. And associating the display data related to the design object with the corresponding width range according to the width value of the design object. Thereby creating a combination related to the design object, the combination including the design object, the presentation data related to the design object, the width range corresponding to the presentation data of the design object, and the like.
For example, the width range of the associated combination of the design objects with the smallest width value may be: zero to the smallest mark value, i.e. the first width range defined. The width range of the associated combination of the design objects with the largest width value is as follows: maximum tag value to positive infinity, the last width range defined.
In the present disclosure, the width value of the design object may be the screen width of the design object corresponding to the window/container type. The screen width may be whether the current screen width is width or height determined according to the direction of the screen. And may be a device type for designing the object application device, for example, a mobile side, a tablet side, and a computer side. If the application device of the design object further includes a plurality of media types (e.g., color patterns, interactive features, etc.), the adaptive width value of the design object may also be determined according to the media types.
The following examples of the present disclosure will illustrate the definition of at least one width range.
Fig. 4 is a flowchart illustrating a method for defining at least one width range according to an embodiment of the present disclosure, where the method may include:
in step S410, a combined design object is determined among the at least one design object based on the binding relationship.
Wherein the width value of each design object in the combined design object is different.
In the embodiment of the disclosure, the design objects with different width values are bound to create a combined design object.
Illustratively, design object 1 width 300 is selected to bind in combination with design object 2 width 600. Resulting in a combined width range of 0-600, 600-plus infinity, width range: 0-600 design object 1's presentation data 1 (i.e., presentation data having a width value of 300) is displayed normally. Presentation data 1 (i.e., presentation data having a width value of 600) of design object 2 is hidden by default. In the present disclosure, a concealment operation may be canceled for concealed presentation data, so that the concealed presentation data may be edited. Width range: 600-infinity, the presentation data 2 (i.e., presentation, data with a width value of 300) of the design object 1 are hidden by default, and similarly, the hidden presentation data can be unhidden, so that the hidden presentation data can be edited. Presentation data 2 (i.e., presentation data having a width value of 600) of design object 2 is normally displayed.
In step S420, at least one flag value is defined based on the combined design object.
In the embodiment of the disclosure, different width values in the combined design object can be classified, so as to obtain the mark values for dividing different width values. Further, the width range may be divided by the added flag value, thereby obtaining at least one width range.
In the present disclosure, a width value of each design object may be acquired in combining the design objects, and a mark value for dividing a width range may be defined based on different width values. For example, the determined different width values can be directly defined as the marker values. For example, the tag value is 600, 1000.
In the present disclosure, width values less than a width threshold may be defined as invalid marks, thereby avoiding the accuracy of the design object to correspond to a width range.
In step S430, a default width range is obtained, and the default width range is divided according to at least one mark value to obtain at least one width range.
In the disclosed embodiment, the default width range is zero to positive infinity. The default width range is divided according to the determined at least one flag value, such that the default width range (i.e., zero to positive infinity) can be split into a plurality of different width ranges. For example, 1000 splits the default width range into 0-600, 600-1000, 1000-plus infinity based on the flag value being 600. The present disclosure may also divide any existing width range, thereby obtaining two width ranges.
It is understood that if any one width range is divided according to the mark value, the presentation data of the design object associated with the two newly generated width ranges is the same as that before the division.
In the embodiment of the present disclosure, one implementation manner of dividing any one width range according to the tag value may be to merge the newly added design object into the combined design object.
Fig. 5 is a flowchart illustrating a method for defining at least one width range according to an embodiment of the present disclosure, where the method may include:
in step S510, a width value of the design object to be merged is acquired, and based on the width value, a third width range to be divided is determined.
In the embodiment of the present disclosure, new design content may be to be merged, and the selected new design content may be merged into the designated combined design object. Further, the width range to be divided can be determined in the current existing width range according to different width ranges associated with all the display data of the design objects to be combined. The present disclosure refers to the divided width range as a third width range for the convenience of distinction. If the width value of the new design object is equal to the end point of the width range existing in the designated combination, the new design object cannot be merged into the combined design object.
In step S520, the third width range is divided according to the width values to obtain a first sub-width range and a second sub-width range.
In the disclosure, the third width range is divided according to the determined width value of the design object to be merged to obtain the first sub-width range and the second sub-width range. That is, the width value of the design object to be merged is taken, the width value is set as a mark value for dividing the third width range, and the third width range where the mark value is located is split into two new width ranges.
In step S530, the display data of the design object to be newly combined is associated with the first sub-width range, and the display data of the design object associated with the third width range is associated with the second sub-width range.
Wherein the first sub-width range is greater than or equal to the second sub-width range.
In the embodiment of the present disclosure, in the newly generated first sub-width range and second sub-width range, the larger sub-width range is associated with the presentation data of the design object to be merged, and the presentation data of the design object associated with the smaller sub-width range is the same as before the split.
It should be noted that the display data in other width intervals are hidden by default, and are not disassociated, and the hidden data can be unhidden through the display interface.
In the embodiment of the present disclosure, the third width range is divided according to the width value, and is determined by the position of the mark and the size of the adjacent mark.
In the present disclosure, both end points of the third width range are acquired, and the third width range is divided based on a magnitude relationship between the end points and the width values. Wherein, the width value of the newly added design object can be determined as the edited marking value.
For example, if the edited tag value is located at the head of the width range, the modification range is: 0 < X < the next marker value. If the edited tag value is located between adjacent tag values in a width range, the modification range is: smaller marker value < X < larger marker value. If the edited mark is located at the tail of the width range, the change range is as follows: smaller marker values < X < positive infinity.
In the disclosed embodiment, at least one of the existing width ranges may also be combined, and the implementation manner is as follows.
Fig. 6 shows a flowchart of a method for merging width ranges provided by the embodiment of the present disclosure, and as shown in fig. 6, the method may include:
in step S610, in response to detection of a merging operation on width ranges, a plurality of adjacent width ranges to be merged are determined.
In step S620, the plurality of adjacent width ranges are combined to obtain a fourth width range.
In the disclosed embodiment, the merging operation on the width ranges may be deleting the flag values between a plurality of adjacent width ranges.
The merging operation of the width ranges is detected, and a plurality of adjacent width ranges to be merged are determined. And merging the plurality of adjacent width ranges to be merged by deleting the mark values between the plurality of adjacent width ranges to obtain one width range. Here, for convenience of description, a range obtained by combining a plurality of adjacent width ranges is referred to as a fourth width range.
In step S630, the display data of the design object corresponding to the width range with the smallest range among the plurality of adjacent width ranges is determined, and the display data is associated with the fourth width range.
In the embodiment of the disclosure, the display data of the design object associated with the larger width range in the original two adjacent width ranges is separated from the binding of the combined design object. The presentation data for the smaller width-range-associated design object is associated with the merged fourth width range.
The embodiment of the present disclosure is used in a design stage of a presentation interface, and fig. 7 shows a flowchart of a presentation method of a design interface according to an embodiment of the present disclosure, as shown in fig. 7, by editing a design object (binding the design object), the design object can edit and configure different data under different conditions, so as to obtain a combination related to the design object. The combination may include a device type, a media type, and a window/container type of the device used to design the object. The device type can be a mobile end, a tablet end, a computer end and the like; the media type may be a color mode, an interactive feature, etc.; the window/container types may be width, height, screen orientation, etc. And when the display module displays the design object, determining the data included in the corresponding combination according to the width of the design object. After the design stage is finished, the design parameters related to media query in the editor can be converted into style codes, the development can be directly used, and the code-free development is realized, so that the design efficiency of the display interface is improved.
Based on the same principle as the method shown in fig. 8, fig. 8 shows a schematic structural diagram of displaying a design interface provided by the embodiment of the present disclosure, and as shown in fig. 8, the display apparatus 800 of the design interface may include:
an obtaining module 801, configured to obtain a design object and a first width range corresponding to first display data currently displayed on a design interface; a determining module 802, configured to determine, in response to detecting an adjustment operation on a first width value of the design object, an adjusted second width value, and determine a second width range in which the second width value is located; the displaying module 803 is configured to determine second display data corresponding to the design object within the second width range, and switch the first display data currently displayed on the design interface into the second display data.
In the embodiment of the present disclosure, the obtaining module 801 is further configured to obtain at least one design object, display data associated with each design object, and a width value of each design object; establishing a binding relationship between the at least one design object, and defining at least one width range according to the width value of the design object; and determining a width range corresponding to the width value of the design object, and associating the display data related to the design object with the corresponding width range.
In an embodiment of the present disclosure, the determining module 802 is configured to determine, based on the binding relationship, a combined design object in the at least one design object, where a width value of each design object in the combined design object is different; defining at least one tag value based on the composite design object, the tag value being used to classify different width values; and acquiring a default width range, and dividing the default width range according to the at least one mark value to obtain at least one width range.
In an embodiment of the present disclosure, the at least one design object includes a design object to be merged; the device further comprises: an association module 804;
the association module 804 is configured to obtain a width value of the design object to be merged, and determine a divided third width range based on the width value; dividing the third width range according to the width value to obtain a first sub-width range and a second sub-width range; associating the design object to be merged with the first sub-width range, and associating the display data of the design object associated with the third width range with the second sub-width range; wherein the first sub-width range is greater than or equal to the second sub-width range.
In this embodiment of the present disclosure, the obtaining module 801 is further configured to obtain two end points of the third width range, and divide the third width range based on a size relationship between the end points and the width value.
In an embodiment of the present disclosure, the associating module 804 is further configured to determine, in response to detecting a merging operation on the width ranges, a plurality of adjacent width ranges to be merged; merging the adjacent width ranges to obtain a fourth width range; and determining display data of the design object corresponding to the width range with the minimum range in the plurality of adjacent width ranges, and associating the display data with the fourth width range.
In this embodiment of the present disclosure, the displaying module 803 is further configured to edit the second displaying data based on the second displaying data displayed by the design interface, so as to obtain a display interface of the design object under the design interface with the second width range.
In the technical scheme of the disclosure, the acquisition, storage, application and the like of the personal information of the related user all accord with the regulations of related laws and regulations, and do not violate the good customs of the public order.
The present disclosure also provides an electronic device, a readable storage medium, and a computer program product according to embodiments of the present disclosure.
FIG. 9 illustrates a schematic block diagram of an example electronic device 900 that can be used to implement embodiments of the present disclosure. Electronic devices are intended to represent various forms of digital computers, such as laptops, desktops, workstations, personal digital assistants, servers, blade servers, mainframes, and other appropriate computers. The electronic device may also represent various forms of mobile devices, such as personal digital processing, cellular phones, smart phones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions, are meant to be examples only, and are not intended to limit implementations of the disclosure described and/or claimed herein.
As shown in fig. 9, the apparatus 900 includes a computing unit 901, which can perform various appropriate actions and processes in accordance with a computer program stored in a Read Only Memory (ROM)902 or a computer program loaded from a storage unit 908 into a Random Access Memory (RAM) 903. In the RAM 903, various programs and data required for the operation of the device 900 can also be stored. The calculation unit 901, ROM 902, and RAM 903 are connected to each other via a bus 904. An input/output (I/O) interface 905 is also connected to bus 904.
A number of components in the device 900 are connected to the I/O interface 905, including: an input unit 906 such as a keyboard, a mouse, and the like; an output unit 907 such as various types of displays, speakers, and the like; a storage unit 908 such as a magnetic disk, optical disk, or the like; and a communication unit 909 such as a network card, a modem, a wireless communication transceiver, and the like. The communication unit 909 allows the device 900 to exchange information/data with other devices through a computer network such as the internet and/or various telecommunication networks.
The computing unit 901 may be a variety of general and/or special purpose processing components having processing and computing capabilities. Some examples of the computing unit 901 include, but are not limited to, a Central Processing Unit (CPU), a Graphics Processing Unit (GPU), various dedicated Artificial Intelligence (AI) computing chips, various computing units running machine learning model algorithms, a Digital Signal Processor (DSP), and any suitable processor, controller, microcontroller, and so forth. The computing unit 901 performs the respective methods and processes described above, such as the presentation method of the method design interface. For example, in some embodiments, the method of presenting a method design interface may be implemented as a computer software program tangibly embodied in a machine-readable medium, such as storage unit 908. In some embodiments, part or all of the computer program may be loaded and/or installed onto device 900 via ROM 902 and/or communications unit 909. When loaded into RAM 903 and executed by computing unit 901, a computer program may perform one or more steps of the method of presenting a method of method design interface described above. Alternatively, in other embodiments, the computing unit 901 may be configured to perform the presentation method of the method design interface in any other suitable manner (e.g., by means of firmware).
Various implementations of the systems and techniques described here above may be implemented in digital electronic circuitry, integrated circuitry, Field Programmable Gate Arrays (FPGAs), Application Specific Integrated Circuits (ASICs), Application Specific Standard Products (ASSPs), system on a chip (SOCs), load programmable logic devices (CPLDs), computer hardware, firmware, software, and/or combinations thereof. These various embodiments may include: implemented in one or more computer programs that are executable and/or interpretable on a programmable system including at least one programmable processor, which may be special or general purpose, receiving data and instructions from, and transmitting data and instructions to, a storage system, at least one input device, and at least one output device.
Program code for implementing the methods of the present disclosure may be written in any combination of one or more programming languages. These program codes may be provided to a processor or controller of a general purpose computer, special purpose computer, or other programmable data processing apparatus, such that the program codes, when executed by the processor or controller, cause the functions/operations specified in the flowchart and/or block diagram to be performed. The program code may execute entirely on the machine, partly on the machine, as a stand-alone software package partly on the machine and partly on a remote machine or entirely on the remote machine or server.
In the context of this disclosure, a machine-readable medium may be a tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. The machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any suitable combination of the foregoing. More specific examples of a machine-readable storage medium would include an electrical connection based on one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.
To provide for interaction with a user, the systems and techniques described here can be implemented on a computer having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to a user; and a keyboard and a pointing device (e.g., a mouse or a trackball) by which a user can provide input to the computer. Other kinds of devices may also be used to provide for interaction with a user; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user may be received in any form, including acoustic, speech, or tactile input.
The systems and techniques described here can be implemented in a computing system that includes a back-end component (e.g., as a data server), or that includes a middleware component (e.g., an application server), or that includes a front-end component (e.g., a user computer having a graphical user interface or a web browser through which a user can interact with an implementation of the systems and techniques described here), or any combination of such back-end, middleware, or front-end components. The components of the system can be interconnected by any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include: local Area Networks (LANs), Wide Area Networks (WANs), and the Internet.
The computer system may include clients and servers. A client and server are generally remote from each other and typically interact through a communication network. The relationship of client and server arises by virtue of computer programs running on the respective computers and having a client-server relationship to each other. The server may be a cloud server, a server of a distributed system, or a server with a combined blockchain.
It should be understood that various forms of the flows shown above may be used, with steps reordered, added, or deleted. For example, the steps described in the present disclosure may be executed in parallel or sequentially or in different orders, and are not limited herein as long as the desired results of the technical solutions disclosed in the present disclosure can be achieved.
The above detailed description should not be construed as limiting the scope of the disclosure. It should be understood by those skilled in the art that various modifications, combinations, sub-combinations and substitutions may be made in accordance with design requirements and other factors. Any modification, equivalent replacement, and improvement made within the spirit and principle of the present disclosure should be included in the protection scope of the present disclosure.
Claims (17)
1. A display method of a design interface is characterized by comprising the following steps:
acquiring a design object and a first width range corresponding to first display data currently displayed on a design interface;
in response to detecting an adjustment operation on the first width value of the design object, determining an adjusted second width value, and determining a second width range in which the second width value is located;
and determining second display data corresponding to the design object in the second width range, and switching the first display data currently displayed on the design interface into the second display data.
2. The method of claim 1, wherein prior to obtaining the first design object and the first width range corresponding to the first presentation data currently presented by the design interface, the method comprises:
obtaining at least one design object, presentation data associated with each of the design objects, and a width value for each of the design objects;
establishing a binding relationship between the at least one design object, and defining at least one width range according to the width value of the design object;
and determining a width range corresponding to the width value of the design object, and associating the display data related to the design object with the corresponding width range.
3. The method of claim 2, wherein said defining at least one width range from the width values of the design object comprises:
determining a combined design object in the at least one design object based on the binding relationship, the width value of each design object in the combined design object being different;
defining at least one tag value based on the composite design object, the tag value being used to classify different width values;
and acquiring a default width range, and dividing the default width range according to the at least one mark value to obtain at least one width range.
4. The method of claim 2 or 3, wherein the at least one design object includes a design object to be merged;
the method further comprises the following steps:
acquiring a width value of a design object to be combined, and determining a divided third width range based on the width value;
dividing the third width range according to the width value to obtain a first sub-width range and a second sub-width range;
associating the design object to be merged with the first sub-width range, and associating the display data of the design object associated with the third width range with the second sub-width range;
wherein the first sub-width range is greater than or equal to the second sub-width range.
5. The method of claim 4, wherein the dividing the third width range according to the width value comprises:
and acquiring two end points of the third width range, and dividing the third width range based on the size relation between the end points and the width values.
6. The method of claim 2, wherein the method further comprises:
in response to detecting a merging operation on the width ranges, determining a plurality of adjacent width ranges to be merged;
combining the adjacent width ranges to obtain a fourth width range;
and determining display data of the design object corresponding to the width range with the minimum range in the plurality of adjacent width ranges, and associating the display data with the fourth width range.
7. The method of claim 1, wherein after switching the first presentation data currently presented by the design interface to the second presentation data, the method further comprises:
and editing the second display data based on the second display data displayed by the design interface to obtain a display interface of the design object under the design interface with the second width range.
8. A presentation device of a design interface, the device comprising:
the acquisition module is used for acquiring a design object and a first width range corresponding to first display data currently displayed on a design interface;
the determining module is used for responding to the detected adjustment operation of the first width value of the design object, determining an adjusted second width value and determining a second width range where the second width value is located;
and the display module is used for determining second display data corresponding to the design object in the second width range and switching the first display data currently displayed on the design interface into the second display data.
9. The apparatus of claim 8, wherein the obtaining means is further configured to:
obtaining at least one design object, presentation data associated with each of the design objects, and a width value for each of the design objects;
establishing a binding relationship between the at least one design object, and defining at least one width range according to the width value of the design object;
and determining a width range corresponding to the width value of the design object, and associating the display data related to the design object with the corresponding width range.
10. The apparatus of claim 9, wherein the means for determining is configured to:
determining a combined design object in the at least one design object based on the binding relationship, the width value of each design object in the combined design object being different;
defining at least one tag value based on the composite design object, the tag value being used to classify different width values;
and acquiring a default width range, and dividing the default width range according to the at least one mark value to obtain at least one width range.
11. The apparatus of claim 9 or 10, wherein the at least one design object includes a design object to be merged;
the device further comprises: a correlation module;
the association module is used for acquiring the width value of the design object to be combined and determining a divided third width range based on the width value;
dividing the third width range according to the width value to obtain a first sub-width range and a second sub-width range;
associating the design object to be merged with the first sub-width range, and associating the display data of the design object associated with the third width range with the second sub-width range;
wherein the first sub-width range is greater than or equal to the second sub-width range.
12. The apparatus of claim 11, wherein the obtaining means is further configured to:
and acquiring two end points of the third width range, and dividing the third width range based on the size relation between the end points and the width values.
13. The apparatus of claim 9, wherein the associating means is further configured to:
in response to detecting a merge operation on the width ranges, determining a plurality of adjacent width ranges to be merged;
combining the adjacent width ranges to obtain a fourth width range;
and determining display data of the design object corresponding to the width range with the minimum range in the plurality of adjacent width ranges, and associating the display data with the fourth width range.
14. The apparatus of claim 8, wherein the presentation module is further configured to:
and editing the second display data based on the second display data displayed by the design interface to obtain a display interface of the design object under the design interface with the second width range.
15. An electronic device, comprising:
at least one processor; and
a memory communicatively coupled to the at least one processor; wherein,
the memory stores instructions executable by the at least one processor to enable the at least one processor to perform the method of any one of claims 1-7.
16. A non-transitory computer readable storage medium having stored thereon computer instructions for causing the computer to perform the method of any one of claims 1-7.
17. A computer product comprising a computer program which, when executed by a processor, implements the method according to any one of claims 1-7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210676299.7A CN114942817B (en) | 2022-06-15 | 2022-06-15 | Display method and device of design interface, electronic equipment, storage medium and product |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210676299.7A CN114942817B (en) | 2022-06-15 | 2022-06-15 | Display method and device of design interface, electronic equipment, storage medium and product |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN114942817A true CN114942817A (en) | 2022-08-26 |
| CN114942817B CN114942817B (en) | 2023-12-12 |
Family
ID=82910714
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210676299.7A Active CN114942817B (en) | 2022-06-15 | 2022-06-15 | Display method and device of design interface, electronic equipment, storage medium and product |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114942817B (en) |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2014182484A1 (en) * | 2013-05-07 | 2014-11-13 | Axure Software Solutions, Inc. | Design environment for responsive graphical designs |
| CN107683458A (en) * | 2015-06-07 | 2018-02-09 | 苹果公司 | For manipulating the equipment, method and graphic user interface of related application window |
| CN109358909A (en) * | 2018-08-28 | 2019-02-19 | 努比亚技术有限公司 | Show page control method, terminal and computer readable storage medium |
| CN110404965A (en) * | 2019-08-15 | 2019-11-05 | 重庆大学 | Consider the method and model system of non-scale order specification hot rolled steel plate group plate flexible and slab designing |
| WO2021143571A1 (en) * | 2020-01-13 | 2021-07-22 | 阿里巴巴集团控股有限公司 | Product customization method and customized product transaction procesing method and apparatus |
| CN114327718A (en) * | 2021-12-27 | 2022-04-12 | 北京百度网讯科技有限公司 | Interface display method and device, equipment and medium |
-
2022
- 2022-06-15 CN CN202210676299.7A patent/CN114942817B/en active Active
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| WO2014182484A1 (en) * | 2013-05-07 | 2014-11-13 | Axure Software Solutions, Inc. | Design environment for responsive graphical designs |
| CN107683458A (en) * | 2015-06-07 | 2018-02-09 | 苹果公司 | For manipulating the equipment, method and graphic user interface of related application window |
| CN109358909A (en) * | 2018-08-28 | 2019-02-19 | 努比亚技术有限公司 | Show page control method, terminal and computer readable storage medium |
| CN110404965A (en) * | 2019-08-15 | 2019-11-05 | 重庆大学 | Consider the method and model system of non-scale order specification hot rolled steel plate group plate flexible and slab designing |
| WO2021143571A1 (en) * | 2020-01-13 | 2021-07-22 | 阿里巴巴集团控股有限公司 | Product customization method and customized product transaction procesing method and apparatus |
| CN114327718A (en) * | 2021-12-27 | 2022-04-12 | 北京百度网讯科技有限公司 | Interface display method and device, equipment and medium |
Non-Patent Citations (2)
| Title |
|---|
| YIN XIAOCHEN; SHU XIAOYONG; ZHU YING; JIANG DEMING: "Multimodal interface design based on synaesthesia effect", IEEE * |
| 郑忠;王永周;卢义;高小强;: "中厚板组板及板坯设计的智能优化模型和系统", 钢铁, no. 04 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN114942817B (en) | 2023-12-12 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| EP3876197A2 (en) | Portrait extracting method and apparatus, electronic device and storage medium | |
| CN113722124B (en) | Content processing method, device, equipment and storage medium of cloud mobile phone | |
| US20230147594A1 (en) | Method for integratedly updating map data, device and storage medium | |
| CN113656533A (en) | Tree control processing method and device and electronic equipment | |
| CN114115681A (en) | Page generation method and device, electronic equipment and medium | |
| CN108694043A (en) | page decoration method and system | |
| CN113392660A (en) | Page translation method and device, electronic equipment and storage medium | |
| CN113836462A (en) | Page description file generation method, device, equipment and storage medium | |
| CN114942817B (en) | Display method and device of design interface, electronic equipment, storage medium and product | |
| CN115238652A (en) | Table data generation method and device, electronic equipment and readable storage medium | |
| CN115328385A (en) | Virtual keyboard display method and device, electronic equipment, storage medium and product | |
| CN114489639A (en) | File generation method, device, equipment and storage medium | |
| CN113849164A (en) | Data processing method and device, electronic equipment and memory | |
| CN113032251A (en) | Method, device and storage medium for determining service quality of application program | |
| CN113608809A (en) | Component layout method, device, equipment, storage medium and program product | |
| CN113138760A (en) | Page generation method and device, electronic equipment and medium | |
| CN114398122B (en) | Input method, input device, electronic equipment, storage medium and product | |
| CN114546199B (en) | Image processing method, device, electronic equipment and storage medium | |
| CN114741072B (en) | Page generation method, device, equipment and storage medium | |
| CN114139083B (en) | Webpage rendering method and device and electronic equipment | |
| CN113343636B (en) | Method and device for setting marking line width, electronic equipment and storage medium | |
| CN113342413B (en) | Method, apparatus, device, medium, and article for processing components | |
| CN112559943A (en) | Webpage element display method and device, electronic equipment, storage medium and product | |
| CN115759010A (en) | Data insertion method, device, equipment and storage medium | |
| CN114494950A (en) | Video processing method and device, electronic equipment and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |