UIを設計する
OutSystems UIは、OutSystemsアプリケーションのユーザーインターフェイスの構造を作成する方法を定義します。
以下の図は、OutSystems UIアーキテクチャを示しています。
以下では、各コンポーネントについて説明します。
OutSystemsUIフレームワーク
OutSystems UIフレームワークは、すべてのユーザーインターフェイスの基礎となります。WebアプリケーションやモバイルアプリケーションのUIパターンや、美しくレスポンシブなビルトイン画面テンプレートが提供されており、それらを使用したり、カスタマイズされたテンプレートを作成したりすることができます。これらを利用してライブスタイルガイドを作成し、アプリケーションを作成するためのすべてのパターンとスタイルを定義することができます。
たとえば、OutSystems UI Webベースおよびメールスタイルシート、UIパターン、レイアウトを使用することができます。
ビルトイン画面テンプレート
OutSystemsによって作成、管理されるビルトイン画面テンプレートは、アプリケーション開発ですぐに使用できます。様々なWeb画面テンプレートとモバイル画面テンプレートから選択できます。
カスタムアプリケーションテンプレート
アプリケーションを作成するときに使用するアプリケーションテンプレートです。カスタムアプリケーションテンプレートの作成方法については、OutSystemsのオンラインヘルプをご覧ください。
スタイルガイド
スタイルガイドは、ブランドのテーマ色やパターンが示されているドキュメントです。これを使用すると、アプリケーションで一貫したユーザーエクスペリエンスをすぐに実現することができます。スタイルガイドは、ブランドルールを遵守し、ユーザーインターフェイスの一貫性を確保し、使いやすさを向上するために重要な要素です。すべてのデリバリーアセットの指針として利用できるように設計されており、開発プロセスとユーザーエクスペリエンスを最適化できます。
仕組み
OutSystems UIの仕組みと画面テンプレートおよびUIパターンのカタログについては、OutSystems UIのWebサイトをご覧ください。また、各コンポーネントの詳細については、以下のセクションをご覧ください。
アクセシビリティ
- あらゆるユーザーが使用できるOutSystemsリアクティブWebアプリケーションを作成する方法について説明しています。
- このカテゴリの記事:
Screen Templates
- ビルトインのロジック、スタイル、サンプルデータを備えた、完全に機能する画面を作成します。画面テンプレートを使用すると、最もよく使用されるユースケースとパターンの開発を迅速に行うことができます。
- このカテゴリの記事:
画面テンプレートの作成
- 開発インフラ内のすべての開発者が利用できる画面テンプレートを作成します。
- このカテゴリの記事:
テーブルの作成および編集
- Tableを使用して表形式のデータを表示します。
- このカテゴリの記事:
入力
- 画面やブロックに使用できる入力、およびその使用方法を説明しています。
- このカテゴリの記事:
フォーム
- フォームを実装してユーザー入力を検証する方法を説明しています。
- このカテゴリの記事:
画像
- ソースの異なるアイコンや画像を画面やブロックで使用する方法を説明しています。
- このカテゴリの記事:
UIを再利用する
- ブロックは、画面や他のブロックで再利用できるインターフェイスの一部です。
- このカテゴリの記事:
パターン
- パターンをドラッグ&ドロップして、カレンダー、ツールヒント、カルーセルなど数多くの最も一般的なUIコンポーネントを使用します。
- このカテゴリの記事:
ナビゲーション
- 画面間を移動して情報を渡す方法を説明しています。
- このカテゴリの記事:
アプリのUIの翻訳
- OutSystemsで多言語アプリケーションを作成する方法について説明しています。
- このカテゴリの記事:
テクニカルプレビュー - 多言語対応のリアクティブWebアプリとモバイルアプリ
- OutSystemsで多言語対応のリアクティブWebアプリとモバイルアプリを作成する方法について説明しています。この機能はテクニカルプレビューです。
- このカテゴリの記事:
このセクションの記事
- 画面
- 画面はモバイルおよびリアクティブWebアプリの基本構成要素のひとつです。空の画面や事前定義されたコンテンツをいくつか含む画面を作成することができます。