1.不考慮范圍 (1. 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.

在設計中添加“旋轉”或“裁剪”按鈕并不費力，但在開發中實施起來會比較棘手。 安全的選擇是避免添加功能，除非它們對于應用程序是必不可少的。 始終將業務和用戶目標放在設計過程的最前沿。

2.不準備交接 (2. Not preparing for handoff)

When we’re designing a product or experience, we should take into account who else is going to be using our work. Whether our designs are handed off to developers or other designers, everything must be organized and appropriately documented.

在設計產品或體驗時，應考慮還有誰會使用我們的工作。 無論我們的設計是交給開發人員還是其他設計師，都必須組織一切并適當記錄在案。

Our design files should have artboards named and laid out horizontally how they would be clicked through.

我們的設計文件應包含命名為Artboard的名稱，并水平布置如何單擊它們。

We should have an organized design file that contains all the icons in SVG format and a high-quality version of any images used in our designs.

我們應該有一個組織良好的設計文件，其中包含SVG格式的所有圖標以及設計中使用的任何圖像的高質量版本。

When I hand off my work to developers, Zeplin is my preferred method. Zeplin makes it easy for developers to grab code snippets, dimensions, spacing, font sizes, SVG assets, and so on.

當我將工作交給開發人員時， Zeplin是我的首選方法。 Zeplin使開發人員可以輕松地獲取代碼段，尺寸，間距，字體大小，SVG資產等。

There is a lot more that can be done for a seamless handoff, read Dorjan’s article on preparing for handoff if you’d like further insights.

無縫切換還可以做很多事情，如果您想進一步了解，請閱讀Dorjan關于準備切換的文章 。

3.忽略用戶的上下文 (3. 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上有一篇很棒的文章，它考慮了用戶的上下文 ，我向有興趣深入研究此主題的任何人推薦。

4.追求高保真 (4. Going straight to high fidelity)

Going straight to pushing pixels before validating our ideas or fully understanding the problem we’re solving for is an easy mistake to make.

在驗證我們的想法或完全理解我們要解決的問題之前直奔像素，這是一個容易犯的錯誤。

This isn’t necessarily a wrong approach, but will often result in wasted time if the designs don’t work out.

這不一定是錯誤的方法，但是如果設計不可行，通常會浪費時間。

Wireframing with a tool like Whimsical is faster and more lightweight when throwing ideas together and getting a feel for the layout and hierarchy of our design. It’s also harder to fall in love with a design when it’s only a wireframe so we can take criticism and feedback much more easily.

當將想法融合在一起并感受我們設計的布局和層次時，使用諸如Whimsical之類的工具進行線框繪制可以更快，更輕便。 當它只是線框時，很難愛上設計，因此我們可以更輕松地接受批評和反饋。

5.忽視殘疾 (5. Neglecting disabilities)

Designing a product is similar to building a public building like a library or a school — it needs to be inclusive to all. That includes blind, color blind, and visually impaired users.

設計產品類似于在圖書館或學校之類的公共建筑中建造建筑 -它必須包含所有人。 其中包括盲人，色盲和視覺障礙的用戶。

Just ask Domino’s, they were sued by a blind man who could not access their website because it wasn’t accessible. Don’t be like Domino’s, design for accessibility.

只是問問Domino， 他們被一個盲人起訴，因為無法訪問他們而無法訪問他們的網站 。 不要像Domino那樣設計可訪問性。

Often we’re trying to design what looks good and neglect to consider the different users that will be interacting with our product.

通常，我們會嘗試設計看起來不錯的產品，而忽略了將與我們的產品進行交互的不同用戶。

As I’ve matured as a designer, I’ve come to terms with all the various constraints that will undermine my idea of a perfect design. ADA compliance is one of such constraints.

隨著我成為一名設計師的成熟，我已經接受了所有各種制約因素，這些制約因素都會破壞我對完美設計的想法。 ADA合規性就是這樣的限制之一。

Shrinking text down to 8px because it fits our horizontal space better or using a light shade of grey because it looks nice is neglecting our vision-impaired visitors.

將文字縮小到8px(因為它更適合我們的水平空間)或使用淺灰色陰影(因為它看起來不錯)而忽略了有視力障礙的訪客。

We can get away with this when we’re trying to score Dribbble likes, but it’s not a good practice when developing a product for real humans.

當我們嘗試給Dribbble的喜歡度打分時，我們可以避免這種情況，但是在為真實人類開發產品時，這不是一個好習慣。

Web Content Accessibility Guidelines (WCAG) requires at least 4.5:1 contrast. There are also guidelines for motor, auditory, and cognitive disabilities.

Web內容可訪問性指南(WCAG)至少需要4.5：1的對比度。 也有針對運動，聽覺和認知障礙的指南。

To ensure you’re meeting these standards, download Stark which will check if your designs are accessible or not.

為了確保您符合這些標準，請下載Stark ，它將檢查您的設計是否可訪問。

6.復制他人的作品或盲目遵循設計趨勢 (6. Copying other’s work or blindly following design trends)

“Trends are like junk food for designers. Following them produces cheap solutions that offer some initial payback but little value over the long haul. Trend-following designers date themselves quickly. The reward for following someone else’s design path? A gnawing sense of professional emptiness.” — Micah Bowers, Designer

對于設計師來說，趨勢就像垃圾食品。 跟隨他們，他們便產生了廉價的解決方案，這些解決方案提供了一些最初的回報，但長期來看卻毫無價值。 追隨潮流的設計師很快就跟自己約會。 遵循別人的設計路徑的回報？ 一種職業空虛的感覺。” —設計師Micah Bowers

It is easy to get caught up in the Dribbble world, and all the pretty animations and gradients, then quickly forget about the objectives of our design.

容易陷入Dribbble世界以及所有漂亮的動畫和漸變，然后Swift忘記我們設計的目標。

I’ve certainly gotten hooked on a particular interaction or design style that I found on Dribbble and tried to make them work in my design. Finding inspiration on Dribbble and elsewhere is great, but being inspired and blindly copying a UI component because it has a fresh look is not the same.

我當然已經迷上了在Dribbble上發現的一種特殊的交互或設計風格，并試圖使其在我的設計中起作用。 在Dribbble和其他地方找到靈感很不錯，但是由于外觀新穎而受到啟發并盲目復制UI組件并不相同。

7.重新創建設計約定和確定的語言 (7. Recreating design conventions and established language)

“Any time conventions are broken, it takes more time for a user’s brain to process the new content. Designers need to take the limitations of human cognition into account, as well as the reality of limited working memory.” — Joanna Ngai, Designer

任何時候打破常規，用戶的大腦都需要花費更多時間來處理新內容。 設計人員需要考慮到人類認知的局限性以及工作記憶有限的現實。” — 設計師Joanna Ngai

Users have come to expect similar experiences across the web. If our website, app, or software functions differently than what users have grown accustomed to, then it won’t be intuitive, and they will likely become frustrated with the experience.

用戶已經期望在網絡上有類似的體驗。 如果我們的網站，應用程序或軟件的功能不同于用戶逐漸習慣的功能，那么它就不會很直觀，他們可能會對這種體驗感到沮喪。

An example of this is icons with an established meaning behind them. Icons like “search,” “home,” or “favorite” are represented similarly in the vast majority of interfaces. By using non-standard icons to represent these actions, we run the risk of damaging our user experience and causing a headache for users trying to use our software.

這樣的一個例子是圖標，其后具有確定的含義。 絕大多數界面中類似地表示“搜索”，“家庭”或“收藏夾”之類的圖標。 通過使用非標準圖標表示這些操作，我們冒著損害我們的用戶體驗并給嘗試使用我們的軟件的用戶帶來頭痛的風險。

8.專注于外觀，而不是工作原理 (8. 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.

測試設計并在設計時退后一步，以確保該接口可以適應各種用例，而不僅僅是理想的用例。

9.缺少設計狀態 (9. 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.

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

10.重新設計本機組件 (10. Redesigning native components)

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 we are, it can be hard to justify designing a calendar date picker from scratch. Even if ours is objectively better, the user still has to learn a new component when there’s a perfectly fine one built into their device. It also requires additional development and design effort to create a component from scratch.

無論我們多么出色的設計師，都很難從頭開始設計日歷日期選擇器。 即使從客觀上講我們的組件更好，但當設備中內置了完美的組件時，用戶仍然必須學習新組件。 從頭開始創建組件還需要額外的開發和設計工作。

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

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

👋 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上關注我，以獲取更多與設計相關的內容。

More articles by me:

我的其他文章：