用於描述html頁面的所需佈局動態的「語言」

Question

我正在尋找一種工具/標準/概念/約定，它可以改進設計人員和開發人員之間用於描述UI元素及其佈局的通信。

我會嘗試通過示例來解釋：
考慮一個設計，該設計顯示一個200×200像素的紅色框，其中心爲100×100像素的綠色框。

這很清楚，只要沒有什麼是動態的，但是當你想解釋任何動態變化的時候，這是不夠的。

只是考慮什麼應該發生這樣的設計，如果該設備的大小原來是300×400像素...而不是200 200

它可以解釋爲：

• 將200×200的方塊固定在300×400區域的任何角落，留下不平衡的白色邊緣。
• 保持200乘200平方的中心相對於300乘400將保留平衡的白邊。
• 拉伸紅色區域以適合新的可用區域，但使內部正方形保持相同的原始尺寸。

依此類推。

這不是一些理論問題，這對於需要支持多種語言的應用程序設計用戶界面是一個真正的問題。 按鈕的尺寸可能因其中包含的文本而改變，因爲使用了不同的語言。

我正在尋找一個（圖形？）標準來顯示錨/邊距/最小或最大尺寸，相對定位等。

東西可以很容易地傳達消息，如： 這兩個按鈕應該在每邊都有5px的邊距，如果需要容納它們的文本，中間區域至少應爲80px或更大。兩個按鈕最終應該具有相同的大小（通過將它們全部增加到其中最大的大小所需的大小）。

Answer 1

我管理某機構的開發人員和設計人員。我們確保我們的設計師爲每個可能的（設備）屏幕設計。如果用戶界面是爲個人電腦設計的，那麼開發人員會對佈局如何從PC變爲移動到平板電腦產生疑問。大多數設計師從一開始就意識到這一點，併爲所有屏幕設計。

對於您的假設問題的具體答案，使用尺寸百分比有助於將設計從大屏幕轉換爲小屏幕，並且保持設計美學比使用絕對像素尺寸更好。