ui设计界面参数_参数化设计，可以更有效地设计用户界面

ui设计界面参数

User Interface Designers lacked proper design tools for years. Fortunately with the appearance of Sketch 10 years ago, things started to change and now with Adobe XD, Figma and other tools entering the market we’re starting to see fierce competition. These tools certainly make designers lives much easier than before, but at the same time, designers are now being tasked with designing ever more complex apps, involving hundreds of different screens.

用户界面设计师多年来缺少适当的设计工具。 幸运的是，随着10年前Sketch的出现，情况开始发生变化，现在随着Adobe XD，Figma和其他工具进入市场，我们开始看到激烈的竞争。 这些工具无疑使设计人员的工作比以前容易得多，但是与此同时，设计人员现在正被要求设计越来越复杂的应用程序，其中涉及数百个不同的屏幕。

My background is in Architecture and I watched this competition between tools take place 20 years ago. When I started they were but a digital way to do the same drawings we did on paper. But then, tools evolved and parametric design entered the stage.

我的背景是建筑学，我看着工具之间的这种竞争发生在20年前。 当我开始时，它们只是一种数字方式，可以完成我们在纸上所做的相同图纸。 但是随后，工具不断发展，参数设计进入了阶段。

什么是参数设计？ (What’s parametric design?)

Parametric design is widely used in Architecture where the relationship between elements is used to modify and inform the design of complex geometries and structures. World-renowned architects like Zaha Hadid, Norman Foster or Santiago Calatrava use parameters to generate complex geometries through graphical programming interfaces, which would have been impossible to achieve with traditional design methods.

参数化设计在建筑中得到了广泛的应用，其中元素之间的关系用于修改和告知复杂几何形状和结构的设计。 扎哈·哈迪德(Zaha Hadid)，诺曼·福斯特(Norman Foster)或圣地亚哥·卡拉特拉瓦(Santiago Calatrava)等世界知名的建筑师使用参数通过图形化编程界面生成复杂的几何图形，而这是传统设计方法无法实现的。

In Design, parametric refers to a process based on algorithmic thinking that uses parameters and their interrelations to define a geometric form (which can be buttons, containers, panels, etc.). The design of the object is then replaced for the design of the process that generates the object.

在设计中，参数化是指基于算法思想的过程，该过程使用参数及其相互关系来定义几何形式(可以是按钮，容器，面板等)。 然后，将对象的设计替换为生成对象的过程的设计。

Existing tools already allow for some spacing adjustments, however there still isn’t one that fully comprises the scope of parametric design. This method can generate forms connected to code components, making it easier to make changes. In a time where design demands and requests are constant and deadlines are tighter, parametric design can be a game changer in team productivity.

现有工具已经可以进行一些间距调整，但是仍然没有一种工具可以完全包含参数设计的范围。 此方法可以生成连接到代码组件的表单，从而使更改变得更容易。 在设计需求和需求恒定且截止日期越来越紧迫的时代，参数化设计可以改变团队生产力。

那么这将如何工作？ (So how would this work?)

Parametric design can be applied when designing user interfaces since the designer can define parameters and their interrelations to define objects. To better understand how parametric design works it’s important to clarify some of its terms. So let’s start by looking at these two buttons — A and B. Each button is an object (which can be any element of the design, like a button, a container or panel) and there’s a relationship between the two, in this case it’s the distance between button A and button B. We can set a parameter for each one, let’s say, the button’s width and distance from other buttons, which would be our values. Finally, the combination of a parameter and a specific value defined by the designer is called the attribute.

在设计用户界面时可以应用参数设计，因为设计人员可以定义参数及其相互关系来定义对象。 为了更好地了解参数设计的工作原理，弄清其某些术语很重要。 因此，让我们先看一下这两个按钮-A和B。每个按钮都是一个对象(可以是设计的任何元素，例如按钮，容器或面板)，并且两者之间存在关系，在这种情况下按钮A和按钮B之间的距离。我们可以为每个按钮设置一个参数，例如，按钮的宽度和与其他按钮的距离，这就是我们的值。 最后，设计人员定义的参数和特定值的组合称为属性。

So let’s look at an example. Here’s a mobile screen with Button A and Button B. Button A width is set to be 80px and the relationship between the two buttons is 10px, however the designer didn’t define the distance between the edge of button B and the edge of the screen.

因此，让我们看一个例子。 这是一个带有按钮A和按钮B的移动屏幕。按钮A的宽度设置为80px，两个按钮之间的关系为10px，但是设计人员没有定义按钮B的边缘与屏幕边缘之间的距离。

When taking a traditional design approach where the relationship between the objects isn’t defined, if Button A’s width is redefined to 100px, then it overlaps Button B, ruining the relationship between the two buttons.

当采用不定义对象之间关系的传统设计方法时，如果将Button A的宽度重新定义为100px，则它将与Button B重叠，从而破坏了两个按钮之间的关系。

On the other hand, if we follow the parametric design method and change Button A’s width to 100px, and establish that the relationship between the two buttons should always be 10 px, then that distance to Button B will always be respected no matter the attribute given to Button A. In order to maintain relationships between objects, some undefined parameters may change as a consequence. In the example bellow, the distance between Button B and the edge of the screen became smaller.

另一方面，如果我们遵循参数设计方法并将Button A的宽度更改为100px，并确定两个按钮之间的关系应始终为10 px，则无论给定属性如何，都将始终遵守与Button B的距离为了保持对象之间的关系，某些未定义的参数可能会因此而改变。 在下面的示例中，按钮B与屏幕边缘之间的距离变得更小。

Now let’s imagine we redefine Button A’s parameter and increase its width to 160px. Since Button B is larger that the remaining space, it moves to right under Button A. It is then necessary to define the top spacing between the two objects.

现在，让我们假设我们重新定义Button A的参数，并将其宽度增加到160px。 由于按钮B大于剩余空间，因此它在按钮A下方向右移动。然后有必要定义两个对象之间的顶部间距。

让我们把它提高一个档次 (Let’s crank it up a notch)

But you can do all of that with auto-flow tools in current apps, you’d say. Yes, in a way. But there’s no way to address the instances of design elements as their own objects. And it only works on a macro level. Why is this important?

但是，您会说，您可以使用当前应用程序中的自动流工具来完成所有这些工作。 是的，在某种程度上。 但是无法将设计元素的实例作为自己的对象来解决。 它仅在宏级别上起作用。 为什么这很重要？

Consider the following example. In the original screen, container A height is 115px, B is 45px and the relationship between the two is 10px of padding. Now, let’s imagine we need to redesign container A and it’s now shorter, with a heigh of only 85px. With current tools, container B doesn’t adjust itself to A so now there’s a huge gap between them. Imagine this across dozens of screens you now need to adjust. In parametric design we can set that relationship so that container B is always 10 px from the lower edge of A, so if A becomes shorter, B will move upwards.

考虑以下示例。 在原始屏幕中，容器A的高度为115px，容器B的高度为45px，两者之间的关系为填充的10px。 现在，让我们想象一下，我们需要重新设计容器A，它现在更短了，高度只有85px。 使用当前的工具，容器B无法将其自身调整为A，因此现在它们之间存在巨大的差距。 想象一下您现在需要调整的数十个屏幕。 在参数设计中，我们可以设置该关系，以使容器B始终与A的下边缘相距10 px，因此，如果A变短，则B会向上移动。

And if A becomes larger, it pushes B downwards, instead of overlapping and breaking the design. If this happens to influence other containers around them, all you have to do is change a few parameters in those containers and the screens using them will magically re-arrange themselves. This considerably speeds up the design process whenever you need to make adjustments across the board.

如果A变大，它将向下推B，而不是重叠并破坏设计。 如果这碰巧影响了它们周围的其他容器，您要做的就是更改这些容器中的一些参数，使用它们的屏幕将神奇地重新排列它们自己。 每当您需要全面调整时，这都可以大大加快设计过程。

加快复杂应用程序的设计 (Speeding up the design of complex apps)

Parametric design is particularly important when designing complex apps and websites that comprise a large amount of screens, and when the project is constantly suffering changes. For example, you design a dashboard with a notifications element common to several screens, but at a certain point of the project, the client says he needs fewer elements. In a traditional design approach, adjusting this element would create large gaps in the design that would have to be manually readjusted. With parametric design elements, if an object is already defined, relationships between this object and other objects can be introduced and adjusted at any time and would be reflected in every screen you designed. You can even introduce different relationships between different elements, so that when in presence of Object Y, it would behave a certain way, and in the presence of Object Z it would have a completely different behaviour. The possibilities are tremendous, particularly for large scale or long duration projects.

当设计包含大量屏幕的复杂应用和网站时，以及项目不断变化时，参数设计尤为重要。 例如，您设计了一个仪表板，其中包含多个屏幕共有的通知元素，但是在项目的某个特定点，客户表示他需要较少的元素。 在传统的设计方法中，调整此元素会在设计中产生较大的间隙，必须手动重新调整。 使用参数化设计元素，如果已经定义了一个对象，则可以随时引入和调整该对象与其他对象之间的关系，并将其反映在您设计的每个屏幕中。 您甚至可以在不同元素之间引入不同的关系，这样，当存在对象Y时，它将表现为某种方式，而在存在对象Z的情况下，它将具有完全不同的行为。 可能性是巨大的，特别是对于大型或长期项目。

设计系统特别强大 (Particularly powerful with design systems)

A design system is a library of interface components and patterns that are now increasingly used inside product teams to ensure consistency across a wide range of apps. Given the ongoing nature and constant evolution of these, parametric design is particularly adept at reflecting changes across a wide set of screens. If a pattern or widget is set as an object, it can be used and infinitely adjusted according to different parameters, and then reflected across the entire ecosystem of apps using that design system.

设计系统是接口组件和模式的库，现在在产品团队内部越来越多地使用它们来确保各种应用程序之间的一致性。 考虑到这些技术的持续发展和不断发展，参数设计尤其擅长反映大范围屏幕的变化。 如果将模式或小部件设置为对象，则可以根据不同的参数对其进行使用和无限调整，然后使用该设计系统将其反映到整个应用程序生态系统中。

可能性是无止境 (The possibilities are endless)

So as you can see, parametric design offers new and powerful ways to design apps. It not only lets you deploy changes very quickly, it also lets you affect design after the elements have been laid out on a screen. And with the right parameters set, you don’t even have to position objects on a page, you can just specify which objects are present on a given page and the objects will be automatically laid out. It’s also a better reflection of the process of development, that with the parameters exposed can perform their work considerably faster.

如您所见，参数化设计提供了新颖而强大的方法来设计应用程序。 它不仅可以让您非常快速地部署更改，还可以在将元素放置在屏幕上之后影响设计。 设置正确的参数后，您甚至不必在页面上放置对象，只需指定给定页面上存在哪些对象，对象就会被自动布置。 这也更好地反映了开发过程，公开了参数可以大大加快其工作速度。

by Bruno Figueiredo & Ana Catarina Ferreira

布鲁诺·菲盖雷多(Bruno Figueiredo)和安娜·卡塔琳娜·费雷拉(Ana Catarina Ferreira)

翻译自: https://medium.com/@xperienzRD/parametric-design-enabling-a-more-efficient-design-of-user-interfaces-f165173f9d52

ui设计界面参数