ios macos_设计师可以从iOS 14和macOS Big Sur中学到什么？
ios macos
重點(diǎn) (Top highlight)
With the introduction of iOS 14 and macOS Big Sur, we are the witness of the next big thing in UI Design. Changes are not so revolutionary like in iOS 7 years before, but they undoubtedly present the trend UI Designers will follow in the future…
隨著iOS 14和macOS Big Sur的推出，我們見(jiàn)證了UI設(shè)計(jì)中的下一個(gè)重大事件。 改變并不像7年前的iOS那樣具有革命性，但無(wú)疑，它們呈現(xiàn)了UI設(shè)計(jì)人員未來(lái)將遵循的趨勢(shì)…
…and it won’t be Neuomorphism. 😉
……這不會(huì)是神經(jīng)同質(zhì) 。 😉
平面設(shè)計(jì)不再是趨勢(shì) (Flat Design is No Longer A Trend)
Let’s make it clear — minimalistic does not mean flat. Some people tend to use these terms as one thing. New Apple Operating Systems remain minimalistic, but their appearance gains more shadows, textures, and 3d shapes.
讓我們說(shuō)清楚-簡(jiǎn)約并不意味著扁平。 有些人傾向于將這些術(shù)語(yǔ)當(dāng)作一件事。 新的Apple操作系統(tǒng)保持極簡(jiǎn)主義，但是它們的外觀獲得更多陰影，紋理和3d形狀。
Like Alan Dye, VP Human Interface at Apple said: “Depth, Shading and Translucency are used to create the hierarchy. New materials are rich and vibrant….”
就像蘋(píng)果人機(jī)界面副總裁艾倫·戴(Alan Dye)所說(shuō)： “深度，陰影和半透明性用于創(chuàng)建層次結(jié)構(gòu)。 新材料豐富而充滿活力……”
Apple reduces visual complexity and makes the design even more minimalistic. Some elements are flatter, but the feel is the opposite. Both iOS and macOS brings more 3d dimensions to their user experience.
Apple降低了視覺(jué)復(fù)雜性，并使設(shè)計(jì)更加簡(jiǎn)約。 有些元素比較扁平，但感覺(jué)卻相反。 iOS和macOS都為其用戶體驗(yàn)帶來(lái)了更多3D尺寸。
👋 Tip for Designers: Think how minimalism may gain space in your design. Observe how simple effects (shadows, translucency) build visual hierarchy.
for設(shè)計(jì)師提示： 考慮極簡(jiǎn)主義如何在您的設(shè)計(jì)中獲得空間。 觀察簡(jiǎn)單的效果(陰影，半透明)如何建立視覺(jué)層次。
Apple蘋(píng)果新的微妙功能 (New Subtle Affordances)
The human brain needs a hint to recognize the object. We tend to perceive 3d objects as interactive ones. That’s why lots of buttons still have a shadow.
人腦需要一個(gè)提示來(lái)識(shí)別物體。 我們傾向于將3d對(duì)象視為交互式對(duì)象。 這就是為什么許多按鈕仍帶有陰影的原因。
However, motion is also an additional clue. Apple designers know that and the macOS toolbar icons lost their shapes to remove visual complexity. But, when a user drags the cursor around, their background highlights and encourage them to press the action.
但是， 運(yùn)動(dòng)還是另外一條線索。 蘋(píng)果設(shè)計(jì)師知道，macOS工具欄圖標(biāo)失去了形狀以消除視覺(jué)復(fù)雜性。 但是，當(dāng)用戶在周?chē)蟿?dòng)光標(biāo)時(shí)，他們的背景會(huì)突出顯示并鼓勵(lì)他們按下操作。
The last obvious affordance is color. Apple wants designers to use Tint (or Accent) color to make active elements more visible. This tone should reflect the brand or product color. Thanks to this user immediately build a mental connection between the company and the application.
最后一個(gè)明顯的負(fù)擔(dān)是顏色。 蘋(píng)果希望設(shè)計(jì)師使用色調(diào)(或口音)顏色來(lái)使活動(dòng)元素更加可見(jiàn)。 此色調(diào)應(yīng)反映品牌或產(chǎn)品顏色。 多虧了該用戶，才能立即在公司和應(yīng)用程序之間建立精神聯(lián)系。
👋 Tip for Designers: Don’t be afraid of not highlighting all options. Not every button needs to have a shape. It may appear when a user hovers over its surface. Experiment with tints and remove visual complexity where it is possible.
Designer設(shè)計(jì)師提示： 不要擔(dān)心沒(méi)有突出顯示所有選項(xiàng)。 并非每個(gè)按鈕都需要具有形狀。 當(dāng)用戶將鼠標(biāo)懸停在其表面上時(shí)，它可能會(huì)出現(xiàn)。 嘗試色調(diào)，并盡可能消除視覺(jué)上的復(fù)雜性。
Apple蘋(píng)果制作數(shù)字資料 (Crafting in digital materials)
It has begun with Material Design from Google that showed us the vision of digital paper, then Microsoft introduced Fluent Design with the concept of multiple digital textures. It looks like Apple followed that, what’s more they moved it to the next level!
從Google的Material Design開(kāi)始，向我們展示了數(shù)字紙的愿景 ，然后Microsoft引入了Fluent Design，它具有多種數(shù)字紋理的概念。 看起來(lái)蘋(píng)果公司緊隨其后，而且他們將其提升到了一個(gè)新的高度！
It is a great decision because digital Materials are more pleasant to our minds than raw pixelated squares. They make User Interface more human friendly.
這是一個(gè)很好的決定，因?yàn)閿?shù)字材料比原始像素正方形更令人愉悅。 它們使用戶界面更加人性化。
👋 Tip for Designers: Play with the concept of digital material. Use depth, shadows, and translucency to create visual hierarchy. If you are not yet familiar with Material Design or Fluent Design System, read their guidelines to understand the concept.
for設(shè)計(jì)師提示： 發(fā)揮數(shù)字材料的概念。 使用深度，陰影和半透明來(lái)創(chuàng)建視覺(jué)層次。 如果您還不熟悉 Material Design 或 Fluent Design System ，請(qǐng)閱讀他們的指南以了解概念。
Apple蘋(píng)果微妙的效果營(yíng)造了質(zhì)量意識(shí) (Subtle Effects Build The Sense of Quality)
There are tiny details that make a difference. You cannot see all of them from mockups or screenshots, because some of them are motion or sound (yeah, Big Sure introduces dozens of new and enhanced UI sounds).
有一些微小的細(xì)節(jié)會(huì)有所作為。 您無(wú)法從模型或屏幕截圖中看到所有這些聲音，因?yàn)槠渲幸恍┞曇艋蚵曇?是的，Big Sure引入了數(shù)十種新的和增強(qiáng)的UI聲音)。
The thing that is primarily visible to Designers is the next generation of blur effect — called Progressive blur. It is about making the gradient of blur levels instead of hiding it below opacity or shadow.
設(shè)計(jì)師最主要看到的是下一代模糊效果-稱(chēng)為漸進(jìn)模糊 。 這是關(guān)于使模糊級(jí)別漸變，而不是將其隱藏在不透明度或陰影下。
👋 Tip for Designers: See where and how Progressive Blur is used around the new OS. Think about how it may be applied in your designs. Which design tools may achieve that effect now?
Designer設(shè)計(jì)者提示： 了解在新OS的何處以及如何使用漸進(jìn)式模糊。 考慮一下如何將其應(yīng)用到您的設(shè)計(jì)中。 哪些設(shè)計(jì)工具現(xiàn)在可以達(dá)到這種效果？
“Depth, Shading & Translucency are used to create the hierarchy.”
“深度，陰影和半透明性用于創(chuàng)建層次結(jié)構(gòu)?！?/strong>
– Alan Dye
–艾倫·戴(Alan Dye)
圖標(biāo)中的新擬態(tài) (New Skeumorphism in Icons)
In the last years, the macOS style was flattening the app icons and surrounded the symbols with mainly circular shapes. This has changed. Now the majority of icons gained “iOS-like” shape, but it is not flat. It is Skeuomorphic!
在過(guò)去的幾年中，macOS風(fēng)格使應(yīng)用程序圖標(biāo)扁平化，并以圓形符號(hào)圍繞符號(hào)。 這已經(jīng)改變了。 現(xiàn)在，大多數(shù)圖標(biāo)都具有“類(lèi)似于iOS的形狀”，但它并不平坦。 這是擬態(tài)的！
Personally, I think that lots of new icons in the macOS look stunning, but some are not designed so well (for example Stock app icon).
我個(gè)人認(rèn)為，macOS中的許多新圖標(biāo)看起來(lái)都很漂亮，但有些圖標(biāo)的設(shè)計(jì)不是那么好(例如Stock應(yīng)用程序圖標(biāo))。
👋 Tip for Designers: Explore the gallery of the new icons. See how additional shadows and gradients change the feeling of flat iOS icons that perfectly fits the Big Sur icon style. Consider using 3D shapes for some elements.
Designer設(shè)計(jì)師提示： 瀏覽新圖標(biāo)的庫(kù)。 了解其他陰影和漸變?nèi)绾胃淖兺耆m合Big Sur圖標(biāo)樣式的平面iOS圖標(biāo)的感覺(jué)。 考慮對(duì)某些元素使用3D形狀。
Apple蘋(píng)果使用小部件顯示即時(shí)信息 (Show Immediate Information with Widgets)
iOS 14 brings a totally new approach to widgets. They are displayed directly in a Home Screen. These widgets look almost identical on iPad OS and very similar to the new ones on macOS Big Sur.
iOS 14為小部件帶來(lái)了全新的方法。 它們直接顯示在主屏幕中。 這些小部件在iPad OS上看起來(lái)幾乎相同，并且與macOS Big Sur上的新部件非常相似。
Apple recommends us to focus the widget on one idea. To display only the information that’s is related to it, nothing more. It is also important to display dynamic information that is changing through time because the widget should not only encourage to open the app.
Apple建議我們將小部件集中在一個(gè)想法上。 僅顯示與之相關(guān)的信息，僅此而已。 顯示隨時(shí)間變化的動(dòng)態(tài)信息也很重要，因?yàn)樾〔考粌H應(yīng)鼓勵(lì)打開(kāi)應(yīng)用程序。
👋 Tip for Designers: Think which information from your app is the most important to the users. This type of content may be a foundation of a useful widget. Try to experiment with the new dimensions (Small, Medium, and Large) of widgets displayed directly in the Home Screen. Remember, to support Dark Mode!
Designer設(shè)計(jì)者提示： 考慮您應(yīng)用中的哪些信息對(duì)用戶來(lái)說(shuō)最重要。 這種類(lèi)型的內(nèi)容可能是有用的小部件的基礎(chǔ)。 嘗試嘗試直接在主屏幕中顯示的小部件的新尺寸(小，中和大)。 記住，要支持黑暗模式！
Apple蘋(píng)果整體生態(tài)系統(tǒng)方法 (Holistic Approach to The Ecosystem)
All Apple Systems iOS, iPadOS, macOS even watchOS works as a single ecosystem. They have got the same font, iconography, and almost identical visual styles.
所有Apple Systems iOS，iPadOS，macOS甚至watchOS都可以作為單個(gè)生態(tài)系統(tǒng)工作。 他們具有相同的字體，圖標(biāo)和幾乎相同的視覺(jué)樣式。
Consistency gives the user a feeling of familiarity and confidence. It builds more trust and a better connection with the brand.
一致性使用戶感到熟悉和自信。 它建立了更多的信任并與品牌建立了更好的聯(lián)系。
👋 Tip for Designers: If you are creating an omnichannel solution, available to all kinds of devices, observe how Apple apps change through platforms. Where is the consistency maintained? Where are the changes made? What features are added to different platforms? You may also want to read Task Driven Design to know more.
Designer設(shè)計(jì)人員提示： 如果要?jiǎng)?chuàng)建可用于所有設(shè)備的全渠道解決方案，請(qǐng)觀察Apple應(yīng)用程序如何在平臺(tái)之間發(fā)生變化。 哪里保持一致性？ 在哪里進(jìn)行更改？ 哪些功能已添加到不同的平臺(tái)？ 您可能還想 閱讀“任務(wù)驅(qū)動(dòng)設(shè)計(jì)”以了解更多信息 。
The official Human Interface Guidelines are always the best source for deep analysis of the new style and features. Feel free to read them here:
官方的人機(jī)界面指南始終是深入分析新樣式和功能的最佳來(lái)源。 隨時(shí)在這里閱讀它們：
macOS Big Sure Guidelines
macOS Big Sure準(zhǔn)則
iOS 14 — What’s New Guidelines
iOS 14-新增功能指南
Apple introduced lots of new inspiring things. While widgets, clips, and Progressive Blur in iOS 14 bring a lot of fresh experience to the mobile OS — it is the Big Sure that revolutionizes the way we use our macs. Even with its name — did you notice that it is named macOS 11?
蘋(píng)果推出了許多新的啟發(fā)性的東西。 盡管iOS 14中的小部件，剪輯和漸進(jìn)式模糊為移動(dòng)操作系統(tǒng)帶來(lái)了很多新鮮體驗(yàn)，但是Big Sure徹底改變了我們使用Mac的方式。 即使使用它的名稱(chēng)-您是否注意到它的名稱(chēng)為macOS 11 ？
Observing how digital systems evolve and impact design is my passion. I also create time-saving 🧰 UX Resources and write ?? UI Design Tutorials. The article originally published on my blog. Thanks for reading!
我熱衷于觀察數(shù)字系統(tǒng)如何發(fā)展和影響設(shè)計(jì)。 我還創(chuàng)建了省時(shí)的🧰UX 資源，并編寫(xiě)了??UI 設(shè)計(jì)教程 。 該文章最初發(fā)表在我的博客上 。 謝謝閱讀！
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/what-can-designers-learn-from-ios-14-and-macos-big-sur-bab6e188ba4e
ios macos
總結(jié)
以上是生活随笔為你收集整理的ios macos_设计师可以从iOS 14和macOS Big Sur中学到什么？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： [html] 移动端如何禁止用户手动缩
- 下一篇： 前端学习（2997）：vue+eleme