Shadows and Blur Effects in Modern UI Design
Blurring is a memory bandwidth and therefore power intensive effect, so it&#x27;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&#x27;s gui design fads could choose to fetishize, blurring is unfortunately power hungry.<p>If &quot;Material Design&quot; was intended to conserve battery life, it shouldn&#x27;t have been so focused on looking blurry. ;) Of course you can draw simple soft shadows without actually blurring the content underneath, but Apple&#x27;s blurry iOS gui and macOS desktop windows using NSVisualEffectView&#x27;s &quot;Vibrancy&quot; and blurring effects require a lot of power.<p>3 Differences – Apple’s HIG vs Google’s Material Design Standards: <a href="http:&#x2F;&#x2F;nectardesign.com&#x2F;3-differences-apples-hig-vs-googles-material-design-standards&#x2F;" rel="nofollow">http:&#x2F;&#x2F;nectardesign.com&#x2F;3-differences-apples-hig-vs-googles-...</a><p>&quot;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.&quot;<p>I don&#x27;t remember the exact link, but I read an article from Apple describing the GPU accelerated blurring and &quot;vibrancy&quot; 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&#x27;s a pity that blurring has become so trendy on battery operated mobile devices.<p>Maybe it was this WWDC talk -- it contains lots of useful information about NSVisualEffectView performance:<p>Adopting Advanced Features of the New UI of OS X Yosemite: <a href="http:&#x2F;&#x2F;asciiwwdc.com&#x2F;2014&#x2F;sessions&#x2F;220" rel="nofollow">http:&#x2F;&#x2F;asciiwwdc.com&#x2F;2014&#x2F;sessions&#x2F;220</a><p>&quot;You want to use the active state explicitly, very sparingly.<p>It can affect performance and battery life, because if you have a lot of visual effect views around they&#x27;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&#x27;s a panel that can&#x27;t become key for whatever reason.&quot; [...]<p>&quot;So you notice that blur we had and this may not surprise you but the blur effect isn&#x27;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&#x27;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.&quot; [...]<p>&quot;Corbin mentioned that layers are often required, especially for in window blurs, and layer usage is increasing just in general.&quot; [...]<p>&quot;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 &#x2F; Display Subsection &#x2F; Reduce Transparency] to Yes, and this will avoid the cost we pay when doing that blur.<p>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&#x27;s probably you&#x27;re using a VisualEffectView that&#x27;s too large or too many VisualEffectViews, and that&#x27;s a cue to dial down the transparency and blurring in the app.&quot; [...]<p>&quot;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&#x27;t necessarily tell you as much as you would hope.&quot; [...]<p>&quot;If you&#x27;re just doing a lighter development on your app, having activity monitor open can sometimes be useful.<p>It&#x27;s certainly not as in-depth as instruments but it will tell you how much CPU you&#x27;re using and more importantly it&#x27;ll tell you how much energy your app is taking to do what it&#x27;s doing.<p>And if you see that operating a little higher than you&#x27;re expecting that may be another cue that your VisualEffectView usage has gotten a little excessive.&quot; [...]<p>&quot;And finally, you folks remember like 40 seconds ago we talked a little bit about performance, and I do hope you&#x27;ll take some of those performance messages to heart when you leave.&quot;<p>This Ars Technica review of OS&#x2F;X 10.10 also discusses the cost of the blurring and vibrancy effects: 
<a href="http:&#x2F;&#x2F;arstechnica.com&#x2F;apple&#x2F;2014&#x2F;10&#x2F;os-x-10-10&#x2F;4&#x2F;" rel="nofollow">http:&#x2F;&#x2F;arstechnica.com&#x2F;apple&#x2F;2014&#x2F;10&#x2F;os-x-10-10&#x2F;4&#x2F;</a><p>&quot;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.<p>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.<p>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.&quot;