蘋果風格ui

重點 (Top highlight)

Apple announced some pretty wild updates at WWDC 2020 today.

蘋果今天在WWDC 2020上宣布了一些相當瘋狂的更新。

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.

除了技術之外，讓我們集中討論其UI的變化。 它經歷了第一個位圖表示，Aqua，更現代的樣式，現在都以一種全新的，一致的設計語言融合在一起。

Main Mac OS design stylesMac OS的主要設計風格

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.

移動和臺式機操作系統中的更改表示當前最有效的設計風格。 在獲得變形顯示之前，將保留軟UI。 蘋果今天展示的內容與微軟在Fluent UI設計中開發的內容之間存在相似之處。

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.

有趣的是，十年前蘋果嘲笑Windows Vista復制了他們的想法(很正確)，而現在他們將Microsoft方式合并到了產品中。

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.

一些較新的用戶可能不記得了這一點，但是在Apple始終偏向圓角時。

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.

最初的iPhone OS具有相當方形的開關和面板。 但是我們都知道，我們的原始條件仍然具有作為“牙齒”的尖角范式。 這使他們更加恐懼和不友好。

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

因此，Apple逐漸將切換開關細化為我們現在知道和喜歡的更全面的版本。

Left — first iPhone versions. Right: the natural progression towards more roundness.左-第一個iPhone版本。 正確：朝著更圓滑的方向自然發展。

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.

但是他們并沒有止步于此，還修改了圖標的角半徑。 現在，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.

窗口，面板和操作表也更圓一些。 大部分變化始于iPhone X，它的顯示屏非常圓潤。 這導致操作表頂部也要四舍五入。

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.

當臭名昭著的iOS 7發布時，透明度和背景模糊變得很流行。 大多數人討厭超極簡主義和超薄字體的結合。

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.

但是大多數人也非常喜歡背景模糊效果。 現在，背景模糊在側邊欄(一些Mac OS之前的版本)甚至工具提示中都變得更加突出。

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.

我相信這種變化將是漸進的。 蘋果希望在Mac OS圖標風格中保持足夠的“真實感”，同時使其更接近于移動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.

Mac OS工具欄圖標也變得與典型的iOS / iPad OS圖標更加一致。 圖標樣式再次變得圓潤，友好和開放。 筆觸足夠厚，易于理解，并且圖標沒有任何不必要的裝飾。

擬態？ (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.

Mac OS已經成為擬態元素的最后堡壘之一。 現在，它們已被合并為新的擬同構詞，并與現代的平坦表面相結合。 它為OS賦予了現代的新外觀，同時還使其以自己的風格為基礎。

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.

在進行更少量的重新設計之前，這可能是中間立場。 畢竟，我們喜歡我們認為熟悉的東西，因此可以像iOS 7一樣收到根本性的改變。

其他 (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.

先前的Mac OS版本還從移動OS中引入了Dark Mode和San Francisco(字體)。 現在，Apple Design系統幾乎可以在所有平臺上保持一致。

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.

整個重新設計還證明，擁有數百萬用戶的公司很可能將UI推向可行的總體方向 。

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.Soft UI的另一個示例，這一次來自我們自己的書籍插圖。

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.

但是我不相信蘋果沒有做功課。 他們肯定對大多數人喜歡的東西進行了廣泛的研究，而恰恰是這種趨勢已經流行了一段時間： 現代的Soft-UI。

Check out our 📕 Designing User Interfaces book. You can get 50 pages for free 👉 here. You can also watch some of my 🍒 YouTube design, or check out my agency :-)

查看我們的📕 設計用戶界面一書。 您可以在這里免費獲得50頁 👉 。 您也可以觀看我的某些YouTube設計 ，或查看我的代理商 ：-)

UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in.UX Para Minas Pretas (UX For Black Women)，這是一個巴西組織，致力于通過采取行動，賦權和知識共享的舉措來促進科技行業中的黑人女性平等。 對系統性種族主義保持沉默是不可行的。 建立您相信的設計社區。

翻譯自: https://uxdesign.cc/how-apple-makes-soft-ui-the-future-9f3ac69eea6f

蘋果風格ui

總結

以上是生活随笔為你收集整理的苹果风格ui_苹果如何使Soft-UI成为未来的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。