There is some discussion of this here but I haven't found a more comprehensive discussion of it.
With Material Design, objects that wish to convey being pressed appear to rise up towards the user, rather than get depressed away, as normal buttons do. (Example)
Why? As pointed out in the original link, it's contrary to what we usually expect, and more importantly, it's contrary to what happens in real life (which is what material design is supposed to represent)
On one of my own sites, at the time this was originally posted, I specifically designed the social media buttons in the footer (and most other buttons) to appear satisfyingly pressed when active
Answer
Material Design is based around materials in the world of print design. Two of these concepts that get to the your point is the (1) the surface you are interacting with and (2) paper.
In material design, your environment is a 3D space. The z-axis extends from the surface of the screen towards the user and there is no definition of a negative z-axis.
This jives with the physical print design world. You can't have something "below" the surface you're printing on.
The other concept material design focuses around is paper, and how it rests on top of other layers. Paper does not "float" above the surface, it rests on the piece of paper directly below it. You shouldn't, for example, have a raised button greater than 1 step above its parent surface. As a result, you can't "push" a piece of paper (aka: the button) into another piece of paper (aka: the surface).
The Material Design page actually talks about button interaction in terms of "raising" when "pressed":
Raised buttons behave like a piece of material resting on another sheet – they lift and color on press.
That is confusing. As you point out in your question, when you press something it doesn't normally raise. But check out the first part of the sentence again...
Raised buttons behave like a piece of material resting on another sheet...
The button is resting on the sheet below it. It has nowhere to go but up.
Google still does use the word "pressed" but a more suitable phrase would be "interacted with". When you "interact with a button" the only z-index you have available to you is up. When you "interact with a piece of paper" you pick it up.
So, while you pressed on the screen you are interacting with the piece of paper that makes up the button -- so it lifts up as a result.
It is odd, yes. But it does flow with the underlying principles of the design definition.
No comments:
Post a Comment