vue 可用的 ui_ui设计的10种可用性启发法

vue 可用的 ui

Jakob Nielsen’s

雅各布·尼尔森(Jakob Nielsen)

10 Usability Heuristics for User Interface Design are essential for every designer and developer to know and understand, in order to provide a seamless user experience for all end users. These timeless heuristics are broad rules of thumb that can be applied to everything from physical products to websites and mobile apps. 10用户界面设计的可用性启发法对于每个设计师和开发人员都必须了解和理解，以便为所有最终用户提供无缝的用户体验。 这些永恒的启发式方法是广泛的经验法则，可以应用于从物理产品到网站和移动应用程序的所有内容。

In this article, I’m going to explain and review each one with examples.

在本文中，我将通过示例进行解释和复习。

1.系统状态的可见性 (1. Visibility of system status)

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

系统应始终在合理的时间内通过适当的反馈使用户知道发生了什么。

It’s important to always keep your user in the loop during interactions to help avoid potential errors and frustrations. While we don’t need to tell them every single action that’s taking place (that could be overwhelming!), there are plenty of important cases such as:

重要的是在交互过程中始终使您的用户处于循环中，以帮助避免潜在的错误和挫败感。 尽管我们不需要告诉他们正在发生的每一个动作(这可能会令人不知所措！)，但是有很多重要的情况，例如：

• When a submit button on a form is clicked
  当单击表单上的提交按钮时
• When a purchase order has been received
  收到采购订单后
• When an item is added to or deleted from your cart
  购物车中添加或删除商品时
• When a login attempt is successful or not
  登录尝试成功与否
• When data entered is incorrect or in the wrong format
  输入的数据不正确或格式错误时

Check out this mock e-commerce example below, which notifies the user when items are added to their cart, deleted and purchased. It also shows a visual tally of how many items are currently in the cart to keep the user informed of the cart status:

在下面查看此模拟电子商务示例，该示例在将商品添加到购物车，删除和购买时通知用户。 它还以可视方式显示购物车中当前有多少物品，以使用户了解购物车状态：

HANX! 汉克斯！

If we didn’t provide visibility of the “Add to Cart” feature here, a user could keep clicking that Tom Hanks mini skirt and end up purchasing twelve by accident! No judgement if that’s what they intended, but you probably only wanted one. 😉

如果我们在此处未提供“添加到购物车”功能的可见性，则用户可以继续单击该汤姆·汉克斯(Tom Hanks)迷你裙，最终无意中购买了十二个！ 无法判断这是否是他们的意图，但是您可能只想要一个。 😉

2.系统与现实世界之间的匹配 (2. Match between system and the 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.

系统应该使用用户熟悉的单词，短语和概念来讲用户的语言，而不是面向系统的术语。 遵循现实世界的惯例，使信息以自然和逻辑的顺序出现。

Keeping in line with the e-commerce example, it would be very confusing to the user if you decided to call the shopping cart something like “itemsArray” since that was how the cart was being saved in the backend. Referring to it as a “cart” or “shopping cart” ties in the real-world example of shopping in a store, which most users can relate to.

与电子商务示例保持一致，如果您决定将购物车称为“ itemsArray”之类的东西，将会给用户带来极大的困惑，因为这是将购物车保存在后端的方式。 在大多数用户可以与之联系的商店实际购物示例中，将其称为“购物车”或“购物车”联系。

Throughout the shopping experience, as items are added to the cart, a green check mark appears with the notification. This image is familiar to the user: a check mark indicates success, and the color green signifies “good to go” from traffic lights and other conventions.

在整个购物过程中，将物品添加到购物车后，通知中会出现一个绿色的复选标记。 用户熟悉此图像：复选标记表示成功