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