編輯導語：對于新手設計師來說，做設計難免會出錯。有的錯誤在犯的時候并不知道，被人指出后才恍然大悟，還有很多錯誤因為各種原因被忽視掉了。無論是哪種情況，設計師終究都要改正并且提升才可以。本文作者為我們總結了UI設計中常犯的錯誤，看看你中招了多少吧！

設計源于生活，細節成就品質。

前言：這是一篇外文文章，由于近期在做B端產品，寫得不錯，很有共鳴所以翻譯分享給大家。有些地方稍加修飾加上了自己的經驗想法，同時也把原文附上了，盡可能得讓大家感受原作的用意表達。

Introduction：

In my job as UX Consultant for?a Mendix partner, I often come across self-organized teams creating awesome internal applications. My job involves improving the UX within their applications.

The best days are when I am completely blindsided by the ingenuity of the creative ways some problems are solved, forcing me to explain why some logical solutions are a?bad?idea. The solutions given by me are not a “single truth”, there are always exceptions, don’t quote me on anything written here, but use it as inspiration to start the conversation.

簡介：我的工作是作為Mendix Partner的顧問，我經常會碰到組織良好的額團隊做出非常不錯的機構應用，我的工作就是是改善這些應用的用戶體驗。

這些天我完全被一些具有創造性的問題解決方式震驚到了，這促使我將要給大家解釋為什么這些創造的邏輯是糟糕的。我的方案并不是唯一的真理，永遠有更好的，我這里僅僅是拋磚引玉。

一、Everything in a single?screen

囊括一切：

This is the most commonly implemented UX bad practice.You start your little app with a tight interface, add a couple of features and before you know it, you have a screen full of buttons.?Don’t feel bad, we’ve all been there.

1. Arguments

• Less clicks
• I can see everything, creates overview
• Users hate scrolling

一個頁面囊括一切：這是最普遍、最糟糕的用戶體驗。緊湊的界面塞滿了按鈕，填滿了內容，整個屏都是按鈕。這樣做的理由是：

• 更少的點擊和頁面跳轉
• 呈現給客戶更多得內容，創造全局概覽
• 用戶厭惡滾動瀏覽

Whenever I see this interface solution it reminds me of a swiss army knife with all the tools unfolded, and the only one that is used is the bottle opener.

當我看到這樣的界面使我想起了瑞士軍刀，囊括盡可能多的工具，而唯一有用的是啟瓶器。

2. Overwhelming?信息鋪天蓋地

Having all the options spread out seems like it creates overview, but the problem is that your brain can only understand 9 options at best, and let`s be honest the user probably doesn’t use 95% of the buttons that often.

所有的選項鋪展在一個頁面似乎創造了全局概覽，但問題是大腦最多只能理解9個選項，因此用戶95%的按鈕都不經常用。

Millers law?/彌勒定律：短時記憶期間平均能夠記住的元素數量僅為7(±2)個。

3. Proximity?臨近原則

Another problem is that buttons should be close to the data that they influence. Having more buttons means losing visual proximity.

另外一個問題是按鈕要盡可能緊鄰與其相關聯的內容，呈現更多的按鈕意味著失去視覺上的緊鄰原則。

4. Users dont hate scrolling?用戶不討厭滾動瀏覽

The “users hate scrolling argument” is often a side effect of not having the right context at the right time and solving it by craming as much information in a single screen to help create context.

“but in our analytics we see that only 10% of the users scroll to the bottom of our landing page”?seems like a safe bet to conclude that 90% of your audience hates scrolling.

The problem is not the scrolling, its the amount of information. Having more information higher on the page doesnt mean that users will absorb that information but will burn out quicker and make them leave.

用戶討厭滾動一方面的影響是在正確的時間沒有出現正確的內容，所以才在一屏上填滿更多的信息來創造內容。

在我們研究分析的結果中，只用百分之10% 的用戶滾動到登陸頁的按鈕，由此極有可能的結論是90%的用戶討厭滑動鼠標。

其實問題不在于滾動鼠標而是信息量，把大量的信息呈現在同一個界面并不代表用戶=用戶都會注意到，反而會是用戶失去耐心憤然離去。

二、Dropdown buttons

下拉菜單：

So you’ve cleaned up your screen and put all the buttons in dropdowns.

1. Arguments

• More Focus
• Less clutter, easier to find what I need

為了讓頁面更簡潔，就把所有的按鈕盡可能的放到下拉菜單里

好處是：

• 更專注
• 頁面簡潔，用戶更容易找到他所需要的

2. Balance is?key 平衡是關鍵

Think about your interface as a physical space, if you hide a page in a set of drawers, you need to open every drawer until you find what you are looking for. This is the same for digital UI.

If your drawers are logical and are in the right place this works well, but having garden supplies in a drawer in your garden shed sounds smart, so should your bbq supplies go in there too? Or in the kitchen? Or both?

A good balance goes a long way. How often you use your bbq determines if it should go in the shed or kitchen.

If you only have 5 buttons, they might not need to go in a dropdown, but 6 buttons, that’s a different story.

把你的界面想象成一個現實空間，如果你把一張紙放到一套抽屜里，在你找到他之前你需要打開每個抽屜，對于UI界面也一樣。

但是如果你的抽屜式合乎邏輯的，并且放在了正確的地方，那這很管用；在花園小屋的抽屜里放花園用品聽起來很明智，但是你的燒烤用品也應該放進去嗎？還是在廚房里呢？還是兩者兼而有之呢？

很好的平衡有很長的路要走，多久使用一次燒烤用品決定你是放在棚子里還是廚房里。如果你只有5個按鈕，就不需要放在下拉菜單了，如果是6個，那情況有不一樣了。

三、where am I

我在哪里：

You have a consistent design system and brand style, all pages feel the same. Soon you feel like you are walking through a forest of pages, not knowing if you have seen this page before, or if this is a different page with similar states.

1. Arguments

• Consistent visual style
• Design Systems driven design
• Efficient use of screen real-estate

你有一個一致性的設計系統和品牌風格，所有的頁面感覺都一樣，很快你你感覺就像走在了頁面組成了叢林里，不知道你當前的頁面是否之前看到過，還是不同的頁面有相似的狀態。

你認為這樣的好處是

• 一致的視覺風格
• 設計系統驅動設計
• 有效的使用屏幕

It’s friday afternoon, you have A.D.D and are bouncing between social media, colleagues, some private messages and trying to do your work. The last thing on your mind is what link you just clicked and where you are in the flow or process.

2. Create every screen for this user.

• Give pages clear headers or page names
• Implement breadcrumbs if you are more than 1 level deep
• If the flow has multiple steps, show those steps.

然后正是這樣嗎？

在星期五下午，你有A.D.D，在社交媒體、同事、一些私人信息之間忙來忙去，試圖做你的工作。你腦海中的最后一件事就是你剛才點擊的鏈接以及你在流程或過程中的位置，所以：

為用戶按照以下原則設計界面：

• 給界面設定清晰的標題；
• 如果有不同層級就使用面包屑；
• 如果任務流有多個步驟，那么就顯示出來。

四、Popup in?popup

多重彈窗：

To save space, you have a button with a notification.In the notification there is a button that leads to another popup.

1. Arguments:“More context awareness”

為了節約空間給一個按鈕添加了提示彈窗，而在提示彈窗里又增加了一個，增加的理由是：更多的上下文銜接意識。

2. What happens when?I…

The problem with this is that the user loses his mental model of where he is in the process. If he finishes the second popup, will he go to the original popup or back to the original screen?Either the first popup should be a screen, or the second popup should be an inline error message.

這樣做的會導致什么問題是用戶會失去在任務過程中的心流，如果用戶關閉第二個彈窗，是會回到先前的彈窗還是回到主頁面呢？

這會給用戶造成困惑；所以最終的解決方案是，要么第一個彈窗是一個頁面，要么第二個彈窗是一個弱提示彈窗/非模態彈窗。

五、Card in?card

卡片嵌套：

Cards are trending at the moment, so what could be better than a single card? how about a card in another card… mind blown.

1. Arguments:“Cards are nested to create visual hierearchy”

UXers often talk about visual hierarchy. The way in which elements are organized on a screen portraying their importance to the user. Along the way physical symbolism such as cards were introduced.

卡片設計目前很流行，還有什么是比卡片還要好的嗎？卡片中的卡片又效果如何呢，神魂顛倒。

這樣做的理由是：卡片嵌套能創造視覺層次結構。

UX設計師們經常談論視覺層級結構，這樣能很好的將元素組織起來把最重要的展現給用戶，因此像看片這樣的實體象征被引入到設計中。

2. In a traditional card deck, cards are all equal of size

Cards are placed on, under or next to other cards to communicate certain states or relationships. When you nest a card inside another card, the users mental model of what you can do with cards starts to breakdown.

The user subconsciously starts to question relationships of other objects in the interface, and all logic is thrown out the window.

傳統紙卡牌尺寸都一樣大，通過將卡片并排疊加傳達某一狀態或關系，當卡片進行嵌套，用戶通過卡片建立的心智模型崩潰了。用戶下意識地開始疑惑界面上其他卡片之間的關系，所有的邏輯都被打亂了。

The solution is easy though!Dont nest cards, but place them close to each other, next to each other, or placed within an outline (like laying cards down on a casino table).

解決方案很簡單，不要進行卡片嵌套。而是進行平鋪排列，或者置于外輪廓線內，像賭場桌上的排卡牌一樣。

六、Form fields

表單域設計：

Should I have a long list of form inputs? Maybe break it up in to multiple steps? Or have 3 columns of form inputs so it all fits in a single screen?

1. “Users hate scrolling”

The main problem isn’t the amount of pages or the amount of forms, it is how many forms are visible on the screen at a single time. Like buttons, this should be reduced to the minimal amount possible that still gives context and ease of use.

表單域該怎么做？是羅列一整頁的輸入表單，還是對表單分布顯示，還是在分成3欄并顯示在同一頁，用戶討厭滑動鼠標？

主要的問題不在于頁面數量和表單數量，而是在同一時間多少個表單顯示在屏幕上，就像按鈕一樣，在保證易用易讀的前提下，也應該盡可能減少到最小數量。

2. Always use a single?column

Best practise is to always put intput fields in a single colomn.The users eyes have an easy time to flow down and check off each section.

永遠只用單欄顯示：最佳的實踐是設計一欄表單即可，這樣用戶視覺連續向下流動足一核對每個部分。

3. Are you telling a?story?你在講故事嗎？

Sometimes your input fields are about the journey the user is about to embark on (on boarding), or maybe they have important consequences (tax slips). This is the best time to break up your fields into multiple pages.

This gives you some visual space to create some breathing room and explain to the user what they are doing and why it‘s amazing or important.

有時，如果輸入表單是一系列的任務或者有不同的重要次序，那么就可以進行分頁展示。

這樣能帶來更多的留白空間，頁面也具有呼吸感；同時能讓用戶明白自己在做什么，什么是重要的，讓用戶具有驚奇感又感覺到輕松。

4. Dropdowns?下拉選擇表單

If there are only 1–5 items to choose from please don’t put them in a dropdown. I know it might look elegant and all, but it’s just not worth the users effort. Placing radio buttons is a friendlier approach.

如果只有1-5個選項，就不要做成下拉式菜單，雖然會顯得簡潔優雅，但是用戶使用起來比較費力耗時，直接像收音機按鈕排列出來會是更友好的方式。

七、Recap, Quick rules

?1. Recap, Quick rules

• No more than 9 buttons；
• Only use drop downs as a last resort；
• Give every page a header；
• When a page is more than 1 deep, give it breadcrumb；
• When in multiple steps, show the steps；
• No more than 9 words per line；
• Never use popup in a popup；
• Never nest a card in a card；
• Keep form fields in a single column。

2. 總結回顧：

• 按鈕不超過9個，最好是5個；
• 不到萬不得已不要用下拉；
• 給每個頁面清晰簡潔的標題；
• 當一個頁面有不同層級，使用面包屑；
• 文本每行不超過9個詞（這里大家酌情參考就行，中文肯定不止。占屏幕寬度一半到三分之二都是可接受的）；
• 不要有多重彈窗；
• 不能進行卡片嵌套；
• 保持輸入表單設計成一欄。

作者：蟲二無二；公眾號：看摹設

本文由 @蟲二無二 原創發布于人人都是產品經理，未經許可，禁止轉載

題圖來自?Unsplash，基于 CC0 協議