編輯導(dǎo)語(yǔ)：對(duì)于新手設(shè)計(jì)師來(lái)說(shuō)，做設(shè)計(jì)難免會(huì)出錯(cuò)。有的錯(cuò)誤在犯的時(shí)候并不知道，被人指出后才恍然大悟，還有很多錯(cuò)誤因?yàn)楦鞣N原因被忽視掉了。無(wú)論是哪種情況，設(shè)計(jì)師終究都要改正并且提升才可以。本文作者為我們總結(jié)了UI設(shè)計(jì)中常犯的錯(cuò)誤，看看你中招了多少吧！

設(shè)計(jì)源于生活，細(xì)節(jié)成就品質(zhì)。

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

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.

簡(jiǎn)介：我的工作是作為Mendix Partner的顧問(wèn)，我經(jīng)常會(huì)碰到組織良好的額團(tuán)隊(duì)做出非常不錯(cuò)的機(jī)構(gòu)應(yīng)用，我的工作就是是改善這些應(yīng)用的用戶體驗(yàn)。

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

一、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

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

• 更少的點(diǎn)擊和頁(yè)面跳轉(zhuǎn)
• 呈現(xiàn)給客戶更多得內(nèi)容，創(chuàng)造全局概覽
• 用戶厭惡滾動(dòng)瀏覽

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.

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

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.

所有的選項(xiàng)鋪展在一個(gè)頁(yè)面似乎創(chuàng)造了全局概覽，但問(wèn)題是大腦最多只能理解9個(gè)選項(xiàng)，因此用戶95%的按鈕都不經(jīng)常用。

Millers law?/彌勒定律：短時(shí)記憶期間平均能夠記住的元素?cái)?shù)量?jī)H為7(±2)個(gè)。

3. Proximity?臨近原則

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

另外一個(gè)問(wèn)題是按鈕要盡可能緊鄰與其相關(guān)聯(lián)的內(nèi)容，呈現(xiàn)更多的按鈕意味著失去視覺(jué)上的緊鄰原則。

4. Users dont hate scrolling?用戶不討厭滾動(dòng)瀏覽

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.

用戶討厭滾動(dòng)一方面的影響是在正確的時(shí)間沒(méi)有出現(xiàn)正確的內(nèi)容，所以才在一屏上填滿更多的信息來(lái)創(chuàng)造內(nèi)容。

在我們研究分析的結(jié)果中，只用百分之10% 的用戶滾動(dòng)到登陸頁(yè)的按鈕，由此極有可能的結(jié)論是90%的用戶討厭滑動(dòng)鼠標(biāo)。

其實(shí)問(wèn)題不在于滾動(dòng)鼠標(biāo)而是信息量，把大量的信息呈現(xiàn)在同一個(gè)界面并不代表用戶=用戶都會(huì)注意到，反而會(huì)是用戶失去耐心憤然離去。

二、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

為了讓頁(yè)面更簡(jiǎn)潔，就把所有的按鈕盡可能的放到下拉菜單里

好處是：

• 更專注
• 頁(yè)面簡(jiǎn)潔，用戶更容易找到他所需要的

2. Balance is?key 平衡是關(guān)鍵

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.

把你的界面想象成一個(gè)現(xiàn)實(shí)空間，如果你把一張紙放到一套抽屜里，在你找到他之前你需要打開每個(gè)抽屜，對(duì)于UI界面也一樣。

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

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

三、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

你有一個(gè)一致性的設(shè)計(jì)系統(tǒng)和品牌風(fēng)格，所有的頁(yè)面感覺(jué)都一樣，很快你你感覺(jué)就像走在了頁(yè)面組成了叢林里，不知道你當(dāng)前的頁(yè)面是否之前看到過(guò)，還是不同的頁(yè)面有相似的狀態(tài)。

你認(rèn)為這樣的好處是

• 一致的視覺(jué)風(fēng)格
• 設(shè)計(jì)系統(tǒng)驅(qū)動(dòng)設(shè)計(jì)
• 有效的使用屏幕

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，在社交媒體、同事、一些私人信息之間忙來(lái)忙去，試圖做你的工作。你腦海中的最后一件事就是你剛才點(diǎn)擊的鏈接以及你在流程或過(guò)程中的位置，所以：

為用戶按照以下原則設(shè)計(jì)界面：

• 給界面設(shè)定清晰的標(biāo)題；
• 如果有不同層級(jí)就使用面包屑；
• 如果任務(wù)流有多個(gè)步驟，那么就顯示出來(lái)。

四、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”

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

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.

這樣做的會(huì)導(dǎo)致什么問(wèn)題是用戶會(huì)失去在任務(wù)過(guò)程中的心流，如果用戶關(guān)閉第二個(gè)彈窗，是會(huì)回到先前的彈窗還是回到主頁(yè)面呢？

這會(huì)給用戶造成困惑；所以最終的解決方案是，要么第一個(gè)彈窗是一個(gè)頁(yè)面，要么第二個(gè)彈窗是一個(gè)弱提示彈窗/非模態(tài)彈窗。

五、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.

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

這樣做的理由是：卡片嵌套能創(chuàng)造視覺(jué)層次結(jié)構(gòu)。

UX設(shè)計(jì)師們經(jīng)常談?wù)撘曈X(jué)層級(jí)結(jié)構(gòu)，這樣能很好的將元素組織起來(lái)把最重要的展現(xiàn)給用戶，因此像看片這樣的實(shí)體象征被引入到設(shè)計(jì)中。

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.

傳統(tǒng)紙卡牌尺寸都一樣大，通過(guò)將卡片并排疊加傳達(dá)某一狀態(tài)或關(guān)系，當(dāng)卡片進(jìn)行嵌套，用戶通過(guò)卡片建立的心智模型崩潰了。用戶下意識(shí)地開始疑惑界面上其他卡片之間的關(guān)系，所有的邏輯都被打亂了。

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

解決方案很簡(jiǎn)單，不要進(jìn)行卡片嵌套。而是進(jìn)行平鋪排列，或者置于外輪廓線內(nèi)，像賭場(chǎng)桌上的排卡牌一樣。

六、Form fields

表單域設(shè)計(jì)：

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.

表單域該怎么做？是羅列一整頁(yè)的輸入表單，還是對(duì)表單分布顯示，還是在分成3欄并顯示在同一頁(yè)，用戶討厭滑動(dòng)鼠標(biāo)？

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

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.

永遠(yuǎn)只用單欄顯示：最佳的實(shí)踐是設(shè)計(jì)一欄表單即可，這樣用戶視覺(jué)連續(xù)向下流動(dòng)足一核對(duì)每個(gè)部分。

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.

有時(shí)，如果輸入表單是一系列的任務(wù)或者有不同的重要次序，那么就可以進(jìn)行分頁(yè)展示。

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

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個(gè)選項(xiàng)，就不要做成下拉式菜單，雖然會(huì)顯得簡(jiǎn)潔優(yōu)雅，但是用戶使用起來(lái)比較費(fèi)力耗時(shí)，直接像收音機(jī)按鈕排列出來(lái)會(huì)是更友好的方式。

七、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. 總結(jié)回顧：

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

作者：蟲二無(wú)二；公眾號(hào)：看摹設(shè)

本文由 @蟲二無(wú)二 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自?Unsplash，基于 CC0 協(xié)議