html 페이지의 원하는 레이아웃 다이나믹스를 설명하는 "언어"

Question

UI 요소와 레이아웃을 설명하는 디자이너와 개발자 간의 커뮤니케이션을 향상시키는 도구/표준/개념/규칙을 찾고 있습니다.

예시로 설명하려고합니다.
100x100 픽셀 녹색 상자가 가운데에있는 200x200 픽셀 빨간색 상자를 보여주는 디자인을 고려해보십시오.

아무 것도 동적이 아닌 한 매우 명확합니다. 그러나 동적 변경을 고려하고 싶은 순간에는 더 이상 충분하지 않습니다.

단지 그것은으로 해석 할 수있다 (200)

200을 장치의 크기가 300 ~ 400 픽셀로 밝혀지면이 디자인에 일이 ... 대신해야한다 무엇을 고려해야합니다

• 200x200 정사각형을 300x400 모서리의 구석에 고정하여 불균형 한 흰색 여백을 남깁니다.
• 300x400을 기준으로 200x200 정사각형을 유지하면 균형이 잡힌 흰색 여백이 남습니다.
• 빨간색 영역을 새로운 사용 가능한 영역에 맞게 늘이기는하지만 내부 정사각형은 원래 크기와 동일한 채로 둡니다.

등등.

이것은 이론적 인 질문이 아닙니다. 이것은 하나 이상의 언어를 지원해야하는 응용 프로그램 용 UI를 디자인 할 때 실제 문제입니다. 버튼의 치수는 다른 언어가 사용되면서 그 안에 포함 된 텍스트로 인해 변경 될 수 있습니다.

나는 앵커/여백/최소 또는 최대 크기, 상대 위치 지정 등을 표시하기위한 (그래픽?) 표준을 찾고 있습니다.

다음과 같은 메시지를 쉽게 전달할 수있는 것 :두 개의 버튼에는 양쪽에 5px의 여백이 있어야하고 텍스트를 수용하기 위해 필요한 경우 최소한 80px 이상의 중간 영역이 있어야합니다. 두 단추 모두 결국 같은 크기를 가져야합니다 (모든 단추를 최대 크기로 늘리십시오).

Answer 1

기관에서 개발자와 디자이너를 관리합니다. 우리는 디자이너가 가능한 모든 (장치) 화면을 디자인하도록합니다. UI가 PC 용으로 설계된 경우 개발자는 PC에서 모바일에 이르기까지 레이아웃이 어떻게 변경되는지에 대해 질문 할 것입니다. 대부분의 설계자는 처음부터 모든 화면에 대해이 기능과 디자인을 알고 있습니다.

가상의 질문에 대한 구체적인 답변을 보려면 크기에 대한 백분율을 사용하면 큰 화면에서 작은 화면으로 디자인을 변환하고 절대 픽셀 크기보다 디자인을 아름답게 유지하는 데 도움이됩니다.