레이아웃
레이아웃
- Ant Design
- 全局样式
- 전체 스타일
- Global Styles
- 设计模式
- Design Patterns
- 设计模式 - 探索
- Design Patterns (Research)
- Overview
- Template Document
- Global Rules
- 可视化
- Visualization
- 动效
- Motion
- 图形化
- Illustrations
공간 레이아웃은 체계적인 시각 디자인의 출발점이며, 전통적인 평면 디자인과의 차이점은 UI 화면의 레이아웃 공간이 "동적이며 체계적"인 관점에서 시작된다는 것입니다. 우리는 건축계 거장 르 코르뷔지에(Le Corbusier)의 모듈러(Modulor) 개념에서 영감을 받아, "질서의 아름다움"이라는 원칙에 따라 UI 디자인에서 동적 공간의 질서를 탐구하고, Ant Design의 인터페이스 레이아웃 방식을 형성하여 디자이너가 합리적인 아름다움을 갖춘 레이아웃 공간을 설계할 수 있는 조건을 마련했습니다.
중간 관리 시스템의 시각 체계에서 레이아웃 시스템을 정의할 때, 우리는 5가지 측면에서 출발할 것을 권장합니다:
소통과 이해 비용을 최대한 줄이기 위해서는 조직 내에서 디자인 보드의 크기를 통일하는 것이 필요합니다. Ant Design의 중간 관리 디자인 팀은 통일된 캔버스 크기를 1440으로 설정했습니다.
디자인 과정에서 디자이너는 또한 적응형 개념을 확립하고, 시스템이 적응이 필요한지 여부와 어떤 블록이 동적 레이아웃을 고려해야 하는지를 상황에 따라 판단해야 합니다. 중간 관리 시스템을 사용하는 사용자의 주요 해상도는 1920, 1440, 1366이며, 일부 시스템에서는 1280 해상도의 장치도 존재합니다.
Ant Design에서 제안하는 두 가지 대표적인 적응형 설계 방안은 다음과 같습니다:
좌우 레이아웃 디자인에서 흔히 사용되며, 일반적으로 왼쪽 내비게이션 바를 고정하고 오른쪽 작업 영역을 동적으로 조정하는 방식입니다.
상하 레이아웃 디자인에서 주로 사용되며, 두 측의 여백 영역에 최소값을 정의하고, 여백이 그 값에 도달하면 중간의 주요 콘텐츠 영역을 동적으로 조정하는 방식입니다.
여기서 언급된 두 가지 적응형 설계 아이디어는 매우 간단한 예에 불과하며, 실제 디자인에서 완벽한 적응형 설계를 구현하기 위해서는 디자이너가 프론트엔드 관점, 평면 구도 관점, 인터랙션 관점을 동시에 고려해야 합니다.
Ant Design은 그리드 시스템을 통해 시각 체계의 질서를 구현합니다. 그리드의 기본 단위는 8이며, 이는 짝수의 개념에 부합하고 대부분의 주류 디스플레이 장치와도 호환됩니다. 그리드 개념을 통해 디자이너는 레이아웃 공간의 디자인 결정을 신속하게 내릴 수 있으며, 또한 디자인과 개발 간의 소통 손실을 줄일 수 있습니다.
Ant Design은 24 그리드 시스템을 채택했습니다. 상하 레이아웃 구조를 예로 들어, 콘텐츠 영역을 24 그리드로 나누어 설정하며, 아래 이미지에서 볼 수 있듯이 각 그리드의 Gutter는 고정된 값으로 설정되었습니다. 따라서 브라우저의 크기가 일정 범위 내에서 확대되거나 축소될 때, 그리드의 Column 너비는 함께 변경되지만 Gutter의 너비는 고정된 값으로 유지됩니다.
개발자에게 그리드는 동적 레이아웃을 구현하는 수단이며, 디자이너는 평면 디자인에서 그리드를 이해하고 있습니다. 실제 구현에서는 이와 같은 시각 차이가 발생하여 최종적인 재현도가 떨어지고, 소통 비용이 증가할 수 있습니다.
Ant Design의 디자이너는 다음 네 가지 방법으로 디자이너와 엔지니어 간의 소통을 원활하게 합니다:
Ant Design은 중간 관리 시스템에서 다양한 유형 및 규모의 제품을 다루고 있으며, UI 레이아웃에서 일관성 및 리듬감을 제공하고, 디자인에서 개발로의 레이아웃 언어를 통일함으로써 재현 손실을 줄이기 위해 UI 모듈 개념을 제시했습니다. 다양한 실무에서 8의 배수 원칙을 지키고, 동적 리듬감을 유지하는 배열을 추출하였으며, 이는 레이아웃 공간의 디자인 결정을 더 빠르고 쉽게 내리는 데 도움이 됩니다.
Ant Design의 레이아웃 공간에 대한 성과는 디자인 산출을 제한하려는 것이 아니라 디자이너가 "더 나은" 결과를 도출할 수 있도록 돕는 것입니다. 8의 배수 이중 배열은 다양한 조합을 통해 무한한 가능성을 제공하지만, 무한한 가능성 속에서도 "단순한 데이터 조합"과 "정교한 디자인"의 차이는 분명합니다. 합리적이고 우아한 인터페이스 레이아웃을 구현하려면 미적 요소뿐만 아니라 사용성을 함께 고려해야 하며, 기업용 애플리케이션의 인터페이스 레이아웃에 대한 탐구는 여전히 진행 중입니다.