Shadows and Blur Effects in Modern UI Design(blogs.adobe.com)
blogs.adobe.com
Shadows and Blur Effects in Modern UI Design
https://blogs.adobe.com/creativecloud/xd-essentials-shadows-and-blur-effects-in-modern-ui-design/
15 comments
Now that you have mentioned it, the button seems to shrink when coming up. Stranger still is that nobody seems to find it strange that it comes up when pressed, sure there are such physical button but pressed should mean further down imo.
The button isn't a physical button though, so it doesn't have to behave like one. Sometimes you can make a better UI by ignoring reality - for example, in this case, bringing a button in to focus and apparently nearer to the user could make it much more obvious that it's the one you're about to press, rather than making it smaller and farther away.
Sure, but isn't one of the goals of modern design to emulate the physical world for a more tactile feel? Googles material design has a whole section on how cards should behave so as not to break the rules of the physical world.
It seems odd to strive for realism, but then break it somewhere because "it isn't a real button, so it doesnt have to feel like one"
> What bugs me is that since the element is moving closer, shouldn't the element itself grow bigger
Depends. If they used parallel projection, then not. See [1]. This corresponds to an infinite focal length.
[1] https://en.wikipedia.org/wiki/Parallel_projection
Depends. If they used parallel projection, then not. See [1]. This corresponds to an infinite focal length.
[1] https://en.wikipedia.org/wiki/Parallel_projection
Yup, also traditional perspective is also incredibly non-linear so the distance from button -> back face is in the range where large perspective changes happen compared to where the virtual camera is.
Also depends on what their lighting model is and a whole host of other factors.
Also depends on what their lighting model is and a whole host of other factors.
[deleted]
Maybe it doesn't come closer enough for perspective to kick in?
Why is it coming closer in the pressed state? Aren't I pushing it down?
Why is it coming closer in the pressed state? Aren't I pushing it down?
EXACTLY! "Material design" is very much opposed to how "real-world material interfaces" would look like in anything above the basics. Think about fucking ripple & light efects, but on otherwise solid-looking and matte-looking surfaces!
I mostly label this whole "material design" crap as "flat & minimalistic (metro-like) design" + "minimal volumetric efdects backported from the abandoned skeumorphic design bandwagon" in order to give the user some "visual cues".
In truly like the style and cues of material design practically... but there is a subconscious "uncanny valley intuition" about it that triggers a primitive warning sign in my primitive bran or something... kind of like "fear/stress about something that is practically the right thing but it... deceives you in a way and maybe also in others". I find both flat/minimalistic and rich/skeomorphic interfaces more soothing / calming / trust inducing.
I think most banks and ecommerce and enterprise/infrastructure UI professionals also share this intuition with me: you see in most banking, AWS etc. UIs always "a touck of skomorphism" plus "a lack of unnatural/magical effects", and it makes you trust more the app, be more *relaxed and confident" and willing to open you soul & wallet to it...
I mostly label this whole "material design" crap as "flat & minimalistic (metro-like) design" + "minimal volumetric efdects backported from the abandoned skeumorphic design bandwagon" in order to give the user some "visual cues".
In truly like the style and cues of material design practically... but there is a subconscious "uncanny valley intuition" about it that triggers a primitive warning sign in my primitive bran or something... kind of like "fear/stress about something that is practically the right thing but it... deceives you in a way and maybe also in others". I find both flat/minimalistic and rich/skeomorphic interfaces more soothing / calming / trust inducing.
I think most banks and ecommerce and enterprise/infrastructure UI professionals also share this intuition with me: you see in most banking, AWS etc. UIs always "a touck of skomorphism" plus "a lack of unnatural/magical effects", and it makes you trust more the app, be more *relaxed and confident" and willing to open you soul & wallet to it...
Yes, that's kinda the point. Touch screens are not like any other "material" interface we know. Read through the Material Design intro sometime - it's an interesting read regardless of whether you agree with their thinking.
Which generation/age group would you belong to?
Funnily enough, the opposite is true for me. Banks and eCom sites that don't have polished modern flattish interfaces make me think the company is out of its depth and likely insecure
Funnily enough, the opposite is true for me. Banks and eCom sites that don't have polished modern flattish interfaces make me think the company is out of its depth and likely insecure
It's not a physical button. In material design language, the button rises up towards your finger.
So it's a selectively applied metaphor aka arbitrary stylistic choices.
Are you aware that Material Design uses consistently applied metaphors and adheres to a style guide? That's the opposite of both of those.
"Consistently applied metaphors" except for where they don't want to be consistent.
Copy/pasting from another comment of mine, quotes from the manifesto:
> The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
"It's grounded in reality... but not!"
> Surfaces and edges of the material provide visual cues that are grounded in reality... Yet the flexibility of the material creates new affordances that supercede those in the physical world, without breaking the rules of physics.
"Except for rules of physics like things moving against the force applied to them, or shadows changing without the light source, object, or perspective changing."
> The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.
"Except where we decide we don't want to be realistic."
Copy/pasting from another comment of mine, quotes from the manifesto:
> The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
"It's grounded in reality... but not!"
> Surfaces and edges of the material provide visual cues that are grounded in reality... Yet the flexibility of the material creates new affordances that supercede those in the physical world, without breaking the rules of physics.
"Except for rules of physics like things moving against the force applied to them, or shadows changing without the light source, object, or perspective changing."
> The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.
"Except where we decide we don't want to be realistic."
It's grounded in reality, not bound by it. If you familiarize yourself with MD you'll realize the edge cases you tried to come up with have been covered and explained; it's not a contradiction.
But I'm pressing down on the screen with my finger. Physically.
Or am I not touching the button? That seems weird considering my finger is literally on the button.
Or am I not touching the button? That seems weird considering my finger is literally on the button.
Maybe the button is staying in the same place vertically, but you're pressing the entire background and all its other contents except the button away from you. :/
I guess that growing it would throw of the balance of the UI elements in the grid too much visually... /shrug
What I find much worse is that the pressed state has a bigger shadow, meaning it is further away from the plane it casts the shadow on. Isn't that the wrong way around, or is the labeling wrong here?
What I find much worse is that the pressed state has a bigger shadow, meaning it is further away from the plane it casts the shadow on. Isn't that the wrong way around, or is the labeling wrong here?
well as long as it projects a shadow it is enough for you to know that it is a button.
They can decide that the button raises when you touch it, since you are not touching it anyway, just the surface in top of it.
So at least it is coherent with the material principles.
They can decide that the button raises when you touch it, since you are not touching it anyway, just the surface in top of it.
So at least it is coherent with the material principles.
[deleted]
It's correct in the article, the intention being that the element rises towards your finger.
The shadow can be explained if you consider that it moves closer to the light source as well.
I think it is inspired by industrial drawing/design where real perspective is not taken into account.
[deleted]
Oh yeah, it should. Would look rather nice as well. The size gain doesn't have to be more than couple percents, maybe 3-5?
The only thing that animation suggests is that the white background is lowering and that's frustrating.
[deleted]
Those UI animations are all fine and dandy until you log in via remote desktop or similar, over VPN on a not-so-fast network. Then you learn to hate it.
Is there an easy way to disable such animations in the browser, e.g. via Firefox extension?
Is there an easy way to disable such animations in the browser, e.g. via Firefox extension?
You could use Stylish and something like:
* {
transition-delay: 0ms !important;
transition-duration: 0ms !important;
animation-delay: 0ms !important;
animation-duration: 0ms !important;
}
Erm... nice screenshots and all, but isn't this a trivial rehash of UI patterns that are plain obvious? I don't quite understand who the target audience of this sort of article is.
It isn't plainly obvious to the Apple and Microsoft UI designers...
Microsoft doesn't use shadows at all
As my sibling has highlighted, there is a shadow on Windows 10 when one window hovers over another.
Weirdly, the popup menu on the desktop DOES have a shadow but the right-click menu on the start menu does not...
One disappointing part of Windows 10 is this lack of consistency. Icons are the worst - 25 years of icons all bundled together. Looks at the icons inside C:\Windows\explorer.exe or shell32.dll for a mishmash of graphical styles from yesteryear. This makes programs like MMC feel out-of-place on the modern system.
One disappointing part of Windows 10 is this lack of consistency. Icons are the worst - 25 years of icons all bundled together. Looks at the icons inside C:\Windows\explorer.exe or shell32.dll for a mishmash of graphical styles from yesteryear. This makes programs like MMC feel out-of-place on the modern system.
Why button from material design rises when you press it? Can someone explain me why google decided this?
Yes, Google can right in their Material Design guidelines. The button rises "up" to meet your finger.
That's more of a description than an explanation. If they're trying to establish metaphor to the real world then this obviously simply doesn't meet the bar.
Material design is built out of this "material" that mimics some real world things like shadows for user affordance, but is mostly magical. I'm pretty sure the only real world metaphor they're trying to use for the button is a floating panel of some magical material that floats closer to the screen when you tap it.
Edit: You edited your comment, but I'll leave the stuff below for posterity. As a response to your new edit: a selectively applied metaphor boils down to stylization. That's fine by me, I would just prefer that they admit that no design abstraction is airtight. What you call "magic" here can also be called "arbitrary stylization."
To be fair, putting something like this together is obscenely difficult and kudos to the Goog for sharing it with everyone. I just wish it were a little less word-of-god-y. The fact is that the material metaphor is not a "unifying theory of a rationalized space and a system of motion." It's inspiration, at best.
-----------
Response to your pre-edit:
Really?
> Material is the metaphor
> The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
"It's grounded in reality... but not!"
> Surfaces and edges of the material provide visual cues that are grounded in reality... Yet the flexibility of the material creates new affordances that supercede those in the physical world, without breaking the rules of physics.
"Except for rules of physics like things moving against the force applied to them, or shadows changing without the light source, object, or perspective changing."
> The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.
"Except where we decide we don't want to be realistic."
This is all fine. Stylistic choices do have a place in design, of course. I just really hate the language you see all over design systems that essentially resolves to "p and not p." "Physically accurate and totally physically inaccurate."
Not everything needs a manifesto to prove that it's not just arbitrary stylization, especially when the manifesto itself, in describing said design justifications, is leaky.
To be fair, putting something like this together is obscenely difficult and kudos to the Goog for sharing it with everyone. I just wish it were a little less word-of-god-y. The fact is that the material metaphor is not a "unifying theory of a rationalized space and a system of motion." It's inspiration, at best.
-----------
Response to your pre-edit:
Really?
> Material is the metaphor
> The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
"It's grounded in reality... but not!"
> Surfaces and edges of the material provide visual cues that are grounded in reality... Yet the flexibility of the material creates new affordances that supercede those in the physical world, without breaking the rules of physics.
"Except for rules of physics like things moving against the force applied to them, or shadows changing without the light source, object, or perspective changing."
> The fundamentals of light, surface, and movement are key to conveying how objects move, interact, and exist in space and in relation to each other. Realistic lighting shows seams, divides space, and indicates moving parts.
"Except where we decide we don't want to be realistic."
This is all fine. Stylistic choices do have a place in design, of course. I just really hate the language you see all over design systems that essentially resolves to "p and not p." "Physically accurate and totally physically inaccurate."
Not everything needs a manifesto to prove that it's not just arbitrary stylization, especially when the manifesto itself, in describing said design justifications, is leaky.
Sorry about that, I have a bad habit of publishing my fist draft. I agree with what you've written. Like you say I don't think they're trying to avoid arbitrary stylization or selective metaphors, rather providing some arbitrary styles and selective metaphors that make up a consistent design. It's fine if you don't like it, but I haven't seen anyone who likes it pretending it's anything more than that.
Speaking of manifestos, magic and ink:
http://worrydream.com/MagicInk/
http://worrydream.com/MagicInk/
Correct, which is why they aren't trying to establish that metaphor:
> The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
> The material is grounded in tactile reality, inspired by the study of paper and ink, yet technologically advanced and open to imagination and magic.
The heading above what you just quoted is literally "Material is the metaphor."
Correct, which is different than the "metaphor to the real world" comment that I was responding to.
That heading is in summary, and it doesn't contradict the part I quoted.
That heading is in summary, and it doesn't contradict the part I quoted.
Another feature iOS has is the subtle parallax motion effect, driven by the gyroscope. I think this effect also helps perception of UI layers.
Biased by growing up with CUA GUI design principles, I can't help but to think that no amount of amazing code (html, css3, js jit) will give a significant advantage compared to that Win2K form screenshot.
I feel like the "magazine" trend gave way more expressiveness to talk to the user (finer more dynamic layouts) but not much more bandwidth the other way around.
I feel like the "magazine" trend gave way more expressiveness to talk to the user (finer more dynamic layouts) but not much more bandwidth the other way around.
How do you achieve the blurred background in CSS?
[deleted]
Looks like "backdrop-filter: blur(<length>)" would be the way to achieve the effect shown... but it's not supported by anything yet:
https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-fi...
But if you want to blur a whole element (eg, your main page content while a modal is open) instead of just the part behind another one, that would be "filter: blur(<length>)" - and works in all modern browsers except IE (even my Android Firefox displays the demos on this page correctly):
https://developer.mozilla.org/en/docs/Web/CSS/filter#blur()_...
And IIRC there's some non-standard way to achieve the same effect in IE.
https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-fi...
But if you want to blur a whole element (eg, your main page content while a modal is open) instead of just the part behind another one, that would be "filter: blur(<length>)" - and works in all modern browsers except IE (even my Android Firefox displays the demos on this page correctly):
https://developer.mozilla.org/en/docs/Web/CSS/filter#blur()_...
And IIRC there's some non-standard way to achieve the same effect in IE.
Platform support for backdrop-filter: http://caniuse.com/#search=backdrop-filter
Basically just Safari and only with a prefix.
Basically just Safari and only with a prefix.
backdrop-filter is supported by Safari.
...but only with a prefix, and only the most recent versions, and it doesn't have much market share. "Effectively nothing supports it", if you'd rather.
"Doesn't have much market share" really depends I guess on your domain doesn't it? For example, if you're building something that's going to get a fair bit of mobile traffic iOS Safari would represent a fair chunk.
Besides, most applications of backdrop-filter would fit into 'progressive enhancement' and the rest of the browsers that don't support it would just fall back no a non-blurred transparent background which is fine most of the time.
Besides, most applications of backdrop-filter would fit into 'progressive enhancement' and the rest of the browsers that don't support it would just fall back no a non-blurred transparent background which is fine most of the time.
Yup. I noticed Apple has updated the top navbar on the new product pages where it is enabled. It falls back to unblurred-translucent container on other browsers.
Hopefully other browsers will catch up soon.
Hopefully other browsers will catch up soon.
Chrome has experimental support through a flag. However, the Apple pages are broken with the flag enabled.
[deleted]
I use this on the background element.
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
filter: blur(3px);You can also create the illusion of 3d from a moving display panel, and adjusting the image according to the position of the viewer. Can't find an example now.
Check out Johnny Lee's awesome "Head Tracking for Desktop VR Displays using the WiiRemote"!
https://www.youtube.com/watch?v=Jd3-eiid-Uw
More great stuff: http://www.johnnylee.net
https://www.youtube.com/watch?v=Jd3-eiid-Uw
More great stuff: http://www.johnnylee.net
Are you thinking of parallax, parallax scrolling?
Yes, but the scrolling should happen depending on the viewpoint of the user.
I've seen a demo where the user tilts a tablet, and the image on the tablet is adjusted to create a 3d effect.
I've seen a demo where the user tilts a tablet, and the image on the tablet is adjusted to create a 3d effect.
Do you mean like github's 404 page? https://github.com/404
Like on iOS's home screen?
tl;dr Shadows and blur provide visual cues that allow users to better and more easily understand what is going on.
As long as we've got a lot of GPU cycles to burn, I'd love to see a live video user interface with beautiful simulated vidicon camera tube blooming and overdriving effects.
Overblooming picture effects from my Sony AVC-3250CE B&W camera: https://www.youtube.com/watch?v=aKnTNHyPNrs
More target overdrive visual effects from Concord NEI-17 vidicon camera: https://www.youtube.com/watch?v=Srga4173uaY
The Tubes - White Punks On Dope (1977 R0X M1X): https://www.youtube.com/watch?v=0rpXIuTcOiI
Vidicon Camera Tube: https://en.wikipedia.org/wiki/Video_camera_tube#Vidicon
"An image orthicon camera can take television pictures by candlelight because of the more ordered light-sensitive area and the presence of an electron multiplier at the base of the tube, which operated as a high-efficiency amplifier. It also has a logarithmic light sensitivity curve similar to the human eye. However, it tends to flare in bright light, causing a dark halo to be seen around the object; this anomaly is referred to as "blooming" in the broadcast industry when image orthicon tubes were in operation. Image orthicons were used extensively in the early color television cameras, where the increased sensitivity of the tube was essential to overcome their very inefficient optical system of the other parts of the camera."
Bloom Shader Effect: https://en.wikipedia.org/wiki/Bloom_(shader_effect)
"Practical implementation: Current generation gaming systems are able to render 3D graphics using floating point frame buffers, in order to produce HDR images. To produce the bloom effect, the HDRR images in the frame buffer are convolved with a convolution kernel in a post-processing step, before converting to RGB space. The convolution step usually requires the use of a large gaussian kernel that is not practical for realtime graphics, causing programmers to use approximation methods.
Use in Games: Some of the earliest games to use the bloom effect include Outcast and Ico. Bloom was later popularized within the game development community in 2004, when an article on the technique was published by the authors of Tron 2.0. Bloom lighting has been used in many games, modifications and game engines such as Quake Live, Cube 2: Sauerbraten and the Spring game engine. The effect is popular in current generation games, and is used heavily in PC, Xbox 360 and PlayStation 3 games as well as Nintendo GameCube and Wii. Popular browser-based games such as the MMORPG RuneScape make use of the bloom effect as well."
Afterimage Shader Effect: https://en.wikipedia.org/wiki/Afterimage_(shader_effect)
"Afterimage is a computer graphics effect used by video games. The effect takes the bright parts of a rendered image of the scene, and then fades in a motion blur style fashion as the scene progresses. The result is that bright areas leave a fading trail when the camera is moving. Afterimage can be used to enhance blooming. In some games, the process is named light trail."
Overblooming picture effects from my Sony AVC-3250CE B&W camera: https://www.youtube.com/watch?v=aKnTNHyPNrs
More target overdrive visual effects from Concord NEI-17 vidicon camera: https://www.youtube.com/watch?v=Srga4173uaY
The Tubes - White Punks On Dope (1977 R0X M1X): https://www.youtube.com/watch?v=0rpXIuTcOiI
Vidicon Camera Tube: https://en.wikipedia.org/wiki/Video_camera_tube#Vidicon
"An image orthicon camera can take television pictures by candlelight because of the more ordered light-sensitive area and the presence of an electron multiplier at the base of the tube, which operated as a high-efficiency amplifier. It also has a logarithmic light sensitivity curve similar to the human eye. However, it tends to flare in bright light, causing a dark halo to be seen around the object; this anomaly is referred to as "blooming" in the broadcast industry when image orthicon tubes were in operation. Image orthicons were used extensively in the early color television cameras, where the increased sensitivity of the tube was essential to overcome their very inefficient optical system of the other parts of the camera."
Bloom Shader Effect: https://en.wikipedia.org/wiki/Bloom_(shader_effect)
"Practical implementation: Current generation gaming systems are able to render 3D graphics using floating point frame buffers, in order to produce HDR images. To produce the bloom effect, the HDRR images in the frame buffer are convolved with a convolution kernel in a post-processing step, before converting to RGB space. The convolution step usually requires the use of a large gaussian kernel that is not practical for realtime graphics, causing programmers to use approximation methods.
Use in Games: Some of the earliest games to use the bloom effect include Outcast and Ico. Bloom was later popularized within the game development community in 2004, when an article on the technique was published by the authors of Tron 2.0. Bloom lighting has been used in many games, modifications and game engines such as Quake Live, Cube 2: Sauerbraten and the Spring game engine. The effect is popular in current generation games, and is used heavily in PC, Xbox 360 and PlayStation 3 games as well as Nintendo GameCube and Wii. Popular browser-based games such as the MMORPG RuneScape make use of the bloom effect as well."
Afterimage Shader Effect: https://en.wikipedia.org/wiki/Afterimage_(shader_effect)
"Afterimage is a computer graphics effect used by video games. The effect takes the bright parts of a rendered image of the scene, and then fades in a motion blur style fashion as the scene progresses. The result is that bright areas leave a fading trail when the camera is moving. Afterimage can be used to enhance blooming. In some games, the process is named light trail."
Blurring is a memory bandwidth and therefore power intensive effect, so it's more costly in terms of battery live on mobile devices than other more local effects like darkening and desaturation. Of all the visual effects today's gui design fads could choose to fetishize, blurring is unfortunately power hungry.
If "Material Design" was intended to conserve battery life, it shouldn't have been so focused on looking blurry. ;) Of course you can draw simple soft shadows without actually blurring the content underneath, but Apple's blurry iOS gui and macOS desktop windows using NSVisualEffectView's "Vibrancy" and blurring effects require a lot of power.
3 Differences – Apple’s HIG vs Google’s Material Design Standards: http://nectardesign.com/3-differences-apples-hig-vs-googles-...
"Apple believes that mobile devices should be seen as a window in to another world. They embrace infinite depth in their applications and use components such as their alert buttons and text messages with blurred background to create the feeling that the items are floating and exist in their own space. Another example of this would be the click wheel for their timer. See how the numbers recede in to the background? That would never happen in material design."
I don't remember the exact link, but I read an article from Apple describing the GPU accelerated blurring and "vibrancy" effects they rolled out in their desktop user interface, which cautioned about how expensive they were, because the more you blur, the wider the region of support of the convolution kernel, therefore the more memory accesses you have to perform per pixel. Even on the desktop, they warned that it had a considerable cost. So it's a pity that blurring has become so trendy on battery operated mobile devices.
Maybe it was this WWDC talk -- it contains lots of useful information about NSVisualEffectView performance:
Adopting Advanced Features of the New UI of OS X Yosemite: http://asciiwwdc.com/2014/sessions/220
"You want to use the active state explicitly, very sparingly.
It can affect performance and battery life, because if you have a lot of visual effect views around they're always active, but you probably want to use it in places where you know that view is always going to be active and maybe it's a panel that can't become key for whatever reason." [...]
"So you notice that blur we had and this may not surprise you but the blur effect isn't exactly free. It does cost something, and that something is graphics performance and battery usage. And sometimes, though, the cost is worth the results. So, something you should be aware of here is you're not trying to not use this effect. You want your app to look beautiful. You just need to pay attention to striking a balance between that appearance and the resource utilization." [...]
"Corbin mentioned that layers are often required, especially for in window blurs, and layer usage is increasing just in general." [...]
"If you add a lot of VisualEffectViews to your app and all of the sudden you notice that maybe your window resizing animations or your full screen transitions have become slow, you can set this [Accessibility Preference / Display Subsection / Reduce Transparency] to Yes, and this will avoid the cost we pay when doing that blur.
So if you notice when this is turned on your performance is fine, and when this is turned off your performance is kind of sluggish, it's probably you're using a VisualEffectView that's too large or too many VisualEffectViews, and that's a cue to dial down the transparency and blurring in the app." [...]
"Something I want to point out about a lot of our drawing here is that the blur effect actually happens out of process, it happens in the Windows Server, and furthermore, it happens on the GPU, and that means that profiling your own process won't necessarily tell you as much as you would hope." [...]
"If you're just doing a lighter development on your app, having activity monitor open can sometimes be useful.
It's certainly not as in-depth as instruments but it will tell you how much CPU you're using and more importantly it'll tell you how much energy your app is taking to do what it's doing.
And if you see that operating a little higher than you're expecting that may be another cue that your VisualEffectView usage has gotten a little excessive." [...]
"And finally, you folks remember like 40 seconds ago we talked a little bit about performance, and I do hope you'll take some of those performance messages to heart when you leave."
This Ars Technica review of OS/X 10.10 also discusses the cost of the blurring and vibrancy effects: http://arstechnica.com/apple/2014/10/os-x-10-10/4/
"These visual effects aren’t free; they cost CPU and GPU cycles each time the foreground or background changes. Behind-window blending is implemented in the window server, which is responsible for compositing all the visible windows into the final screen image. (This compositing process has been GPU-accelerated since 2002.) Moving a window that uses vibrancy in the behind-window blending mode does not require the application that owns the window to redraw any content; the window server handles the re-compositing as the background changes.
Within-window blending, on the other hand, is handled by each individual application. The system frameworks use Core Animation layers (also GPU-accelerated) to apply the necessary filters, blending, say, the contents of a scrolling view with the toolbar that partially covers it.
Given Apple’s recent focus on energy saving in Mavericks, it’s a bit strange to see Yosemite lean so heavily on a dynamic effect like vibrancy. To keep things from getting out of hand, vibrant views become opaque when inactive. In practice, this means only the front-most window in the currently active application—plus the Dock, menu bar, and any notification alerts that may dance across your screen—will burn cycles artistically blending foreground and background content."
If "Material Design" was intended to conserve battery life, it shouldn't have been so focused on looking blurry. ;) Of course you can draw simple soft shadows without actually blurring the content underneath, but Apple's blurry iOS gui and macOS desktop windows using NSVisualEffectView's "Vibrancy" and blurring effects require a lot of power.
3 Differences – Apple’s HIG vs Google’s Material Design Standards: http://nectardesign.com/3-differences-apples-hig-vs-googles-...
"Apple believes that mobile devices should be seen as a window in to another world. They embrace infinite depth in their applications and use components such as their alert buttons and text messages with blurred background to create the feeling that the items are floating and exist in their own space. Another example of this would be the click wheel for their timer. See how the numbers recede in to the background? That would never happen in material design."
I don't remember the exact link, but I read an article from Apple describing the GPU accelerated blurring and "vibrancy" effects they rolled out in their desktop user interface, which cautioned about how expensive they were, because the more you blur, the wider the region of support of the convolution kernel, therefore the more memory accesses you have to perform per pixel. Even on the desktop, they warned that it had a considerable cost. So it's a pity that blurring has become so trendy on battery operated mobile devices.
Maybe it was this WWDC talk -- it contains lots of useful information about NSVisualEffectView performance:
Adopting Advanced Features of the New UI of OS X Yosemite: http://asciiwwdc.com/2014/sessions/220
"You want to use the active state explicitly, very sparingly.
It can affect performance and battery life, because if you have a lot of visual effect views around they're always active, but you probably want to use it in places where you know that view is always going to be active and maybe it's a panel that can't become key for whatever reason." [...]
"So you notice that blur we had and this may not surprise you but the blur effect isn't exactly free. It does cost something, and that something is graphics performance and battery usage. And sometimes, though, the cost is worth the results. So, something you should be aware of here is you're not trying to not use this effect. You want your app to look beautiful. You just need to pay attention to striking a balance between that appearance and the resource utilization." [...]
"Corbin mentioned that layers are often required, especially for in window blurs, and layer usage is increasing just in general." [...]
"If you add a lot of VisualEffectViews to your app and all of the sudden you notice that maybe your window resizing animations or your full screen transitions have become slow, you can set this [Accessibility Preference / Display Subsection / Reduce Transparency] to Yes, and this will avoid the cost we pay when doing that blur.
So if you notice when this is turned on your performance is fine, and when this is turned off your performance is kind of sluggish, it's probably you're using a VisualEffectView that's too large or too many VisualEffectViews, and that's a cue to dial down the transparency and blurring in the app." [...]
"Something I want to point out about a lot of our drawing here is that the blur effect actually happens out of process, it happens in the Windows Server, and furthermore, it happens on the GPU, and that means that profiling your own process won't necessarily tell you as much as you would hope." [...]
"If you're just doing a lighter development on your app, having activity monitor open can sometimes be useful.
It's certainly not as in-depth as instruments but it will tell you how much CPU you're using and more importantly it'll tell you how much energy your app is taking to do what it's doing.
And if you see that operating a little higher than you're expecting that may be another cue that your VisualEffectView usage has gotten a little excessive." [...]
"And finally, you folks remember like 40 seconds ago we talked a little bit about performance, and I do hope you'll take some of those performance messages to heart when you leave."
This Ars Technica review of OS/X 10.10 also discusses the cost of the blurring and vibrancy effects: http://arstechnica.com/apple/2014/10/os-x-10-10/4/
"These visual effects aren’t free; they cost CPU and GPU cycles each time the foreground or background changes. Behind-window blending is implemented in the window server, which is responsible for compositing all the visible windows into the final screen image. (This compositing process has been GPU-accelerated since 2002.) Moving a window that uses vibrancy in the behind-window blending mode does not require the application that owns the window to redraw any content; the window server handles the re-compositing as the background changes.
Within-window blending, on the other hand, is handled by each individual application. The system frameworks use Core Animation layers (also GPU-accelerated) to apply the necessary filters, blending, say, the contents of a scrolling view with the toolbar that partially covers it.
Given Apple’s recent focus on energy saving in Mavericks, it’s a bit strange to see Yosemite lean so heavily on a dynamic effect like vibrancy. To keep things from getting out of hand, vibrant views become opaque when inactive. In practice, this means only the front-most window in the currently active application—plus the Dock, menu bar, and any notification alerts that may dance across your screen—will burn cycles artistically blending foreground and background content."
the shadow elevation effect can also been seen as a flat surface lying on top of another flat surface with all dust surrounding it, or as a rectangular hole inside a surface with stains around it
[deleted]
Hardly "modern", but here's a description of the graphical design of The Sims pie menus [1] that I impemented in 1999 and wrote up in 2001:
The classic papers on transparent user interfaces include Toolglass and Magic Lenses: The See-Through Interface (1993) [2], and A Taxonomy of See-Through Tools (1994) [3]. The pie menus in The Sims [4] use a combination of desaturation, darkening, and alpha blending to feather the edges of the menu.
Why transparency and the other effects? I didn't want the pie menus to obscure too much of the scene behind them. You can see through the pie menu as the animation continues on in real time behind it. The head of the currently selected person is drawn in the center of the pie menu, and follows the cursor by looking at the currently selected item.
I found it necessary to somehow separate the head from the rest of the scene, otherwise it looked like a giant head was floating in a room of the house! Drawing a solid opaque menu background would obscure too much of the scene. But even a partially transparent menu background still did not visually separate the head from the background scene enough. It looked muddy and cluttered, instead of crisp and bright.
So instead of simply alpha blending, I actually made it desaturate the background (removes the color so it's gray scale), and darken it (like casting a colorless shadow).
I wanted the colorful head to look sharp and bright up against the dark gray background. So the effect looks at the Z buffer to clip out the head in the menu center, so it remains bright and colorful against the dark gray background. That gives it visual "pop" that separates the head from the background. The edges of the effect are feathered, so there's no sharp line dividing the inside and the outside of the menu (useless visual clutter).
The gray shadow just gradually tapers off with distance, suggesting that the pie menu active area extends to the edge of the screen, not confined to the borders of a circle. The labels are drawn with high contrast drop shadows around the pie menu, so they stand out and easy to read, partially overlapping the shadow so they're look like they're part of the menu.
There's special code to perform that particular combination of pixel filters in real time, to every frame just after the 3D rendering phase.
The pixelated censorship effect works the same way as the pie menu shadow, like a Photoshop filter run after the 3D rendering phase. There's a special suit type that's tagged as a "censorship" suit. It consists of bounding boxes attached to the varius bones of the skeleton that you can select to censor. So if you just want to censor the head, you attach the head censor suit to the head bone. The 3D character renderer transforms the 8 vertices but doesn't draw anything, and stashes the screen bounding box away for the pixelation filter to draw later. That's how it can censor just the crotch of naked men, but also the chests of naked girls gone wild.
[1] https://www.youtube.com/watch?v=-exdu4ETscs
[2] https://research.tableau.com/sites/default/files/1993-Toolgl...
[3] http://www.billbuxton.com/TGtaxonomy.html
[4] http://www.tsomania.net/assets/images/gameguides/sprinklers_...
The classic papers on transparent user interfaces include Toolglass and Magic Lenses: The See-Through Interface (1993) [2], and A Taxonomy of See-Through Tools (1994) [3]. The pie menus in The Sims [4] use a combination of desaturation, darkening, and alpha blending to feather the edges of the menu.
Why transparency and the other effects? I didn't want the pie menus to obscure too much of the scene behind them. You can see through the pie menu as the animation continues on in real time behind it. The head of the currently selected person is drawn in the center of the pie menu, and follows the cursor by looking at the currently selected item.
I found it necessary to somehow separate the head from the rest of the scene, otherwise it looked like a giant head was floating in a room of the house! Drawing a solid opaque menu background would obscure too much of the scene. But even a partially transparent menu background still did not visually separate the head from the background scene enough. It looked muddy and cluttered, instead of crisp and bright.
So instead of simply alpha blending, I actually made it desaturate the background (removes the color so it's gray scale), and darken it (like casting a colorless shadow).
I wanted the colorful head to look sharp and bright up against the dark gray background. So the effect looks at the Z buffer to clip out the head in the menu center, so it remains bright and colorful against the dark gray background. That gives it visual "pop" that separates the head from the background. The edges of the effect are feathered, so there's no sharp line dividing the inside and the outside of the menu (useless visual clutter).
The gray shadow just gradually tapers off with distance, suggesting that the pie menu active area extends to the edge of the screen, not confined to the borders of a circle. The labels are drawn with high contrast drop shadows around the pie menu, so they stand out and easy to read, partially overlapping the shadow so they're look like they're part of the menu.
There's special code to perform that particular combination of pixel filters in real time, to every frame just after the 3D rendering phase.
The pixelated censorship effect works the same way as the pie menu shadow, like a Photoshop filter run after the 3D rendering phase. There's a special suit type that's tagged as a "censorship" suit. It consists of bounding boxes attached to the varius bones of the skeleton that you can select to censor. So if you just want to censor the head, you attach the head censor suit to the head bone. The 3D character renderer transforms the 8 vertices but doesn't draw anything, and stashes the screen bounding box away for the pixelation filter to draw later. That's how it can censor just the crotch of naked men, but also the chests of naked girls gone wild.
[1] https://www.youtube.com/watch?v=-exdu4ETscs
[2] https://research.tableau.com/sites/default/files/1993-Toolgl...
[3] http://www.billbuxton.com/TGtaxonomy.html
[4] http://www.tsomania.net/assets/images/gameguides/sprinklers_...
Why is this here?
The shadow grows, hinting at the fact that the element is elevated, and moves closer on the z-index. What bugs me is that since the element is moving closer, shouldn't the element itself grow bigger as well?
The right and bottom animations show the blue button as getting closer, but the end result on the left doesn't reflect that at all.