Feedly founder Talk about the revision of actual combat experience

As a mobile interface designer, if you have read material design guidelines, this article is a good design case. If you haven't read it, then this article must be the easiest and most vivid starting point, with a little peek to help you get into the material design world.

As you know, Google recently released the Android Lollipop system, one of the major changes in the system is the introduction of a new visual language: Material design. With the release of the new system, Android also released a cross-platform vision, dynamic, interactive design of the comprehensive guidelines. October 7, Google's material design experience team organized a workshop to share some design insights and tips with the Third-party App team to guide their designs on the Android platform.

In my opinion, the improvement of Android is a real step in the right direction. The new system is now sufficiently consistent and flexible enough to be compatible with any new app design. So, I came back after returning to my feedly design draft, try to feedly the interface according to the material design guidelines, do a redesign attempt.

In this attempt, my main goal is to create a completely new version based on Google's material design principles. This version will guide the design team's future design. At the same time, we can choose some of the design points, immediately landed and published in a future version. The second goal of this attempt is to get some user feedback for feedly. So if you have any suggestions, please leave some comments.

In this article, not only the results of this redesign, but also the process of design thinking.

Okay, let's get to the point, so we'll start material design.

　　General overview

In this redesign, I focused on the design of several major feedly interfaces. The following figure is a comparison of the front (top) and the design (bottom) of the design.

Material design guidelines, if fully described, will be too complicated. So here I'm taking out four core design points, and these four core points are the main things I use to redesign.

　　One, the visible interface (tangible interfaces)

　　Material Design Principles

"In material design, every pixel in the app is presented on a piece of paper (a sheet of paper)." This piece of paper has a single background color and can be scaled arbitrarily according to different environments. A typical interface layout may consist of several overlapping pieces of paper of different sizes. ”

　　The application of design principles in feedly

Feedly the original interface is already using a similar paper metaphor, our main design element is a stack of cards, each card has a list of articles or articles. On the slip card, the next card will be displayed. This metaphor fits perfectly with material design.

The feedly navigation is located on the left side of the panel, the panel can be slid out, covered on the stack of cards. Feedly's "Discovery" interface is the same logic, just on the right.

　　Second, make the design more like print

　　Material Design Principles

"The basic elements of print design include typography, grid, clearance, size, color, and the way images are used." The meaning of these elements is far more than just good-looking, together they create levels, make sense and bring visual focus. ”

　　The application of design principles in feedly

　　8 Dot Grid

Google provides some good resources to help designers scale and arrange visual elements in a consistent way when designing apps. But you still need to understand the overall grid system behind this. Although this is a 8-point grid system, Android often sets the margin to 16 points. In addition to implementing the grid system at each interface, I also set our magazine view page margins to 16 dots (2x8) wide and set the thumbnail to 96 dots (12x8) wide.

　　Colors and images

Google recommends using the main color of the app in the toolbar and status bar (the main color is typically the brand's main hue). But because Feedly is a reading application, if we use our bright green in these areas, it will cause a great disturbance to the line of sight and disturb the user's reading of the actual content. Therefore, I choose to use light gray in these areas to reduce the interruption of content.

In the left-hand column, I designed a top bar that uses a bright green main color to highlight the hot topics of the day. This way is to emphasize the key information, but also to change the brand color, I am still more satisfied with this way.

The image is also a very important element in the design. In the magazine view, I used a full bleed size image to present an article that needed to be read in depth. When a topic is selected in the Discovery interface, a full bleed image is used as the interface head.

　　Iii. Meaningful transitions

　　Material Design Principles

"Sometimes, users are confused about which part of the interface they need to focus on, or when an element is transformed from a position to B." Through carefully choreographed dynamic design, the user's attention and visual focus can be effectively guided during app use, avoiding the confusion when the layout changes or elements are rearranged, and improving the overall experience beauty. Dynamic design should meet the goal of functional, not only dazzle technology. ”

　　The application of design principles in feedly

Opening the article and closing the article is the most important transition in feedly. In this process, the user switches between the list of articles and the contents of the entire article. In making this transition dynamic, I have referred to the 3 main design guidelines recommended in the material design principles.

　　Feedback on the surface

When the user clicks on the article preview, I use the ripple effect of the click to provide instant feedback. The ripple effect expands to fill the entire article preview element. Similarly, when the user closes the article, the ripple effect will also appear in the top bar.

　　Visual continuity

The preview picture in the magazine View will zoom in and move to the appropriate position as the interface transitions into the story view. Through such transitions, the user is able to perceive the relationship between the elements he clicks and the final interface elements perfectly. But there is a challenge: Sometimes the pictures in the preview view do not appear in the first screen of the article, but after several screens. At this point, we have to fade the content of the article in the transition, and then fade the thumbnail to the transitional.

　　The visible surface

This is probably the most important element in the material design. According to the design guidelines, we need to process the content as if printed on the physical surface. When the user clicks on the article Preview area in the list, the module rises upwards to create a new plane that belongs to this article. At the same time, given the visual continuity, the new plane will be magnified to make it the most important surface of the interface. In this process, the content of the article also fade appear.

To synthesize these design guidelines, we have the ultimate dynamic effect:

In the same way, I've also designed the dynamic effect of a topic selected in the Discovery Panel:

　　Four, adaptive design

　　Material Design Principles

"The last core idea of Material design is to create an adaptive system that can be applied to any size platform from small watches to big TVs." An adaptive design, in fact, in the same underlying structure of the system, evolved to adapt to the different dimensions of the interface design. In each design, dimensions and interactions are presented in a manner that best fits the size of the interface, but remain unchanged in color, icon language, hierarchy, and spatial relationships. The Material design helps you build an adaptive interface by providing flexible elements and styles. ”

　　The application of design principles in feedly

Starting with the first edition, Feedly is already an adaptive application. When adaptive, the most important element to consider is the card used to present the article. Considering how to arrange these cards in a magazine view is a very interesting and challenging thing. As you can see in the figure below, different sizes of screens use different, but interesting layouts.