苹果风格ui_苹果如何使Soft-UI成为未来
蘋果風(fēng)格ui
重點(diǎn) (Top highlight)
Apple announced some pretty wild updates at WWDC 2020 today.
蘋果今天在WWDC 2020上宣布了一些相當(dāng)瘋狂的更新。
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.
除了技術(shù)之外，讓我們集中討論其UI的變化。 它經(jīng)歷了第一個(gè)位圖表示，Aqua，更現(xiàn)代的樣式，現(xiàn)在都以一種全新的，一致的設(shè)計(jì)語(yǔ)言融合在一起。
Main Mac OS design stylesMac OS的主要設(shè)計(jì)風(fēng)格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.
移動(dòng)和臺(tái)式機(jī)操作系統(tǒng)中的更改表示當(dāng)前最有效的設(shè)計(jì)風(fēng)格。 在獲得變形顯示之前，將保留軟UI。 蘋果今天展示的內(nèi)容與微軟在Fluent UI設(shè)計(jì)中開(kāi)發(fā)的內(nèi)容之間存在相似之處。
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復(fù)制了他們的想法(很正確)，而現(xiàn)在他們將Microsoft方式合并到了產(chǎn)品中。
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.
一些較新的用戶可能不記得了這一點(diǎn)，但是在Apple始終偏向圓角時(shí)。
They got progressively more rounded along the way.
他們?cè)诖诉^(guò)程中逐漸變得更加全面。
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具有相當(dāng)方形的開(kāi)關(guān)和面板。 但是我們都知道，我們的原始條件仍然具有作為“牙齒”的尖角范式。 這使他們更加恐懼和不友好。
So Apple refined the toggles slowly towards a more rounded version we know and love now.
因此，Apple逐漸將切換開(kāi)關(guān)細(xì)化為我們現(xiàn)在知道和喜歡的更全面的版本。
Left — first iPhone versions. Right: the natural progression towards more roundness.左-第一個(gè)iPhone版本。 正確：朝著更圓滑的方向自然發(fā)展。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.
但是他們并沒(méi)有止步于此，還修改了圖標(biāo)的角半徑。 現(xiàn)在，Mac OS也出現(xiàn)了類似樣式的圖標(biāo)。
The UI started matching the curve of the actual display.用戶界面開(kāi)始匹配實(shí)際顯示的曲線。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，它的顯示屏非常圓潤(rùn)。 這導(dǎo)致操作表頂部也要四舍五入。
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.
當(dāng)臭名昭著的iOS 7發(fā)布時(shí)，透明度和背景模糊變得很流行。 大多數(shù)人討厭超極簡(jiǎn)主義和超薄字體的結(jié)合。
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.
但是大多數(shù)人也非常喜歡背景模糊效果。 現(xiàn)在，背景模糊在側(cè)邊欄(一些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.
在許多情況下，背景模糊(尤其是在側(cè)邊欄下方)可以通過(guò)允許部分背景顯示出來(lái)來(lái)表明窗口的這一部分“連接”到整個(gè)操作系統(tǒng)。
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.
分層使用相同的眾所周知的概念，即使更淺的表面更靠近用戶，而隨后，較低級(jí)別的堆棧會(huì)稍微變暗。 即使沒(méi)有半透明的效果，也顯示出等級(jí)。
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.
我個(gè)人對(duì)此選項(xiàng)不太確定，我相信純色會(huì)使它更清晰，但我理解與下面的圖層“連接”的愿望。
統(tǒng)一符號(hào)(多種) (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.
我相信這種變化將是漸進(jìn)的。 蘋果希望在Mac OS圖標(biāo)風(fēng)格中保持足夠的“真實(shí)感”，同時(shí)使其更接近于移動(dòng)OS。
Here’s how the finder icon has changed so far:
到目前為止，查找器圖標(biāo)的更改方式如下：
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.
該圖標(biāo)絕對(duì)經(jīng)過(guò)簡(jiǎn)化，并且丟失了矩形形狀，其余的圓角正方形變得均勻了。 由于某種原因，微笑會(huì)變得更稀疏(可能會(huì)改變)，但微笑的角度也會(huì)有所不同，以使其更加友好。
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工具欄圖標(biāo)也變得與典型的iOS / iPad OS圖標(biāo)更加一致。 圖標(biāo)樣式再次變得圓潤(rùn)，友好和開(kāi)放。 筆觸足夠厚，易于理解，并且圖標(biāo)沒(méi)有任何不必要的裝飾。
擬態(tài)？ (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已經(jīng)成為擬態(tài)元素的最后堡壘之一。 現(xiàn)在，它們已被合并為新的擬同構(gòu)詞，并與現(xiàn)代的平坦表面相結(jié)合。 它為OS賦予了現(xiàn)代的新外觀，同時(shí)還使其以自己的風(fēng)格為基礎(chǔ)。
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.
在進(jìn)行更少量的重新設(shè)計(jì)之前，這可能是中間立場(chǎng)。 畢竟，我們喜歡我們認(rèn)為熟悉的東西，因此可以像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版本還從移動(dòng)OS中引入了Dark Mode和San Francisco(字體)。 現(xiàn)在，Apple Design系統(tǒng)幾乎可以在所有平臺(tái)上保持一致。
San Francisco is a modern, sans-serif typeface that proves once again that simple is great.
舊金山是一種現(xiàn)代的無(wú)襯線字體，再次證明簡(jiǎn)單是一件很了不起的事情。
This whole redesign also proves, that a company with millions of users is likely pushing the UI in the general direction that works.
整個(gè)重新設(shè)計(jì)還證明，擁有數(shù)百萬(wàn)用戶的公司很可能將UI推向可行的總體方向 。
Things like rounded corners, soft shadows and delicate gradients are here to stay.
圓角，柔和陰影和微妙的漸變之類的東西都將保留下來(lái)。
Another example of Soft UI, this time from our own book illustrations.Soft UI的另一個(gè)示例，這一次來(lái)自我們自己的書籍插圖。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.
當(dāng)然，旨在為“所有人”工作的產(chǎn)品將需要遵循最常見(jiàn)的地面友好準(zhǔn)則。 這并不意味著我們?cè)谒胁僮髦卸紤?yīng)使用相同的規(guī)則。
If you’re making a highly specialised, niche product, you can still use sharp corners, fully opaque layers and so on.
如果您要生產(chǎn)高度專業(yè)化的利基產(chǎn)品，則仍可以使用尖角，完全不透明的圖層等。
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.
但是我不相信蘋果沒(méi)有做功課。 他們肯定對(duì)大多數(shù)人喜歡的東西進(jìn)行了廣泛的研究，而恰恰是這種趨勢(shì)已經(jīng)流行了一段時(shí)間： 現(xiàn)代的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 :-)
查看我們的📕 設(shè)計(jì)用戶界面一書。 您可以在這里免費(fèi)獲得50頁(yè) 👉 。 您也可以觀看我的某些YouTube設(shè)計(jì) ，或查看我的代理商 ：-)
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)，這是一個(gè)巴西組織，致力于通過(guò)采取行動(dòng)，賦權(quán)和知識(shí)共享的舉措來(lái)促進(jìn)科技行業(yè)中的黑人女性平等。 對(duì)系統(tǒng)性種族主義保持沉默是不可行的。 建立您相信的設(shè)計(jì)社區(qū)。翻譯自: https://uxdesign.cc/how-apple-makes-soft-ui-the-future-9f3ac69eea6f
蘋果風(fēng)格ui
總結(jié)
以上是生活随笔為你收集整理的苹果风格ui_苹果如何使Soft-UI成为未来的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Java实现HTML代码生成PDF文档
- 下一篇： [html] 如何去除标签＜i＞默认斜