How Aviasales Material Design Switched
In June 2014, at Google's I / O conference, along with the new version of the Android operating system 5, Google introduced a whole design philosophy from Google - Material Design.
Developing the previous Android version of Aviasales, we are not all "listened" to Google. Now, with the release of Android 5, it was decided to try out new guidelines, and I’ll tell you about our impressions below.
')
Whatever may sound, but Material Design is not just a compilation of Do's and Don'ts, it is its own system, its own philosophy. Material Design has its own physics, and when designing a design, it is necessary to take into account how each screen will look in 3D, how tall each element is, and how the shadow will look, taking into account the light falling on the element.
At the very beginning, Google’s guidelines contradicted the applications that came out of it. This brought discord to the workflow, and we decided how to act.
We started with the main screens, and the most modern Floating Action Button, as bequeathed by Google, was assigned the main function of the application - search for tickets. Here is just one problem: there is a button, but there are no views in the Android SDK, we wrote it ourselves.
Although we are trying to make the application more convenient, the process of buying tickets cannot be changed, it happens through WebView on the side of contractors who do not always care about their website being conveniently used on mobile platforms. The only thing that in the new Android sweetened this pill - WebView has finally been untied from the system. It will be updated independently. So, there are less problems when buying tickets on the websites of our partners.
One of the key features of Material Design was the adaptation for different versions of the operating system, for which Google including provided a whole group of Support Library. A striking example is the V7 Cardview Library, which, however, did not greatly facilitate the adaptation to the old versions of Android, because in L and before L Cardview will have different indents from the edges of the screen. We solved this problem with setUseCompatPadding, but we ran into another: in older versions of Android, Cardview did not round the corners of the content inside it, but instead indents it, inserting the image into a radius. One of the surface solutions to this problem is to round the corners of the picture itself, which we enter in Cardview, but beware: this solution will not be suitable for all cases.
Despite a good attempt by Google to allow developers to adapt their applications for different OS versions, a lot of fun stuff in “stuff” such as Ripple Effect are not supported in earlier versions, while our application has a lot of users with API versions below . In a bunch of Look & Feel, users of the four, by and large, will receive only Look - this is the main message of the compatibility libraries from Google.
With all our enthusiasm for new guidelines, we did not forget about the new features of the application. In the new version, we have completely revised the concept of the price calendar. Now it more clearly shows the cost of tickets for the nearest dates and allows you to see the difference between direct flights and flights with transfers.
For the convenience of users, we chose the best (fast and cheap) tickets and put them in a separate tab in the issue, which was made possible by borrowing Tapbar from the Google I / O application: |
Another innovation was the appearance in the Android version of additional information about the flight, which is a summary statistics:
We fully animated the appearance of the search form on the main screen and the Floating Action Button at the time of creating a subscription to the direction of interest to the user:
Unfortunately, we did not have time to work out all the animations in detail, so to some extent we are forced to use the Google approach, which demonstrates new animations with each fresh release of the application.
Mark, designer Aviasales
Immediately after the announcement of Google, I asked the management for two days to sternly read and understand the basic principles of the new ecosystem. I came to the office early in the morning and for two days from 8 to 23 sat and took apart every little thing. I must say that I really mastered the material well and got to work. For me it was a revelation that the platform, which has always been lagging behind (subjectively by the standards of design and objectively in-app'am), made a serious bid for its visual presentation.
The greatest joy was Meaningful Transitions (transition animations), which I was not allowed to implement due to the release dates. Now the platform itself has given us the green light on cool interface solutions and animation.
This was my first mistake. The desire to quickly make the animation led to the fact that at first we implemented not so important things, and only then we started working out the details of the interface. Immediately we were faced with the problem of the lack of any support from the Corporation of Good, and our developers, suffering, were implementing animations by hand. This is cool, as pumping on a personal level, but we make the product and the agreed release dates must be respected.
The second wrong step, I subjectively consider strict adherence to Google recommendations. We passionately observed the guidelines and did everything according to them, but the result seemed to us a bit bland. The point is not that we wanted fun, just in fact it is not as cute as the pictures from Google.
In parallel with everything, we looked at examples of applications from Google and often sounded something like: “Why so? After all, you yourself teach another. " There have been many discussions and memes on the Internet about this. In principle, you can understand the situation: completely new guides, it is difficult to immediately take into account all the points and do everything correctly. But on the other hand, we, as developers, have suffered with a constant shortage of material and the declared capabilities of the platform.
What happened in the end: a new look at how you can work with interfaces. Google gave a decent response from Apple, and I personally know a lot of people who switched from the iPhone to, say, the Nexus 5. It's great that the opportunity has appeared to implement interesting animations without losing color. But there is one big problem: old devices. People with top models simply do not realize that there are a lot of users in the world with very old phones. We, as developers, see the real picture: there are many such devices, and we are obliged to support them. It is painful and sad, often you want to cry in the corner, but so far nothing can be done about it. It is quite natural that not everyone is after technology.
In general, the release took place, and we received a positive response from users, but there is still a lot of work :)
Igor, Android developer Aviasales:
I liked the fact that Google clearly set all indents, font sizes, colors, etc. etc., which need to be used in the application.
- Of the minuses: there is a certain number of new interface elements (bottom sheet, snackbar, floating button), which are actively recommended in guidelines, but are absent in the SDK. The pain is alleviated a little by the fact that you can find libraries with these elements on the Internet.
- At first, they wrote as if blindly, since Android L came out much later than the guidelines to it, and it was not completely clear what possibilities Google would provide, and what would have to be written by ourselves. There was only a preview version of Android L, for which there was little that was clear.
Andrei, Android developer Aviasales
- In the end, not everything is so bad - to support 4/5 has become much easier than 2/4. To developers who are trying to support 2/4/5, I strongly recommend joining the minSdkVersion14 union.
Impressions of the new design philosophy of Google, if you do not touch on some of the nuances, are positive, because Google realized that the design is an integral part of the application, as well as the technical component. Having released detailed guidelines, they simplified the interaction between the team by building a kind of bridge between the designer and the developers.
We believe that Material Design is a huge leap towards quality content on Google Play.
Our previous posts:
" And we have the SDK, and you?
BUT
Developing the previous Android version of Aviasales, we are not all "listened" to Google. Now, with the release of Android 5, it was decided to try out new guidelines, and I’ll tell you about our impressions below.
')
First impressions
Whatever may sound, but Material Design is not just a compilation of Do's and Don'ts, it is its own system, its own philosophy. Material Design has its own physics, and when designing a design, it is necessary to take into account how each screen will look in 3D, how tall each element is, and how the shadow will look, taking into account the light falling on the element.
At the very beginning, Google’s guidelines contradicted the applications that came out of it. This brought discord to the workflow, and we decided how to act.
We started with the main screens, and the most modern Floating Action Button, as bequeathed by Google, was assigned the main function of the application - search for tickets. Here is just one problem: there is a button, but there are no views in the Android SDK, we wrote it ourselves.
Although we are trying to make the application more convenient, the process of buying tickets cannot be changed, it happens through WebView on the side of contractors who do not always care about their website being conveniently used on mobile platforms. The only thing that in the new Android sweetened this pill - WebView has finally been untied from the system. It will be updated independently. So, there are less problems when buying tickets on the websites of our partners.
One of the key features of Material Design was the adaptation for different versions of the operating system, for which Google including provided a whole group of Support Library. A striking example is the V7 Cardview Library, which, however, did not greatly facilitate the adaptation to the old versions of Android, because in L and before L Cardview will have different indents from the edges of the screen. We solved this problem with setUseCompatPadding, but we ran into another: in older versions of Android, Cardview did not round the corners of the content inside it, but instead indents it, inserting the image into a radius. One of the surface solutions to this problem is to round the corners of the picture itself, which we enter in Cardview, but beware: this solution will not be suitable for all cases.
Despite a good attempt by Google to allow developers to adapt their applications for different OS versions, a lot of fun stuff in “stuff” such as Ripple Effect are not supported in earlier versions, while our application has a lot of users with API versions below . In a bunch of Look & Feel, users of the four, by and large, will receive only Look - this is the main message of the compatibility libraries from Google.
New services
With all our enthusiasm for new guidelines, we did not forget about the new features of the application. In the new version, we have completely revised the concept of the price calendar. Now it more clearly shows the cost of tickets for the nearest dates and allows you to see the difference between direct flights and flights with transfers.
For the convenience of users, we chose the best (fast and cheap) tickets and put them in a separate tab in the issue, which was made possible by borrowing Tapbar from the Google I / O application: |
Another innovation was the appearance in the Android version of additional information about the flight, which is a summary statistics:
- what planes perform this flight;
- average delay of poisoning;
- the percentage of flights arriving on time;
- rating punctuality route.
Animations
We fully animated the appearance of the search form on the main screen and the Floating Action Button at the time of creating a subscription to the direction of interest to the user:Unfortunately, we did not have time to work out all the animations in detail, so to some extent we are forced to use the Google approach, which demonstrates new animations with each fresh release of the application.
Impressions of designers and developers
Mark, designer Aviasales
Immediately after the announcement of Google, I asked the management for two days to sternly read and understand the basic principles of the new ecosystem. I came to the office early in the morning and for two days from 8 to 23 sat and took apart every little thing. I must say that I really mastered the material well and got to work. For me it was a revelation that the platform, which has always been lagging behind (subjectively by the standards of design and objectively in-app'am), made a serious bid for its visual presentation. The greatest joy was Meaningful Transitions (transition animations), which I was not allowed to implement due to the release dates. Now the platform itself has given us the green light on cool interface solutions and animation.
This was my first mistake. The desire to quickly make the animation led to the fact that at first we implemented not so important things, and only then we started working out the details of the interface. Immediately we were faced with the problem of the lack of any support from the Corporation of Good, and our developers, suffering, were implementing animations by hand. This is cool, as pumping on a personal level, but we make the product and the agreed release dates must be respected.
The second wrong step, I subjectively consider strict adherence to Google recommendations. We passionately observed the guidelines and did everything according to them, but the result seemed to us a bit bland. The point is not that we wanted fun, just in fact it is not as cute as the pictures from Google.
In parallel with everything, we looked at examples of applications from Google and often sounded something like: “Why so? After all, you yourself teach another. " There have been many discussions and memes on the Internet about this. In principle, you can understand the situation: completely new guides, it is difficult to immediately take into account all the points and do everything correctly. But on the other hand, we, as developers, have suffered with a constant shortage of material and the declared capabilities of the platform.
What happened in the end: a new look at how you can work with interfaces. Google gave a decent response from Apple, and I personally know a lot of people who switched from the iPhone to, say, the Nexus 5. It's great that the opportunity has appeared to implement interesting animations without losing color. But there is one big problem: old devices. People with top models simply do not realize that there are a lot of users in the world with very old phones. We, as developers, see the real picture: there are many such devices, and we are obliged to support them. It is painful and sad, often you want to cry in the corner, but so far nothing can be done about it. It is quite natural that not everyone is after technology.
In general, the release took place, and we received a positive response from users, but there is still a lot of work :)
Igor, Android developer Aviasales:I liked the fact that Google clearly set all indents, font sizes, colors, etc. etc., which need to be used in the application.
- Of the minuses: there is a certain number of new interface elements (bottom sheet, snackbar, floating button), which are actively recommended in guidelines, but are absent in the SDK. The pain is alleviated a little by the fact that you can find libraries with these elements on the Internet.
- At first, they wrote as if blindly, since Android L came out much later than the guidelines to it, and it was not completely clear what possibilities Google would provide, and what would have to be written by ourselves. There was only a preview version of Android L, for which there was little that was clear.
Andrei, Android developer Aviasales- In the end, not everything is so bad - to support 4/5 has become much easier than 2/4. To developers who are trying to support 2/4/5, I strongly recommend joining the minSdkVersion14 union.
Instead of output
Impressions of the new design philosophy of Google, if you do not touch on some of the nuances, are positive, because Google realized that the design is an integral part of the application, as well as the technical component. Having released detailed guidelines, they simplified the interaction between the team by building a kind of bridge between the designer and the developers.
We believe that Material Design is a huge leap towards quality content on Google Play.
Our previous posts:
" And we have the SDK, and you?
BUT
Source: https://habr.com/ru/post/257063/
All Articles