16条能产生巨大影响的UI设计小规则

A UI design case study to redesign an example user interface using logical rules or guidelines

一个UI设计案例研究，使用逻辑规则或准则重新设计一个用户界面的例子

User interface design is hard. With so many options to choose from regarding layout, spacing, typography, and colour, making design decisions can be overwhelming. When you add usability, accessibility, and psychology to the mix, it gets even harder.

用户界面设计是困难的。有这么多关于布局、间距、排版和颜色的选择，做出设计决定可能会让人不知所措。当你把可用性、可及性和心理学加到一起时，它就变得更加困难了。

Luckily, UI design doesn’t have to be so hard. Over nearly 2 decades working as a product designer, I’ve realised that most of my visual and interaction design decisions are governed by a system of logical rules. Not artistic flair or magical intuition, just simple rules.

幸运的是，UI设计不一定要那么难。在近20年的产品设计师工作中，我意识到我的大部分视觉和交互设计决定都是由一套逻辑规则所支配的。不是艺术天赋或神奇的直觉，只是简单的规则。

Having a system of logical rules helps you efficiently make informed design decisions. Without a logical system, you’re just using gut feeling to move stuff around until it looks pretty.

拥有一套逻辑规则的系统可以帮助你有效地做出明智的设计决定。如果没有一个逻辑系统，你就只能用直觉来移动东西，直到它看起来很漂亮。

I love rules and logic, but design decisions are rarely black and white. Rather than strict rules that you must follow, think of the following advice as helpful guidelines that work well in most cases.

我喜欢规则和逻辑，但设计决定很少是黑白分明的。与其说是你必须遵循的严格规则，不如把下面的建议看作是在大多数情况下都能很好地发挥作用的有益指南。

The quickest way to learn is by doing, so let’s get started.

最快的学习方法是通过实践，所以让我们开始吧。

The following 2 designs are for the property details page of a short-term property rental app. The first one is the original design. The second is the result of applying some logical rules or guidelines.

以下2个设计是为一个短期房产租赁应用程序的房产详情页设计的。第一个是原始设计。第二个是应用一些逻辑规则或准则的结果。

Even without much visual or interaction design experience, you’ll probably notice that the original design feels messy, complicated, and difficult to use. This is because it contains many problematic design details that pose a risk to usability. Perhaps you can already spot a few?

即使没有太多的视觉或交互设计经验，你可能也会注意到，原始设计感觉很乱，很复杂，很难使用。这是因为它包含了许多有问题的设计细节，给可用性带来了风险。也许你已经能发...