Before we get into this topic, let’s think about how UI designers work. When we start an interface, there are two situations: one is for a new product, and the other is for an existing product to iterate on and redraw the interface. For the former, whether bala bala reference first competitive product interface design, and then the function of the set of a set of their products, and then you can start to put a navigation bar is needed here, well, here use TAB, add a search box to search ICONS in good or placed inside, outside put it outside, popular search is not a label, no, it can’t decide, Ask the project manager, there is also a text input box, limited to 200 words, so make it 300 pixels high. In the second case, it’s easier to rematch colors, cloth layouts, draw ICONS, and paste. Unsurprisingly, most UIs don’t deviate from this pattern. (” great spirit “UI natural also won’t look at this article, this part was temporarily ignored) if the UI designer you still stay at this stage now, that from now on, you need to rethink your own design ideas, and, most important of all, you need to know two things,” framework “and” library “. I’m a little fuzzy myself, but from a UI designer’s point of view, one of the things we need to know is that very few of the front ends you’re working with don’t use frameworks, and a UI library is a style of packaged components, and when you send a design to a Siege lion, the first thing they do is look at it (ahem, Never mind that) there is no existing component style that can be used, it is best to be as close to your design as possible, and then simply change, the siege lions work in the same way as we do, it is best not to change the interaction mode, just change the style. (What controls, components, plug-ins, I can not strictly distinguish, so even if there are mistakes, do not correct, haha)
At this point, UI designers are starting to fret, why do designers need to master these puzzling knowledge? For example, we all know how to design a loading animation for a page that is not that responsive. Do you as a designer know that loading state is used when there is data interaction with the server? If it is a local behavior, it does not need to load state. Only when you know this will you know which pages your loading animations should appear on, what actions to perform, and in what form. For example, the simplest TAB TAB in SUI component library looks like this:
Styles don’t seem like much of a reference, but one of the important things you should take away from this is that, as a TAB, the content should look like an integral part of the selected TAB, so you could redesign it to look like this, right
But if you make it look like this
So please tell me, what should I make of this mysterious line? Even the following is not the best approach, because our tabs need to “know at first glance which TAB is selected.”
Currently widely used UI component library, including easyUI, amazeUI, Bootstrap and so on, we can start from these, during the design of reference, if its button has four states, OK, you also design the corresponding four states, if its input input box has disabled state, get the focus state, That should also be reflected in your design document. (of course, not absolute, also want to consider the actual situation of project, flexible) to manage the workflow, now you’ll have to consult the front-end developers what they commonly used, or in the project has been in use for what, let’s, for example, if the front-end siege lion has use EasyUI, and happened to your project needs a date selection function, So what’s the right way to think about it? First, you need to take a look at what the EasyUI date control looks like. So here it is
Then try the function, and then design, the heart will have the bottom, for example, can be changed to the following
But is that it? As a UI you also need to consider how many states are provided for this control? The default load current date, select the other date after the current date, the date on which the mouse after, on Saturday/Sunday, color, the color of the date of this month, all of these need a body now you mark in the document, in detail, once the neglect any one little detail, better is responsible for the front end of the developers would come to communicate with you, And sometimes the lions may be negligent, that only hope to visual inspection and testing. Such a simple date control needs to be considered thoroughly, so a qualified UI still needs more immersion. If you haven’t seen the style of the date component in the UI library, you took the initiative to design it like this
Also came up with a lot of theory to support their design, you see, year and month are very convenient and fast choice, well, I really want to see you being beaten up by developers… Of course, this is not to say that you should not use your creativity, but unless you have a very convincing reason and convincing design theory to support, otherwise, do not do this kind of hard work, because as a mature component library, after years of development, has been recognized and used by many people. It also allows for more consistent interaction with other products that users frequently use.
For the mobile end, the UI provided by the Android SDK is basically not necessary to see, while the vast majority of open source UI library source code is in Github, which sets the threshold for designers to view intuitively, such as GreenDroid and so on. There is a big difference between the UI framework of Android and that of Web is classified by component. Like side-menu, pull-to-refresh, awe-android-UI is recommended for UI designers, with Demo, github.com/wasabeef/aw… , including some kinetic effects, very intuitive. Like this water pattern.
And this burger menu/close/back button transformation
As a UI designer, when making prototypes, there is no need to use AE to do any special effects, directly attach the effect and the source file address of the library, which is convenient for their own development.
In addition to the mobile UI daily pay particular attention to control the accumulation of style, built a folder on your own, good class, button/edit box/switch/text control/bar/scroll bar/dialog/calendar/navigation/chart/menu/by advertising/search box/label group, etc., in order to reduce the burden of developers, in see good results, Save the Demo animation and the project address at the same time, because your wild imagination or simple “I think I’ve seen this on XXX” will drive developers crazy. Another benefit of reading more UI libraries is to expand your design ideas, such as this Floating Action Button
There are also page indicators for adhesion effects
If we hadn’t seen this dynamic effect, we probably wouldn’t have thought of it ourselves.
IOS development because I have only been involved in a few projects, and are using the same set of interface with Android, so I have not summed up enough experience, at most read the latest version of HIG human-computer interaction guide, referred to several competing products, so I will not present the ugly here.
All in all, component libraries are a good idea. If you’re a designer who doesn’t know anything about component libraries, take yourself out of your shell for a while, think a lot, and do it again so you can keep up with the front-end developers.