交互規(guī)則

重點(diǎn) (Top highlight)

In life, there are certain rules you must never break. If you do there will be hell to pay. In User Interface design there are also rules to live by. They are called “heuristics” or general principles that improve usability in user interfaces. These are repeatable patterns that have been tested over time and help users navigate an interface. A well-designed interface will always contemplate the following principles. A not so well designed interface will surely lack one or more of these principles. You’re a UI designer so why would you break one of these rules and cause your users such headache?

在生活中，有些規(guī)則是您絕不能打破的。 如果您這樣做，將要付出地獄的代價(jià)。 在用戶界面設(shè)計(jì)中，還存在一些規(guī)則。 它們被稱為“啟發(fā)式”或提高用戶界面可用性的一般原則。 這些是經(jīng)過(guò)反復(fù)測(cè)試的可重復(fù)模式，可以幫助用戶瀏覽界面。 精心設(shè)計(jì)的界面將始終考慮以下原則。 設(shè)計(jì)不當(dāng)?shù)慕缑婵隙〞?huì)缺少這些原則中的一項(xiàng)或多項(xiàng)。 您是UI設(shè)計(jì)師，那么為什么要違反這些規(guī)則之一，并讓用戶感到頭疼？

This list was adapted from Norman Neilsen’s 10 Heuristics for User Interface design.

此列表改編自Norman Neilsen的 10種 用戶界面 啟發(fā)式 設(shè)計(jì)。

1.系統(tǒng)狀態(tài)的可見(jiàn)性 (1. Visibility of System Status)

The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.

系統(tǒng)應(yīng)始終在合理的時(shí)間內(nèi)通過(guò)適當(dāng)?shù)姆答伿褂脩糁腊l(fā)生了什么。

Always give your users appropriate information, hints and context so they know where they are within the system at all times. This allows the user to feel in control and know what to do next. Did the item get added to the cart? Did the edit get saved? How long will this process take? What is the status of my order? What is happening right now? Always be answering questions like these for users and never keep them guessing or in the dark.

始終為您的用戶提供適當(dāng)?shù)男畔?#xff0c;提示和上下文，以便他們始終知道自己在系統(tǒng)中的位置。 這使用戶可以掌控一切，并知道下一步該怎么做。 該商品是否已添加到購(gòu)物車(chē)？ 修改保存了嗎？ 此過(guò)程需要多長(zhǎng)時(shí)間？ 我的訂單狀態(tài)如何？ 現(xiàn)在發(fā)生了什么？ 始終為用戶回答此類問(wèn)題，切勿讓他們猜測(cè)或在黑暗中。

2.系統(tǒng)與現(xiàn)實(shí)世界之間的匹配 (2. Match between System and Real World)

The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

系統(tǒng)應(yīng)該使用用戶熟悉的單詞，短語(yǔ)和概念來(lái)講用戶的語(yǔ)言，而不是面向系統(tǒng)的術(shù)語(yǔ)。 遵循現(xiàn)實(shí)世界的慣例，使信息以自然和邏輯的順序出現(xiàn)。

Use familiar words and language. Don’t overcomplicate the wording for the user. The meaning of a word or an icon on the screen should be clear and understandable for your target audience. People also come with mental models and experiences that allow them to interpret patterns.

使用熟悉的單詞和語(yǔ)言。 不要使用戶的用語(yǔ)過(guò)于復(fù)雜。 屏幕上的單詞或圖標(biāo)的含義應(yīng)清晰易懂，以供目標(biāo)受眾理解。 人們還帶有心理模型和經(jīng)驗(yàn)，使他們能夠解釋模式。

One of the greatest advancements in technology came about when the Graphical User Interface was introduced. Before the GUI the computer screen was limited to obscure textual commands to memorize and repeat every time you wanted to execute an action. Then everything changed. The screen displayed little images of folders and files and a hand cursor. These were all visual symbols people understood instantly. No need to explain because it referenced real-world mental models.

當(dāng)引入圖形用戶界面時(shí)，技術(shù)上的最大進(jìn)步之一就出現(xiàn)了。 在GUI之前，計(jì)算機(jī)屏幕僅限于模糊的文本命令以記住和重復(fù)您每次要執(zhí)行的操作。 然后一切都變了。 屏幕上幾乎沒(méi)有顯示文件夾和文件以及手形光標(biāo)的圖像。 這些都是人們立即理解的視覺(jué)符號(hào)。 無(wú)需解釋，因?yàn)樗昧爽F(xiàn)實(shí)世界中的心理模型。

3.一致性和標(biāo)準(zhǔn) (3. Consistency and Standards)

Users should not have to wonder whether different words, situations, or actions mean the same thing.

用戶不必懷疑不同的詞語(yǔ)，情況或動(dòng)作是否意味著同一件事。

There are two types of consistency: internal and external. Internal consistency refers to the patterns within your site or app. This can be simple like keeping links the same color on all pages or using the same icon for the same concept, say HOME, on every screen. External consistency refers to conventions used in other software and systems that most people use, such as a shopping cart. Most people are familiar with how a shopping cart works. You don’t need to reinvent the wheel. If you do you might make it harder for your users to learn how your shopping cart works. Keep it consistent and save users unnecessary confusion.

有兩種類型的一致性：內(nèi)部和外部。 內(nèi)部一致性是指您網(wǎng)站或應(yīng)用內(nèi)的模式。 這很簡(jiǎn)單，例如在所有頁(yè)面上使鏈接保持相同的顏色，或?qū)ν桓拍钍褂孟嗤膱D標(biāo)表示相同的概念，例如HOME。 外部一致性是指大多數(shù)人使用的其他軟件和系統(tǒng)中使用的約定，例如購(gòu)物車(chē)。 大多數(shù)人都熟悉購(gòu)物車(chē)的工作方式。 您不需要重新發(fā)明輪子。 如果這樣做，可能會(huì)使用戶更難了解購(gòu)物車(chē)的工作方式。 保持一致并避免用戶不必要的混亂。

4.用戶控制與自由 (4. User Control & Freedom)

Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.

用戶經(jīng)常錯(cuò)誤地選擇系統(tǒng)功能，并且需要明確標(biāo)記的“緊急出口”以離開(kāi)不需要的狀態(tài)，而無(wú)需進(jìn)行長(zhǎng)時(shí)間的對(duì)話。 支持撤消和重做。

Always provide a way out. Never force users to execute a function they don’t require or lead them to a dead end. If you’re designing a checkout flow for example, let the users continue shopping if they wish. If they tried to execute an action on an app, let the users cancel out if they’re unsure they want to proceed at the last minute.

始終提供出路。 切勿強(qiáng)迫用戶執(zhí)行不需要的功能或使他們陷入僵局。 例如，如果您正在設(shè)計(jì)結(jié)帳流程，請(qǐng)讓用戶根據(jù)需要繼續(xù)購(gòu)物。 如果他們嘗試在應(yīng)用上執(zhí)行操作，請(qǐng)讓不確定的用戶取消操作，直到最后一分鐘。

5.錯(cuò)誤預(yù)防 (5. Error Prevention)

Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.

精心設(shè)計(jì)的系統(tǒng)甚至比良好的錯(cuò)誤消息更好，它可以防止問(wèn)題從一開(kāi)始就發(fā)生。 消除容易出錯(cuò)的條件，或者檢查條件，并在用戶執(zhí)行操作之前向其提供確認(rèn)選項(xiàng)。

When system operations are critical, such as deleting files or sending an email campaign to 1,000 recipients, make sure the users know they will do something major. Show them a confirmation dialogue or provide additional information clearly defining what will happen before committing to the action. This will prevent them from going further if unsure of their action. It will also save them a great deal of regret.

當(dāng)系統(tǒng)操作很關(guān)鍵時(shí)，例如刪除文件或向1,000個(gè)收件人發(fā)送電子郵件活動(dòng)，請(qǐng)確保用戶知道他們將做一些重要的事情。 向他們顯示確認(rèn)對(duì)話或提供其他信息，以明確定義在執(zhí)行該操作之前將要發(fā)生的情況。 如果不確定自己的行動(dòng)，這將阻止他們走得更遠(yuǎn)。 這也將使他們免于后悔。

6.識(shí)別而不是回憶 (6. Recognition rather than Recall)

Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.

通過(guò)使對(duì)象，操作和選項(xiàng)可見(jiàn)，最大程度地減少用戶的內(nèi)存負(fù)載。 用戶不必記住從對(duì)話的一部分到另一部分的信息。 該系統(tǒng)的使用說(shuō)明應(yīng)適當(dāng)可見(jiàn)或易于檢索。

As UI designers one of our goals is to reduce cognitive load for users. Mental memory is a huge resource hog. Memory works in two ways: recognition and recall. Recognition is what’s familiar to you instantly. Like a person’s face. You look at a friend’s face and you know instantly you’ve seen them before. Recall works differently. It’s something that you have to retrieve from memory, like a person’s name. Recall usually takes more time and work because your mind has to process more information to decipher what it’s looking at. Recognition, on the other hand, is instant. We want more recognition in our UI’s and less recall. A good UI example for this principle is using universally recognizable buttons and icons for features, such as a house for HOME or a pencil for EDIT. And if you must design new icons for your UI that most people have never seen before, use a text descriptor to clarify and lessen the cognitive load.

作為UI設(shè)計(jì)師，我們的目標(biāo)之一是減少用戶的認(rèn)知負(fù)擔(dān)。 心理記憶是一項(xiàng)巨大的資源消耗。 記憶以兩種方式起作用：識(shí)別和記憶。 識(shí)別是您立即熟悉的。 像一個(gè)人的臉。 您看著朋友的臉，就知道自己曾經(jīng)見(jiàn)過(guò)他們。 召回的工作方式有所不同。 這是您必須從內(nèi)存中檢索的東西，例如一個(gè)人的名字。 召回通常會(huì)花費(fèi)更多的時(shí)間和精力，因?yàn)槟拇竽X必須處理更多的信息才能解讀其內(nèi)容。 另一方面，識(shí)別是即時(shí)的。 我們希望在用戶界面中獲得更多認(rèn)可，并減少召回。 遵循此原則的一個(gè)很好的UI示例是為功能使用通用的按鈕和圖標(biāo)，例如用于房屋的房屋或用于編輯的鉛筆。 并且，如果您必須為UI設(shè)計(jì)大多數(shù)人以前從未見(jiàn)過(guò)的新圖標(biāo)，請(qǐng)使用文本描述符來(lái)闡明和減輕認(rèn)知負(fù)擔(dān)。

7.靈活性和使用效率 (7. Flexibility & Efficiency of Use)

Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.

新手用戶看不見(jiàn)的加速器通常可以加快專家用戶的交互速度，從而使系統(tǒng)可以同時(shí)滿足沒(méi)有經(jīng)驗(yàn)的用戶和有經(jīng)驗(yàn)的用戶。 允許用戶調(diào)整頻繁的操作。

When certain tasks are repeated over and over in your app or system you might want to make the interaction more efficient for the users. For example, use a swipe gesture to save or delete items from a list on a mobile app. The normal way to delete an item is by opening an item and then pressing the delete button. The expert way (and more efficient way) is by simply swiping and instantly deleting and item from a list.

在您的應(yīng)用程序或系統(tǒng)中一遍又一遍地重復(fù)某些任務(wù)時(shí)，您可能希望使用戶的交互更加有效。 例如，使用滑動(dòng)手勢(shì)在移動(dòng)應(yīng)用程序上的列表中保存或刪除項(xiàng)目。 刪除項(xiàng)目的通常方法是打開(kāi)一個(gè)項(xiàng)目，然后按Delete鍵。 專家方式(更高效的方式)是只需滑動(dòng)并立即從列表中刪除和項(xiàng)目。

8.極簡(jiǎn)設(shè)計(jì)與美學(xué) (8. Minimalist Design & Aesthetic)

Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.

對(duì)話中不應(yīng)包含無(wú)關(guān)緊要或很少需要的信息。 對(duì)話中每增加一個(gè)信息單元都會(huì)與相關(guān)信息單元競(jìng)爭(zhēng)，從而降低其相對(duì)可見(jiàn)度。

When designing for art’s sake it doesn’t matter if we go baroque and fill the screen with artifacts, textures, and images. But when designing for interaction we aim to reduce signal-to-noise ratio. Doing this makes our interface more comprehensible for users. You can apply this principle by simply reducing to a bare minimum content displayed on a screen, be it imagery or text, so the user can focus on the task at hand without distraction.

為藝術(shù)而設(shè)計(jì)時(shí)，我們是否要巴洛克式地在屏幕上填充偽影，紋理和圖像并不重要。 但是，在設(shè)計(jì)交互時(shí)，我們的目標(biāo)是降低信噪比。 這樣做使我們的界面更易于用戶理解。 您可以通過(guò)簡(jiǎn)單地將屏幕上顯示的最少內(nèi)容(圖像或文本)減少到最小來(lái)應(yīng)用此原理，從而使用戶可以專注于手頭的任務(wù)而不會(huì)分散注意力。

9.幫助用戶識(shí)別，診斷和從錯(cuò)誤中恢復(fù) (9. Help Users Recognize, Diagnose, & Recover from errors)

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.

錯(cuò)誤消息應(yīng)使用簡(jiǎn)單的語(yǔ)言(無(wú)代碼)表示，準(zhǔn)確指示問(wèn)題并建設(shè)性地提出解決方案。

Errors will happen. That’s inevitable. What happens after a user encounters an error is the UI designer’s responsibility. So lets help users by designing error pages and alerts that are understandable and provide options or solutions to the problem. For instance, let’s examine the ubiquitous 404 page. We as designers know what an error 404 page means, but users generally don’t. In order to help users we have to translate 404 into plain English by adding some copy that makes it clear what just happened like “Sorry, but we couldn’t find the page you’re looking for. Here are some suggestions of pages with similar content…”.

錯(cuò)誤會(huì)發(fā)生。 那是不可避免的。 用戶遇到錯(cuò)誤后發(fā)生的事情是UI設(shè)計(jì)者的責(zé)任。 因此，通過(guò)設(shè)計(jì)可理解的錯(cuò)誤頁(yè)面和警報(bào)并為問(wèn)題提供選項(xiàng)或解決方案，可以幫助用戶。 例如，讓我們檢查無(wú)處不在的404頁(yè)面。 作為設(shè)計(jì)人員，我們知道404錯(cuò)誤頁(yè)面的含義，但用戶通常不會(huì)。 為了幫助用戶，我們必須通過(guò)添加一些副本來(lái)將404轉(zhuǎn)換為簡(jiǎn)單的英語(yǔ)，以便清楚地說(shuō)明發(fā)生了什么，例如“對(duì)不起，但我們找不到您要查找的頁(yè)面。 這是內(nèi)容相似的網(wǎng)頁(yè)的一些建議……”。

10.幫助和文檔 (10. Help & Documentation)

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.

即使可以在沒(méi)有文檔的情況下使用系統(tǒng)會(huì)更好，但可能仍需要提供幫助和文檔。 任何此類信息都應(yīng)該易于搜索，著眼于用戶的任務(wù)，列出要執(zhí)行的具體步驟，并且不要太大。

Always have help clearly accessible. Place it prominently in the top bar or main navigation area. When users run into problems and can’t find a solution easily, they must be directed to a section where they can. This could take the form of a FAQ page with a search box providing possible suggestions and answers. In the event that there is no answer available, the system must have an option to contact support directly for additional assistance, either by a support ticketing system or direct email or phone.

始終獲得明確的幫助。 將其突出顯示在頂部欄或主導(dǎo)航區(qū)域中。 當(dāng)用戶遇到問(wèn)題而無(wú)法輕松找到解決方案時(shí)，必須將他們定向到可以找到的部分。 這可以采用常見(jiàn)問(wèn)題解答頁(yè)面的形式，帶有一個(gè)提供可能建議和答案的搜索框。 如果沒(méi)有可用答案，則系統(tǒng)必須可以選擇通過(guò)支持票務(wù)系統(tǒng)或直接電子郵件或電話直接與支持人員聯(lián)系以獲得更多幫助。

Stay in touch! If you liked this post follow me on Twitter and Dribbble, and connect with me on LinkedIn and Medium for more design-related content.

保持聯(lián)系！ 如果您喜歡這篇文章，請(qǐng)?jiān)赥witter和Dribbble上關(guān)注我，并在LinkedIn和Medium中與我聯(lián)系以獲取更多與設(shè)計(jì)相關(guān)的內(nèi)容。

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)，這是一個(gè)巴西組織，致力于通過(guò)采取行動(dòng)，賦權(quán)和知識(shí)共享的舉措來(lái)促進(jìn)科技行業(yè)中的黑人女性平等。 對(duì)系統(tǒng)性種族主義保持沉默是不可行的。 建立您相信的設(shè)計(jì)社區(qū)。

翻譯自: https://uxdesign.cc/10-interaction-design-rules-you-must-never-break-82a048b0240e

交互規(guī)則

總結(jié)

以上是生活随笔為你收集整理的交互规则_您必须永不中断的10条交互设计规则的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。