hello, everyone, I'm Xu Xiaoyi, and today I'll continue to share with you about the technical practices of Dooring low-code. I'll share with you from the perspective of assist design about what Dooring has done in this area and its prospects. H5-Dooring has been iterated for three years, from UI design to component materials, and then to building capabilities, it has been constantly updated to move toward better solutions and is committed to creating an excellent user experience. The following content I share is mainly composed of the following aspects:
1. Customizable component panel Traditional building system component panels are basically fixed, and if the number of components gradually increases later, it will cause certain usage burdens for users. Since the number of commonly used components is limited, in order to improve the efficiency of users in finding target components, H5-Dooring provides a customizable component panel, allowing users to customize commonly used components and support component search:
At the same time, the editor supports component search capabilities:
In this way, we can hand over the selection of component materials to users, giving users more customization capabilities, thereby improving the happiness of building. 2. Canvas assist design Canvas assist design is mainly to help users build pages more precisely, making it easier for non-technical personnel to create professional page designs. Here are some of the improvements that Dooring has made in canvas assist. 2.1 Reference line design
This section mainly borrows from the old design software, Photoshop, where we can easily generate reference lines (including x-axis and y-axis) by double-clicking the ruler in Dooring. We can drag the reference lines to any position on the canvas to provide reference for element positioning. 2.2 Ruler design
Ruler design is mainly for reference lines to plan more precise reference line positions and layouts. As the canvas is scaled, the reference lines are scaled proportionally to keep them in line with the canvas. 2.3 Grid line design
The value of grid lines is that users can precisely control the position of elements, such as alignment, arrangement, etc., in non-design drafts. We can quickly layout and compose pages using the grid layout (one of Dooring's design philosophies). 2.4 Color palette In traditional building platforms, it is difficult for beginners to create exquisite pages, including design elements, including color matching, etc., so based on this background, Dooring introduced a free material library and a color matching panel to make it easier for users to refer to page design:
The material library lists several commonly used categories that we have derived from research: business materials, life materials, natural materials, and illustration materials. The color schemes currently provide: traditional colors, low-key colors, gradient colors, universal color matching schemes, and khaki colors. Users can refer to color schemes to build pages with different color styles. 3. View controls View controls are mainly to make it easier for users to quickly adjust the canvas and control the elements in the canvas. We all know that once the number of elements in a page becomes large, it becomes very difficult to find components or adjust the structure of the page, such as when the page is too long, we need to scroll up to locate the specified position, and when the page contains too many elements, it becomes very difficult to quickly find a specific element and adjust it. Therefore, Dooring has made some improvements and optimizations based on these pain points. 3.1 Size control
Through the canvas control panel provided by Dooring, we can quickly switch the canvas size or change the canvas size by manually entering a custom size. 3.2 Layer management To solve the second problem analyzed above, Dooring designed a layer management panel.
We can easily manage components on the canvas through the layer management panel, such as: displaying/hiding components, deleting components, and adjusting component order (will be iterated later). Of course, a more powerful layer panel will be provided later. 3.3 Shortcut key support To make it easier for users to create efficiently on the canvas, shortcut keys are essential, so Dooring also provides shortcut key capabilities:
We can quickly perform functions such as copying, deleting, and pasting images using shortcut keys. 4. Innovation in building modes Traditional building platforms are generally free layouts or natural flow layouts, and the building modes are relatively simple, making it difficult to meet the needs of users in different business scenarios. Therefore, Dooring has made certain innovations in this area, …