ux和ui

重点 (Top highlight)

This is a mega-list of the most critical knowledge for UI, UX, interaction, or product designers at any level.

这是所有级别的UI,UX,交互或产品设计人员最关键的知识的大清单。

Many of these lessons are also applicable to project managers, engineers, strategists, QA, researchers, and others involved in product development.

这些课程中的许多课程也适用于项目经理,工程师,战略家,质量保证,研究人员以及参与产品开发的其他人员。

This is a curated collection of the foundational principles that I’ve shared on my Medium blog over the past year. I’ve covered topics like skill development, rules & principles, creativity, career tips, and everything in between.

这是我在过去一年中在我的中型博客上分享的基本原则的精选集合。 我涵盖了诸如技能开发,规则和原则,创造力,职业技巧以及介于两者之间的所有主题。

All lessons that were originally shared on my blog have been revisited to ensure their accuracy.

重新访问了最初在我的博客上分享的所有课程,以确保其准确性。

I‘ll link to each article if you’d like to dive deeper into the concepts discussed and explore other items that were left out. I’ve tried to select the most crucial points from each article, but inevitably essential items were omitted for brevity.

如果您想更深入地讨论讨论的概念并探索其他遗漏的项目,我将链接到每篇文章。 我试图从每篇文章中选择最关键的要点,但是为了简洁起见,不可避免地省略了必不可少的项目。

A list of reliable design rules to follow, when in doubt.

如有疑问,请遵循一系列可靠的设计规则。

Original article — 10 Rules of Thumb in UI Design.

原始文章— UI设计中的10条经验法则 。

1.专为密度而不是像素而设计 (1. Design for density, not pixels)

pixel values are 3 or 4x the dp values
像素值是dp值的3或4倍

What is density? Density is the number of pixels per inch of a screen, also known as PPI. The unit “dp” is short for “density-independent pixel,” also sometimes abbreviated as “dip.”

什么是密度? 密度是屏幕每英寸的像素数,也称为PPI。 “ dp”单位是“密度无关像素”的缩写,有时也缩写为“ dip”。

Why do we use density instead of pixels? When designing an interface, it’s recommended that we don’t design for pixels, but rather for the pixel density of the device. This ensures that our elements are appropriately scaled to fit different device sizes.

为什么我们使用密度而不是像素? 在设计接口时,建议不要为像素设计,而应为设备的像素密度设计。 这样可以确保我们的元素适当缩放以适合不同的设备尺寸。

We do this, so if we design a button asset, for example, at 200 x 50 dp, it’s displayed at 200 x 50 px on a 160ppi screen and 400 x 100 px on a 320 ppi screen, or 2x the size of the original asset.

我们这样做,因此,如果我们设计一个按钮素材资源,例如200 x 50 dp,则在160ppi屏幕上显示为200 x 50 px,在320 ppi屏幕上显示为400 x 100 px,即原始尺寸的2倍资产。

Since some screens have more pixels per inch than others, the assets aren’t displayed smaller on screens with a high pixel density; they’re rendered at 2x, 3x, 4x their original size. This makes sure that all assets maintain their sizing across different devices with varying densities.

由于某些屏幕每英寸的像素要多于其他屏幕,因此在像素密度高的屏幕上资产不会显示得更小; 它们以原始大小的2倍,3倍,4倍进行渲染。 这样可以确保所有资产在具有不同密度的不同设备之间保持其大小。

How does density translate to screen size? The dimensions for the iPhone XS Max’s screen, for example, is 414 x 896. But that’s not pixels, that’s the number of points. In pixels, it’s 1242 x 2688 px. With that in mind, when designing for the iPhone XS Max, I would design at 414 x 896 points and then deliver assets @ 3x.

密度如何转换为屏幕尺寸? 例如,iPhone XS Max的屏幕尺寸为414 x896。但这不是像素,而是点数。 以像素为单位,为1242 x 2688像素。 考虑到这一点,在为iPhone XS Max进行设计时,我会以414 x 896点进行设计,然后以3x的比例交付资产。

2.使用8dp增量 (2. Use 8dp increments)

Why design with spacing in increments of 8? There’s a simple explanation for this; We use magic number 8 because it renders odd numbers properly. As opposed to 5, for example, on a device with a 1.5x resolution, odd numbers won’t render correctly.

为什么设计间距以8为增量? 有一个简单的解释。 我们使用魔术数字8,因为它可以正确呈现奇数。 与5相对,例如,在分辨率为1.5倍的设备上,奇数将无法正确呈现。

Additionally, the vast majority of modern screen dimensions are divisible by 8, making it simple to align our designs appropriately on those devices.

此外,绝大多数现代屏幕尺寸都可以被8整除,从而可以轻松地在这些设备上适当地调整我们的设计。

By designing in increments of 8 on an 8-point grid, it creates consistency in our designs. There is no guesswork for spacing, and everything is aligned perfectly with the spacing conventions that we’ve defined.

通过在8点网格上以8为增量进行设计,可以在设计中保持一致性。 没有间距的猜测,并且所有内容都与我们定义的间距约定完全一致。

Where to learn more? Read Bryn Jackson’s 8-Point Grid article.

在哪里了解更多? 阅读Bryn Jackson的8点网格文章。

3.使用颜色权重建立层次结构 (3. Use color weight to establish hierarchy)

Every color has a visual weight, which we can use to create a hierarchy among our content. By using lighter hues of color, we can assign different levels of importance to elements.

每种颜色都有视觉上的重量,我们可以使用它在内容之间创建层次结构。 通过使用较浅的颜色,我们可以为元素分配不同的重要性级别。

What’s the rule of thumb for color weight? If an element is more important than another, it should be of a higher visual weight. This makes it easy for a user to quickly skim the page and distinguish between the important and less important information.

颜色权重的经验法则是什么? 如果一个元素比另一个元素更重要,则它应该具有更高的视觉重量。 这使用户易于快速浏览页面并区分重要和次要信息。

The bigger, bolder information is what the user’s eyes will be drawn to first, and then they will move on to the supporting information below it.

更大,更粗体的信息是首先要吸引用户眼球的内容,然后他们将继续浏览其下方的支持信息。

If you’d like to quickly create weight (tint & shade) variances, try Shaderade.

如果您想快速创建权重(色调和阴影)差异,请尝试使用Shaderade 。

4.不要让我慢下来 (4. Don’t slow me down)

The ultimate guide to proper use of animation in UX在UX中正确使用动画的终极指南

As a user, speed and efficiency are of paramount importance when interacting with a product. I’m using an application to solve a specific job to be done.

作为用户,与产品进行交互时,速度和效率至关重要。 我正在使用一个应用程序来解决要完成的特定工作。

“I wanna go fast” — Ricky Bobby

“我想快点走” – Ricky Bobby

If the experience of digitally depositing a check into my banking app is enjoyable, then that’s great, but don’t let your creativity get in the way of my objective as a user.

如果将数字化支票存入我的银行应用程序的体验令人愉快,那很好,但是请不要让您的创造力妨碍我作为用户的目标。

What’s the rule of thumb for animations? If the animations and micro-interactions add unnecessary time, then they’re not improving the experience. Being purposeful with animations can improve the experience, but adding unnecessary distractions and movement to elements will not.

动画的经验法则是什么? 如果动画和微交互增加了不必要的时间,那么它们并不能改善体验。 有目的性地使用动画可以改善体验,但是不会给元素增加不必要的干扰和移动。

I frequently see designs on Dribbble for landing pages that animate as the user scrolls through the page. It’s often overly animated with everything fading and moving, with little attention being paid to the UX. As a user, it can be challenging to know what I should pay attention to when so much is happening on the screen. It’s also wasting my precious time.

我经常在Dribbble上看到用于着陆页的设计,这些设计在用户滚动浏览页面时具有动画效果。 它的动画往往过于淡化,所有内容都在逐渐消失和移动,而对UX的关注却很少。 作为用户,当屏幕上发生太多事情时,要知道我应该注意些什么可能是一个挑战。 这也浪费了我的宝贵时间。

A bad example of animation for UX
UX动画的不良示例

What is the optimal speed for animations? “Numerous researches have discovered that optimal speed for interface animation is between 200 and 500 ms. These figures are based on the particular qualities of the human brain. Any animation shorter than 100 ms is instantaneous and won’t be recognized at all. Whereas the animation longer than 1 second would convey a sense of delay and thus be boring for the user.” — The ultimate guide to proper use of animation in UX

动画的最佳速度是多少? 大量研究发现,界面动画的最佳速度在200到500毫秒之间。 这些数字基于人脑的特殊素质。 任何短于100毫秒的动画都是瞬时的,根本不会被识别。 而动画时间超过1秒将传达一种延迟感,从而使用户感到无聊。” - 在UX中正确使用动画的最终指南

Key takeaways: The two parts to this are, if you’re using animation — be purposeful about it. And if those animations are purposeful, then don’t make me wait more than 500ms. In 2020 it only takes a millisecond to peeve your users.

关键要点:如果使用动画,则这两个部分是有目的的。 如果这些动画是有目的的,那么不要让我等待超过500毫秒。 在2020年,只需一毫秒即可激怒您的用户。

Using honest UX design to create reputable and trustworthy experiences.

使用诚实的UX设计来创建信誉良好且值得信赖的体验。

Original article — 10 Principles of Ethical UX Designs

原始文章— 道德用户体验设计的10条原则

5.通知我 (5. Notify Me)

It’s far too familiar for companies to rely on users registering for a free trial and then forgetting about it, causing them to pay for a subscription they no longer want.

对于公司来说,依靠用户注册免费试用版然后忘记它,导致他们为不再需要的订阅付费,实在是太陌生了。

We should keep our users informed and allow them to cancel their subscription after a free trial if it’s no longer of use to them.

如果用户不再使用订阅,我们应该及时通知他们,并允许他们在免费试用后取消订阅。

Or better yet, if you’re offering a free trial, don’t ask for a credit card at all because it is free — right?

或者更好的是,如果您要提供免费试用,请不要要求信用卡,因为它是免费的-对吗?

Inform your users every time they are about to be charged or have been charged.

每次要或将要向用户收费时通知他们。

6.突出显示负面信息 (6. Highlight negative information)

Airbnb
爱彼迎

Instead of leaving it up to the user to be informed on the possible negative aspects of a decision they’re about to make, it should be made crystal clear.

与其让用户知道他们将要做出的决定的负面影响,不如让它变得清晰明了。

I like how Airbnb informs me that the host I’m booking with doesn’t have a carbon monoxide detector, and I can’t throw parties. They could very easily hide this information, but they emphasize it to make sure you’re making a decision that you’re comfortable with.

我喜欢Airbnb告诉我所预订的主机没有一氧化碳检测器,并且我不能举办派对。 他们可以很容易地隐藏此信息,但他们会强调它以确保您做出自己满意的决定。

7.停止垃圾邮件 (7. Stop Spamming)

There’s nothing that makes me delete an app faster than spam notifications.

没有什么可以比垃圾邮件通知更快地删除应用程序了。

Respect your user’s time by only sending the most relevant notifications when it’s necessary. It’s also essential that you allow users to adjust their notification preferences quickly and easily.

通过仅在必要时发送最相关的通知来尊重用户的时间。 您还必须允许用户快速轻松地调整其通知首选项。

And if the notification isn’t responded to after a certain period, then it’s not doing its job and should be disabled automatically. It’s not doing anyone any good.

而且,如果在一段时间后未响应该通知,则说明该通知未完成工作,应自动将其禁用。 这对任何人都没有好处。

8.隐私透明度 (8. Privacy transparency)

Stop hiding everything behind a privacy policy.

停止将所有内容隐藏在隐私政策的背后。

If you’re gathering valuable information, then that’s something I need to know about and consent to. You can elaborate on the details in your privacy policy, but it’s very disingenuous when a company hides pertinent information in a document that no one reads.

如果您正在收集有价值的信息,那么我需要了解并同意这一点。 您可以详细说明隐私权政策中的详细信息,但是当公司将相关信息隐藏在没有人阅读的文档中时,这是非常不明智的。

9.轻松取消 (9. Make it easy as pie to cancel)

A roach motel is a dark UX pattern that makes it very easy to get into a situation and then annoyingly difficult to get out of it.

蟑螂汽车旅馆是一种黑暗的UX模式,它很容易陷入困境,而后又很难摆脱困境。

If I’ve subscribed to your product, make it dead simple to eliminate it.

如果我已经订阅了您的产品,就可以轻松消除它。

I shouldn’t be required to call a support line, send an email, read your FAQ, or chat with an agent. Just give me a damn button that says “cancel” and let me go on with my life.

无需致电支持热线,发送电子邮件,阅读常见问题解答或与代理商聊天。 请给我一个该死的按钮,说“取消”,让我继续生活。

Ways to improve the look and feel of your UI designs.

改善UI设计外观的方式。

Original article — 10 Ways to Spice up a UI Design.

原始文章—完善UI设计的10种方法 。

10.注入生命 (10. Inject life into your copy)

Whether it’s an onboarding screen or a loading message, users find delight in the small details. This is why companies like Old Spice and Geico have such a recognizable brand. By infusing humor and personality into their marketing, they create more memorable ads and content.

无论是入门屏幕还是加载消息,用户都可以从这些小细节中获得乐趣。 这就是为什么像Old Spice和Geico这样的公司拥有如此知名品牌的原因。 通过将幽默和个性注入到他们的营销中,他们创造了更令人难忘的广告和内容。

Aarron Walter, MailChimp’s director of user experience, says — “We’ve discovered that humor laced into copy, the personality of Freddie the MailChimp, and many easter eggs tucked into the workflow can transform an otherwise mundane task into an experience that people look forward to, and sometimes even miss.”

MailChimp用户体验总监Aarron Walter说 :“我们发现幽默感,复制品,Freddie the MailChimp的个性以及许多复活节彩蛋都塞入了工作流程,这些可以将原本平凡的任务转变为人们期待的体验甚至有时会错过。”

Injecting life into copy is the difference between saying “Loading…” and “Our team of highly trained monkeys is working on it.” It’s unexpected and provides a bit of entertainment for your user.

说“载入中……”和“我们训练有素的猴子团队正在努力”之间的区别在于注入生命。 这是意外的,并为您的用户提供了一些娱乐。

Good copy doesn’t necessarily mean it has to be humorous, either. It just means writing engaging and worth-reading text.

好的文案并不一定意味着它必须幽默。 这仅意味着编写引人入胜且值得阅读的文本。

Humor can also be excessive, and in some applications or industries, it just downright is not appropriate. As Lianna writes on her website, punchlinecopy, “Mortuaries, surgeons, and nuclear power plants should stay out of the humor copy arena.”

幽默也可能过多,在某些应用程序或行业中,仅仅彻头彻尾是不合适的。 作为丽安娜在她的网站上写道, punchlinecopy ,“停尸间,外科医生,和核电厂应留出幽默副本竞技场。”

MailChimp is so cool
MailChimp真酷

Alexis Ohanian, the co-founder of Reddit, said something in Tools of Titans that I loved — “Invest that little bit of time to make it a little bit more human or — depending on your brand — a little funnier, a little more different, or a little more whatever. It’ll be worth it, and that’s my challenge.

Reddit的联合创始人Alexis Ohanian说过我喜欢的《 Titans》中的一句话:“花点时间使它变得更人性化,或者(取决于您的品牌)更有趣,更不同,或者更多。 这将是值得的,这是我的挑战。

When designing your next product, consider how you can tie the experience together with engaging or amusing copy.

在设计下一个产品时,请考虑如何将体验与引人入胜或有趣的副本结合在一起。

11.愚蠢地添加黑暗模式选项 (11. Add a dark mode option silly)

By ProCreator — Dribbble
通过ProCreator — 运球

Depending on the application you’re developing, adding a dark theme option could provide solace for users like myself who live in dark mode. Dark mode is easier on the eyes, and it suddenly doesn’t feel like I’m staring at a lightbulb.

根据您正在开发的应用程序,添加深色主题选项可以为像我这样生活在深色模式下的用户提供安慰。 暗模式在眼睛上更容易些,突然之间我感觉好像不盯着灯泡。

Designing for dark mode isn’t much different than designing in light mode. All it requires is a different color palette. I’d recommend letting the user decide between dark mode or light mode — providing the ability to toggle between the two modes will improve the experience of your app and allow the users to maintain control over their experience.

在黑暗模式下进行设计与在明亮模式下进行设计没有太大不同。 它所需要的只是一个不同的调色板。 我建议让用户决定在暗模式还是亮模式之间进行选择-提供在两种模式之间切换的功能将改善您的应用体验,并允许用户保持对其体验的控制。

12.设置不会出错的错误状态 (12. Make error states that don’t suck)

See every event in your application, even the not so exciting ones, as an opportunity to provide a memorable experience.

看到应用程序中的每个事件,即使不是那么令人兴奋的事件,也都可以提供令人难忘的体验。

Error states are generally negative experiences, but you can turn them into positive ones by providing a touch of personality or enjoyment.

错误状态通常是消极的经历,但是您可以通过提供个性或乐趣来将其转变为积极的经历。

My favorite example of this is Google Chrome’s “no internet” error screen. They provide all the necessary information to inform the user on how to fix it, but also, there is a T-Rex endless runner game. Genius!

我最喜欢的示例是Google Chrome浏览器的“没有互联网”错误屏幕。 他们提供了所有必要的信息,以告知用户如何修复它,而且还提供了T-Rex无尽的跑步游戏。 天才!

Another one of my favorites is Dribbble’s 404 page. It’s brilliant because it keeps the user engaged and they can quickly get back to browsing dope designs.

我最喜欢的另一个是Dribbble的404页面 。 它之所以出色,是因为它可以使用户参与其中,并且他们可以快速返回浏览涂料设计。

“People still tweet about our error message on Hipmunk, and it’s an error message. Why are they doing that? Because it gave them a moment of levity when they were doing something that they expected to be pretty boring, like searching for a flight.” — Alexis Ohanian, the founder of Hipmunk, said.

“人们仍然在发关于我们在Hipmunk上的错误消息的推文,这是一条错误消息。 他们为什么要这样做? 因为这样做使他们在做一些原本希望很无聊的事情(例如寻找航班)时显得举足轻重。 -Hipmunk的创始人Alexis Ohanian说。

13.抛出一些图案和渐变 (13. Throw in some patterns and gradients)

Whimsical’s sign up screen异想天开的签到屏幕

Patterns and gradients are another great way to make unappealing content more eye-catching and aesthetically pleasing. Adding simple patterns and gradients behind images or to backgrounds adds style and flavor to otherwise bland and unexciting designs.

图案和渐变是使不吸引人的内容更加醒目且美观的另一种好方法。 在图像后面或背景上添加简单的图案和渐变会为原本平淡无奇的设计增添风格和风味。

UserTesting.com’s landing pageUserTesting.com的登录页面

You can be as creative or as minimal as you’d like with patterns. They shouldn’t distract from the main content, though.

您可以根据需要发挥创意或最小化。 但是,它们不应分散主要内容。

Design principles that are frequently missed.

经常错过的设计原则。

Original article — 10 Commandments for UI Design

原始文章— UI设计的10条诫命

14.空国家 (14. Empty States)

Thou shalt make blank states more than just an empty display

您应该使空白状态不只是一个空的显示

A display that would typically be populated with user input is blank because the user has opened your product for the first time.

由于用户是第一次打开您的产品,因此通常由用户输入填充的显示为空白。

This could be a list of books, projects, to-dos, customers, or songs — but since they haven’t added anything yet, it’s empty.

这可能是书籍,项目,待办事项,客户或歌曲的列表-但由于他们尚未添加任何内容,因此为空。

Leaving a blank slate where the content would be is a missed opportunity for you to provide guidance and information about your software.

在空白处保留内容将是您错过的机会来提供有关软件的指导和信息。

You should use your empty state to orient users.

您应该使用空状态来定向用户。

You can use empty states to provide advice, guidance, an overview of possible actions, or simply replace the empty state with a screen allowing users to input the missing information.

您可以使用空白状态来提供建议,指导,可能采取的措施的概述,也可以简单地将空白状态替换为允许用户输入缺失信息的屏幕。

Whatever you decide to do, make sure you don’t just say, “There’s nothing here yet…”

无论您决定做什么,请确保您不只是说:“这里什么都没有……”

15.目标 (15. Targets)

Thou shalt make controls large enough for human fingers

您应将控件的大小设置得足以使人的手指

If your interface is used by touch, then give an adequate size to tappable elements.

如果您的界面是通过触摸使用的,则为可点击元素提供足够的尺寸。

Having to avoid one item to select another is frustrating, and it doesn’t provide a pleasant experience if they choose an option they didn’t intend to.

不得不避免选择一个项目令人沮丧,并且如果他们选择了他们不打算使用的选项,这也不会提供令人愉快的体验。

2mm padding between elements is a good rule of thumb to prevent mis-taps.

元素之间的2mm填充是防止误敲的良好经验法则。

Apple’s iPhone Human Interface Guidelines recommends a minimum target size of 44 pixels wide 44 pixels tall.

苹果 iPhone人机界面指南 建议最小目标尺寸为44像素宽,44像素高。

Microsoft’s Windows Phone UI Design and Interaction Guide suggests a touch target size of 34px with a minimum touch target size of 26px.

Microsoft的Windows Phone UI设计和交互指南建议触摸目标大小为34px,最小触摸目标大小为26px。

16.无限滚动 (16. Infinite Scroll)

Thou shalt use infinite scroll for feed style content only

您只能将无限滚动仅用于供稿样式内容

Infinite scroll is what all the social media apps are using. No need to click to the next page, the content loads asynchronously as the user scrolls.

无限滚动是所有社交媒体应用程序所使用的。 无需单击到下一页,当用户滚动时,内容将异步加载。

This works great in a newsfeed, but if applied to messages, emails, to-do items, search, and so on then, the user won’t be able to determine where the beginning, middle, and end is.

这在新闻源中效果很好,但是如果将其应用于消息,电子邮件,待办事项,搜索等,则用户将无法确定开始位置,中间位置和结束位置。

When a user can see that there are 945 pages in a list, they can decide whether to narrow the list down with search, sort, or filter. They can’t make that decision if they have no idea how many items there are in the list.

当用户看到列表中有945页时,他们可以决定是通过搜索,排序还是过滤来缩小列表范围。 如果他们不知道列表中有多少个项目,他们将无法做出决定。

17.显示不告诉 (17. Show don’t tell)

Thou shalt not require laborious reading to understand how a program works

您不必费力地阅读即可了解程序的工作原理

The expression “show don’t tell” is often attributed to playwright Anton Chekhov, the technique of allowing the reader to experience the story through senses and feelings rather than the author’s description.

“表演不告诉”一词通常归因于剧作家安东·契kh夫(Anton Chekhov),这是一种使读者能够通过感官和感觉而不是作者的描述来体验故事的技术。

Users don’t want to read to understand — instead, show them the situation and allow them to experience it visually.

用户不想阅读以理解,而是向他们展示情况并让他们直观地体验。

Showing users how to use your product is always better than telling them.

向用户展示如何使用您的产品总是比告诉他们更好。

Video demos are ideal for complex software and interfaces, but if a video isn’t possible, then onscreen tips are a great starting point. Be sure, though, to make the tips visually appealing and dismissable.

视频演示非常适合复杂的软件和界面,但是如果无法观看视频,那么屏幕提示就是一个很好的起点。 但是,请确保使技巧在视觉上引人入胜且可以忽略。

18.本机组件 (18. Native Components)

Thou shalt use device native interface components where possible

尽可能使用设备本机接口组件

By leveraging components already built into products, we can provide users with a familiar experience and avoid input errors.

通过利用产品中已内置的组件,我们可以为用户提供熟悉的体验并避免输入错误。

Regardless of how good of a designer you are, you can’t justify designing a calendar date picker from scratch. Even if yours is objectively better, the user still has to learn a new component when there’s a perfectly fine one built into their device.

无论您的设计师有多出色,您都无法从头开始设计日历日期选择器。 即使您的设备客观上更好,但当设备中内置了完美的组件时,用户仍然必须学习新的组件。

Native components are a no-brainer — use them to save time and effort for your team and reduce friction for your users.

本机组件不费吹灰之力—使用它们可以为您的团队节省时间和精力,并减少用户的摩擦。

If appropriately used, dropdowns don’t have to be awful.

如果使用得当,下拉列表不一定很糟糕。

Original article — 10 Ways to Improve Dropdowns in UI & UX Design

原始文章— 改善UI和UX设计中的下拉菜单的10种方法

19.智能默认 (19. Smart Default)

By utilizing analytics and overall usage patterns, we can determine which option is selected most frequently from our dropdown.

通过利用分析和总体使用模式,我们可以从下拉菜单中确定最常选择的选项。

If 80% of the users select a specific option, we can allow 80% of users to skip this step entirely by making that option the smart default.

如果80%的用户选择了特定选项,则可以通过将该选项设为智能默认值来允许80%的用户完全跳过此步骤。

If you’re paying a speeding ticket on a Colorado website, for example, it makes sense for the smart default to pre-select Colorado as the state.

例如,如果您要在科罗拉多州的网站上支付超速罚单,则明智的默认选择是将科罗拉多州预先选择为州。

20.简化 (20. Simplify)

When possible, we can use analytics to inform on which options from our dropdown may be unnecessary.

如果可能,我们可以使用分析功能来告知下拉菜单中哪些选项可能是不必要的。

If users are only selecting a handful of options and rarely selecting or never selecting others, then we can consider removing them.

如果用户仅选择少数几个选项,而很少选择或从未选择其他选项,那么我们可以考虑删除它们。

Having a concise dropdown will make it easier for our visitors to quickly choose the option that is most relevant to them.

简洁的下拉菜单将使访问者更容易快速选择与他们最相关的选项。

21.个人使用模式 (21. Individual Usage Patterns)

Similar to smart defaults, we can pre-select an option that is specific to an individual user.

与智能默认设置类似,我们可以预选择特定于单个用户的选项。

For example, if our logged in user frequently orders Vietnamese food, we can pre-select that cuisine and display relevant options to that selection.

例如,如果我们的登录用户经常订购越南菜,我们可以预选该菜并显示与该菜相关的选项。

The smarter our inputs can be, the better the experience for our users.

我们的投入越聪明,用户的体验就越好。

This could also work for airlines or travel software. Once a booking website knows where you frequently fly from and fly to, those options could be set as your default.

这也可能适用于航空公司或旅行软件。 一旦预订网站知道您经常往返于何处,可以将这些选项设置为默认选项。

22.使用视觉元素 (22. Use Visual Elements)

Occasionally the options in a dropdown are visual elements. Instead of placing them in a dropdown, we should design our interface to represent them as what they are.

有时,下拉菜单中的选项是视觉元素。 与其将它们放在下拉列表中,不如设计界面来将它们表示为实际状态。

We see this frequently with color options on an e-commerce site. Displaying the possible color options is an improved experience over a dropdown.

我们经常在电子商务网站上通过颜色选项看到这种情况。 显示可能的颜色选项可以改善下拉菜单的体验。

23.使用列表框 (23. Use Listboxes)

Dropdowns require clicking into them to see the options. Listboxes, in contrast, allows the user to see the possibilities without them hiding inside a dropdown.

下拉菜单要求单击它们以查看选项。 相反, 列表框使用户可以看到各种可能性,而不必将它们隐藏在下拉列表中。

Listboxes can include checkboxes, radio buttons, or toggle switches.

列表框可以包括复选框,单选按钮或切换开关。

Listboxes are frequently used on e-commerce websites when displaying categories, size, price range, color, and so on.

当显示类别,大小,价格范围,颜色等时,电子商务网站上经常使用列表框。

Developing social skills are vital to a successful career in UI & UX.

发展社交技能对于成功实现UI和UX至关重要。

Original article — 10 Soft Skills for UI & UX Designers.

原始文章— UI和UX设计师的10个软技能 。

24.反馈 (24. Feedback)

Giving constructive feedback, and responding to less-than-constructive feedback is a critical skill that can be uncomfortable for many new designers.

提供建设性的反馈并响应建设性的反馈是一项至关重要的技能,对于许多新设计师而言,这可能是不舒服的。

Lack of awareness of basic feedback skills leads to clients providing vague and worthless feedback like “can you make it pop?”

缺乏对基本反馈技能的意识导致客户提供模糊和毫无价值的反馈,例如“您能否流行它?”

To provide effective feedback, we need to be clear and specific. “The imagery used on our careers page doesn’t represent our culture well. Let’s show a playful and relaxed vibe to connect better with the candidates we hope to attract” is more useful feedback than “make it pop.”

为了提供有效的反馈,我们需要明确明确。 “我们的职业页面上使用的图像不能很好地代表我们的文化。 让我们展示一种轻松有趣的氛围,以更好地与我们希望吸引的候选人建立联系,“使其流行”更有用

When it comes to receiving feedback, it’s important to define exactly what we want feedback on. We should also be open-minded to the feedback we receive and continually ask to clarify or elaborate on vague input.

在接收反馈时,准确定义我们想要反馈的内容很重要。 我们还应该对收到的反馈意见持开放态度,并不断要求澄清或详细阐述模糊的意见。

25.积极聆听 (25. Active Listening)

Active listening is focusing on the other person and not thinking about the thoughts, opinions, or ideas that pop into our head.

主动倾听只专注于其他人,而没有考虑突然涌入我们脑海的想法,观点或想法。

This skill is effective when interviewing customers, speaking with colleagues, or gathering insights about a business problem from our client.

在采访客户,与同事交谈或从客户那里收集有关业务问题的见解时,此技能非常有效。

Active listening won’t just benefit our design career — it will help us in friendships, interviews, intimate relationships, or anything that involves communicating with people.

积极倾听不仅会有益于我们的设计事业,还将帮助我们建立友谊,进行访谈,建立亲密关系或进行与人沟通的任何事情。

This Forbes article, 10 steps to Effective Listening, is a great read for anyone hoping to improve active listening skills. These are my favorite tips from the article:

这本《福布斯》文章, 有效聆听的10个步骤 ,对于希望提高主动聆听技巧的任何人来说都是一本好书。 这些是本文中我最喜欢的提示:

  1. Face the speaker and maintain eye contact面对扬声器并保持目光接触
  2. Listen to the words and try to picture what the speaker is saying听这些单词并试着想象说话者在说什么
  3. Don’t interrupt and don’t impose your “solutions”不要打扰,不要强加你的“解决方案”
  4. Wait for the speaker to pause to ask clarifying questions等待演讲者暂停问清楚的问题
  5. Ask questions only to ensure understanding提出问题只是为了确保理解
  6. Give the speaker regular feedback (verbal or non-verbal)向演讲者定期反馈(语言或非语言)

26.每个通信都是一个UX项目 (26. Every Communication is a UX project)

When we send an email, message, text, or snail mail to a colleague, client, or customer, it’s a good skill to communicate in a way that requires less work from the person on the other end of that message.

当我们向同事,客户或客户发送电子邮件,消息,文本或蜗牛邮件时,这是一种很好的沟通技巧,它需要消息另一端的人减少工作量。

Making every piece of communication a seamless experience for the people that we work with will make working with us more enjoyable and improve our credibility as a UX designer.

为与我们一起工作的人们提供无缝的交流体验将使与我们的合作更加愉快,并提高我们作为UX设计师的信誉。

Instead of sending messages that require the other person to do the work like “I’m sure there’s a product out there that we can use” we should make it easier for them and say something like, “I did some research and found product x, y, and z that could solve our hiring issue.”

与其发送要求其他人完成诸如“我确定有一种产品可以使用”之类的消息的信息,不如让他们更轻松地对他们说“我进行了研究并找到了产品x” ,y和z可以解决我们的招聘问题。”

Investing an extra few minutes into our message can make a dramatic difference in the experience others have when working with us.

在信息中多花一些时间可以使他人在与我们合作时所获得的体验发生巨大变化。

27.失去自我 (27. Lose the ego)

We love it when people give us praise, that’s human nature. But it’s a good skill to be able to detach ourselves (and our egos) from our design work.

当人们称赞我们时,我们就是喜欢它,这是人的天性。 但是,能够将自己(和我们的自负)从设计工作中分离出来是一项很好的技能。

When conducting feedback, it’s more useful to focus on the areas of improvement rather than seeking compliments on what the user liked. Ask people what they would change rather than seeking acknowledgment for things done well.

在进行反馈时,将重点放在改进方面,而不是对用户的喜好表示称赞。 问人们将要做出什么改变,而不是对做得好的事情寻求认可。

When given feedback that we don’t agree with, don’t get defensive, but instead ask what they would change or how they envisioned it.

当得到我们不同意的反馈时,不要防御,而要问他们会改变什么或他们如何设想。

The ability to not feel personally insulted by negative comments about our design is not an easy trait to have, but it’s a crucial skill.

不会因对我们的设计发表负面评论而感到不高兴,这不是一件容易的事,但这是一项至关重要的技能。

28.自学主义 (28. Autodidacticism)

An autodidact is a self-taught person, someone with the will power to be the driver of their success. UI & UX aren’t industries that are dependent on fancy degrees or credentials — success is based on work ethic and consistency.

一个自学成才的人是一个自学成才的人,有意志的人会成为他们成功的动力。 UI和UX并不是依赖花哨的程度或证书的行业—成功取决于职业道德和一致性。

Being an autodidact is an essential skill because everyone in the design space, at some point, encounters problems, jargon, programs, and so on, that they do not understand.

进行自动整理是一项必不可少的技能,因为设计空间中的每个人有时都会遇到他们不理解的问题,行话,程序等。

When this unavoidable challenge arises, we can’t go back to school to learn how it’s done, and we can’t bother our coworkers all the time. By having the skills and willpower to figure things out on our own, we will grow remarkably by our own volition.

当这一不可避免的挑战出现时,我们不能回到学校学习如何完成任务,也不能一直打扰我们的同事。 通过拥有自己解决问题的能力和意志力,我们将凭借自己的意志显着增长。

With the internet, there is no excuse for not being able to teach ourselves everything we want to know about UI & UX. Everything we need is right in front of us, but only those with self-discipline will take advantage of it.

有了互联网,就无法为自己提供关于UI和UX的所有知识。 我们需要的一切都摆在我们面前,但是只有那些有自律的人才能利用它。

29.适应 (29. Adaptation)

It’s no secret that the digital and physical world is constantly evolving.

数字和物理世界在不断发展,这已经不是什么秘密了。

It’s vital that designers familiarize themselves with emerging technologies, products, trends, and so on.

设计人员必须熟悉新兴技术,产品,趋势等,这一点至关重要。

Not only do we risk being displaced, but we also risk missing out on opportunities to improve our product’s experience.

我们不仅有遭受流离失所的风险,而且还冒着错过改善产品体验的机会的风险。

Being adaptable and having the initiative to educate ourselves about disruptive technologies will put us ahead of the curve and ensure that we still have a job through the inevitable changes our industry will encounter.

适应能力强,主动就破坏性技术进行自我教育将使我们处于领先地位,并确保我们在行业将遇到的不可避免的变化中仍能找到一份工作。

Remember these mistakes when designing your next interface.

在设计下一个界面时,请记住这些错误。

Original article — 10 Common Mistakes UI Designers Make

原始文章— UI设计人员常犯的10个错误

30.忽略范围 (30. Disregarding scope)

It’s not uncommon for designers to introduce features that will overcomplicate the development process while bringing no additional value to the application. Focusing on the business objectives, project scope, timeline, and the way products are developed are all valuable considerations when prioritizing features for design.

设计人员通常会引入一些功能,这些功能会使开发过程变得复杂,同时又不会给应用程序带来任何附加价值。 在确定设计功能的优先级时,关注业务目标,项目范围,时间表和产品开发方式都是有价值的考虑因素。

If, for example, we’re designing an option for the users to upload a profile picture, but we also add functionality to crop, scale, and rotate the photo, then this would unnecessarily complicate the design.

例如,如果我们正在设计一个供用户上传个人资料图片的选项,但同时又添加了裁剪,缩放和旋转照片的功能,那么这将不必要地使设计复杂化。

It’s effortless to add a “rotate” or “crop” button in design but would be trickier to implement in development. A safe bet is to avoid adding features unless they’re essential to the application. Always keep the business and user goals at the forefront of the design process.

在设计中添加“旋转”或“裁剪”按钮并不费力,但在开发中实施起来会比较棘手。 安全的选择是避免添加功能,除非它们对于应用程序是必不可少的。 始终将业务和用户目标放在设计过程的最前沿。

31.忽略用户的上下文 (31. Overlooking the user’s context)

There are various contextual factors that influence a user’s behavior when interacting with an interface. Consider where the user is when using our app, how much time they have, and what their emotional state is.

与界面交互时,有多种上下文因素会影响用户的行为。 考虑用户在使用我们的应用程序时所处的位置,他们有多少时间以及他们的情绪状态。

A perfect example of this is the sleep cycle app. The app has a calming dark display making it easy on the eyes and perfect for someone setting the alarm before going to bed.

睡眠周期应用程序就是一个很好的例子。 该应用程序具有令人放松的深色显示屏,使您的眼睛轻松自如,非常适合在睡觉前设置闹钟的人。

You can see good and bad examples of this everywhere. Navigation apps have minimal reading or touching required, Kindle’s have no glare when reading outside, note-taking apps are available offline, and so on.

您到处都能看到好的和不好的例子。 导航应用程序所需的阅读或触摸操作最少,Kindle在户外阅读时不会刺眼,笔记应用程序可离线使用,等等。

If our app is meant to be used while jogging, then some constraints and considerations need to be taken into account in the design.

如果要在慢跑时使用我们的应用程序,则在设计中需要考虑一些约束和注意事项。

The best way to ensure our interface and UX fit the user’s context is to test it in situations where it may be used and test it with users.

确保我们的界面和用户体验适合用户上下文的最佳方法是在可能使用它的情况下对其进行测试,并与用户进行测试。

Shopify has a great article about designing with the user’s context in mind that I recommend for anyone interested in diving deeper into this topic.

Shopify上有一篇很棒的文章,它考虑了用户的上下文 ,我向有兴趣深入研究此主题的任何人推荐。

32.着重于外观,而不是工作原理 (32. Focusing heavily on how it looks, not how it works)

One thing every UI designer hates doing is breaking their designs.

每个UI设计师讨厌做的一件事就是打破他们的设计。

Breaking a design essentially means to input data that would ruin the layout or aesthetic appeal of the interface. This can be uncomfortable to do as a designer, but it’s a crucial component to designing a flexible, scalable, and user-friendly product.

破坏设计本质上是指输入会破坏界面布局或美观的数据。 作为一名设计师,这样做可能会很不舒服,但这是设计灵活,可扩展且用户友好的产品的关键组成部分。

When the mockup I sent to production has a six-letter first name, it probably looks great, but what happens when Hubert Blaine Wolfe­schlegel­stein­hausen­berger­dorff Sr. tries to use the app?

当我发送给生产的模型的名字由六个字母组成时,它看起来很不错,但是当休伯特·布莱恩·沃尔夫施莱格斯坦·伯格森多夫尝试使用该应用程序时会发生什么呢?

Test designs and take a step back while designing to ensure that the interface can fit a wide variety of use cases, not just the ideal ones.

测试设计并在设计时退后一步,以确保该接口可以适应各种用例,而不仅仅是理想的用例。

33.缺少设计状态 (33. Missing design states)

When designing for development, missing states will either create a gap in the experience or will need to be filled in by the developer. This can often create inconsistencies in the design and hiccups down the road.

在进行开发设计时,缺失的状态会在体验上造成差距,或者需要由开发人员填补。 这通常会在设计中产生不一致之处,并在以后造成麻烦。

We need to account for all of the different states that are possible such as error, success, active, disabled, hover, empty, filled, loading — to name a few.

我们需要考虑所有可能的不同状态,例如错误,成功,活动,禁用,悬停,空,填充,加载等。

If I were designing a wishlist, for example, I would need to consider the state before a user had added anything to their wishlist: the empty state. Without this state, there will be a gap in the experience.

例如,如果我正在设计愿望清单,则需要在用户向其愿望清单中添加任何内容之前先考虑状态:空状态。 没有这种状态,体验将存在差距。

Noteworthy takeaways from the IOS design guidelines.

IOS设计指南中的重要内容。

Original article — 10 Insights from Apple’s Human Interface Design Guidelines

原始文章— 苹果人机界面设计指南的10个见解

34.尽可能延迟登录 (34. Delay sign-in as long as possible)

“People often abandon apps when they’re forced to sign in before doing anything useful. Give them a chance to fall in love with your app before making a commitment to it. In a shopping app, let people browse your merchandise immediately upon launch, and require sign-in only when they’re ready to make a purchase. In a media-streaming app, let people explore your content and see what you have to offer before signing in to play something.” — Apple Authentication Guidelines

“人们在做任何有用的事情之前被迫登录时经常会放弃应用程序。 在做出承诺之前,让他们有机会爱上您的应用。 在购物应用程序中,人们可以在发布后立即浏览您的商品,并且仅在准备购买时才需要登录。 在媒体流应用中,让人们浏览您的内容并查看您所提供的内容,然后再登录以播放某些内容。” — 苹果认证准则

Apple urges us to re-assess the entrance experience to our app. If possible, remove sign-in and sign-up altogether.

苹果公司敦促我们重新评估应用程序的入口体验。 如果可能,请完全删除登录和注册。

Unfortunately, the app I’m designing right now doesn’t allow me to completely remove sign-in. But I’ve moved the sign-up screen to the end of onboarding so the user can at least get a feel for the type of experience they can expect after they sign up.

不幸的是,我现在正在设计的应用程序不允许我完全删除登录。 但是我已经将注册屏幕移到了注册结束时,以便用户至少可以体会到他们在注册后可以期望的体验类型。

It’s also a good idea to introduce a variety of sign up options to make signing in seamless. The app I’m working on right now supports Password Autofill, Facebook login, Google login, Sign in with Apple, and default email + password.

引入各种注册选项以使无缝登录也是一个好主意。 我正在使用的应用程序现在支持密码自动填充 ,Facebook登录,Google登录,使用Apple登录以及默认的电子邮件和密码。

35.尽快显示内容 (35. Show content as soon as possible)

Not to be confused with the splash screen, the launch screen is the screen that introduces the elements on the page. Design a launch screen that’s nearly identical to the first screen of your app.

不要与启动屏幕混淆,启动屏幕是用于介绍页面元素的屏幕。 设计一个与您的应用程序的第一个屏幕几乎相同的启动屏幕。

“If you include elements that look different when the app finishes launching, people can experience an unpleasant flash between the launch screen and the first screen of the app. Also, make sure that your launch screen matches the device’s current appearance mode; for guidance, see Dark Mode.” — Launch Screen Guidelines

“如果您添加的元素在应用程序完成启动时看起来不同,那么人们会在应用程序的启动屏幕和第一个屏幕之间体验到不愉快的闪烁。 另外,请确保您的启动屏幕与设备的当前外观模式匹配; 有关指导,请参阅黑暗模式 。” — 启动屏幕准则

“Don’t make people wait for content to load before seeing the screen they’re expecting. Show the screen immediately, and use placeholder text, graphics, or animations to identify where content isn’t available yet. Replace these placeholder elements as the content loads. Whenever possible, preload upcoming content in the background, such as while an animation is playing or the user is navigating a level or menu.” — Apple Loading Guidelines

“不要让人们在观看内容之前等待内容加载。 立即显示屏幕,并使用占位符文本,图形或动画来标识尚不可用的内容。 在内容加载时替换这些占位符元素。 只要有可能,就在后台预加载即将到来的内容,例如在播放动画或用户导航级别或菜单时。” — Apple加载准则

36.预计需要帮助 (36. Anticipate the need for help)

“Proactively look for times when people might be stuck. A game, for example, could casually show useful tips when paused or when a character isn’t advancing. Let people replay tutorials in case they miss something the first time.” — Apple App Architecture Guidelines

“主动寻找人们可能被困住的时间。 例如,游戏在暂停或角色前进时会随意显示有用的提示。 如果人们第一次错过某些内容,可以让他们重播教程。” — Apple App体系结构准则

Adding quick tips, customer service chat, chatbots, FAQ, a help center, and so on will create a fail-safe for users who may get confused.

添加快速提示,客户服务聊天,聊天机器人,常见问题,帮助中心等,将为可能感到困惑的用户创建故障保护。

In the app I’m creating, I have a few instances where I include help icons to educate the user on what the actions mean. This keeps my interface clean but also provides an option to learn more if needed.

在我创建的应用程序中,有一些实例包含帮助图标,以教育用户有关操作的含义。 这样可以使我的界面保持整洁,但如果需要,还可以提供一个选项以了解更多信息。

37.必要时帮助人们避免信息丢失 (37. When necessary, help people avoid information loss)

“Regardless of whether people use a dismiss gesture or a button to close the view, if the action could result in the loss of user-generated content, present an action sheet that explains the situation and gives people ways to resolve it.” — Apple Modality Guidelines

“无论人们是使用解雇手势还是按钮来关闭视图,如果该操作可能导致用户生成的内容丢失,请出示说明情况并提供解决方法的操作表。” — 苹果模式指南

“Instill confidence that work is always preserved unless canceled or deleted. In general, don’t make people explicitly save files. Instead, save changes automatically at regular intervals, when opening and closing files, and when switching to another app. In some cases, such as while editing an existing file, save and cancel options may still make sense for the sake of confirming when the edits are actually captured.” — Apple File Handling Guidelines

“让人们放心,除非取消或删除工作,否则始终可以保留工作。 通常,不要让人们明确地保存文件。 相反,在打开和关闭文件以及切换到另一个应用程序时,应定期自动保存更改。 在某些情况下,例如在编辑现有文件时,为了确认何时真正捕获到编辑内容,保存和取消选项可能仍然有意义。” — Apple文件处理准则

38.请勿在通知中包含敏感,个人或机密信息 (38. Don’t include sensitive, personal, or confidential information in a notification)

“You can’t predict what people will be doing when they receive a notification, so it’s essential to avoid including private information that could display on the device screen.” — Apple Notification Guidelines

“您无法预测人们在收到通知时会做什么,因此必须避免包含可能在设备屏幕上显示的私人信息。” — Apple通知准则

Common behaviors that people demonstrate as they relate to product design.

人们展示的与产品设计相关的常见行为。

Original article — 10 Behavior Patterns for UX Design

原始文章— UX设计的10种行为模式

39.安全探索 (39. Safe Exploration)

“Let me explore without getting lost or getting into trouble.”

“让我探索而不会迷路或陷入麻烦。”

“When someone feels like they can explore an interface and not suffer dire consequences, they’re likely to learn more — and feel more positive about it — than someone who doesn’t explore. Good software allows people to try something unfamiliar, back out, and try something else, all without stress.”

“当某人觉得自己可以探索一个界面而不会遭受可怕的后果时,与不探索的人相比,他们可能会学到更多东西,并且对此感到更加积极。 好的软件可以使人们尝试一些陌生的东西,退而求其次,而没有压力。”

Unlike in the real world, interfaces make it easy for users to mend their mistakes. If you’re at the office and spill coffee on your skirt, then you’re kind of screwed — you can’t CTRL + Z that. In contrast, our interface designs should encourage users to explore the different options available and then allow them to get back where they started or undo any actions easily.

与现实世界不同,界面使用户更容易修复错误。 如果您在办公室里把咖啡洒在裙子上,那您就有点被搞砸了-您不能CTRL +Z。 相反,我们的界面设计应鼓励用户探索可用的不同选项,然后允许他们返回开始的位置或轻松撤消任何操作。

Examples:

例子:

  • Back buttons making it easy to get back where I started后退按钮可让您轻松回到我的起点
  • Trying photo filters but making it easy to undo if I don’t like the result尝试使用照片滤镜,但如果我不满意结果,可以轻松撤消
  • Saving history保存历史
  • Undo buttons for documents撤消文档按钮

40.即时满足 (40. Instant Gratification)

“I want to accomplish something now, not later.”

“我想现在完成某件事,而不是稍后。”

“People like to see immediate results from the actions they take — it’s human nature. If someone starts using an application and gets a “success experience” within the first few seconds, that’s gratifying! They’ll be more likely to keep using it, even if it becomes more difficult later. They will feel more confident in the application, and more confident in themselves, than if they had taken a while to figure things out.”

人们喜欢从他们的行动中看到立竿见影的结果-这是人的天性。 如果有人开始使用应用程序并在最初的几秒钟内获得了“成功经验”,那就太令人高兴了! 他们将更有可能继续使用它,即使以后变得更加困难。 与花一些时间弄清楚问题相比,他们对应用程序更有信心,对自己也更有信心。”

In our fast-moving digital world, everything is getting that much quicker and easier. Hungry? A door dasher can be at your place in 30 mins or less. Need a ride? Uber is minutes away. Want a date? You could be matched with a potential date in a matter of seconds on dating apps. The list goes on…

在我们瞬息万变的数字世界中,一切都变得越来越快捷。 饥饿? 门缓冲器可以在30分钟或更短的时间内到达您的位置。 需要搭便车? 优步距离酒店只有几分钟的路程。 要约会吗 在约会应用程序上,您可能会在几秒钟内与一个潜在的日期相匹配。 清单继续...

If our product isn’t providing an instant hit of dopamine, then it’s at risk of being disrupted by a competitor’s product that is. Consider in your design how you can give your users a feeling of satisfaction or achievement in the experience.

如果我们的产品不能立即提供多巴胺,那么就有被竞争对手的产品破坏的危险。 在您的设计中考虑如何使用户感到满意或成就。

Examples:

例子:

  • Getting a match on a dating app在约会应用上获取匹配
  • A blast of Confetti when you complete a habit

    当你养成习惯时, 五彩纸屑爆炸

  • Calling an Uber and immediately having one on the way打电话给优步,马上有一个
  • Hitting the snooze button按下贪睡按钮

41.生化 (41. Habituation)

“That gesture works everywhere else; why doesn’t it work here, too?”

“这个手势在其他地方都有效; 为什么它在这里也不起作用?”

“When you use an interface repeatedly, some frequent physical actions become reflexive: pressing Ctrl-S to save a document, clicking the Back button to leave a web page, pressing Return to close a modal dialog box, using gestures to show and hide windows — even pressing a car’s brake pedal. The user no longer needs to think consciously about these actions. They’ve become habitual.”

“当您反复使用界面时,一些频繁的物理动作会变得反身:按Ctrl-S保存文档,单击“上一步”按钮离开网页,按“返回”关闭模式对话框,使用手势显示和隐藏窗口-甚至踩下汽车的制动踏板。 用户不再需要自觉地考虑这些动作。 他们已经习惯了。”

As someone who uses Figma, XD, and Sketch in tandem daily, I am impressed with how uniform most of the controls are but still get annoyed at the occasional difference.

作为每天串联使用Figma,XD和Sketch的人,大多数控件的统一性给我留下了深刻的印象,但偶尔的差异仍然让他们感到烦恼。

If there is an industry-standard for interaction or UI, then it’s best to follow these conventions to be safe — redesigning existing patterns is generally more confusing than useful. Save your creativity for other aspects of the product.

如果存在用于交互或UI的行业标准,则最好遵循以下约定以确保安全-重新设计现有模式通常比使人困惑而不是有用。 将您的创造力保存在产品的其他方面。

Examples:

例子:

  • CTRL + S, CTRL + ZCTRL + S,CTRL + Z
  • Swiping left or right to go to the next or previous screen向左或向右滑动可进入下一个或上一个屏幕
  • Pressing X to exit a dialog按X退出对话框
  • Swiping down to refresh on mobile向下滑动即可刷新手机

42.递延选择 (42. Deferred Choices)

“I don’t want to answer that now; just let me finish!”

“我现在不想回答; 让我结束吧!”

“This follows from people’s desire for instant gratification. If you ask a task-focused user unnecessary questions in the process, they might prefer to skip the questions and come back to them later. For example, some web-based bulletin boards have long and complicated procedures for registering users. Screen names, email addresses, privacy preferences, avatars, self-descriptions… the list goes on and on. “But I just wanted to post one little thing,” says the user.

“这源于人们对即时满足的渴望。 如果您在此过程中向以任务为中心的用户询问不必要的问题,则他们可能希望跳过这些问题,稍后再回头。 例如,某些基于Web的公告板具有冗长而复杂的注册用户程序。 屏幕名称,电子邮件地址,隐私首选项,化身,自我描述…列表在不断增加。 用户说:“但是我只想发布一件事。”

“Why not allow them to skip most of the question, answer the bare minimum, and come back later (if ever) to fill in the rest? Otherwise, they might be there for half an hour answering essay questions and finding the perfect avatar image.”

“为什么不让他们跳过大部分问题,回答最低限度的问题,然后再回来(如果有的话)来填写其余部分? 否则,他们可能会在那里呆半个小时,回答论文问题并找到完美的头像图片。”

As UX designers, we should be considering where we can slim the fat wherever necessary. Don’t ask for unnecessary information, but more importantly, allow information to be entered later or make it optional.

作为UX设计师,我们应该考虑在必要时可以在哪里减少脂肪。 不要要求不必要的信息,但更重要的是,允许以后输入信息或使其成为可选信息。

Anything that isn’t 100% necessary should be skippable.

不需要100%的任何内容都可以跳过。

Key points:

关键点:

  • Don’t have too many steps没有太多的步骤
  • Allow users to ‘skip’允许用户“跳过”
  • Separate important questions from the ones that are less important将重要问题与不太重要的问题分开
  • Allow users to add, change, or edit things later允许用户以后添加,更改或编辑内容

43.简化的重复 (43. Streamlined Repetition)

“I have to repeat this how many times?”

“我必须重复几次?”

In many kinds of applications, users sometimes find themselves needing to perform the same operation over and over again. The easier it is for them, the better. If you can help reduce the operation down to one keystroke or click per repetition — or better, just a few keystrokes or clicks for all repetitions — you will spare users much tedium.”

在许多应用程序中,用户有时会发现自己需要一遍又一遍地执行相同的操作。 对他们来说越轻松越好。 如果您可以将每次重复操作减少到一次击键或单击,或者更好,对于所有重复只需几次击键或单击,您将为用户节省很多乏味。”

I used to do a decent amount of customer service for my first company and found myself continually copying and pasting the same generic responses from a doc. I eventually said, to hell with this, there has to be a better way. There was — I found a chrome extension that used text shortcut to auto-fill what I was trying to say. If I typed “greet%,” it would auto paste my greeting message.

我曾经为第一家公司提供过不错的客户服务,但发现自己不断复制并粘贴来自文档的相同通用回复。 我最终说,对此,该死的,必须有一个更好的方法。 我发现了一个chrome扩展程序,该扩展程序使用文本快捷方式自动填充了我要说的内容。 如果输入“ greet%”,它将自动粘贴我的问候语。

This saved me enormous amounts of time and helped me recognize the importance of streamlining user experiences for frequently repeated actions.

这为我节省了大量时间,并帮助我认识到简化频繁重复操作的用户体验的重要性。

If your users are continuously repeating the same command or action — make a shortcut or workflow for it to make their life easier.

如果您的用户不断重复相同的命令或操作,请为其创建快捷方式或工作流程,以使他们的生活更轻松。

Examples:

例子:

  • Autofill when you start typing somethingAutofill when you start typing something
  • Google Chrome auto-completing the query “yo” with “www.youtube.com”Google Chrome auto-completing the query “yo” with “www.youtube.com”
  • Automating routine processes in Slack with workflow builderAutomating routine processes in Slack with workflow builder
  • “Delete All” or “Select All”“Delete All” or “Select All”

You are creative — let me prove it to you.

You are creative — let me prove it to you.

Original article — 10 Tips & Exercises to Develop Your Creativity.

Original article — 10 Tips & Exercises to Develop Your Creativity.

44. No judgment (44. No judgment)

“One thing I tell people all the time, never judge your work while you’re doing it. Just let it go. Flow with it. All judgment stops creativity.”

“One thing I tell people all the time, never judge your work while you're doing it. 放手吧。 Flow with it. All judgment stops creativity.”

— Terry Crews

— Terry Crews

If you ask a room of people to write a lyric, draw a picture, come up with a business idea, or build something with legos, you’ll hear grumbles like “I’m so bad at this,” or “I don’t have a creative bone in my body” throughout the room.

If you ask a room of people to write a lyric, draw a picture, come up with a business idea, or build something with legos, you'll hear grumbles like “I'm so bad at this,” or “I don't have a creative bone in my body” throughout the room.

The problem with this mindset is we’ve given up before we’ve started. Then, as soon as we do start, we’re picking apart every decision as we make it.

The problem with this mindset is we've given up before we've started. Then, as soon as we do start, we're picking apart every decision as we make it.

The key to creativity is to free ourselves from judgment and allow the unconscious parts of our mind to take over.

The key to creativity is to free ourselves from judgment and allow the unconscious parts of our mind to take over.

“If you hear a voice within you say, ‘You cannot paint,’ then by all means paint, and that voice will be silenced.”

“If you hear a voice within you say, 'You cannot paint,' then by all means paint, and that voice will be silenced.”

— Vincent Van Gogh

— Vincent Van Gogh

We hold ourselves to such high standards that it limits our ability to create anything at all.

We hold ourselves to such high standards that it limits our ability to create anything at all.

Instead of stewing over the quality of our ideas or trying to do our best work, we should focus on creating — we can always refine it later.

Instead of stewing over the quality of our ideas or trying to do our best work, we should focus on creating — we can always refine it later.

45. Quantity over quality (45. Quantity over quality)

My attempt
My attempt

Instead of focusing on the quality of output, focus on the quantity. Quantity exercises are excellent for creativity because they teach us that creativity is about expression — not results.

Instead of focusing on the quality of output, focus on the quantity. Quantity exercises are excellent for creativity because they teach us that creativity is about expression — not results.

We instinctively self filter our ideas as they arise. Quantity over quality trains us to allow all ideas to flow — even the bad ones.

We instinctively self filter our ideas as they arise. Quantity over quality trains us to allow all ideas to flow — even the bad ones.

If you’ve ever been in a brainstorming session, then the leader will often say that “no idea is a bad idea.” Their goal is to get as many ideas on paper as they can because those ideas can always be polished later.

If you've ever been in a brainstorming session, then the leader will often say that “no idea is a bad idea.” Their goal is to get as many ideas on paper as they can because those ideas can always be polished later.

One of my favorite quantity exercises is the 30 circles challenge. In this challenge, you strive to fill in as many of the 30 circles as you can in 5 minutes. Try it for yourself and see how many you can complete — here’s a blank sheet.

One of my favorite quantity exercises is the 30 circles challenge. In this challenge, you strive to fill in as many of the 30 circles as you can in 5 minutes. Try it for yourself and see how many you can complete — here's a blank sheet .

The goal isn’t to have amazing drawings — it’s to fill all the circles before the timer runs out. This trains you to worry less about your artistic abilities and rather to generate many ideas in a short amount of time.

The goal isn't to have amazing drawings — it's to fill all the circles before the timer runs out. This trains you to worry less about your artistic abilities and rather to generate many ideas in a short amount of time.

46. Unplug from inputs (46. Unplug from inputs)

Mahershala Ali’s quote below sums it up perfectly:

Mahershala Ali's quote below sums it up perfectly:

“Social media has colonized what was once a sacred space occupied by emptiness: the space reserved for thought and creativity.”

“Social media has colonized what was once a sacred space occupied by emptiness: the space reserved for thought and creativity.”

— Mahershala Ali

— Mahershala Ali

In our modern world, we don’t go a moment without being entertained. Every dull moment is flooded with stimulus from our mobile device, ads, tv, magazines, video games, and so on.

In our modern world, we don't go a moment without being entertained. Every dull moment is flooded with stimulus from our mobile device, ads, tv, magazines, video games, and so on.

Our devices and technology are great in moderation, but occasionally switching them off and sinking into a state of boredom can do wonders for our mind and creativity.

Our devices and technology are great in moderation, but occasionally switching them off and sinking into a state of boredom can do wonders for our mind and creativity.

The board game Scrabble was invented by a bored, unemployed, Alfred Mosher Butts. The boredom of unemployment helped fuel Butts. “Well, I wasn’t doing anything,” Butts said. “That’s the trouble. I didn’t have anything to do; I didn’t have a job. So I thought I’d invent a game.”

The board game Scrabble was invented by a bored, unemployed, Alfred Mosher Butts. The boredom of unemployment helped fuel Butts. “Well, I wasn't doing anything,” Butts said. “That's the trouble. I didn't have anything to do; I didn't have a job. So I thought I'd invent a game.”

Boredom can be the change that’s needed to allow your ideas to break through the noise.

Boredom can be the change that's needed to allow your ideas to break through the noise.

Growing up in the middle of nowhere in rural Pennsylvania, we had no TV or video games, and I was homeschooled, so I had few friends for most of my early childhood. We weren’t Amish, but that’s not too far from the truth.

Growing up in the middle of nowhere in rural Pennsylvania, we had no TV or video games, and I was homeschooled, so I had few friends for most of my early childhood. We weren't Amish, but that's not too far from the truth.

These years of my life might sound dull to most. But they were far from it. My lack of input led to some of the most creative years of my life. I found ways to entertain myself by taking toys apart, building with Legos and Lincoln Logs, drawing, and “inventing things.”

These years of my life might sound dull to most. But they were far from it. My lack of input led to some of the most creative years of my life. I found ways to entertain myself by taking toys apart, building with Legos and Lincoln Logs, drawing, and “inventing things.”

Seek moments of peace and boredom, and we just might find the creative spark we’ve been looking for.

Seek moments of peace and boredom, and we just might find the creative spark we've been looking for.

47. Try new things (47. Try new things)

Similar to reading, the more information, and skills we know and understand, the easier it will be to generate creative connections between unrelated things.

Similar to reading, the more information, and skills we know and understand, the easier it will be to generate creative connections between unrelated things.

In the past year, I tried improv, took a class drawing nude models, attended parkour classes, got scuba certified, traveled, and so much more.

In the past year, I tried improv, took a class drawing nude models, attended parkour classes, got scuba certified, traveled, and so much more.

I wasn’t expecting to become a parkour master or a nude model artist — I simply wanted to learn about something I knew nothing about.

I wasn't expecting to become a parkour master or a nude model artist — I simply wanted to learn about something I knew nothing about.

Every experience gives us a better understanding of the world and can provide inspiration for us to draw ideas from in the future. I encourage everyone to try new things because we never know where our next splash of inspiration will come from.

Every experience gives us a better understanding of the world and can provide inspiration for us to draw ideas from in the future. I encourage everyone to try new things because we never know where our next splash of inspiration will come from.

ux和ui_UI和UX设计人员的47个关键课程相关推荐

  1. ux和ui_UI和UX设计师的10种软技能

    ux和ui 重点 (Top highlight) As designers, whether it be UI, UX, or Product Design, we tend to direct ou ...

  2. ux设计_从UX设计人员的角度来看Microsoft Build 2018

    ux设计 by Samuele Dassatti 通过萨穆尔达萨蒂 从UX设计人员的角度来看Microsoft Build 2018 (Microsoft Build 2018 from the pe ...

  3. ux设计_聘请UX设计人员之前应了解的知识

    ux设计 当我与一些创业公司创始人交谈时,我想知道街上有多少人知道他们在做什么. 他们都聘用了UX毕业生,并认为这就是被真实或虚构的用户理解和喜爱的全部方法. 这就像在攀登乞力马扎罗山的团队中雇用美发 ...

  4. 聘请UX设计人员之前应了解的知识

    当我与一些创业公司创始人交谈时,我想知道街上有多少人知道他们在做什么. 他们都聘用了UX毕业生,并认为这就是被真实或虚构的用户理解和喜爱的全部方法. 这就像在攀登乞力马扎罗山的团队中雇用美发师一样 我 ...

  5. ux设计工具_UX设计人员的5种视觉设计工具

    ux设计工具 重点 (Top highlight) Hot on the heels of the popularity of my last article discussing 5 researc ...

  6. 2021年面向UX设计人员的9种最佳免费线框工具

    线框图是每个UX / UI设计人员日常工作的重要组成部分.市场上有大量的线框图工具,它们有望使创建线框变得快速而容易. 但是,找到最适合您的设计的产品就像在大海捞针中寻找,找到适合您价格范围的线框图软 ...

  7. ux pm_如何从学术研究人员过渡到UX研究人员

    ux pm I was always interested in design, but had only done research. Two-ish years ago, I decided to ...

  8. 《精益创业UX篇——高效用户体验设计》一第1章 早期验证

    本节书摘来自异步社区<精益创业UX篇--高效用户体验设计>一书中的第1章,第1.1节,作者[美]Laura Klein,更多章节内容可以访问云栖社区"异步社区"公众号查 ...

  9. webflow如何使用_我如何使用Webflow构建辅助项目以帮助设计人员进行连接

    webflow如何使用 I launched Designer Slack Communities a while ago, aiming to help designers to connect w ...

最新文章

  1. 计算机什么时候学汇编,[计算机基础] 汇编学习(1)
  2. pandas使用datetime创建示例dataframe:包含完整的时分秒信息、创建时间索引、使用不同的时间频率、date_range中参数freq的偏移量别名
  3. 2021年,自动驾驶将我们带到何处去?
  4. python unicode编码转换中文_python unicode转中文及转换默认编码
  5. 内存屏障linux,Linux内存屏障
  6. Linux-awk及内置变量
  7. 在storm中使用定时保存
  8. This may cause things to work incorrectly. Make sure to use the same version for both.
  9. 2.9 iframe
  10. Bootstrap3 工具提示插件的方法
  11. Java多线程学习四十三:
  12. c语言教程求反符号,c语言“或”符号
  13. 真正解决办法:编译freeswitch错误,You must install libavformat-dev to build mod_av
  14. 配置vs2008和udk与nFringe
  15. android 音乐播放器评测,Android平台四大音乐播放器对比评测
  16. SIM800C EAT开发
  17. 小米更新显示非官方rom_小米红米手机ROOT后支付宝提示“支持环境风险”+TWRP_recovery刷机出现ZIP刷机包前面校验失败...
  18. js实现鼠标跟随效果
  19. 模型评价指标—F1值
  20. MapReduce之多MapReduce执行

热门文章

  1. flink的批处理和流处理
  2. CentOS 7网卡网桥设置
  3. WORD里的拼页、书籍折页、反向书籍折页功能(一)
  4. Excel 插件使用教程
  5. Mac键盘修改F1-F12为功能键,神器karabiner-elements
  6. 数学分析 - 隐函数
  7. Git下载安装及使用说明
  8. 利用长角牛软件ARP欺骗另外的主机
  9. 包装设计实战案例教学
  10. postman批量刷接口