UI 개체

효과적인 UI 개체 명명 및 레이아웃 방식은 가독성, 유지 관리 용이성 및 성능을 향상시킵니다. 이 섹션에서는 명확성과 일관성을 보장하기 위한 UI 요소 명명, 구성 및 디자인에 관한 규칙을 설명합니다.

UI 개체 명명

역할 기반 접두사를 사용하는 대신, UI 개체 이름을 최소화하고 명확하고 의미 있게 유지하고, 중복은 피하십시오.
  • 불필요한 접두사 없이 개체의 기능을 정의하는 간결하고 설명적인 이름을 사용합니다. 예:
    • btnStart
       대신
      StartAction
    • lblTemperature
       대신
      TemperatureString
    • txtUsername
       대신
      Username
중요:
Object1
 또는
UIElement
와 같은 모호한 이름은 피하십시오.

컨테이너 및 계층 구조

컨테이너 및 개체 구성은 협업 환경에 필수적이며 프로젝트를 만드는 동안 시간을 절약하는 데 중요합니다.
  • 패널, 버튼, 레이블, 그래프 및 관련 요소와 같은 컨테이너를 사용하여 기능별로 UI 개체를 구성합니다.
  • 더 나은 구조와 확장성을 위해 중첩된 계층 구조를 사용합니다.
  • 중복 속성을 피하여 노드 수를 최소화합니다.
  • 디자인 타임에만 필요한 불필요한 동적 링크를 줄입니다.
    팁: 이 주제에 대한 자세한 내용은 동적 링크를 참조하십시오.

크기 및 레이아웃

응용 프로그램에서 보다 균형 잡힌 레이아웃을 위해 개체 크기와 배치를 일관되게 유지합니다.
  • 유사한 UI 개체에 대해 일관된 크기를 적용합니다.
    팁: 이 주제에 대한 자세한 내용은 그래픽 개체 레이아웃을 참조하십시오.
  • 서로 다른 화면 크기를 지원하도록 상대 위치 지정(앵커)을 사용합니다.
  • 글꼴 크기 등 콘텐츠 변화에 따라 위젯을 자동으로 조정하려면 크기
    자동
     기능을 사용합니다.
    팁:
    자동
     기능은 콘텐츠에 맞게 조정되는 시나리오를 위해 설계되었습니다. 이는 컨테이너를 콘텐츠에 맞게 조정해야 하거나 텍스트를 컨테이너 크기에 맞게 조정해야 하는 경우에 이상적입니다.
    자동
    을 활성화하려면
    속성
     패널을 열고
    높이
     또는
    너비
     필드에서 값을 제거합니다. 값이 지워지면 해당 필드가
    자동
    으로 자동 전환되어, 콘텐츠 기반의 동적 크기 조정이 활성화됩니다.

일관된 디자인

완성도 높은 응용 프로그램을 위해 일관성을 적용합니다.
  • 스타일시트와 미리 정의된 스타일을 사용합니다.
  • 색상, 글꼴, 테두리에 대해 통일된 테마를 따릅니다.
  • 체계적이고 전문적인 모양이 되도록 UI 요소를 정렬합니다.
팁: 자세한 내용은 그래픽 개체, 스타일시트 및 프로젝트에 전역 스타일 적용을 참조하십시오.

재사용 가능한 유형

재사용 가능한 유형과 전역 스타일을 사용하여 UI 구성 요소 간에 일관성을 유지하고 유지 관리를 단순화합니다.
  • 버튼 및 텍스트 필드와 같은 일반적인 UI 개체를 위한 재사용 가능한 유형을 만듭니다.
  • 텍스트와 버튼에 전역 스타일을 사용하여 일관성을 유지합니다.

간격, 정렬 및 그리드 시스템

일관된 간격과 레이아웃 정렬을 적용하여 깔끔하고 확장 가능하며 시각적으로 균형 잡힌 UI 레이아웃을 만듭니다.
  • 8픽셀 규칙을 따릅니다. 간격과 여백을 8px(8px, 16px, 24px) 단위로 유지합니다.
  • 더 나은 UI 구조를 위해 그리드 기반 레이아웃을 사용합니다.
  • 균일한 모양을 위해 일관된 안쪽 여백과 바깥쪽 여백을 유지합니다.
의견을 작성 부탁드립니다.
이 자료에 대한 문의사항이나 요청사항이 있습니까? 여기에 요청사항을 작성 부탁드립니다.
Normal