Good flat design - interactive pieceEDITORIAL words :( see text please skip dividing line) when finished 'good flat design - visual piece' when seeking the guidance given to the designer to see you. We Tucao: Some people say 'Only interactive flat, and visual go do flat ⋯⋯' Others said, 'If a product is pinning its hopes on the visual, rely on the performance of the product visually flat, apparently do not fly ⋯⋯ '⋯⋯ it is indeed the case, not just the Nike Air Max visual interface flat flat no three-dimensional, more interactive experience should be flat, flat information architecture. Before entering the subject, let's look at an example, I found someone with a science fiction movie in the UI screen for visual and flat compared, they say this is a future trend interface does this and now have a UI screen similar place, look at some movie screen shots. A combination of projected light and color sense of concise, looks very futuristic and design sense. But I think it should be interactive flat representative, remember 'Mission Impossible 4' which has a scene: Tom Cruise convertible coupe chase terrorists in sandstorm in Dubai, bringing the film climax. I was very impressed with this paragraph. In the chase began when the first officer of a beautiful woman with a projected on the windshield out of the navigation, seat speed chase and other relevant information and related operations begin, to Tom Cruise conductor. The last successful catch terrorists. Here you can see the interface is a visual representation of the projected light and color sense mainly very flat, but if it's not enough interaction and information show flat, then a half-day beauty spot Fujia also find the location, even at first glance I do not know how to operate this interface, then, Oh, do not talk about chasing terrorists, and estimated himself crazy out (here you can see a movie plot) Similarly, if a product you do not know what he wants to get the expression, but also We do not know how to use, point a long time could not find the information you are looking for the time, it is estimated now you have no patience, and less than a minute you will uninstall it. If the visual look better, then perhaps you can attract to stay a little longer, but eventually you will not be his loyal customers. Therefore, the importance of interaction and information flat flat self-evident. http://www.noteloop.com/kit/fui/ professional collect movies UI interface portion, interested students can look ==================== ====== dividing line, get ========================== first look at how flat we would be so fast. It is Because we demand environment is changing. Before, we did not ipad no smart phone, only pc, we only computer environment needs, so do not flatter flat did not seem more important to look at and now we have a wide range of intelligent devices, you need to switch at any time, each device Air Jordan 9 Retro on each scene, you can see from pc to various handheld devices trend is becoming evident. With the diversity and popularity of smart devices, interface easier to adapt to their needs change, it is clear that a flat interface is easier than the other style handle. Mobile Internet towards the need low profile, high performance, personalization and direction of development of high-quality user experience. We need to respond quickly to this trend. In fact, before 'flattening' of the word epidemic, we have been emphasizing ease of use and to create quality interactive user experience, and has been trying to do this talent. In fact, in my opinion, 'flattening' of the word, is a general concept of these design goals, can be very broad, it should be an inherent Air Jordan 6 design. Next, we'll see if there are ways to do what interactive flat. 1. Structure level reduction - Efficient literally start to understand the interaction of the 'flat', with the corresponding should be 'hierarchical structure', where I understand the interaction steps previously been emphasizing steps to streamline the interaction, like To a user with a minimum of steps to complete the task, apparently there is a flat hierarchy requirements, so the interactive steps and hierarchies are interrelated. We first understand what is under the hierarchy (Material Source: eico) can be seen from the figure out, this is a tree structure, the tree structure is called the link layer depth (z-axis), the bottom of the page total number of pages contained in the link is called the breadth (x-axis). Portrait (y-axis) in many cases are only one layer, put more are some of the news alerts and shortcuts. Take a look at pc side web interface (Taobao, for example), the bottom of the page is his home page review contains very rich, you can see the breadth of coverage from speaking is very large. Depth look at the shoes and bags accessories - the shoes - the shoes - the shoes of all types can be seen, web pages and more attention to the depth and width of balance. Take a look at the phone side, it is clear that if on the web directly to the structure to move the phone will not work, due to limitations of mobile devices, breadth Taobao phone main interface greatly weakened, depth of information more obvious. We can use the pc bread crumbs or various navigation paths Air Jordan 19 clearly showing the hierarchical structure, so that the user is not a complex hierarchical organization lost. However, limited display area, there is not enough place to put such a path, more often we can only back on a mobile device. So it also confirms the previously mentioned flat menacing trend. What can we do to reduce the structural level in the mobile terminal streamlines interaction steps. Summed up in the following ways, also welcome to participate in the discussion. 1) parallel to parallel information is displayed in a single interface, reducing the jump page. Here are the most typical example is Windows 8, before this what the weather / email ah, had to point to a specific application to see inside, but windows8 in the same interface will be able to show this information. Another example: Next day calendar which was by year, month, week, day of the presentation, click on the following time line content directly switch the current page, no jumps. 2) the shortcut to ios7 for example, in any of the interface can be as long as the slide up from the bottom of the exhaled a shortcut menu. What set the wifi and flashlight can be operated directly from inside the menu. In ios6 inside, if you need to set wifi, first to set up, in contrast to a wifi network in the selection steps: ios7: on the bottom of the slide ==== open wifiiso6: Click Settings to open wifi wifi === ==== select hierarchy The reduction in the layers of users do not have to set up inside to press the point, but also to improve the efficiency of the structure becomes clear. Example: Taobao Mobile Which shops wherever you see what baby, as long as the bottom right corner of the 'Amoy' can appear as a quick and Home navigation menu, do not back back back layer Nike Shoes by layer 3) which displays key information watercress movie ticketing process steps are: Select the movie === === select theater ticket seat selection in the 'Select cinema' this interface in addition to showing the name of the theater, but also shows the 'lowest' xx yuan, The remaining screenings and key information, and whether you can purchase these critical information, combined with the scene here consider the user since the point of the 'seat selection bought' For users that purchase should be very strong, so here shows, we can It allows the user to select the theater but also to see the lowest, not the one by one point looked into the theater, but also to speed up the purchase efficiency. 4) reduction point Example: ios7 off background programs, just use your fingers to gently slip away up a shut down after contrast ios6 long press the delete button appears in close to compare the steps one by one: iso7: Double-click the home === = slip delete iso6: Double-click the home ==== press application icon ===== click the Delete reduce press there is a very typical example is the Clear Of course, the point here is to draw attention to the sliding gestures, apparently there is no point Press the prompts to the obvious, so this type of slide gesture operation must be designed to nature, or the user can not find the point where I do not know how the operation will produce frustration and abandon the use. As can be seen from the above example reducing hierarchy, interactive step will be reduced, it will undoubtedly make use of user productivity is improved. Since the mobile terminal device itself limits, there is not enough space to show the path, if there is no clear hierarchy, which could mean a user is likely to get lost, even deeper into the information to find what they want, which When more should be done is to reduce the depth of information. 2. straightforward expression - is to make accurate white users start to use without pressure, I remember a product manager said, 'If your function does not allow users to understand at a glance, but also need to explain, then you fail to do this function ⋯⋯ 'approach can reduce the buttons and options that make use of more concise. Example: Shake shake shake, reflect the user's instinct, without any explanation, even the children know, as long as holding the phone shaking can achieve this function. Example: vine PK gif deft same segment recorded video applications, vine (above) closer to the real experience, when you press a finger into the middle of the screen when the progress bar began to run, when the finger off after the pause. if deft (above) is to be taken by clicking on the button, to control, but also automatic and manual points, buttons and options are many, seemingly function is perfect, in fact, the experience is not so good in fact, we can install a contrast experience . More Air Jordan 6 intuitive way of expression, so that users can more accurately experience, do not go for here in how to operate and troubled. 3. Information intuitive - Ordered Internet has is the information explosion era, from the inside to find what you want, especially now popular small-screen device, the result that we need to reduce the over-complicated interface design elements, make information more visual display. If you need less information, less functional, intuitive and very easy to do so, in fact, many products are not large and do things, this is a good trend. But in many cases, the situation we are faced with excessive product information, then how do we make information intuitive? A product manager said, 'classification! Classification! Categories! This is a product manager in determining the main function of the product architecture, unique for the user should do. Classification does not contribute to reduce the difficulty of use of the product, but it can help product and user awareness the world around. 'Designer course, you can, organize! Sort out! Use the Internet a lot of information in a clear and orderly consolidation, so that users can quickly find what you need based on your finishing clear classification. By finishing, we can find the essence of things, discover new perspectives, to see some deep in the surface of things. By finishing, the field of vision problem we will become more and more clear, and get a lot of new discoveries. Here on the topic of fact, there are a lot of consolidation, not specifically carried out, in particular books, 'Sato disabilities and super finishing technique', 'Sato disabilities and finishing operation Legend' Example: http: //hao.uisdc.com/ This is a designer of Web site navigation, classification is very clear, but also collected the designer used a variety of resources, including tools to download, design tutorials, color, creativity and much more, at least the design related stuff to help me organize together , and with it is also very convenient. What material must be found before the search around to find it. Including the most familiar site navigation hao123 Why white users like to use it because of sorting the information to make the Internet an orderly and intuitive, allowing users to quickly locate information on their own looking for. Clean and orderly, always fun to watch than the disorganized with timely information in the case of large, orderly environment in which to find it will be more convenient. The consistency between the use of multi-platform, and now users are accustomed to the use of multi-platform device in the multi-scene, once the user learn the interface of a part of the operation, they will soon know how in other places or other operating performance. 1. Functional consistency: Example: Taobao Mobile One day, I bought on Taobao one thing, there are quality problems the seller so I shot him a look, I was on the couch with Taobao phone, I looking for a long time at the interface can send pictures found no place to finally see the bottom right corner there, I am hopeful of opening, the result is expression. Hey, I had to turn on the computer, first with the pictures on the phone QQ spread to the computer, using their past ⋯⋯ Want to see my time is 22:17 at the time, I was already so do not want to open the computer, but there is no way to send screenshots! That helpless feeling, ah, you know! (I have not found a way is not made plans on the phone, kind of junior partner please tell me) 2. Seamless experience between the platforms of course, here Air Jordan 14 Retro in addition to data synchronization, another thing is to consider how to resolve multiple devices The cross-integration issues. Example: A time when using the Mac QQ, found in the choice of sending pictures, when actually you can choose from iphone album, so I feel this experience is very good, I no longer need to board a QQ on the phone, the computer board QQ came a pass to go. After landing QQ support multi-device, multi-device performance consistency between cross-integration of the most representative is a feature phone QQ on: 'The transfer files to my computer', upload photos or something, no longer have to board 2 QQ in two different devices uploaded to pass go. Landing QQ can get the same on multiple devices. Therefore, to ensure consistency is very important to flatten, reduce learning costs and improve efficiency. 5. Other responses and feedback, I think should count flat in the more important point, the user interface should be reminded what happened, so that users understand the feedback information, the user can go wrong when they clearly know how to do. Otherwise, the user in the case of a loss, they tend to choose to leave. Summary: Effective organize information and reduce the level of structure, function, and so are the straightforward expression of a variety of means to make interactive flat. Interactive flat design, in fact, is a concept that is an inherent design ideas, aimed at energy demand in the case of multiple changes in the environment, still can improve a method of the user experience. The pursuit of 'flat' is our design goal. Whether from the visual, or should be based on the actual situation of the product / scene and a detailed analysis from the user interaction in order to achieve the goal of true flat to provide high-quality user experience. Visual designer says 'Interactive flat, and visual go do flat ......' interaction designer said, 'Information Flat and interactive flat go do ......' product manager 'product positioning flat, and information do go flat ...... '...... you think of? Welcome to discuss visual articles: http:? //cdc.tencent.com/ P = 7844 (This article comes from Tencent CDC Blog, please indicate the source reproduced)