The year is approximately 1,300 BC when Moses received the 10 UI design commandments from the almighty design gods. The list was comprised of best practices that only the most enlightened designers would be aware of.

當摩西從全能的設計神那里收到10條UI設計誡命時，這一年大約是1300年。 該列表由只有最有才華的設計師才知道的最佳實踐組成。

This list was adapted from Will Grant’s 101 UX Principles. These are my favorite ten of the 101 principles from the book.

此列表改編自Will Grant的101 UX原則 。 這是本書中101條原則中我最喜歡的10條。

1.空國家 (1. Empty States)

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 what your software can do.

在空白處保留內容將是您錯過的機會，以提供有關軟件功能的指導和信息。

You should use your empty state to orient users.

您應該使用空狀態來定向用戶。

You can use empty states as an opportunity 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…”

無論您決定做什么，請確保您不只是說：“這里什么都沒有……”

2.滑塊 (2. Sliders)

Thou shalt not use sliders for quantifiable values

請勿將滑塊用于可量化的值

Ever get frustrated at a slider because you want to set it to 6, but it keeps landing on either 5 or 7? This isn’t your fault — it’s the designer’s.

您是否曾經因為想要將其設置為6而對它感到沮喪，但它卻一直停留在5或7上？ 這不是你的錯，這是設計師的錯。

Sliders are great for qualitative values like brightness, volume, color pickers, and so on.

滑塊非常適合定性值，例如亮度，音量，顏色選擇器等。

You should never use sliders for selecting specific numerical values — in these cases, sliders are frustrating and ineffective.

絕對不要使用滑塊來選擇特定的數值-在這種情況下，滑塊令人沮喪且無效。

3.下拉菜單 (3. Dropdown Menus)

Thou shalt only use a dropdown menu if there are many options

如果有很多選項，則只能使用下拉菜單

When there are several options, like choosing your country or favorite Pokemon, then a dropdown is the perfect component to use as long as you follow the rules for dropdowns to improve their usability.

如果有多種選擇，例如選擇您的國家或最喜歡的神奇寶貝，那么下拉列表就是您使用下拉列表的理想選擇，只要您遵循下拉列表的規則以提高其可用性。

However, if you only have a handful of options, then consider using radio buttons or sliders instead.

但是，如果只有幾個選項，則可以考慮使用單選按鈕或滑塊。

If you have a very long dropdown with many options, then consider adding a mini search or filter so the user can quickly get to the option they need.

如果下拉菜單項很多，請考慮添加一個小型搜索或過濾器，以便用戶快速找到所需的選項。

4.目標 (4. Targets)

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。

5.無限滾動 (5. Infinite Scroll)

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頁時，他們可以決定是通過搜索，排序還是過濾來縮小列表范圍。 如果他們不知道列表中有多少個項目，他們將無法做出決定。

6.分頁 (6. Pagination)

Thou shalt use pagination for content that has a beginning, middle, and end

您應該對具有開頭，中間和結尾的內容使用分頁

Pagination may seem outdated, but it has several benefits:

分頁看似已過時，但它有幾個好處：

• It allows the user to orient themselves instead of feeling as though they’re searching through an endless list.
  它使用戶可以定位自己的方向，而不用感到好像自己正在搜索無盡的列表。
• It remembers the user’s position and displays the current page to them.
  它會記住用戶的位置并向他們顯示當前頁面。
• It makes it clear where the beginning, middle, and end of the content is.
  它使內容的開始，中間和結尾在哪里清晰可見。
• Users can reach the footer if they need to since the page has an end.
  由于頁面結束，因此用戶可以根據需要到達頁腳。
• It makes it easy for the user to narrow down their results.
  用戶可以輕松地縮小結果范圍。

7.顯示不告訴 (7. Show don’t tell)

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.

視頻演示非常適合復雜的軟件和界面，但是如果無法觀看視頻，那么屏幕提示就是一個很好的起點。 但是，請確保使技巧在視覺上引人入勝且可以忽略。

8.標簽 (8. Labels)

Thou shalt give descriptive labels to icons

您應為圖標添加描述性標簽

Mystery icons without descriptive labels are useless and consistently perform terribly in user tests.

沒有描述性標簽的神秘圖標毫無用處，并且在用戶測試中始終表現出色。

The icon serves to provide a quick visual reference by which the user can instantly recognize a control. However, until the function is discovered and understood, the label explains its purpose.

該圖標用于提供快速的視覺參考，用戶可以通過該參考即時識別控件。 但是，在發現并理解該功能之前，標簽會說明其用途。

Some icons can get away with not having labels, like bold, italics, underline, and so on. However, icons in a menu or toolbar need descriptive text to explain their meaning.

某些圖標可能會因為沒有標簽而消失，例如粗體，斜體，下劃線等。 但是，菜單或工具欄中的圖標需要描述性文字來解釋其含義。

Icons are misused so frequently that it’s difficult to point to one single meaning for most icons. Different designers use various icons to explain the same thing or the same icon to describe different actions.

圖標被濫用的頻率很高，以至于大多數圖標很難指向一個單一的含義。 不同的設計師使用各種圖標來解釋同一件事，或者使用同一圖標來描述不同的動作。

A magnifying glass, for example, may mean “search” in one interface and “zoom” in another.

例如，放大鏡在一個界面中可能意味著“搜索”，而在另一界面中則意味著“縮放”。

9.本機組件 (9. Native Components)

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.

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

10.載入中 (10. Loading)

Thou shalt use a spinner if the task will take an uncertain amount of time

如果任務需要不確定的時間，則應使用微調器

Using a spinner tells the user that something is happening, but it doesn’t indicate how long a process will take.

使用微調器可以告訴用戶發生了一些事情，但這并不表示一個過程將花費多長時間。

If you know precisely how long a process will take, a download or upload, for example, then a progress bar is perfect.

如果您確切地知道一個過程(例如下載或上傳)將花費多長時間，那么進度條就是完美的選擇。

Showing a progress indicator with a percentage of time until completion is ideal, but if you can’t determine how long a process will take, then use a spinner.

在進度指示器中顯示進度指示器，直到完成為止是很理想的，但是如果您無法確定一個過程將花費多長時間，則可以使用微調器。

If something goes wrong or an error occurs, make sure your spinner stops and alerts the user of the issue. If not, then your user will just continue waiting — meanwhile, nothing is happening behind the scenes.

如果出現問題或發生錯誤，請確保您的微調器停止并警告用戶該問題。 如果沒有，那么您的用戶將繼續等待-同時，幕后沒有任何React。

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

Up next by me…

接下來由我...