ux和ui_UI和UX設計人員的47個關鍵課程

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.

如果您想更深入地討論討論的概念并探索其他遺漏的項目,我將鏈接到每篇文章。 我試圖從每篇文章中選擇最關鍵的要點,但是為了簡潔起見,不可避免地省略了必不可少的項目。

4 Rules of Thumb in UI Design

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 of different devices
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倍資產。

Image for post

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)

Image for post

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整除,從而可以輕松地在這些設備上適當地調整我們的設計。

Image for post

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)

Image for post

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)

Image for post
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的關注卻很少。 作為用戶,當屏幕上發生太多事情時,要知道我應該注意些什么可能是一個挑戰。 這也浪費了我的寶貴時間。

Image for post
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年,只需一毫秒即可激怒您的用戶。

5 Principles of Ethical UX Designs

Using honest UX design to create reputable and trustworthy experiences.

使用誠實的UX設計來創建信譽良好且值得信賴的體驗。

Original article — 10 Principles of Ethical UX Designs

原始文章— 道德用戶體驗設計的10條原則

5.通知我 (5. Notify Me)

Image for post

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)

Image for post
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)

Image for post

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)

Image for post

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)

Image for post

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.

無需致電支持熱線,發送電子郵件,閱讀常見問題解答或與代理商聊天。 請給我一個該死的按鈕,說“取消”,讓我繼續生活。

4 Ways to Spice Up a UI Design

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這樣的公司擁有如此知名品牌的原因。 通過將幽默和個性注入到他們的營銷中,他們創造了更令人難忘的廣告和內容。

Image for post

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 ,“停尸間,外科醫生,和核電廠應留出幽默副本競技場。”

Image for post
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)

Image for post
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.

錯誤狀態通常是消極的經歷,但是您可以通過提供個性或樂趣來將其轉變為積極的經歷。

Image for post

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)

Image for post
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.

圖案和漸變是使不吸引人的內容更加醒目且美觀的另一種好方法。 在圖像后面或背景上添加簡單的圖案和漸變會為原本平淡無奇的設計增添風格和風味。

Image for post
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.

您可以根據需要發揮創意或最小化。 但是,它們不應分散主要內容。

5 Commandments for UI Design

Design principles that are frequently missed.

經常錯過的設計原則。

Original article — 10 Commandments for UI Design

原始文章— UI設計的10條誡命

14.空國家 (14. Empty States)

Image for post

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)

Image for post

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)

Image for post

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)

Image for post

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)

Image for post

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.

本機組件不費吹灰之力—使用它們可以為您的團隊節省時間和精力,并減少用戶的摩擦。

5 Ways to Improve Dropdowns in UI & UX Design

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)

Image for post

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)

Image for post

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)

Image for post

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)

Image for post

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)

Image for post

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.

當顯示類別,大小,價格范圍,顏色等時,電子商務網站上經常使用列表框。

6 Soft Skills for UI & UX Designers

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)

Image for post

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)

Image for post

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)

Image for post

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)

Image for post

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)

Image for post

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.

適應能力強,主動就破壞性技術進行自我教育將使我們處于領先地位,并確保我們在行業將遇到的不可避免的變化中仍能找到一份工作。

4 Common Mistakes UI Designers Make

Remember these mistakes when designing your next interface.

在設計下一個界面時,請記住這些錯誤。

Original article — 10 Common Mistakes UI Designers Make

原始文章— UI設計人員常犯的10個錯誤

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

Image for post

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)

Image for post

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)

Image for post

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)

Image for post

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.

例如,如果我正在設計愿望清單,則需要在用戶向其愿望清單中添加任何內容之前先考慮狀態:空狀態。 沒有這種狀態,體驗將存在差距。

5 Insights from Apple’s Human Interface Design Guidelines

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)

Image for post

“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)

Image for post

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)

Image for post

“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)

Image for post

“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)

Image for post

“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通知準則

6 Behavior Patterns for UX Design

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)

Image for post

“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)

Image for post

“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)

Image for post

“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 + Z

    CTRL + 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)

Image for post

“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)

Image for post

“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 something

    Autofill 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 builder

    Automating routine processes in Slack with workflow builder
  • “Delete All” or “Select All”

    “Delete All” or “Select All”
4 Tips & Exercises to Develop Creativity

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)

Image for post

“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)

Image for post
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)

Image for post

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)

Image for post

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.

👋 Let’s be friends! Follow me on Twitter and Dribbble and connect with me on LinkedIn. Don’t forget to follow me here on Medium as well for more design-related content.

be 讓我們成為朋友! 在Twitter和Dribbble上關注我,并在LinkedIn上與我聯系。 別忘了在Medium上關注我,以獲取更多與設計相關的內容。

Image for post
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),這是一個巴西組織,致力于通過采取行動,賦權和知識共享的舉措來促進科技行業中的黑人女性平等。 對系統性種族主義保持沉默是不可行的。 建立您相信的設計社區。

翻譯自: https://uxdesign.cc/47-key-lessons-for-ui-ux-designers-3cb296c1945b

ux和ui

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/274226.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/274226.shtml
英文地址,請注明出處:http://en.pswp.cn/news/274226.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

深入理解Java內存模型(七)——總結

處理器內存模型 順序一致性內存模型是一個理論參考模型,JMM和處理器內存模型在設計時通常會把順序一致性內存模型作為參照。JMM和處理器內存模型在設計時會對順序一致性模型做一些放松,因為如果完全按照順序一致性模型來實現處理器和JMM,那么…

沉浸式ui設計_有助于沉浸的視頻游戲UI —武器輪

沉浸式ui設計Many action-adventure games rely on the feeling of thrills via bullets, fire, grenade, more bullets, and gigantic booms. The way to enable all these is to offer a massive arsenal, from machetes to assault rifles all the way till bazookas.許多動…

HDU 3068 最長回文

Manacher算法練筆&#xff0c;O(n)求最長回文子串。 參考資料&#xff1a;http://blog.csdn.net/ggggiqnypgjg/article/details/6645824 http://www.felix021.com/blog/read.php?2040 后綴數組和拓展KMP也可以求&#xff0c;不過時間復雜度都是O(nlogn)。 1 #include <cstd…

ux設計師薪水_客戶現在也是UX設計師

ux設計師薪水Some of you probably know by now, I’m not too fond of the monster the UX industry has become. It’s overblown, overcomplicated and often dishonest towards the clients. It’s also in itself undefined. (where is the E in Experience?)你們中的某些…

說說godaddy

俗稱狗他爹&#xff0c;是全世界最大的一級域名注冊和服務商&#xff0c;中國只有國家是一級&#xff0c;萬網等都是2級&#xff0c;如果你的域名是在萬網注冊的&#xff0c;那你就out啦&#xff0c;因為有諸多使用的限制&#xff0c;比如我之前為了試試萬網的域名&#xff0c;…

分步表單_角色創建分步指南

分步表單The first thing most of us designers are taught is the concept of personas and the necessity of them when it comes to UX and product design. However, knowing is different from applying and it can be difficult to know where to begin when we’re aske…

svg配合css3動畫_帶有Adobe Illustrator,HTML和CSS的任何網站的SVG動畫

svg配合css3動畫A top trend in web design for 2020 is the increased use of SVG animations on web pages and in logo design. In this article, we will implement a simple and straight forward method to create relatively complex animation. We will use Adobe Illu…

【原創-長文】openstack 版本D安裝配置及本次安裝中遇到的問題

openstack配置 一、硬件及操作系統要求 硬件&#xff1a;IBM服務器R410 兩臺、網線、顯示器、鍵盤若干&#xff0c;100M光纖&#xff08;硬性要求&#xff09; 操作系統&#xff1a;兩臺服務器均安裝Ubuntu server 12.04 LTS 二、安裝步驟&#xff08;server-1與server-2公共部…

基于pt100溫度計仿真_基于8pt網格的設計系統

基于pt100溫度計仿真重點 (Top highlight)This article is the 2nd in a two part series — to the previous chapter in which I demonstrate how to establish an 8pt grid.本文是該系列文章的第二部分 &#xff0c;這是上一章 的第二部分 &#xff0c;在上一章中&#xff0…

GL ERROR - after deleteUnusedTextures() glError (0x502)

最近用百度提供的javascript API開發地圖時&#xff0c;html頁面在手機瀏覽器中拖動地圖時會出現GL ERROR - after deleteUnusedTextures() glError (0x502)的異常&#xff0c;看了下國外論壇異常的說法&#xff0c;經調試&#xff0c;找出解決辦法&#xff0c;異常原因還是和布…

利用 k8s 建立軟件商店_為企業建立應用商店

利用 k8s 建立軟件商店It’s June 2019. I’m sitting in a conference room in Research Triangle Park in North Carolina. At the end of the table are the two executives that have been tapped to lead a new endeavor on behalf of IBM’s $34 billion acquisition of …

[轉]gcc生成動態庫靜態庫

http://blog.csdn.net/hzn407487204/article/details/5323254轉載于:https://www.cnblogs.com/hengli/archive/2013/06/07/3125354.html

蘋果復興_類型復興的故事:來自Type West的經驗教訓

蘋果復興Last Fall, I began the 去年秋天&#xff0c;我開始 在舊金山的Type West program at the Letterform檔案庫中Letterform Archive in San Francisco. For those of you who don’t know, the Letterform Archive is creative heaven — a type nerd’s letter art co…

C#調用ATL COM

作者&#xff1a;朱金燦 來源&#xff1a;http://blog.csdn.net/clever101 簡單介紹C#程序如何調用ATL編寫的COM組件。 首先新建一個ATL工程&#xff0c;具體如下&#xff1a; 1. 填寫工程名稱和路徑&#xff0c;如下圖&#xff1a; 2. 選擇工程的服務器類型為動態鏈接庫&a…

浪潮世科和浪潮軟件什么關系_社交圖形浪潮

浪潮世科和浪潮軟件什么關系Nowadays, the cornucopia of graphics seems like a given. However, it was not so long ago that infographics were scarce and lived in closed ecosystems. The majority of graphics were published in newspapers, magazines, or books, and…

PHP圖形圖像的典型應用 --常用圖像的應用(驗證碼)

php生成動態的驗證碼&#xff0c;是php防止惡意登陸或者注冊等常規手段-廢話不多說&#xff0c;直接看例子。&#xff08;只是一個簡單的應用&#xff0c;如果要安全或者更復雜的&#xff0c;請期待我以后的文章&#xff09; PHP生成驗證碼核心文件 (checks.php): <?php/*成…

接口練習

前臺代碼&#xff1a; <form id"form1" runat"server"> <div> 見面時間:<asp:TextBox ID"MeetTime" runat"server"></asp:TextBox><br /> 見面地點:<asp:TextBox ID"MeetAddr…

寫saas創業的書_我在SaaS創業公司擔任UX設計師的第一個月中學到的三件事

寫saas創業的書I recently transitioned from being a copywriter at an ad agency to a UX Designer at a SaaS startup. To add more multidisciplinary skills into the mix, I graduated with a Bachelor in Accountancy.我最近從一名廣告代理商的撰稿人過渡到了SaaS初創公…

ui項目答辯中學到了什么_我在UI設計9年中學到的12件事

ui項目答辯中學到了什么重點 (Top highlight)I know these can seem a bit clich but I will try to explain everything from my own experience.我知道這些內容似乎有些陳詞濫調&#xff0c;但我會嘗試根據自己的經驗來解釋所有內容。 第一名 (No.1 Never assume) The first…

linux下命令行的使用:使用sed命令操作文件

用該命令sed刪除文件test.txt中包含某個字符串abc的行: sed /adc/d test.txt >result.txt 在文件test.txt中刪除從開頭到含有某個字符串abc的行 sed 1,/abc/d test.txt >result.txt 獲取文件test.txt中包含字符串abc的行 cat test.txt |grep "abc" > resul…