User interface layout design method and system, terminal and medium

Abstract

The invention discloses a user interface layout design method. The method comprises the steps of obtaining a request of a user terminal for creating a layout design window; newly building a layout design window; acquiring a user terminal selection layout design application terminal; automatically adjusting the size of a layout design window according to the application terminal; obtaining a layoutstyle of the to-be-laid-out component in the layout design window; displaying the layout effect of the to-be-laid-out component in the preview window, and sending whether to confirm that the currentpreview effect is adopted or not to the user terminal; receiving preview window effect confirmation information sent by the user terminal; and adopting a simulator to display a window effect accordingto an actual ratio, and completing layout design. The method can be suitable for application of UI layout of different terminals at the same time, the layout mode is unified, visual operation is supported, a user only needs to learn one layout, layout of desktop applications, Web applications, mobile terminal applications and other applications can be completed at the same time, user operation issimple, and the development efficiency is improved.

Description

technical field [0001] The present invention relates to the technical field of user interface layout design, in particular to a user interface layout design method, system, terminal and medium. Background technique [0002] Computing devices with operating systems are now very numerous. Operating systems include Windows, macOS, Linux, etc. Computing devices include PCs, mobile phones, tablets, smart watches, smart TVs, car computers, etc. Applications on the same computing device can also run in multiple ways. For example, on PCs, there are desktop programs and web applications running in browsers. On mobile phones and tablets, there are also mobile apps, Various operating modes such as Web applications and WeChat applets. Although the operating modes and mechanisms of these applications are very different, they all have a common feature, that is, they all have a user interface (UI), that is, a graphical interface. Now that there is a graphical interface, it involves lay...

AI Technical Summary

Problems solved by technology

[0004] 1. The cost of learning is very high: if users want to develop applications for all platforms, such as Windows, macOS, Linux, Android, iOS, Web, WeChat applets, etc.

Then it means that you need to master the layout of each platform, which greatly increases the user's learning cost and requires more developers to participate. No matter the time cost or the money cost, it has increased a lot

[0005] 2. The layout is not universal: the layout system of different platforms adopts completely different methods, and it is not universal

[0006] 3. Limited functions: Some platform layouts have very limited functions

If the user wants the component to be in a fixed position (such as the bottom of the window) regardless of the size of the window, it needs to be controlled by code, which is very troublesome

[0007] 4. Compatibility issues: Due to the differences between platforms and browsers, even on the same platform, in different versions, or in different browsers (including different versions of the same browser), the layout is not completely adapted

For example, some layouts in low version of Android and high version of Android will sometimes mess up

There is also a web application, which behaves differently on different browsers (such as IE, Chrome, Firefox, etc.), which will also cause trouble for developers.

[0008] 5. Unable to visualize: currently only PC platform development tools support highly available visualization, for example, VisualStudio, macOS, etc.

[0010] (2) The web and some mobile platforms (such as Android) adopt a fluid layout, which is not suitable for visualization tools (the fluid layout is more suitable for writing layout code directly);

It is very inconvenient to do so, and it is very difficult to design a layout with a complex UI

Images