Tiger painting Tiger--simple Weui template UX Design Learning

Although art is divided into independent fields, there are always similarities. Ui/ux design is also a kind of art, like art, Ui/ux's design also need a lot of copying other excellent works to improve their level.

But as the saying goes: "Tiger", if you copy the object is not appropriate, it is likely to have its shape and not its meaning. So, where to find the right copy material, to do "Tiger painting Tiger"? In fact, many well-known software trends, are worthy of our reference, such as the design of small programs tool: Weui.

First we need to find Weui template, actually want to find this, is not very difficult, in mockplus example project, there are a large number of domestic and foreign excellent app templates, Weui also in this one. Although the page in this template is a bit small, it is also very concise, the UX design needs elements, here are involved. Of course, you can also find all the documentation for this example on the public development platform.

Let's look at the effect here first. Because there are only a few representative pages here, so it does not involve the setting of the jump between pages, you crossing also on the left side of the control Panel to switch the page itself.

The focus of this template is on the first page, the following open this template, we will specifically see how this page is designed.

The basic component placement is not much to say, mainly to see the interaction. The first half of the page, the middle yellow area is actually two coincident placement of the "group", the two groups correspond to two cases: Completed and data loading. Click "Success Prompt", the "Completed" Prompt box appears, and automatically disappears after 1.5 seconds. Click "Prompt in Load" and the prompt box in the data load produces the same interactive action. OK, the effect we have seen, then, the question is: how to achieve it?

This effect is not difficult to pop the window and automatically disappear, using "picture", "shape" and "single-line text" to form the "completed", and then select the components, right-click the Open menu, select "Merge as Group", and in the right side of the properties panel to cancel this group's visible options.

650) this.width=650; "Src=" Http://s3.51cto.com/wyfs02/M01/89/A9/wKiom1gZXLGRgfbtAAA4T3OWle8212.jpg-wh_500x0-wm_3 -wmp_4-s_2194073642.jpg "title=" Figure 1.jpg "alt=" Wkiom1gzxlgrgfbtaaa4t3owle8212.jpg-wh_50 "/>

Next Interactive settings: Drag the "Success prompt" to this yellow area, select "Click on" > "Show/Hide" interactive command, then open the lower parameters panel, select "Show". This allows you to click to display the "done" effect. So what if the set of the group that appears automatically disappears? In fact, it is very simple, the previous step of the operation of a slight change, you can realize the automatic disappearance.

650) this.width=650; "Src=" Http://s4.51cto.com/wyfs02/M01/89/A9/wKiom1gZXL-QPM74AABqOuYb6NM380.jpg-wh_500x0-wm_3 -wmp_4-s_4176098878.jpg "title=" Figure 2.jpg "alt=" Wkiom1gzxl-qpm74aabqouyb6nm380.jpg-wh_50 "/>

We still drag the "Success prompt" This link to the "Completed" area, select the Interactive command "click" > "Show/Hide", in the parameters panel below, the settings need to make some changes, here we choose "Hide", and then in the "Delay" option to enter "1500", Equivalent to a delay of 1500 milliseconds, or 1.5 seconds. This allows "completed" to automatically disappear after 1.5 seconds of clicking "Success Prompt".

650) this.width=650; "Src=" Http://s1.51cto.com/wyfs02/M01/89/A7/wKioL1gZXMyThozqAAArExX1gss094.jpg-wh_500x0-wm_3 -wmp_4-s_465961371.jpg "title=" Figure 3.jpg "alt=" Wkiol1gzxmythozqaaarexx1gss094.jpg-wh_50 "/>

In the same way, we set it to "Data loading".

Well, that's it. Let's look at the next half of the page.

The components here seem to be one, in fact ... It's not a component in the fight, see here isn't a lot clearer?

650) this.width=650; "Src=" Http://s5.51cto.com/wyfs02/M02/89/A7/wKioL1gZXNnTRE8iAAAyhHy37EQ477.jpg-wh_500x0-wm_3 -wmp_4-s_367233213.jpg "title=" Figure 4.jpg "alt=" Wkiol1gzxnntre8iaaayhhy37eq477.jpg-wh_50 "/>

Then is the interaction set, if the green rectangle into a "live" progress bar it? Here, in order to "resize" in the process of completing the "sizing" setting for each shape, it is important to remember to make two adjustments, first of all "pin to" here, to select the correct growth direction of the shape component. Then the "Execution time", this position must be adjusted, or your shape components will grow up in an instant, can not reflect a better visual effect.

650) this.width=650; "Src=" Http://s5.51cto.com/wyfs02/M00/89/A7/wKioL1gZXPPyaoxwAAA6DCDlnO4526.jpg-wh_500x0-wm_3 -wmp_4-s_1223068614.jpg "title=" Figure 5.jpg "alt=" Wkiol1gzxppyaoxwaaa6dcdlno4526.jpg-wh_50 "/>

The "Upload" button here is just a simple click on the component to show the interaction settings of another invisible component, and there is no more talking here.

The interaction between the third page and the first and the upper part of the interaction is basically the same, but here the red icon is not set after the display is no longer hidden, the second page and the fourth page is mainly concerned about the style of the component, I hope we can provide some reference.

What do you think? In this way, the automatic vanishing and progress bar of the interactive command is not already learned? There are a lot of templates in the example project, and the next time I'll introduce you to other useful features.

Tiger painting Tiger--simple Weui template UX Design Learning