ux和ui

As a way to improve my UI/UX skills I decided to read the guidelines for 10 popular UI/UX design systems. In this article I will give you a concise summary of the most important concepts.

為了提高我的UI / UX技能，我決定閱讀10種流行的UI / UX設計系統的指南。 在本文中，我將為您簡要概述最重要的概念。

follow me on twitter for future updates and tutorials: https://twitter.com/iqbal125sf

在Twitter上關注我，以獲取將來的更新和教程： https : //twitter.com/iqbal125sf

Biggest Takeaway

最大的外賣

The biggest thing I learned about UI/UX from these libraries is that good UI/UX is about simplicity more than anything else.

我從這些庫中學到的關于UI / UX的最大收獲是，好的UI / UX不僅僅是簡單性，更是簡單性。

A lot of good UI/UX is common sense and the problems come from overthinking things. Even without formal training or knowledge most people can eyeball a good or bad UI.

很多好的UI / UX是常識，而問題來自于過度思考。 即使沒有正式的培訓或知識，大多數人也可以關注良好或不良的UI。

If it looks right it probably is, and if it looks off it probably is.

如果看起來正確，則可能是，如果看起來正確，則可能是。

I don’t want to list specific examples, because that may seem like I'm denigrating the design system, but I would recommend looking at the “Dos and Donts” section of some of the libraries. It’s pretty obvious why the components/elements are bad UI. For example, having vague or verbose button text. Having mislabeled inputs fields, etc.

我不想列出特定的示例，因為這似乎在貶低設計系統，但我建議您查看一些庫的“注意事項”部分。 很明顯，組件/元素的UI不好。 例如，具有模糊或冗長的按鈕文本。 輸入字段標簽錯誤等

Most of the counterexample UIs come from vagueness or over complicating things, both of which can be solved with simplicity. ?

大多數反例UI來自模糊性或過于復雜的事物，這兩者都可以通過簡單的方式解決。

Good UX

好的用戶體驗

A lot of good UX also has to do with empathy and being able to predict and address the needs of users. Most of this has got to do with setting up your UI to be as simple and direct as possible. Bad UX is vague or overly complex.

許多優秀的UX也與同理心有關，并且能夠預測和滿足用戶的需求。 這大部分與將UI設置得盡可能簡單和直接有關。 錯誤的UX含糊不清或過于復雜。

UI should not be the focus. Make it “invisible”, so the user should barely notice it.

用戶界面不應成為重點。 使它“不可見”，因此用戶幾乎不應該注意到它。

Good Content

好內容

Unanimously all 10 design systems agreed that text content should be written in a simple natural conversational style. Almost like you are talking to a friend or acquaintance.

所有10個設計系統都一致同意，文本內容應以一種簡單自然的對話方式編寫。 就像您在和朋友或熟人聊天一樣。

Also things to note:

另外要注意的事情：

• Break up walls of text with meaningful headings
  用有意義的標題打破文本墻
• Content should be concise and to the point. ?
  內容應簡明扼要。
• Content should not sound condescending in order to appear authoritative.
  為了顯得權威，內容不應屈尊。

Some Good heuristics:

一些好的啟發式方法：

• Use light backgrounds. dark backgrounds for nighttime mode only.
  使用淺色背景。 深色背景，僅適用于夜間模式。
• Be as unobtrusive as possible with popups. Modals should only block the main UI to confirm urgent actions, such as deleting assets. ?
  彈出窗口盡可能不引人注意。 模式應僅阻止主用戶界面以確認緊急操作，例如刪除資產。
• Have about 60-80 characters per line for written content
  每行文字內容大約60-80個字符
• Familiarity: use easily recognizable icons for common tasks. shopping cart icon and Floppy disk for save
  熟悉：使用易于識別的圖標執行常見任務。 購物車圖標和用于保存的軟盤
• Forgiveness: have a way to undo important actions
  寬恕：有辦法撤消重要行動
• Graceful error handling: If something fails or doesn’t function as intended it should be obvious to the user why
  優美的錯誤處理：如果某項操作失敗或無法按預期運行，則對于用戶而言應該顯而易見
• Use skeleton components instead of loading screens
  使用骨架組件代替加載屏幕

• Use BEM naming scheme or something similar for CSS

  使用BEM命名方案或類似CSS

Here are the libraries:

這里是庫：

Google: https://material.io/design/

谷歌： https ： //material.io/design/

Shopify: https://polaris.shopify.com/design/colors

Shopify： https ：//polaris.shopify.com/design/colors

IBM: https://www.carbondesignsystem.com/guidelines/accessibility/overview

IBM： https ： //www.carbondesignsystem.com/guidelines/accessibility/overview

SalesForce: https://www.lightningdesignsystem.com/guidelines/builder/

SalesForce： https ：//www.lightningdesignsystem.com/guidelines/builder/

Apple: https://developer.apple.com/design/

蘋果： https ： //developer.apple.com/design/

UK Government: https://design-system.service.gov.uk

英國政府： https ： //design-system.service.gov.uk

Mailchimp: https://ux.mailchimp.com/patterns

Mailchimp： https ：//ux.mailchimp.com/patterns

Starbucks: https://www.starbucks.com/developer/pattern-library

星巴克： https : //www.starbucks.com/developer/pattern-library

US government: https://v2.designsystem.digital.gov/Ui-patterns: http://ui-patterns.com/patterns/

美國政府： https ： //v2.designsystem.digital.gov/使用者介面： http ： //ui-patterns.com/patterns/

翻譯自: https://www.freecodecamp.org/news/lessons-learned-from-reading-10-ui-ux-design-systems/

ux和ui