With the innovation and development of network technology, UI interaction design is now more and more widely used, obviously has become the mainstream of design and popular inevitable trend. Dynamic effects in UI interaction design include movement, sliders, hover effects, GIfs, etc. Why is UI interaction design gaining popularity? What are its advantages?
1. Increase usability and improve user experience
UI interactive effect can clearly show the function and interface of your product, so that users can more intuitively understand the function and use of your product.
2. Convey brand impression and display product functions
3. Attract users, enhance brand image and enhance user viscosity.
Interesting UI interaction design dynamics can help your site attract users, who will come back to your site again and again, which can improve your site’s ranking.
4. Increase the interest and enhance the interaction of users, so as to draw the distance between users and the product.
Is a simple screen bounce UI interaction? Far from it, UI interaction design is so powerful that it can drive entire user interfaces. Since interaction is so important, it has become one of the essential skills of a good designer. Without further discussion, here are some of the professional design sites that bloggers often visit, such as Dribbble, Behance, Uplabs, and App Animations.
In addition to following platforms such as Dribbble and Behance, which bring together the best designers, you can also increase your knowledge of interaction design theory by following professional design sites such as UI Movement, Smashing Magazine, and more. Excellent designers will share their design experience and some reference cases of UI interaction design on these platforms, which will be of great help to improve their understanding and perception of interaction. In addition, I recommend several excellent design teams and designers: Tubik, FANTASY, UI8, Aurelien Salomo (From Dribbble)
Here are some of their works:
Tubik team
Pull down refresh effect
Alt: Drop-down refresh interaction
Alt: drop-down refresh interaction cases
Simple and fun UI interaction design effect: pull down refresh. Figure pull effect, will appear brand logo words, deepen the brand impression, at the same time will not let the user waiting process become very boring. Figure 2 shows the content loading process in the status bar of iPhone X, which makes full use of the “gap” of Apple’s bangs. When the user drags it down, the interface will appear a rainbow animation effect, so that the user will enjoy the refreshing process.
Activate screen action
Alt: Activates the screen animation effect
The interactive effect of the startup screen in UI interaction design adds interactive effect to the company’s logo, which transitions from the startup screen to the company’s service selection, creating a good brand impression.
Bottom navigation bar innovation
Alt: bottom navigation bar
Encyclopedia application
Alt: Encyclopedia interface
Alt: Interactive interface with elephant theme
Mobile UI interaction design themes from the Tubik team. Technology changes, but the thirst for knowledge never goes out of style. This is an Encyclopedia application, Nature Encyclopedia: Provides UI interactive infographics for a variety of topics and links users with charitable organizations. Graphs are Encyclopedia information about elephants.
Learning Chinese app
Alt: Interactive interface for Chinese learning
This is an app for learning Chinese, mainly learning Chinese characters and pronunciation. One side of the card shows the user Chinese, while the other side allows the user to see its pinyin and translation, which can be clicked to play. Users can save cards to mark their learning status: learned or not learned, and the fun UI interaction design makes the learning process more interesting and interactive.
FANTASY team
Movie on demand application
Alt: Children’s on-demand interface
This is an app with a children’s on-demand theme. Parents can set the time for children to watch movies, and the movie will stop immediately after the time is exceeded. If children want to watch more movies, they must earn gold coins by answering questions to unlock more watching time. The app is also tied to the parents’ mobile phone, allowing them to control the screen status at any time through the app and contact their children through the phone. The app is themed according to the style of children, and the UI interaction design is full of fun. The combination of work and rest, so that children in the entertainment at the same time also do not forget to learn.
E-commerce applications
Alt: E-commerce program interface
A simple and comfortable interface e-commerce application, UI interaction design is very good, functions, colors, prices at a glance, users can customize and purchase chairs according to their preferences.
Well, the above are some very reference examples, in fact, these interface interaction design inspiration is subtle, read more, you will continue to improve their aesthetic. In addition, some domestic designers often find some good EXAMPLES of UI interface interaction on Dribbble to split and practice, so as to draw inspiration from innovation and learn from some ways of interacting with details.
UI interaction effect is not difficult to imagine, practice makes perfect, see more practice, plus accumulation every day I believe that the promotion will be very fast; Moreover, some simple interface interaction design effects can also be achieved with rapid prototyping tools, such as the drop-down refresh, progress bar and top navigation bar design effects made by Mockplus as I mentioned before, which can achieve the desired effect in a few minutes, efficient and fast. Today, we’ll show you how to use Mockplus to design a common hover ball to interact with a merge.
Let’s take a look at the demo
Alt: Mockplus Suspension ball
Drag and drop a central component Z as the control key.
Step 2: Drag and drop scattered components ①, ②, ③, ④, ⑤, ⑥, ⑦, and lay out the final display style.
Step 3: Use the central component to interact with other dispersed components, setting the coordinates and interaction duration, where show/hide and move interactions are required. For example:
Component 1 Set display interaction execution duration to 0 and delay to 0, and mobile interaction execution duration to 200 and delay to 0
Component (2) Set display interaction execution duration to 0 and delay to 100, and mobile interaction execution duration to 200 and delay to 100
And so on…
Step 4: Make all scattered components invisible and place them under the central component to block them.
In conclusion, interface interaction design has become one of the essential skills of a good designer. UI interaction design is not some disorderly decorations on the user interface. The purpose of UI interaction effect is to improve people’s pleasure and satisfaction, and to bring users a good user experience.