Analysis of 15 user experience Designs

User interfaces and user experience (UI/UX) are critical to the success or failure of any product. In particular, Web is a special product that is made public and accessible to anyone anytime, anywhere, the user experience is almost everything. Although the content is more important, the content can be replaced and the experience is unique. This article analyzes 15 different UI/UX cases, the inspiration from excellent user experience is invaluable.

Moving parallax in content scrolling

Parallax scrolling
It is used to make multi-layer backgrounds move at different speeds to form a motion parallax 3D effect. Although it is purely visual, the visual experience formed during content scrolling is still outstanding. Charlie gentle's portfolio
The website is an excellent display of this effect. Click the Left and Right navigation buttons to scroll into different content areas. In addition to scrolling into different content areas, the 3D Motion parallax effect formed by the multi-layer background image moving at different speeds is very beautiful.

IPhone sliding refresh

Most of the iPhone's social network applications include the data refresh function, some are swaying machines, and some are pressing a button. In my opinion, the best way is to refresh in a slide manner. This method is used by default for applications such as gowalla, Foursquare, and Tweetie. If you want to refresh the data when you flip the list with your fingers, your fingers have not left the area yet, if a button is used, the finger must leave the current position, resulting in inconsistent operations, and a sliding refresh. The Finger continues to stay in the original position, but only changes the action.

What we can learn from this is that we often check your UI to see if there are any operations that let the user's attention shift.

Prompt interface anytime, anywhere

 

Some popular Mac programs often run silently in the background. When the user needs to intervene, the interface is displayed, and then disappears silently, like the hit list,
Messages to be notified are displayed anytime, anywhere. It looks like the functions of the operating system.

Convertbot disc menu

Convertbot
It is one of the few UI designs that are actually not easy to use but are interesting to use. This iPhone app is used for unit conversion. There are countless apps like iPhone app stores, but it is not that interesting. It has designed a disc operation interface, which is very visual and beautiful. It makes people have the impulse to use it from time to time. This case tells us that sometimes it is important to look at it.

Slideck accordion navigation

On the web, there are many jquery-based content scrolling panels, slidedeck
Is one of the best. You can use the unique accordion interface to display the content as a horizontal version of the outlook-style navigation panel, but the visual effects and experience are superior.

Random reply from strongbad

Strongbad
Yes homestarrunner
Strongbad will reply funny emails to the audience every week for the long-lasting online animation. These emails gradually accumulate more and more recently, the site developer launched a random email browsing function. Click the random button to randomly select a previous email as shown on the lottery host. This random display is very vivid, so you can't help it. This UI case tells us that some minor changes on the user interface may bring unexpected results.

Made by tinder subject color selection

This is a very mysterious little site, so we don't know what it is. However, there are several small color blocks on the top of the website. After clicking it, the entire site will be re-colored based on the color block. Although it is very simple, the user experience is really amazing.

Pixelmator

Pixelmator
It is an excellent image editing tool. Although far less powerful than Photoshop, it contains many innovative features. Its user interface has a very interesting function. When you set the effect for a certain position of the image, a natural line is displayed between the setting point and the setting interface, when moving the set point, the line also changes. Although this line does not have much practical significance, it brings a kind of operation hint to the user and is also interesting.

Riot industrial navigation

The navigation of this site is very distinctive. It is not only smooth, but also well designed. When you hover the mouse over the navigation entries, the navigation entries are omitted from the container on the left. After clicking, the current content is gradually displayed in a gradient mode, and no Flash technology is used.

Drag and Drop Operations on the Web

In my opinion, any application should support drag-and-drop operations. Of course, Web has its limitations. However, in recent years, drag-and-drop operations on Web have become very common. On the above site, you can drag and drop your favorite program to the Download button and download it directly. Icondock
The shopping cart of elasticsearch also supports the operation of elasticsearch. (The drag-and-drop form design UI of Wufoo and polldaddy is, in my opinion, the best implementation of the Web drag-and-drop interface)

Online Photoshop photo stack Interface

This is another non-practical, but attractive interface design. When Adobe's online Photoshop is loaded, it will display a bunch of photos, and you can take them away, the physical effects of collision between them are outstanding and attractive.

Move with mouse

The motion parallax effect is also displayed. At the same time, as the mouse moves, the work area of the screen also moves. This site
Similar results are also achieved. (It seems that this experience is not good.-translator)

Double Scroll panel

This is a jquery-based, outstanding content scrolling panel design.
. Vertical scrolling of images, while horizontal scrolling of explanatory text, both visual effects and experience are outstanding.

Rolling Based on physical power

 

When I used the iPhone for the first time, I was impressed with its physical-powered Interactive UI. When I flipped the page with my fingers on safari, the page did not scroll at a linear speed, it is like an object in the real physical world, having a curve speed, First Rolling quickly, then slowing down slowly.

Simplified Interface

 

Beautiful and complex UIS are attractive. Sometimes, simple interfaces are more attractive. Mac's writeroom
Is a very powerful text editor, these powerful functions are hidden in the very simple interface.

International Source: Design shack 15 in-depth examples of addictive User Experience
(Author: Joshua Johnson
)

Chinese compiling Source:Ruishang enterprise CMS
Website content management system
Official Website