1. 브랜드를 먼저 생각하세요

귀하의 브랜드는 사람들이 귀하의 회사, 제품 또는 앱과 맺는 지적이고 감정적인 연관성을 나타냅니다. 그렇다면 먼저 귀하의 브랜드를 통합하여 앱 디자인을 시작해 보는 건 어떨까요? Mendix 테마 사용자 정의를 사용하면 브랜드 색상, 글꼴, 회사 로고를 앱 디자인에 통합할 수 있습니다.

로고를 브랜드의 글꼴과 독특한 색상 팔레트의 조합으로 통합하면 빌딩 블록과 위젯이 귀하의 정체성에 부합하여 일회성 스타일 변경을 없앨 수 있습니다. 앱을 빌드하기 시작하면 앱이 회사의 고유한 브랜드를 반영하기 때문에 진정한 소유감을 느낄 것입니다.

테마 사용자 정의에 액세스하려면 왼쪽 하단에 있는 브러시 아이콘을 클릭하세요. Mendix 웹 모델러.

2. 템플릿으로 시작하세요

당신은 모르겠지만, 내 비전이 불분명할 때 빈 캔버스는 압도적일 수 있습니다. 다행히도, Mendix Atlas UI 프레임워크로 구축된 상당한 템플릿 라이브러리를 제공하여 앱 개발을 시작합니다. 페이지 템플릿은 시간을 절약하고 창의력을 발휘할 수 있는 좋은 방법입니다. 각 페이지 템플릿에는 빌딩 블록과 위젯이 있는 완전히 디자인된 사용자 인터페이스가 포함되어 있어 연결할 준비가 됩니다.

사용자는 대부분의 시간을 귀하의 UI가 아닌 다른 UI(Facebook, Twitter, 뉴스 웹사이트 등)에서 보냅니다. 바퀴를 새로 발명할 필요는 없습니다. Atlas 템플릿(카드, 브레드크럼, 히어로 헤더, 햄버거 메뉴 등)은 모두 웹에서 발견되는 기존 패턴을 기반으로 설계되었으며, 일반적인 사용자 인터페이스 문제에 대한 솔루션입니다. 똑똑한 디자인 결정으로 사용자를 좌절시키고 짜증나게 하지 말고, 기쁘게 해주고 만족시켜 주세요.

3. 당신의 새로운 가장 친한 친구, Flexbox를 만나보세요

이상하게도, 웹 및 모바일 앱을 만들 때 가장 어려운 일 중 하나는 콘텐츠를 중앙에 배치하는 것입니다. 콘텐츠를 수평으로 중앙에 배치하는 것은 비교적 쉽지만, 수직으로 중앙에 배치하는 것은 거의 항상 까다롭습니다. "CSS 중앙에 배치"만 구글링하면 간단한 작업을 수행하는 방법에 대한 수많은 블로그를 찾을 수 있으며, 이를 달성하기가 얼마나 어려운지 강조합니다.

다행히, Mendix 흥미로운 flexbox 빌딩 블록을 여러 개 추가했습니다.

• 플렉스 컨테이너 왼쪽
• Flex 컨테이너 왼쪽 중앙
• 플렉스 컨테이너 오른쪽
• Flex 컨테이너 오른쪽 중앙

Flexbox를 사용하면 align-content 속성을 사용하여 무엇이든(수직 또는 수평으로) 손쉽게 정렬할 수 있습니다.

Flexbox에는 다른 장점도 있습니다. Flexbox 컨테이너 내의 항목이 사용 가능한 공간에 대응하도록 크기를 "조정"할 수 있으므로 모바일 화면과 반응형 콘텐츠에 적합합니다. 블록/인라인 레이아웃 모드(블록은 수직, 인라인은 수평)와 달리 방향에 구애받지 않으므로 콘텐츠를 어떤 방향(왼쪽, 오른쪽, 아래쪽 또는 위쪽)으로든 배열할 수 있습니다. 또한 더 이상 플로트와 "클리어픽스Flexbox가 모든 것을 처리해주기 때문에 해킹을 피할 수 있습니다.

Flexbox 학습 가이드를 찾을 수 있습니다. 여기에서 확인하세요.

4. 가능한 한 일관성을 유지하고 구축하세요.

앱 전체의 일관성은 모든 것을 지속적이고 예측 가능하며 기대에 맞게 만드는 것으로 귀결됩니다. 빌딩 블록, 페이지 템플릿 및 위젯을 선택하는 것은 앱 유지 관리와 더 중요하게는 사용자 경험 때문에 중요합니다.

사용자의 기대가 맞을수록 시스템을 제어하는 ​​데 더 큰 자신감을 갖게 되고 시스템을 더 좋아하게 될 것입니다.” – Jakob Nielsen

애플리케이션 디자인에 일관성이 있으면 사용자는 지식을 새로운 맥락으로 손쉽게 전환할 수 있습니다. 예를 들어, "저장 버튼”는 녹색을 “와 연관시킵니다.저장” 액션. 사용자는 인지적 노력을 기울이지 않고도 애플리케이션 전체에서 녹색 버튼을 볼 때 발생할 UI 상호 작용을 알 수 있습니다. 위의 예와 같은 패턴을 확립하면 애플리케이션의 개발과 사용성이 용이해집니다.

5. 디자인 요소를 창의적인 발판으로 활용하세요

앞서 Atlas UI 템플릿이 애플리케이션 개발을 시작하는 데 어떻게 도움이 되는지 언급했습니다. 그러나 Atlas UI는 미리 패키징된 페이지 템플릿, 빌딩 블록 및 위젯보다 훨씬 더 많은 것입니다. 제공된 구성 요소는 고유한 Enterprise Design Language를 구현하기 위한 발판입니다.

디자인 언어 여정을 시작하려면 다음을 다운로드하세요. Atlas UI 참조 앱 인사말 Mendix 앱 스토어. 거기서부터 사전 구성된 Atlas UI 빌딩 블록, 페이지 템플릿, 위젯을 사용자 지정하기 시작한 다음, 직접 빌드하는 작업을 진행하세요. Enterprise Design Language에 투자하면 앱 포트폴리오와 팀 전체에 통합된 UX 및 디자인 규칙 세트를 제공하여 디자인에서 개발로의 전환을 가속화할 수 있습니다.

6. 실험

무엇이 효과가 있고 무엇이 효과가 없는지 알아내는 유일한 방법은 실험하는 것입니다. Web Modeler의 WYSIWYG 인터페이스는 실험을 용이하게 하는 훌륭한 도구로, 빌딩 블록과 위젯을 변경하거나 기존 디자인 요소의 디자인 속성을 조정하여 새로운 아이디어를 쉽게 만들 수 있습니다. Atlas UI를 더 많이 실험할수록 참여를 강화하는 UX/UI 요소와 좌절이나 포기를 유발하는 요소를 더 빨리 이해할 수 있습니다.

작업하는 동안 Atlas UI 앱 사용

새로 출시된 Atlas UI 모바일 앱을 사용하면 모바일 폰에서 모든 페이지 템플릿, 빌딩 블록 및 위젯을 탐색할 수 있습니다. 어디에 있든 Atlas UI 솔루션을 탐색하세요. 모델링하는 동안에도 사용할 수 있으므로 브라우저로 계속 돌아갈 필요가 없습니다.

이제 Atlas UI로 놀라운 것을 만들어 보세요. 를 다운로드 Mendix 모바일 앱 영감을.