A Look Back at 2017(III) – Top 8 Mobile APP Design Trend

Mobile APP design trend has undergone many changes in 2017. Artificial Intelligence, Chat Interface, Responsive Design, Virtual Reality (VR) and Augmented Reality (AR) keep designers constantly confronted with new challenges.

Research shows that users spend an average of 158 minutes per day on smartphones and tablets, 127 minutes of which is consumed in various APPs. It’s an indisputable fact that the development of mobile APP is rapid. As we continue to absorb new things and master the new trend, we also need to confirm whether these App UI design trends have been verified. The following are the most influential trends for mobile App in 2017:

1. Card View

As mobile devices become more and more important in the Internet, how to make the boundaries of the interface between the mobile and the desktop more ambiguous and the user experience more traceless are the problems that the designers urgently need to solve. Card view is a good solution to this problem.

As a carrier of interactive information, the card provides fast and relevant information in a condensed form. Beautifully designed card view can quickly capture the user’s eye, fully adapt to the responsive web and has high readability.

Organizing and arranging content flexibly on a smaller screen is invaluable. The card provides an all-in-one solution for text, images and video across multiple media content. So far, App Store, Facebook, Google and Twitter have been completed the iterative update of the card design, I believe this trend will remain strong in 2018.

2. Micro Interaction

From the beginning of 2016, micro-interaction has been a hot topic. And in this review of 2017, we still can not avoid the topic of micro-interaction.

In the mobile app, micro-interaction presented on the small screen plays a crucial role in user experience and interface. For the user experience, micro-interaction provides users with intuitive and user-friendly feedback and can convey some subtle state and a sense of anticipation.

The reason why micro-interaction works are because it raises the original desire of people to always want more information. Users can instantly get visual feedback after an operation, which will make people full of desire to continue operation. Micro-interaction can also be used to guide the user to the correct operation.

Specifically, smart designers use interesting interactions such as loading animations, smooth icon switching to attract users’ attention. In the long run, micro-interaction will become a more rich topic, it is worth designers to continuously explore and innovate.

3. Long scrolling and parallax

Long scrolling is a great way to convert content from desktop to mobile, helping users get a lot of uninterrupted access to one-way swipes.

However, the long scrolling rolling has been very popular, it’s more worth to mention parallax scrolling. The principle of parallax is to allow foreground and background to scroll at different speeds, creating a deep visual perception. On this basis, many designers have begun to try parallax scrolling of multi-graphical elements, presenting a complete story just by scroll and graphics.

The appropriate scrolling effect will not only be able to raise efficiency and hierarchically transfer content and information but also elegantly and smoothly improve the sense of sophistication of the product itself.

This site is the best case of long-range parallax effects and you can find out more about it at http://everylastdrop.co.uk

4. Full-screen video

Vision is always the most perceptive of people. Big banner image has become the mainstream design trend in recent years, and the success of the big image and the development of bandwidth paved the way for full-screen immersive video, the appearance of dynamic video in product design gets much common.

Huge, dynamic and beautiful visual perception is actually in line with the pursuit of natural beauty of mankind itself, immersive video has much value to app home page so that the background layout can be more gorgeous.

5. Half-flat design

Flat style has occupied half of the design market. Under the influence of the card view, in order to highlight content and perception, flat design has become more three-dimensional and multi-dimensional by using a lot of shadows and contrast.

The smooth shadow enhances the depth and complexity of the interface without any conflict with the original style. It is believed that the flat style will not stop at the current overall style, and more modes will be incorporated to optimize and innovate continuously.

6. Augmented Reality

With the launch of Animoji on the iPhone X, 2017 will be the year of AR technology in mobile apps. With technological advances, this year’s AR products have made tremendous breakthroughs in information integration, real-time interaction and precise positioning. In addition, AR is not only used for children’s science and education cognition nowadays but also has been greatly enriched in the field of mobile product application. Now it has covered fields such as military, medical, building, education, engineering, film and entertainment.

What worth mentioning is the IKEA Catalog APP, as early as two years IKEA has begun attempts on the field of AR, limited to the then technical, the experience was relatively poor at that time. At present, this App has been able to present the IKEA products in 3D in a more accurate manner. With the hand-held mobile phone rotation angle, the proportion of virtual furniture can appear in any corner of the house, and the purchasing experience of furniture has been greatly improved.

7. Gradient color

The gradual change of colors has gradually come into view since Instagram logo changes. The reason is that the flattening style is extremely easy to cause homogeneity, and the design language that pursues visual richness is beginning to return. Except the semi-flat style mentioned above, visually intriguing gradient color can firmly grasp the user’s eye, and simple graphics and high saturation gradient color can strike the right balance between design convenience and visual component sense.

Accurate use of color is conducive to arousing the user’s emotions and create a personalized product that allows users to perceive your product through color.

8. Prototyping

As the user experience and interface design continue to be integrative, the prototyping design plays a more important role in the app design. High efficiency and visualization are the industry’s potential demand for prototype design this year. Prototype design tools are always under optimization, for example, Mockplus latest version 3.2 supports fast data auto-fill, exports the UI flow of a project with only one click, accelerating efficiency of prototyping on the mobile, thereby improving the overall workflow, leaving more time to think about the user experience.

Summary

2017 is a year of transition. On the one hand, the development of AI, AR and VR technologies powers app design. There are numerous unknown possibilities and opportunities in the future. On the other hand, the basic people-oriented principle of design will continue to guide app design to a correct direction. Regardless of the mobile app design trend, designers have to stick to their own ideas of judgment, resulting in sustained learning and innovation.

Top 9 UI Design Trends for Mobile Apps in 2018

Mobile app User Interface design trends keep changing based on varying user needs. However, that does not mean UI design trends for mobile apps in 2018 could not be predicted. Actually, after carefully analyzing UI design trends and innovations in the past few years, we could find some laws behind and predict the possible trends that will also continue into the following 2018. Hence, here we will share top 9 UI design trends of mobile App for you in 2018:

1). Overlapping effects

The overlapping of fonts, graphics and colors cannot only make UI designs more eye-catching and distinctive, but also create a sense of space. And that’s also why overlapping of different mobile app UI design elements has been widely used by designers in recent years.

Moreover, in some cases, the overlapping of the same elements, combining with shadows, will also make the whole mobile app interface designs more fantasy and impressive.

Hence, the overlapping of different elements in mobile application UX design will also be a trend in 2018.

2). Color Gradients

In last few years, rising numbers of designers adopt color gradients in their design works when they are trying to design logos, buttons and backgrounds for mobile app interfaces. Why? The answer is simple. Even when you have chosen a single color, you can also show a rich sense of hierarchy and draw a beautiful picture while combing it with color gradients and different graphics.

Therefore, the color gradients will not only be popular throughout 2017, but also will continue in 2018.

3). Opacity

The same components can have different effects after you have adjusted or set their transparency. So, while designing phone app interfaces, setting the opacity of different components is a nice way to work out an excellent design work.

Moreover, the transparency settings for different colors or graphics can also create a colorful glass texture for app interface components. And that’s why designers widely use this method into mobile app logo designs.

Overall, no matter how you will add opacity effects to UI design works for mobile apps, setting transparency of different components will have a definite rise in popularity for the next year.

4). Simple curves and geometries

In comparison with a complicated and changeable UI design style, more and more designers have adopted a simpler and more natural design style in mobile app UI design. For example, in comparison with a phone app interfaces covered with various colors, graphics, buttons, pictures, animations and more complicated elements, a phone interface with simple curves, geometries and buttons could be more effective for people to focus on the major functions and features of a mobile app.

So, this way will also be trending all the way across 2018.

5). Strong color or font contrast for better readability

Strong color or font contrast could also help designers work out an excellent UI design to attract user attention. For example, adding fonts in different styles, types, sizes or orders can also deliver a sense of hierarchy and space. And color in different types and styles also create sharp contrasts and make entire designs more colorful and eye-catching.

6). Custom illustration interfaces

In 2017, custom illustration also plays an important role in mobile app UI design and will also surely be popular in 2018. The mobile application interfaces with different styles of illustrations, like hand-drawing, simple style, paper-cut style and famous painting style illustrations, can not only make applications more interesting and distinctive, but also give mobile apps personalities and make them more impressive for app users.

7). Functional animations and interactions

Adding animations or interactions to icons, fonts, photos and buttons of a mobile UI interface always has a positive impact on the app users and give users more pleasant experiences. And this trend will also continue in the following 2018.

Moreover, it is noteworthy that micro-interaction, which is initially introduced and highly recommended by Dan Saffer, will also be continuously developed and used by designers in the coming 2018.

Micro-interactions, which mean to add more interaction designs for some details of mobile app interfaces, allow users to communicate with apps easily and also get feedback soon. That is definitely a good trend which designers should follow to complete their mobile app UI design.

8). Voice-activated interfaces

Voice-activated interfaces of mobile apps simplify the operations of users. Just like using Siri, you can easily start or log in a voice-activated mobile app with voice orders instead of clicking any button or entering any password. Moreover, in 2017, most mobile apps with voice ordering services also finally became the most popular apps over the internet. So, voice-activated mobile apps will also be continuously popular in 2018.

Of course, except voice-activated interfaces, fingerprint-activated interfaces will play an important role in the mobile app interface designs in the future.

9). Mixing different trends will also be a trend in 2018

In actual design cases, designers will not only use one method mentioned above to complete their app UI designs. Oppositely, they will often adopt two, three or more methods, like overlapping effects, color gradients, functional animations and color contrasts, etc, together to get much better and unexpected effects.

Hence, mixing different trends in mobile app UI design will also be a trend in 2018.

Wrap up

Mobile app UI designs are as complicated and changeable as user needs. So, no matter whether these top 9 UI design trends for mobile applications will really gain their era in the upcoming 2018, as a UI designer, you are always supposed to stay innovative and creative all the time, grasp user needs constantly and combine new scientific and technological achievements timely. And then, it will not be hard for you to complete a mobile app UI design with distinctive interfaces and good user experiences.

8 Excellent Mobile First Design Examples for Designer Inspiration

In 2011, Luke Wroblewski has devised a concept of mobile first design. This was undoubtedly a new design principle that broke the industry’s conventions at that time. While in the current Internet era, it has been totally accepted and lots of excellent mobile first design examples emerged. It has been proved that people or business who follow this principle to make the best mobile first design website, he will be the winner of the market and opportunities. So, that’s easy to see how important of the mobile first design for business and designers to make products.

The redesign of YouTube in 2017 has already embodied the authority of mobile first design. Material Design reflects the “desktop version is a subordinate of mobile version”. Which just corresponded to Nader’s mobile first concept who is the current CEO of Microsoft.

There is a most common explanation for the current PC and mobile design. That is, previously mobile version was a reduced desktop page, while the current desktop version is an enlarged mobile app. So, I listed 8 excellent mobile first design examples for your case study and inspiration.

1. YouTube

What attractive in design: Blank for button and text display, Night mode

To some degree, the Material Design language for the YouTube Desktop Web Edition also reflects the preference for mobile devices. So that’s reasonable to adopt the responsive design. So there is no doubt that the blank for buttons and text display is to adapt to the user habit on small-screen touch mobile devices.

The new night mode also shows its surrender to mobile devices. The interface of the desktop version is the white background. For the mobile device, it’s better to use the screen yellow in night-light mode, rather than the black and white background. All light removed, small screen, so the best method is to reduce the brightness to comfort users’ eyes.

2. Apple

What attractive in design: Convenient scroll navigation

A user experience survey published by the Nielson/Norman Group shows that hiding navigation (like hamburger navigation) reduces content discoverability by 21% and increases navigation by 2 seconds on average. The Apple mobile website has a very good content layout. So users do not need to use the navigation button but scroll down the page to access information, very easy and convenient. The shopping bag icon is usually necessary and clear for user’s first glance for shopping. Furthermore, if no information wanted after browsing the page, you can search the desired information in the bottom navigation.

3. Pitchfork

What attractive in design: Thumb design

Although there are many studies of thumbnail areas, many sites and applications out the navigation on the top of the screen. However, if you are careful enough, you will notice that the larger the phone is, the harder it is for the user to access the content on the outer edge of the screen. By contrast, Pitchfork puts the main navigation bar at the bottom of the screen, where the thumb touches most easily. With the growing number of mobile devices, this design type should be the future trend.

4. Typeform

What attractive in design: Large Menu Button – Great for touchscreens

Typeform has a beautiful desktop design with a simple copy, high-definition video, animation and other design elements. But the complex design components are not user-friendly to mobile users, such as video and animation, which can significantly affect page load times. As a result, they cut down many unnecessary design elements on the mobile website page but retained the large menu buttons that work well on mobile devices, simplifying the overall mobile experience with simplicity and sophistication.

5. Airbnb

What attractive in design: Card Design

Card design makes it easier for users and information to connect with each other for a limited time. This is why Google chose card design as their design standard. Other Internet companies such as Airbnb have gradually accepted and adopted this approach. Each card’s message is concise and effective and usually consists of a title, picture, graphic, or profile text. This design gives users enough information and makes it easy for them to decide if they want to go deeper and learn more.

6. Smashing Magazine

What attractive in design: Emphasis on users, rational use of screen space optimization

Data show that more and more Internet users choose to stop the content they do not want, especially mobile users in recent years. Constant navigation settings, full-screen advertising, excessive marketing terms, and these do not give users a good user experience. If you want to push user ads or lead users to continue reading, you can push selectively based on what users are viewing. That’s why the strategic layout of the content is easier for users to click. If you simply break the user experience or get them to jump pages in order to get profit, you will lose users gradually, and the profit will decrease as users lose.

7. Facebook

What attractive in design: Effective animation

The animations on the web pages help users to understand the current image vividly and give the user experience more expressiveness and humanity than to entertain the public. For example, MailChimp uses the Hi-five animation as a greeting after a successful mailing-out, a mini-animation of Twitter’s forwarding or liking of functions, and a vivid expression package like Facebook. But if you want to animate on the page, please make sure it is elegant and decent.

8. Evernote

What attractive in design: Clean and fresh mobile UI interface

Evernote mainly provides note storage services which allow users to access information on all platform devices. So Evernote must get the right mobile user experience. Like the desktop version of the web design, Evernote’s mobile website design keeps the same UI design clean and fresh. In addition, the right CTA button on the web is very useful to the user.

“Web design first, and then transplant to mobile design,” this conventional model is no longer applicable today. Mobility is bound to be the design and development trend for the Internet industry in the future. Therefore, mobile first website design will become a new trend, even if this concept has existed for several years.

Why is the principle of mobile first design so important?

1. According to the Global Internet Report, up to 2016, the number of smart-phone users in worldwide has reached 2.8 billion.

2. Meanwhile, people spend more and more time on the mobile network every day.

3. As early as 2012, sales of smart-phones surpassed PC sales worldwide.

The explosive growth of mobile demand requires designers to pay more attention to the mobile version and follow the mobile design first principles in product design. So I believe that these reasons are enough for designers and merchants to study the mobile website design and benefit from it.

How to follow the mobile first design principles?

To create a mobile-friendly website that meets the mobile first design principles, a prototyping design tools such as Mockplus is needed.

Step 1: Log in your Mockplus account. If no, you can apply for a free Mockplus account.

Step 2: Create a new mobile phone project;

Think about the layout

The mobile first design method is different from desktop first. In mobile devices, we need to think about effective information be displayed in small screen layouts. However, it does not simply reduce the information as page layouts change.

In this mobile first design example, we know some of the elements are required, such as the website’s name and app logo should be concluded. However, not all desktop web design elements are suitable for mobile devices. So let’s set priorities based on the purpose of the travel website:

Start page, login page, welcome page, city list page, homepage, detail page, search page, activity page, personal information page and the like.

Final prototype design effect presentation

Gogobot Online HTML Preview: https://www.mockplus.cn/sample/post/656

Cards design and rolling content display in line with mobile users access and operation of information by scrolling up and down the pages. No big picture seize the limited screen resources, and the scrolling of information is also willing to be accepted by the user. Because compared with the hamburger menu, users are more happy to scroll the pages.

Desktop display: Gogobot

Conclusion

Through the revision of Youtube in this year, I believe that there will be more websites to pay attention to the mobile first design. Sincerely, I hope that the 8 mobile first design examples listed above can be inspirational for the construction of your new product or new website. In a short sentence, due to the limited traffic, the mobile website must be simple and rough, while the desktop website should be the best and be gorgeous. But not the mobile first almost becomes a right bullshit, as it becomes a common sense for almost all of Silicon Valley’s mainstream businesses.

9 of the Best Mobile App Templates of 2018 on Android & iOS

Building an App from scratch can be a time-consuming and painful task for most of us, and that’s where the well-built mobile app templates come in handy. The contemporary technological scene has been stuffed with a range of mobile apps, but we’re poised to use the best mobile apps with excellent UX/UI design.

Undoubtedly, the interface of App will have a direct effect on that of user experience. For those who need to sharpen their design skills and get inspired, the hands-on experience and templates made by the industry experts and professionals will do a great help. Here, I’ve hand-picked the 9 best mobile app templates with great UI experience, covering from photography, news, game to recipes, real estate, online shopping, etc. You may just find what you’re exactly looking for, enjoy!

Android App Templates

1. Fortin Quiz Pro – Game App

Editorial Ratings: ★★★

Fortin Quiz Pro is a quiz app template for Android, with a PHP backend. The questions have been classified into different categories and usually come in a combination of images and text. The Audio can be also used as quiz prompts, with the integration of Google Leaderboard to share the scores with friends in real time.

Price: $23

System Requirements: Android 4.1+

Download Here

2. Android News App – News App

Editorial Ratings: ★★★★

This app template is made up of two components – an Android client and a PHP with MySQL server, helping to set up your own news platform in the least efforts. A highlight is it allows users to enable/disable some functionalities to their requirements. If you need to add multiple languages other than English, then you cannot miss out it!

Price: $18

System Requirements: Android 4.0+

Download Here

3. City Guide – Daily Life App

Editorial Ratings: ★★★★

This App template can provide real-time positioning and navigation with 8 different color schemes. It also supports animation, responsive design and other advanced features. A big advantage of this App is it will store the data in the local SQL database, which can minimize our reliance on the Internet connection.

Price: $20

System Requirements: Android 4.0+

Download Here

4. Recipes – Food App

Editorial Ratings: ★★★★★

This is a cooking app for users to share and organize their recipes, with different categories accessible from both the home screen and menu. Plus, users can make push notifications, In-App Purchase, shopping list and so on. Besides that, a prototyping tool named Mockplus has a prototype of Recipes, with many amazing micro-interactions of image and scroll included. It’s pretty suitable for rookies to refer to.

Price: $25

System Requirements: Android 4.0+

Download Here

iOS App Templates

5. Photo Gram – Photography App

Editorial Ratings: ★★★★

This is a highly-customizable photography template which offers a variety of highlighted features, including the filters, tonal adjustments, cropping, resizing as well as the integration of text/video. Users can share their photos on various social platforms – Facebook, Twitter, Instagram, etc. It has been proven to be “clean code” and “easy to customize”.

Price: $19

System Requirements: iOS 3.1+

Download Here

6. Task Reminder – Project Management App

Editorial Ratings: ★★★★

If you’re agreed that a good plan is half the battle, then this template can be your cup of tea. This is one of the most popular project management Apps, with unlimited tasks and reminder lists to create. There are more cool features to interest developers in the market for an organizing App.

Price: $49

System Requirements: iOS 7.0+

Download Here

7. Store Finder – Online Shopping App

Editorial Ratings: ★★★★★

Undoubtedly, the online shopping has become an indispensable part of our daily life, but chances are that we need to find and buy at the physical store especially when we need to know whether the clothes/shoes fit well or not. In this case, the Store Finder template can be a good choice. It supports pinch and zoom functions, with offline usage.

Price: $21

System Requirements: iOS 8.0+

Download Here

8. Real Estate Finder – Real Estate App

Editorial Ratings: ★★★★

As its name implies, this App can help users access the Real Estate related information. The search and navigation features make it stand out from other Apps, and it offers multiple communication ways – telephone, text message as well as email.

Price: $23

System Requirements: iOS 7.0+

Download Here

Cross-Platform & Multi-Purpose Templates

9. ionWordPress

Editorial Ratings: ★★★★★

This is a multi-purpose template that can be used on multiple platforms, including Android, iOS, WordPress, etc. It includes a delicate interface and enables users to build hybrid mobile Apps with HTML5, JavaScript and CSS. There are not a few pages available for common use – the sign in/sign up page, the menu page, the details page, the menu page and so on.

Price: $19

System Requirements: Android 4.0+, iOS 6.1+, WordPress 4.0+

Download Here

Above are the 9 best mobile app templates finely created by top designers and developers. If you’re looking for a mobile app template builder to make such a delicately-made template, then you may give Mockplus a try. With a wealth of 200 components and 3000 UI icons, Mockplus can make your design refined a lot in a faster and easier way.

Plus, since the 3.2 release, it allows users to import the ready-made page templates of their choices into the design, helping beginners to get started and inspired in a smooth way. Here are the best free mobile app templates made by Mockplus, click here to learn more details.

Other best places for templates, sample projects and other UI resources:

1. Themeforest – The industry-leading market to explore website templates and themes.

Learn more: https://themeforest.net/tags/mobile app

2. W3Layouts – Free and responsive mobile website templates design.

Learn more: https://w3layouts.com/mobile-application-templates…

3. Graphicriver – A marketplace for buying graphics and design templates.

Learn more: https://graphicriver.net/tags/mobile app

4. Pinterest – A picture-based platform to discover style inspirations and other ideas to try.

Learn more: https://www.pinterest.com/explore/mobile-website-t…

5. Template Monster – The biggest collection of website templates online.

Learn more: https://www.templatemonster.com/

6. PNGTree – Millions of PNG images, backgrounds and vectors for free.

Learn more: https://pngtree.com/

Top 8 Mobile Navigation Menu Design for Your Inspiration

The mobile navigation menu design is the most important bridge and platform for human-computer interaction that aims at guiding users in a right direction and not getting lost. There is a various type of menu bars available for choice now, but what kind of menu bar could be judged as an excellent design?

A good menu design can not only enhance the user experience of the entire product but also allow users to refreshing. So, I will share my understanding and experiences of the navigation menu in this article.

1. What’s the function of the navigation menu?

• To enhance the product content and function structure and hierarchy

Navigation is the skeleton of the APP, supporting the overall content and information, so that content in accordance with the information architecture organically combined, visually and clearly displayed in front of users so that fragmented content becomes full and orderly. Meanwhile, the structured arrangement at the same time also enhances the sense of ecology.

• Highlight the core functions

What the product lying to win the market are its core functions. Therefore, the core function must be put in a place where the users can catch it easily. And the proportion of the secondary function should be controlled to avoid distracting. Through the navigation, it can be a good highlight of the core, and appropriately hiding the secondary functions.

• Simplify the user journey

Reasonable navigation system and a smooth path to the task allow users to quickly achieve their goals and form a smooth user experience. The simplification of user journey has a direct effect on the user’s viscosity and conversion rate of the product. So the high efficient navigation could guide users simply and directly to the app functions.

2. Types of the navigation menu

In order to understand the categories of the navigation menu after learning its basics, let me show you the details with the quick prototyping tool Mockplus.

1). Tabber – Classic navigation menu

Tabber is a navigation control which can be automatically generated in IOS and developed conveniently. So this kind of classic bottom navigation bar has been preferred by many app designers. This design matches with the one-handed operation habits of mobile phone users which helped most of the Apps in the market to get users.

Advantages: Clearly show the current location of the entrance; directly display of the most important entrance of the content information.

Disadvantages: If there are too many function entrances, the model seems unwieldy.

2). Rectangular, grid navigation menu

This grid navigation gets the main entrances together on the homepage, allowing users to make a choice. Such an organization doesn’t allow users to see the content at the first time, which gives users much pressure to make a choice. There are now fewer and fewer applications using this navigation, which often presents in a graphical form as a table of contents on secondary page or aggregates as a series of tool entrances.

Advantages: This kind of navigation is simple but not rough, and the clear and obvious navigation could help to improve efficiency.

Disadvantages: You need to pay attention to color schemes. A design which is too fancy will let users feel visual fatigue.

3). Drawer navigation

Drawer sliding navigation is a good way to make up the defect of the switching limitations in Tabber navigation. This problem is solved by arranging the switching items vertically, hiding the menu on the current page. By one click, the entry button will be pulled out the menu like a drawer.

Advantages: It saves page display space and allows users to focus on the current page with a good scalability.

Disadvantages: It’s not suitable for frequently switching applications.

4). Rudder navigation

This popular form of label navigation is often called as “rudder navigation,” because it is styled like the rudder used to command the ship with other operating buttons on either side. When the page has most of the same hierarchy of content, but also requires a very important and frequent operation of the entrance, you can use this APP navigation mode.

Advantages: It can highlight most important entrances with the frequent operation.

Disadvantages: The same as the label navigation.

3. The classic navigation menu design

• Google’s Material Design uses a “floating action button” to define this navigation. Which differentiates through the icon floating above the UI and has the appropriate dynamic effects, creating a new navigation guidelines.

• Similarly, Evernote also draws lessons from this model, the user simply taps the lower right corner of the floating button, you can quickly record the current inspiration.

• Tumblr is equipped with the vivid icons and the appropriate labels. When you scroll down to browse content, these icons will naturally disappear.

• Messenger’s construction strictly follows the label navigation, with some labels fixed to the top and some clearly showing the main features at the bottom. The icons are clear and easy to understand, and they allow custom labeling, which resulting in a refined and neat visual experience.

Summary

More and more designers are aware of the importance of mobile navigation menu design for improving the user experience. In Android, we saw the navigation iteration from Hamburg to separate tab bar. In iOS, more and more apps are removing small tab bars and replacing them with bigger, clearer icons. In pursuit of a better user experience and simplified APP design, designers are constantly exploring new design directions along the path of optimization on navigation design.