UI(ユーザーインターフェース)デザイン

最終更新: 4月5日


魅力的なUIをデザインしたい!


MendixでのUIは、ドラッグアンドドロップインターフェースとWYSIWYGページエディタを組み合わせて構築されます。

Mendix StudioとMendix Studio Pro環境は、Atlas UIフレームワークと一緒に使用することができます。


検索可能なリスト、データビュー、ダッシュボード、ウィザードなどの一般的なページパターンがスターターテンプレートとして利用可能です。

開発を加速させ、複数のデバイス間で一貫性のあるUIを確保することができます。


魅力的なUIを迅速・柔軟に構築するために、Mendixは以下の図で示すコンセプトを使用しています。

Mendix

1. ナビゲーションレイアウト


Mendixアプリを構築する際に、最初に行うのがナビゲーションレイアウトの選択です。

これらのレイアウトは、ダイナミックページが格納されるフレームであり、アプリ全体で一貫した構造を提供します。


ナビゲーションレイアウトは、プラットフォームレイアウトエディタを使用して構築され、ページに必要なレイアウトパターンを作成することができます。


レイアウトは、レイアウトグリッド、コンテンツプレースホルダー、スクロールコンテナ、スライドメニューバー、スニペットなどの特定のコントロールを使用して、アプリケーションのUIを構築する際に必要なページレイアウトパターンを一元的に定義します。



2. ページテンプレート


ページテンプレートは、あらかじめデザインされたビルディングブロックのコレクションで、そのまま使用したり、カスタムビルディングブロックやウィジェットを使って拡張したりすることができます。



3. ビルディングブロック


ビルディングブロックとは、複数のウィジェットとスタイリングで構成される単一のUI要素です。


複数のビルディングブロックが1つのページにまとめて使用されます。

それぞれのモバイルページ、タブレットページ、レスポンシブページのいずれかにビルディングブロックをドラッグして、共通のUIパターンを実装することができ、カスタムページの開発を大幅にスピードアップすることができます。



4. ウィジェット


ウィジェットは、既存のビルディングブロックを強化するために使用される小さなUI要素(例:アラート、ボタン、チャート)です。


Mendixには多様なウィジェットが用意されていますが、Mendix App Storeにはさらに多様な何百ものウィジェットが用意されています。JavaScriptを使って独自のウィジェットを構築することもできます。



5. デザインプロパティ


ウィジェットのデザインプロパティを変更することで、ウィジェットをさらにカスタマイズできます。独自のデザインプロパティを実装することもできるので、会社のブランドに合わせてウィジェットの見た目を簡単に変更することができます。



46回の閲覧0件のコメント

最新記事

すべて表示