UI 디자인 Mendix - 위젯, 탐색 레이아웃, 페이지 템플릿

어떻게 하면 풍부한 사용자 인터페이스를 디자인할 수 있을까?

사용자 인터페이스는 드래그 앤 드롭 인터페이스와 WYSIWYG 페이지 편집기를 결합하여 구축됩니다. Mendix Studio Pro 환경은 다음과 함께 사용할 수 있습니다. 아틀라스 UI 완전히 반응형인 프레임워크입니다. 오픈 소스사용자 인터페이스를 구축하는 데 디자인 사고 방식을 적용하는 것을 용이하게 하는 확장 가능한 디자인 언어입니다.

검색 목록, 데이터 보기, 대시보드, 마법사와 같은 일반적인 페이지 패턴이 시작 템플릿으로 제공되어 개발을 가속화하고 여러 장치에서 일관되고 표준적인 사용자 인터페이스를 보장하는 데 도움이 됩니다.

• 탐색 레이아웃

  건물을 만들 때 Mendix 앱에서 가장 먼저 해야 할 일은 탐색 레이아웃을 선택하는 것입니다. 이러한 레이아웃은 동적 페이지가 보관되는 프레임이며 앱 전체에 걸쳐 일관된 구조를 제공합니다.

  탐색 레이아웃은 플랫폼 레이아웃 편집기를 사용하여 구축되며, 이를 통해 페이지에 필요한 레이아웃 패턴을 만들 수 있습니다.

  레이아웃은 레이아웃 그리드, 콘텐츠 자리 표시자, 스크롤 컨테이너, 슬라이딩 메뉴 막대, 스니펫 등의 특정 컨트롤을 사용하여 애플리케이션 UI를 구축할 때 사용될 필수 페이지 레이아웃 패턴을 중앙에서 정의합니다.

• 페이지 템플릿

  페이지 템플릿은 그대로 사용하거나 사용자 정의 빌딩 블록과 위젯으로 개선할 수 있는 미리 디자인된 빌딩 블록의 컬렉션입니다.

• 빌딩 블록

  빌딩 블록은 여러 위젯과 스타일링으로 구성된 단일 용도의 UI 요소입니다. 여러 빌딩 블록은 일반적으로 한 페이지에서 함께 사용됩니다. 빌딩 블록을 해당 모바일, 태블릿 또는 반응형 페이지로 끌어서 공통 UI 패턴을 구현할 수 있으며, 이는 사용자 지정 페이지 개발 속도를 크게 높여줍니다.

• 위젯

  위젯은 기존 구성 요소를 향상시키는 데 사용되는 작은 사용자 인터페이스 요소(예: 알림, 버튼, 차트)입니다.

  Mendix 기본적으로 많은 위젯을 제공하며 수백 개의 오픈 소스 위젯을 사용할 수 있습니다. Mendix 마켓플레이스. 섹션에서 설명한 대로 JavaScript를 사용하여 자체 위젯을 빌드할 수도 있습니다. 어떻게 확장할 수 있습니까? Mendix 프런트엔드? of 프런트 엔드.

• 디자인 속성

  위젯의 디자인 속성을 변경하여 위젯을 더욱 사용자 정의할 수 있습니다. 스타일이나 배치가 적절하지 않은 경우 색상, 텍스트 및 기타 여러 변수를 변경하여 위젯을 케이스별로 사용자 정의할 수 있습니다. 테마 개발자는 자체(회사) 디자인 속성을 구현하여 다른 사용자가 위젯의 모양과 느낌을 회사 브랜드와 일치하도록 쉽게 변경할 수 있습니다.

UI 요소의 기능 Mendix 즉시 사용 가능한 기능을 제공합니까?

Mendix 즉시 사용 가능한 위젯의 증가하는 목록을 제공합니다. 다음은 가장 일반적인 위젯의 선택입니다.

• 메뉴 위젯 – 최종 사용자가 애플리케이션을 탐색할 수 있도록 합니다(예: 메뉴 막대, 탐색 트리)
  

• 데이터 위젯 – 건물 양식의 핵심 Mendix 최종 사용자가 애플리케이션에서 데이터를 보고 편집할 수 있도록 합니다(예: 데이터 뷰, 데이터 그리드, 텍스트 상자 및 라디오 버튼과 같은 일반적인 입력 위젯)
  

• 레이아웃 위젯 – 인터페이스의 중추를 형성하며 일반적으로 레이아웃(예: 레이아웃 컨테이너, 제목)에 사용됩니다.
  

• 일반 위젯 – 일반적으로 모든 페이지, 레이아웃 및 스니펫(예: 레이블, 이미지)에서 발견됨

• 컨테이너 위젯 – 다른 위젯(예: 테이블)을 포함할 수 있습니다.
  그룹박스)
  

• 입력 위젯 – 속성 및 연결의 값을 표시하고 편집할 수 있도록 합니다(예: 텍스트 상자, 날짜 선택기)
  

• 파일 위젯 – 파일에 저장된 이미지를 포함하여 파일 작업을 할 수 있습니다.
  

• 버튼 위젯 – 이러한 버튼은 동작을 트리거합니다(예: 저장 버튼, 페이지 닫기 버튼, 마이크로플로우 버튼)
  

• 시각화 위젯 – 더 많은 그래픽 위젯(예: 차트, 지도)

새로운 위젯은 항상 핵심 위젯을 통해 구축됩니다. Mendix 개발팀과 표준 사용 가능 툴링을 사용하는 개발자 커뮤니티. 사용 가능한 위젯은 다음에서 찾을 수 있습니다. Mendix 온라인마켓 다운로드하여 응용프로그램에 사용하세요.

앱의 디자인과 느낌을 어떻게 사용자 지정할 수 있나요?

따라서 Mendix 프런트엔드는 Atlas UI 프레임워크를 사용하여 반응형 페이지 또는 네이티브 모바일 페이지를 렌더링합니다. 프레임워크는 완전히 사용자 정의할 수 있는 기본 테마를 기반으로 합니다. 테마 사용자 정의 도구를 사용하면 브랜드 색상을 결정하는 데 사용되는 로고를 쉽게 업로드할 수 있습니다. 다양한 색상, 글꼴 및 크기 설정을 빠르게 구성하고 미리 볼 수 있습니다.

이 옆에는 Mendix 사용 말대꾸 스타일을 정의합니다. 플랫폼에는 테마를 구성하고 조정하는 데 사용할 수 있는 많은 변수가 있는 구성 파일이 포함되어 있습니다. 구성은 사용자 정의 Sass 파일을 제공하여 쉽게 변경하고 확장할 수 있도록 설정됩니다. 사용자 정의 CSS로 스타일을 직접 확장할 수도 있습니다. 일관된 사용자 경험을 만드는 것에 대한 다음 섹션에서 설명하는 것처럼 스타일을 공유할 수도 있습니다.

자세한 내용은 다음 컬렉션을 참조하세요. Atlas UI 사용 방법 인간을 Mendix 선적 서류 비치.

럭셔리 기본 모바일 앱, 스타일링은 JavaScript를 기반으로 합니다. 자세한 내용은 다음을 참조하세요. 네이티브 스타일링.

어떻게합니까 Mendix 디자인 패턴 및 요소의 재사용을 지원하시나요?

Atlas UI는 애플리케이션 디자인에 계층화되고 구성 요소화된 접근 방식을 용이하게 함으로써 요소와 레이아웃의 재사용을 촉진합니다. 게다가 Atlas UI를 사용하면 UX 디자이너가 기본 구성 요소를 확장하고, 자체 빌딩 블록을 조립하고, 사용자 지정 위젯을 만들고, 기본 디자인 속성을 재정의할 수 있습니다.

새롭고 향상된 디자인 요소는 각 요소가 사용되는 모든 애플리케이션에 자동으로 전파됩니다.

재사용의 주요 유형은 아래와 같습니다.

짧은 발췌

스니펫은 디자인 요소, 위젯 및 데이터를 포함하는 페이지 디자인의 조각입니다. 스니펫은 모델 수준에서 중앙에서 빌드되고 관리되며 애플리케이션 내의 여러 페이지에서 재사용될 수 있습니다.

이 비디오는 앱 프로젝트에서 스니펫 호출 위젯을 사용하는 방법을 보여줍니다.

레이아웃, 탐색 및 페이지 템플릿

레이아웃은 위젯, 탐색 플레이스홀더, 브랜딩을 재사용 가능한 구성 요소의 중앙 저장소로 결합한 와이어프레임 페이지 디자인입니다. 레이아웃은 특정 폼 팩터를 지원하도록 설계하여 여러 기기에서 공통적인 사용자 경험을 만들 수 있습니다. 레이아웃이 생성되면 디자인 타임에 애플리케이션 페이지에 적용됩니다.