用于描述html页面所需布局动态的“语言”

Question

我正在寻找一种工具/标准/概念/惯例，它将改善设计人员和开发人员之间的沟通，以描述UI元素及其布局。

我将尝试通过例子解释：
考虑一个设计，显示一个200 x 200像素的红色框，其中有一个100 x 100像素的绿色框。

只要没有动态，这是非常明确的 但是，当你想要考虑任何动态变化时，这已经不够了。

如果设备的尺寸为300 x 400像素而不是200 x 200，请考虑一下此设计应该会发生什么。

可以解释为：

• 保持200乘200平方固定在300乘400区域的任何角落，留下不平衡的白边。
• 保持200乘200平方，相对于300乘以400，会留下平衡的白边。
• 拉伸红色区域以适应新的可用区域，但保留内部方块的原始大小相同。

等等。

这不是理论上的问题，这对于需要支持多种语言的应用程序设计UI是一个真正的问题。 由于其中包含的文本随着使用不同的语言而变化，因此按钮的尺寸可能会发生变化。

我正在寻找（图形？）标准来显示锚点/边距/最小或最大尺寸，相对位置等。

可以轻松传达消息的内容，例如： 这两个按钮的每边边距应为5px，如果需要，则中间区域应至少为80px或更大，以容纳其文本。两个按钮最终应该具有相同的大小（通过将它们全部增加到最大的按钮所需的大小）。

Answer 1

我管理代理商的开发人员和设计师。我们确保我们的设计师为每个可能的（设备）屏幕设计。如果用户界面是专为PC设计的，开发人员会对布局如何从PC更改为移动设备到平板电脑有疑问。大多数设计师从一开始就意识到这一点并为所有屏幕设计。

对于您的假设问题的具体答案，使用尺寸百分比有助于将设计从大屏幕转换为小屏幕，并使设计美感优于使用绝对像素尺寸。