Examples of interaction design: elegance and rhythm in creative design

Source: Internet
Author: User
Tags interface sin square root time interval

The first is the digression, and recently heard the "interaction designer crisis" argument. This topic has been discussed a lot, such as Cooper's article "The Future of interaction design is Slim" (Alan Cooper, known as the father of interactive design, see www.cooper.com, its "concept Projects" I think it's a good example of a scenario applied to design expression. DAVIDW students have done translation, and feel and sent a number of articles such as "interaction designers how to improve their ability" in which the irony of the language style is very attractive. As Mark Blythe's article, "from the mouse to the ipod, the death of the designer," this article on some literary and artistic articles gave me some inspiration for the future of the designers.


Where is the future of interactive designers? DAVIDW said that the interaction designers have no assessment criteria. Plus the tools at sixes and sevens: 18 of what is within reach, even the kitchen table wiping the mouth of paper towels can be used to work, further suspected that those who use the napkin work of the interaction designer from the catering industry, ironically, but also very frank. I think the threshold is too low, will inevitably lead to lack of industry recognition, professional degree is not enough, engineers would compare designers to art. These are worthy of our thinking, but not disheartened, Alibaba ued team's article "Interactive Designer's professional performance", to some extent, to solve the interaction designer to pass the problem, but after reading let me more interested in "100 points" designers how to refine it.

I think that no matter Cooper's website, DAVIDW, or Mark Blythe, they try to find a promising path to the interactive design. They have their own different forward-looking thinking, it is worth learning from. I would also like to use this topic to provide a relatively different way of thinking about how to create better designs in the current trend to mitigate the "crisis".

Look at the trend first. Mark Blythe said: "The designers of early computer interfaces are primarily concerned with measurable results and how much time people spend on different interfaces to accomplish a task." This kind of problem can be solved by observation and experiment, the process of design is quite clear and transparent. "It reminds me of web design," said the students, "the design of the web end needs to enable users to quickly locate the target, click, quick Response." It is not hard to find that the quantification of this process is ultimately a solution to the availability level of "efficiency" and "utility" issues, as a basic design principle, these unassailable. But it's worth mentioning that the trend is quietly changing, regardless of the frame of the browser or the content itself, such as PIOVT and Google Wave. They are increasingly "app". Because of the long term, Moore's law makes the problem of efficiency and effectiveness more and more out of sight, and when search engines tend to quickly and accurately provide search results; Gorgeous user interface is no longer the technical threshold, while the traditional user experience is still the main theme, but some powerless. How can interaction help design and push it to a new level? I think there are two main directions, one is the stimulation of the new technology, VR virtual reality, AR augmented reality, TUI interface, etc., the first known MIT student's Sixth Sense device is a distortion of AR technology. Another direction is to upgrade the existing experience and find new design points. Here are some of my own experiences, which I temporarily describe as elegance and rhythm in design.

Give a few examples of industrial products to illustrate. For example, one reason is my professional background in industrial design, the other is that industrial products than information products earlier encountered the bottleneck of usability, users are no longer concerned about their effectiveness, efficiency. and turn to a higher level of demand. From them we can try to find some inspiration for improving the design of the existing experience.

First of all, Apple,apple's design, whether hardware or software, is the industry leader, initially realizing that its elegance can be said to begin with its breath light, from PowerBook G3 and ibook, as long as users close their notebooks, The sleep led on the front end of the notebook flashes in a breath-like light. Think carefully, this kind of intimacy seems to originate from the person's heart, it is not so much a visual effect as compared to a kind of resonance. Apple's idea of this design runs through its product line. I call it: the classic thinking that conforms to the user. The so-called classical thinking, can be seen as we grow up (or the nature of the existing) think things inherent appearance and attributes, a simple example, the object from point A to point B, the classical thinking that it must go through a path, rather than at a point disappeared B point appears. Of course, if it happens to be fog days, then it gradually disappeared at point A and then at Point B is also in line with classical thinking. We further refine this process, from point A to point B, in the real world the object must undergo a first acceleration and deceleration process. Rather than having a fixed speed on the first. It feels a bit like pulling open a drawer. Let's take a look at how Apple does it. I tried to do some very preliminary work. The following is a camera shot down the iphone SMS program screen switching animation, will be animated single frame playback, you can get the following series of screenshots. Because each single frame screen has the same time interval. We put the results of each frame change on the axis and try to quantify the elegance.

D represents the distance, the total size is the width of the screen. F is the number of frames, press 30fps for approximately 0.4 seconds. We can see that the trend is a process of accelerating and slowing down, which corresponds to a function curve, and generally this motion curve can be implemented with trigonometric sin, but here it is more like the square root of sin (this guess should not be accurate, but also please understand the iphone SDK's classmate correct).

If the above can be an elegant point of the iphone experience, then the iphone's great experience is that these dots are interwoven with the plane. Let's take this part of the work further and look at the iphone's main interface interaction. The iphone's main interface simulates a physical surface with a spring-clip device. (imagine the rear of each screen is a semicircular bulge, with a probe with a spring pressed on a gap in the middle of two screens). It is closest to the physical world, to conform to our classical thinking.

If you are an interactive designer for Apple, how would you define the interaction of the iphone's main interface? "Follow the finger movement, sliding left and right to switch the screen, edge bounce." If this is the case, I think it is impossible for an engineer to make the Apple experience that we can feel today. We exclude the click of the icon, adjust the position and so on interaction points, single finger switch screen an operation: first finger touch screen, it appears that the screen will be synchronized with the finger movement, which is not accurate, in fact, the finger moved a certain distance after the screen began to move (the iphone students can try, Android in the same way, this distance is about 2mm, then, sliding around, slide will cut the screen? Not really, to see the finger off the screen when the instantaneous speed, greater than a value will be switched, when the screen at the time of release by adding a friction force to continue to move forward, to the edge rebound. If this value is less than (the instantaneous speed is 0 when static release, also in this case) to see whether the current drag screen exceeds the screen width of one-second, more than the cut screen, not more than rebound, at this time is to release the speed above add an acceleration, to reach the edge back. Also consider the behavior of the two most lateral screen actions, and the screen behavior when the screen is still in motion when it is released. Presumably the real list would be a rather complicated flowchart. Duanmu said he didn't have an interactive designer job when he was working for Apple, and when the engineers did most of the work, we became more aware of why.

There is no time to do the iphone interface simulation, but previously I used AS3 to simulate some of the hero main interface behavior, the following video can be used as a reference, where the graphical interface by blizzard students to complete. Please see the following video:

Http://cgi.video.qq.com/v1/videopl?v=6OyBwxNBkSj

Next, Bang&olufsen, the Danish world class audiovisual brand, inspires me, the MacBook Pro right side is the B&o BeoCenter2 CD player, the enthusiast must be familiar with it. Click on it, its smooth oval surface will expand into wings, cover open, CD lift, as if we remember some kind of supernatural creatures. Looking at its elegance, we will find that efficiency is no longer a priority element, and the ritual is greatly advanced. In terms of sheer usability, it's more than just a CD player, and its experience is more focused on its ritual sense. Compared to the elegance of the mass product of Apple, I attribute b&o to the elegance of the niche, because it can discard efficiency and not apply to everyone, feeling that this elegance can be applied to the high-end applications we design. The elements of industrial products may not be easy to apply to our current work, fortunately B&o also provides a similar product style player BeoPlayer, interested students can download to try, experience a b&o style of elegance. Hope can also get some inspiration from it. When designing high-end applications, recall B&o's ritual sense.

Referring to Muji CD player, I have to say that Shenze straight (Muji CD machine designer, and one of my favorite designers) CDC blog about Shenze straight A reprinted article "The Core of consciousness" let us see a real designer-style thinking, here, put aside the Muji The CD player has a very creative look to see its playback process. It has only one pull down operation, the ultimate simplicity of design aesthetics. On the other hand it, turn on the switch, it does not start immediately, but interval, music immediately began, the designer as if to create a sound from afar from the mood, cordial and comfortable. I think this is a symptom of rhythm, in fact, this slightly delayed design also appeared in a scenario when the iphone was released, with jobs listening to music and his colleagues calling, the music slowly falling down to ringtones, to the end of the call, and after a small interval, the music sounded. Analogy to the previous two examples. Muji CD Player, the function will be located in the design, such as the track switch, volume adjustment is placed in the inconvenient operation of the position, this emphasis on the design of the product will sometimes give people some sense of narcissism, so you can compare this elegance to a designer-style elegance, When our team has enough and industry leadership and top design standards, we can try to use this designer elegance to lead the trend.

Conform to the trend, found a new design point, can be the core competitiveness of the designer or not resolved, the user experience has been paid attention to the result is the boss, engineers come to do interactive design, interaction designers how to do? Since we all come to rob the job, then we also take the initiative to attack well, although this is a joke, but I can give the most practical advice. This was inspired by my former colleague and predecessor Liuying, in solving the problem of product team Synergy, she gave me the most reasonable solution: to understand the work of each role in the team, the interaction design in the center of the product chain, there is more obligation to do this work, try to do some user research, Try to do some development work, one helps oneself professional ability approval, two is advantageous to enhances the team efficiency. As interactive designers grow into the backbone, the future is bound to be bright.



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.