애플의 UI 디자인의 특징

원문 : https://uxdesign.cc/how-apple-makes-soft-ui-the-future-9f3ac69eea6f

 

Apple announced some pretty wild updates at WWDC 2020 today.

But technology aside, let’s focus on how their UI has changed. It went through the first bitmap representations, through Aqua, more modern styles and now all comes together in a completely new, consistent design language.

Main Mac OS design styles

The changes in both the mobile and desktop operating systems signifies which design style currently works best. Until we get morphing displays, soft UI is here to stay. There are similarities between what Apple showed today and what Microsoft developed in its Fluent UI design.

It’s funny to think that over a decade ago Apple mocked Windows Vista for copying their ideas (quite rightfully) when now they merge the Microsoft way into their products.

So here’s the list:

(more) Rounded corners

Some of the newer users may not remember this, but while Apple was always leaning toward rounded corners.

They got progressively more rounded along the way.

The initial iPhone OS had rather square looking toggles and panels. But we all know that our primal conditioning still has sharp corners paradigm as “teeth”. That makes them more frightening and less friendly.

So Apple refined the toggles slowly towards a more rounded version we know and love now.

Left — first iPhone versions. Right: the natural progression towards more roundness.

But they didn’t stop there and also modified the corner radius of the icons. Now a similar style of icons is also coming to Mac OS.

The UI started matching the curve of the actual display.

The windows, panels and action sheets are a little bit more rounded as well. Most of that change started with the iPhone X, which had a very rounded display. That led to having action sheet tops rounded as well to match.

Rounded corners are here to stay.

Transparency and Background Blur

Transparency and background blur got popular when the infamous iOS 7 came out. Most people hated the new look of ultra minimalism combined with super-thin fonts.

But most people also liked the background blur effect a lot. Now background blurs are getting more prominent both in the sidebar (a few Mac OS versions ago) and even in tooltips.

In many cases the background blur — especially under the sidebar — can show that this part of the window is “connected” to the entire OS by allowing parts of the background to show through.

Microsoft is using a very similar, layer-based approach using transparency.

The layering uses the same well-known concept of having a lighter surface closer to the user, while subsequent, lower levels of the stack get a little bit darker. That shows hierarchy even without the translucent effect.

Personally I’m not too sure about this option, I believe a solid color would make it clearer, but I understand the desire to “connect” with the layers underneath.

Unified symbols (sort of)

I believe this change is going to be gradual. Apple wanted to keep enough iof the “realism” in Mac OS icon style, while bringing them even closer to the mobile OS.

Here’s how the finder icon has changed so far:

The icon is definitely simplified, and it’s lost it’s rectangular shape becoming uniform with the rest of the heavily rounded squares. The smile is thinner for some reason (it’ll likely change) but the angle of it is also different to make it even more friendly.

The Mac OS toolbar icons are also becoming more uniform with typical iOS / iPad OS icons. The icon style is once again rounded, friendly and open. The strokes are thick enough to be easy to understand and icons don’t have any unnecessary decorations.

Skeuomorphism?

Mac OS has been one of the last bastions of Skeuomorphic elements. Well now they’re being merged into a new-skeuomorphism and combined with modern, flat surfaces. It gives the OS that modern new look, but also keeps it grounded with it’s own style.

It’s likely a middle-ground before a more minimal redesign comes along. After all we like what we believe is familiar, so a radical change could’ve been received like iOS 7 was.

Others

Previous Mac OS versions also brought Dark Mode and San Francisco (font) from the mobile OS. Now Apple Design system is very close to being consistent across all their platforms.

San Francisco is a modern, sans-serif typeface that proves once again that simple is great.

This whole redesign also proves, that a company with millions of users is likely pushing the UI in the general direction that works.

Things like rounded corners, soft shadows and delicate gradients are here to stay.

Another example of Soft UI, this time from our own book illustrations.

Sure, a product designed to work for “all humans” will need to follow the most common-ground friendly guidelines. That doesn’t mean we should use those same rules in everything we do.

If you’re making a highly specialised, niche product, you can still use sharp corners, fully opaque layers and so on.

But I don’t believe Apple didn’t do their homework. They surely did extensive research on what most people like, and it happens to be the trend that’s been gaining momentum for a while now: Modern, Soft-UI.