All-round grooming: How to become a mobile end UI designer

The UI design of the mobile end has its own set of design rules and constraints. The continuous addition of new technologies has contributed to the rapid growth of the mobile platform, while the mobile-side UI design is not the same as the traditional flat poster/web design. So what kind of skills are needed to become a qualified mobile-end UI designer and what kind of nirvana will it take?

　　Part 1 challenges and restrictions

Every media has its limitations. Even on the mobile side of this platform full of opportunities, freedom and creativity, there are many problems to be solved, and unavoidable limitations.

Fragmented Mobile End

Today, the number of intelligent machines in circulation has been numerous, different intelligent terminals not only vary in size, and because the difference in resolution makes the pixel density of the screen is also very different, to consider, these terminal input mechanism, screen ratio, screen direction will affect the mobile end of the UI design.

The web design on the mobile side can guarantee the browsing experience under different screens with the help of the response design, compared with the mobile end of the app design is relatively lack of liquidity. Therefore, as the mobile end of the UI designer, you still need to consider the differences caused by the screen layout design and user experience changes.

Split Operating system platform

At present, the three major mobile operating systems are ios,android and Windows Phone (market share is small, basically marginalized in the country), each operating system has its own set of design specifications, interactive mode, program interface, and with the operating system version of the update, These things also have their own changes. The most typical of these is the version split of the Android operating system, which has yet to be bridged, which involves the differences in operating system versions, and the bizarre compatibility problems created by the customization of the Android developers (which have been crying out for countless times in the toilet). iOS has also been upgraded from 6.0 to 7.0 and has experienced a long period of overuse, and the design style and compatibility problems of the two major versions have also affected developers. Windows Phone upgrades from 7 to 8 there's a lot of pain. I do not repeat here, that the past and Microsoft executives were submerged scenes I really do not want to recall.

Even the three platforms in their respective platform interaction design has a high degree of unification, System version splitting, operating system differences and the impact of customization is not allowed to developers and designers ignore.

Performance

The way in which you design and build an app will directly affect its performance. In other words, the device installed in the phone if the design is good can your phone standby for a day and a half, and if one of the program design problems, you need to go out with a mobile power. Some unnecessary transitions animations may allow your CPU to perform intensive operations, a problematic JS code may cost your browser more than the usual number of times the electricity. Perhaps the Galaxy S5 has been able to run an application smoothly this year, but the Galaxy Nexus 2 years ago may have been stuck when it was open for application. Overall, design and development, will affect the performance of the app, or even the mobile phone's endurance (some of the domestic mobile phone users with the developer crying dizzy in the toilet).

Development and cost control

There are many applications that are cool and novel at the beginning of the idea, but that doesn't mean it can be easily achieved. The design and development of the application will directly determine whether it can be achieved before the advent of deadline. If we fail to recognize the development costs of an application, the burden on the developer will multiply, and the future development of the application is a curse.

　　Part 2 abandoning mind-set

When we were just beginning to learn design and development, the digital age was just beginning, and our understanding of emerging things was immature. School education and the actual design and development of the "time difference", so many designers to the digital Internet awareness slightly "static", or even form a kind of thinking customization, for mobile internet also know very little. In this era of information explosion, intense competition catalyzed by the mobile Internet is a frightening pace of evolution, advancing, which makes designers need to keep up with the pace of development, at any time to upgrade their awareness of the Internet.

The moving end is not a canvas

There is a huge difference between the mobile end design and the graphic design, and it is no longer a flat canvas. I suspect PS and AI are not enough to help designers complete the transition from plane to mobile, even though PS and AI have helped designers accomplish countless feats over the past 20 years. At present, we still need to use them to draw more UI and icons under different screen sizes, but we need to use more other software to show the opposite side of the moving end, such as using AE to draw the dynamic effect.

From conception screen layout to considering interface transformation

Indeed, when it comes to mobile-side UI design, it is not enough to consider the screen layout alone. Like Facebook Paper, Yahoo weather, Weather channl such a high-quality mobile app is like we've shown how the interface animation can make a UI interface work. And just launched the Android L used by the material design is more in the seemingly ordinary static interface, hidden a series of you can not stop the excessive effect.

The interaction between the interface transitions, in the past only to win a smile, today is moving towards the mainstream, as the mobile end of the user experience core. It is becoming an important element of interaction and interface, giving the interface rhythm and vitality. Dynamic effect not only presents the movement of the process, but also can show space, level, change, on the basis of the interface structure for users to bring a different experience.

Throw your "designer pie" aside.

You don't need to make the interface unique or original, especially if you redesign all the interfaces for uniqueness, and then make the whole product unique and risk-laden. In many cases, persisting in the use of native UI elements and patterns is an important guarantee for applications to ship on time. Rather than forcing a unique, original design, it is often more appropriate to create a simple and efficient interactive interface that creates real brand value.

The real app is no worse than the designer's conceptual design.

Many designers like to behance and dribbble such sites to find inspiration, although there are very good quality design works, but if you are not an experienced mobile UI designers, you may be misled by these works. Many of these designs are just a high-fidelity demo that has never been implemented, and when you are planning to design an interface, some of these designs may affect your thinking. So, you might as well learn from the successful apps that have been online. You will learn a wealth of nutrients and see the booming design trends that will help you understand what is worth learning in the marketplace and user-validated case.

　　Part 3 Learning new skills

Understanding the Platform

Just as a web designer needs to know about HTML/CSS, you should understand the architecture of mobile-end apps as a mobile-end UI designer. First, the mobile end of the development of language and web design is not the same, the various platforms have their own programming language and interface, the composition of the interface can not use CSS and tags to achieve.

You need to delve into the official development documentation, understand the composition of the app, how to compile it, how to publish it, and understand the rules of the design. These things not only relate to your application development, but also affect the stability of the system, the length of the battery and many other factors. As a mobile-end UI designer, it's not enough for you to understand design alone. Of course, this is good for your career in the long run.

Understanding the technical makeup of the mobile end

It is not enough to understand the basic features of a platform. Next you need to understand its related technical composition: Location Service (Wifi,gps etc.), Bluetooth (low-power Bluetooth technology), signal, front and rear camera, microphone, gyroscope, position sensor, acceleration sensor, fingerprint scanner (IPhone 5s), eye tracking technology, speech recognition, face recognition, Wait, wait. Behind each new technology is the application of more possibilities, interactive design, usage experiences, and even business models.

Explore the development potential of local UI components

There is always a large number of local UI components in each mobile operating system, and they have great degrees of freedom to make customization easier for you. You need to know exactly what their characteristics are (size, size, function), and you can save a lot of working time for the developers you work with.

Understand the workflow of the mobile end

Install the SDK and run it to understand the mobile development framework, such as Tubymotion, Xamarin, titanium. Familiarize yourself with the integrated development environment, which includes everything you need for mobile development.

Understanding the interface mode of the mobile end

There are similarities between the three mobile platforms, but in the deep exploration of their interaction design, they will find great differences in ideas. As a designer, you need to understand where these differences are and how they are embodied in the actual case.

Instead of focusing on a single platform, the three platforms need to be thoroughly experienced, at least for a minimum of six months at a day. In the process, feel the difference, and keep a screenshot of what you think is important, representative, and worth keeping records. As a fanatical fan of a single platform, you are not good at mobile-end UI designers.

Document and explain your UI design

Given that screenshots are not sufficient to represent the full range of UI features, you need to learn to record the different state of the interface, change the process, animate the transitions, and learn how to record the interface's feedback for different situations.

Implementing Lean UX Design in design phase

A modern designer should be a designer with strategic vision. Your goal cannot be limited to making a nice interface, you should make your design work together with the team to meet the needs of the project. Insight into the deep needs of users, and can be quickly feedback to the design. Save the design work and attach a detailed description to ensure that all designs are consistent with the core concepts and are consistent with the needs of the users.

Agile UX Design in the development phase

You can't just give the high-fidelity model to the developers, because new requirements are constantly being raised during the development process. There will always be inadequate consideration of the situation, the need to complement the development phase, the designer needs to respond quickly. So, at this stage, the designer really needs to sit next to the developer and deal with the unexpected. Make sure that developers do not need to supplement UX details or look for a designer when they meet new requirements.

　　Part 4 tips on web design for mobile end

Response-Type Design

On the mobile side, response design is not a universal solution. Sometimes it works very well, but at times it's not. It is your responsibility to consider when to adopt a specific solution and when to do a responsive design.

Use CSS and JS with care

Yes, CSS animations, gradients, shadows are awesome and easy to implement. The Parallax Web page looks cool too, and many designers are interested in it. But these elements are very resource-intensive, and they can have a heavy load on the mobile browser, which in turn affects battery endurance. Moderate control of CSS effects and JS dynamic is very necessary. Even though browsers on low performance phones can support the CSS3 selector Well, performance bottlenecks can make the overall experience very poor.

Use the right tools to do the right thing

This is not a very specific list, but you can find a lot of good tools to help you do different things. Some of them are free and part of the Mac platform.

　　Part 5 All of this is out of date?

That's right, but it's not right. At present, the development of mobile end development is very rapid, the design trend is changing, smart home appliances, the Internet of Things is coming, the corresponding sensor technology and mobile applications will also bring more challenges. As a mobile-end UI designer, we have to learn too much, and accordingly, opportunities are coming head-on.